/* ============================================================ ShinyVerse — brand intro overlay (plays once per session) Loaded in so the page never flashes before the intro. ============================================================ */ /* while the intro is on screen, lock scrolling */ html.sv-intro-active, html.sv-intro-active body { overflow: hidden; } /* Hidden unless intro.js opts in (adds .sv-intro-active to in ). Fail-safe: if the script never runs, the overlay can never trap the page. */ .sv-intro { display: none; } html.sv-intro-active .sv-intro { display: grid; } .sv-intro { position: fixed; inset: 0; z-index: 9999; background: #06060A; place-items: center; overflow: hidden; opacity: 1; transition: opacity 620ms cubic-bezier(.22,.68,.32,1); } .sv-intro.is-leaving { opacity: 0; pointer-events: none; } .sv-intro-video, .sv-intro-video img, .sv-intro-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* animated-webp fallback: only revealed when autoplay was refused */ .sv-intro-fallback { display: none; } .sv-intro.is-fallback .sv-intro-fallback { display: block; } .sv-intro.is-fallback .sv-intro-video { visibility: hidden; } /* darken + vignette so the wordmark always reads */ .sv-intro-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,6,10,.15) 0%, rgba(6,6,10,.72) 72%), linear-gradient(to top, rgba(6,6,10,.85), rgba(6,6,10,.25) 55%); } /* brand lockup */ .sv-intro-brand { position: relative; text-align: center; padding: 1.5rem; } .sv-intro-logo { height: 76px; width: auto; filter: drop-shadow(0 10px 34px rgba(0,0,0,.6)); animation: svIntroLogo 1000ms cubic-bezier(.22,.68,.32,1) 120ms both; } .sv-intro-word { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 6.4vw, 4.1rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1; color: #fff; margin-top: .9rem; text-shadow: 0 4px 30px rgba(0,0,0,.55); animation: svIntroWord 1100ms cubic-bezier(.22,.68,.32,1) 320ms both; } .sv-intro-word em { font-style: normal; color: #B1A7F2; } .sv-intro-tag { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: clamp(.7rem, 1.6vw, .82rem); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.68); margin: 1rem 0 0; animation: svIntroTag 1100ms cubic-bezier(.22,.68,.32,1) 620ms both; } @keyframes svIntroLogo { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes svIntroWord { /* ends on the caps tracking (.03em) — this animation uses fill:both, so its final letter-spacing wins over the rule above */ from { opacity: 0; transform: translateY(22px); letter-spacing: .16em; filter: blur(6px); } to { opacity: 1; transform: none; letter-spacing: .03em; filter: blur(0); } } @keyframes svIntroTag { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* skip */ .sv-intro-skip { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1.25rem, 3vw, 2rem); display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; animation: svIntroTag 800ms ease 900ms both; } .sv-intro-skip:hover { background: rgba(255,255,255,.18); border-color: #fff; } .sv-intro-skip:active { transform: scale(.97); } .sv-intro-skip:focus-visible { outline: 2px solid #B1A7F2; outline-offset: 3px; } .sv-intro-skip svg { transition: transform 260ms cubic-bezier(.22,.68,.32,1); } .sv-intro-skip:hover svg { transform: translateX(3px); } /* progress bar counts down the 5s */ .sv-intro-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.14); } .sv-intro-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5B4BC4, #B1A7F2); animation: svIntroBar 5000ms linear forwards; } @keyframes svIntroBar { from { width: 0; } to { width: 100%; } } /* phones: keep the lockup on one line and lift it off the bottom edge */ @media (max-width: 575.98px) { .sv-intro-logo { height: 60px; } .sv-intro-word { font-size: clamp(2rem, 12vw, 3rem); } .sv-intro-tag { font-size: .58rem; letter-spacing: .16em; white-space: nowrap; } .sv-intro-skip { left: 50%; right: auto; transform: translateX(-50%); bottom: 1.75rem; } .sv-intro-skip:active { transform: translateX(-50%) scale(.97); } } /* reduced motion: no video motion, no keyframes, quick dismiss */ @media (prefers-reduced-motion: reduce) { .sv-intro-logo, .sv-intro-word, .sv-intro-tag, .sv-intro-skip, .sv-intro-progress span { animation: none; opacity: 1; transform: none; filter: none; } .sv-intro { transition-duration: 1ms; } }