/* ========================================================================== PAGE TRANSITIONS The page materialises out of a dot-matrix field, with a scan line sweeping through it — the same visual language as the opening sequence. Hard rules learned the hard way: 1. The veil is real markup, first thing in , so it paints on frame one. JS-injecting it after paint causes a "page appears, gets covered, is revealed" stutter. 2. It is cleared by BOTH a CSS animation and a JS failsafe. CSS alone left mobile visitors on a permanent black screen when the animation was throttled during load. 3. Only opacity and transform are animated. No blur, no width/height, no box-shadow — those are what make a full-screen transition stutter. ========================================================================== */ .pt-veil { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* longhand: `inset` is unsupported on older mobile Safari */ z-index: 9998; background: #000; pointer-events: none; overflow: hidden; opacity: 1; animation: ptVeilOut 0.62s cubic-bezier(0.4, 0, 0.2, 1) 0.02s forwards; } /* violet bloom, matching the intro */ .pt-veil::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(720px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient( circle, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.05) 36%, rgba(124, 58, 237, 0) 70% ); } /* the dot-matrix field that dissolves outward as the page arrives */ .pt-grid { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.4; will-change: transform, opacity; animation: ptGridOut 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* a single pass of light, like something scanning the screen */ .pt-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient( 90deg, transparent 0%, rgba(167, 139, 250, 0.9) 35%, rgba(255, 255, 255, 0.95) 50%, rgba(167, 139, 250, 0.9) 65%, transparent 100% ); box-shadow: 0 0 18px rgba(139, 92, 246, 0.75); opacity: 0; will-change: transform, opacity; animation: ptScan 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes ptVeilOut { to { opacity: 0; } } @keyframes ptGridOut { from { transform: scale(1); opacity: 0.4; } to { transform: scale(1.14); opacity: 0; } } @keyframes ptScan { 0% { transform: translateY(-4vh); opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(104vh); opacity: 0; } } /* ---------- OUTGOING: the field builds back up, then we navigate ---------- */ .pt-veil.pt-leaving { animation: none !important; visibility: visible !important; transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .pt-veil.pt-leaving .pt-grid { animation: ptGridIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .pt-veil.pt-leaving .pt-scan { animation: ptScanFast 0.3s linear forwards; } @keyframes ptGridIn { from { transform: scale(1.14); opacity: 0; } to { transform: scale(1); opacity: 0.4; } } @keyframes ptScanFast { 0% { transform: translateY(104vh); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-4vh); opacity: 0; } } /* ---------- FAILSAFE ---------- Must not outrank .pt-leaving, or it would cancel the exit mid-fade. */ .pt-veil.pt-clear:not(.pt-leaving) { animation: none !important; opacity: 0 !important; visibility: hidden !important; } /* while the opening sequence is playing it owns the reveal */ html.is-preloading .pt-veil { animation: none; opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { .pt-veil, .pt-grid, .pt-scan { animation: none !important; } .pt-veil { opacity: 0 !important; visibility: hidden !important; } } /* ========================================================================== SOUND TOGGLE Sound that cannot be switched off is a defect, so the control ships with it. ========================================================================== */ .sound-toggle { position: fixed; right: clamp(14px, 2.4vw, 22px); bottom: clamp(14px, 2.4vw, 22px); z-index: 90; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 20, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } .sound-toggle svg { width: 16px; height: 16px; fill: currentColor; } .sound-toggle:hover { background: rgba(40, 40, 44, 0.9); border-color: rgba(255, 255, 255, 0.45); color: #fff; transform: translateY(-2px); } .sound-toggle:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; } .sound-toggle.is-muted { color: rgba(255, 255, 255, 0.4); }