#aurora-intro { position: fixed; inset: 0; z-index: 9999; background: #070912; opacity: 1; transition: opacity 0.6s ease; } /* Before-paint guard adds .intro-seen on for returning / reduced-motion visitors */ .intro-seen #aurora-intro { display: none !important; } /* While the cinematic plays, suppress the floating reCAPTCHA badge */ html.aurora-intro-active .grecaptcha-badge { opacity: 0 !important; pointer-events: none; transition: opacity 0.3s ease; } #aurora-intro.aurora-intro-hiding { opacity: 0; pointer-events: none; transform: scale(1.04); transition: opacity 0.6s ease, transform 0.6s ease; } #aurora-intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #aurora-intro-skip { position: absolute; top: 18px; right: 20px; z-index: 2; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: 0.5px; color: #9fb0c3; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 8px 16px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } #aurora-intro-skip:hover { color: #eaf2ff; border-color: rgba(61, 220, 151, 0.5); } #aurora-intro-skip:focus-visible { outline: 2px solid #3ddc97; outline-offset: 2px; } /* Persistent "replay intro" control — shown after the intro ends / when skipped */ .aurora-intro-replay { position: fixed; top: 18px; right: 20px; z-index: 9998; display: none; align-items: center; gap: 6px; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: 0.5px; color: #9fb0c3; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 8px 14px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .aurora-intro-replay.is-visible { display: inline-flex; } .aurora-intro-replay i { font-size: 15px; line-height: 1; } .aurora-intro-replay:hover { color: #eaf2ff; border-color: rgba(61, 220, 151, 0.5); } .aurora-intro-replay:focus-visible { outline: 2px solid #3ddc97; outline-offset: 2px; } /* Defense-in-depth alongside the JS guard */ @media (prefers-reduced-motion: reduce) { #aurora-intro { display: none !important; } }