/* --------------------------------- Hero --------------------------------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: calc(var(--nav-h) + 28px); background: radial-gradient(ellipse 55% 45% at 82% 88%, rgba(105, 62, 160, 0.18), transparent 70%), rgba(15, 10, 24, 0.22); overflow: hidden; } .hero-logo { width: clamp(96px, 16vw, 190px); height: auto; margin-bottom: 22px; animation: heroFloat 6s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .hero .heading-xl { max-width: 15ch; margin-bottom: 20px; } .hero .lede { margin: 0 auto 32px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } @media (min-width: 561px) { .hero { padding-top: calc(var(--nav-h) + 40px); } .hero-logo { margin-bottom: 30px; } .hero .heading-xl { margin-bottom: 26px; } .hero .lede { margin: 0 auto 42px; } .hero-actions { gap: 18px; } } /* ------------------------ Dance studio photo hero ------------------------ Opaque stack so the fixed page bg-video never shows through the first viewport. Photos crossfade via CSS; reduced-motion keeps interior only. */ .dance-hero { position: relative; justify-content: center; background: var(--ink); /* opaque base — covers bg-video */ isolation: isolate; } .dance-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .dance-hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation: danceHeroCrossfade 14s ease-in-out infinite; } .dance-hero-shot:nth-child(1) { object-position: center 40%; animation-delay: 0s; } .dance-hero-shot:nth-child(2) { object-position: center 35%; animation-delay: -7s; } @keyframes danceHeroCrossfade { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } } .dance-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 10, 24, 0.55) 0%, rgba(15, 10, 24, 0.72) 45%, rgba(15, 10, 24, 0.88) 100%), radial-gradient(ellipse 70% 55% at 50% 40%, rgba(15, 10, 24, 0.15), rgba(15, 10, 24, 0.65) 75%); } .dance-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 40rem; padding: 0 8px; } .dance-hero .heading-xl { max-width: 14ch; } .dance-hero .lede { max-width: 36ch; } @media (prefers-reduced-motion: reduce) { .dance-hero-shot { animation: none; opacity: 0; } .dance-hero-shot:nth-child(1) { opacity: 1; } } /* -------------------------------- Splash -------------------------------- Full-screen intro that plays once per browsing session, then "docks": it shrinks/fades into the hero emblem's exact size and position while the hero heading/lede/actions float up into place — twice as fast as the site's normal .reveal float (0.9s → 0.45s here) so the text feels snappy right as the splash settles. The gating classes (.has-splash / .no-splash) are set synchronously in before first paint (see the inline script in index.html) so there's never a flash of the hero content or of the splash itself. */ html.has-splash body { overflow: hidden; } /* Keep nav/main inert while the splash (or its dock) is active. has-splash stays on until finish() so a dismiss click cannot fall through onto the centered "Dance Studio" nav link once the splash stops painting. */ html.has-splash #site-nav, html.has-splash .nav, html.has-splash main, html.has-splash #site-footer { pointer-events: none; } html.has-splash .hero-logo { opacity: 0; } html.has-splash .hero .heading-xl, html.has-splash .hero .lede, html.has-splash .hero .hero-actions, html.has-splash .hero .scroll-cue { opacity: 0; transform: translateY(28px); } /* Splash has finished docking — crossfade the real hero-logo in and float the rest of the hero content up, twice as fast as the standard reveal. */ body.splash-done .hero-logo { opacity: 1; transition: opacity 0.5s var(--ease-out); } body.splash-done .hero .heading-xl, body.splash-done .hero .lede, body.splash-done .hero .hero-actions, body.splash-done .hero .scroll-cue { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); } body.splash-done .hero .lede { transition-delay: 0.05s; } body.splash-done .hero .hero-actions { transition-delay: 0.1s; } body.splash-done .hero .scroll-cue { transition-delay: 0.15s; } .splash { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; /* Transparent so the page bg-video shows through behind the intro clip */ background: transparent; cursor: pointer; } /* Only the skip path hides splash via CSS. During dock, splash-done reveals the hero but must NOT display:none the splash — that drops the click catcher mid-gesture and can activate nav links underneath. finish() removes #splash from the DOM when the dock animation completes. */ html.no-splash .splash { display: none; } .splash-inner { position: relative; /* Tall enough for the full wordmark (1280×820 source). Cap by viewport height so short laptop windows never clip "& DANCE STUDIO". Sized ~15% smaller than the prior 440–920 / 82vh splash. */ width: min(clamp(374px, 78vw, 782px), calc(69.7vh * 1280 / 820)); aspect-ratio: 1280 / 820; max-height: 69.7vh; will-change: transform, opacity; } .splash-video, .splash-canvas, .splash-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Raw stacked MP4 is decoded off-screen; WebGL draws alpha onto the canvas. */ .splash-video { opacity: 0; pointer-events: none; } .splash-canvas { opacity: 0; transition: opacity 0.25s var(--ease-out); } .splash-canvas.is-ready { opacity: 1; } .splash-fallback { opacity: 0; transform: scale(0.85); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); } .splash-fallback.is-active { opacity: 1; transform: scale(1); } /* Dock-out: the whole splash fades while its inner logo transforms (via an inline transform set by JS, computed from the hero-logo's live rect) to land exactly on top of the hero emblem. */ .splash.is-leaving .splash-inner { transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out) 0.15s; opacity: 0; } .splash.is-leaving { transition: opacity 0.1s linear 0.55s; opacity: 0; /* Stay in the hit-test tree so the dismiss gesture cannot retarget onto .nav-links (Dance Studio is the center desktop item). */ } .btn { display: inline-block; text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 15px 30px; border-radius: 999px; transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s, color 0.25s; } @media (min-width: 561px) { .btn { font-size: 13px; letter-spacing: 0.22em; padding: 18px 38px; } } .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--ink); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(212, 175, 55, 0.4); } .btn-ghost { border: 1px solid rgba(212, 175, 55, 0.55); color: var(--gold); } .btn-ghost:hover { background: rgba(212, 175, 55, 0.12); transform: translateY(-3px); } .theme-cream .btn-ghost { border-color: #b8901c; color: #9c7c14; } .theme-cream .btn-ghost:hover { background: rgba(184, 144, 28, 0.1); } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-dim-dark); text-decoration: none; } .scroll-cue::after { content: ""; display: block; width: 1px; height: 36px; margin: 10px auto 0; background: linear-gradient(var(--gold), transparent); animation: cueDrop 2s ease-in-out infinite; } @media (min-width: 561px) { .scroll-cue { bottom: 30px; font-size: 11px; letter-spacing: 0.4em; } .scroll-cue::after { height: 44px; margin-top: 12px; } } @keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }