/*
 * About page (About.dc.html) — helmet keyframes + style-hover states.
 * Class prefix: vmab-
 */

@keyframes vmHeroIn { from { opacity: 0; transform: translateY(70px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes vmOrbit { to { transform: rotate(360deg); } }
@keyframes vmIris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } }
@keyframes vmStretch { from { font-stretch: 62%; opacity: 0; } to { font-stretch: 100%; opacity: 1; } }

/* style-hover="border-color:#edf0ea" — "See our work" + e-mail pill. */
.vmab-ghost:hover { border-color: #edf0ea !important; }

/* style-hover="transform:scale(1.08)" — studio film play button. */
.vmab-play:hover { transform: scale(1.08) !important; }

/* style-hover="background-size:100% 100%;color:#0e0f11" — principle cards (lime fill rises). */
.vmab-card:hover { background-size: 100% 100% !important; color: #0e0f11 !important; }

/* style-hover="filter:grayscale(0);scale:1.06" — team portraits. */
.vmab-photo:hover { filter: grayscale(0) !important; scale: 1.06 !important; }

/* Hero disc: the studio reel (photos of what we do), one every 6 seconds. */
.vmab-reel { position: absolute; inset: 0; }
.vmab-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05); opacity: 0; animation: vmabReel 30s linear infinite both; }
@keyframes vmabReel { 0% { opacity: 0; scale: 1.14; } 4%, 20% { opacity: 1; } 24% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
	.vmab-reel img { animation: none; opacity: 0; }
	.vmab-reel img:first-child { opacity: 1; }
}