/* ========================================================================== OCEAN DEPTH FX — additive atmosphere layers on top of the existing ocean-backdrop (glows, rays, particle canvas, vignette stay untouched). Adds: moving wave bands, caustic light shimmer, underwater fog. Gated by perf-tier classes on set by js/depth-fx.js, mirroring the same reduced-motion philosophy already used in layout.css — effects stay visible but static rather than disappearing entirely. ========================================================================== */ /* ---- Waves: a banded "surface" read near the top of the fixed backdrop --- */ .ocean-backdrop__waves { position: absolute; top: 0; left: 0; width: 100%; height: clamp(140px, 20vw, 260px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } .wave-layer { position: absolute; left: 0; width: 100%; height: 100%; animation: waveBob ease-in-out infinite; } .wave-layer--1 { top: -4%; opacity: 0.5; animation-duration: 7s; } .wave-layer--2 { top: 4%; opacity: 0.38; animation-duration: 9s; animation-direction: reverse; } .wave-layer--3 { top: 14%; opacity: 0.6; animation-duration: 5.5s; } .wave-layer__scroll { width: 200%; height: 100%; display: block; animation: waveScroll linear infinite; will-change: transform; } .wave-layer--1 .wave-layer__scroll { animation-duration: 34s; } .wave-layer--2 .wave-layer__scroll { animation-duration: 24s; animation-direction: reverse; } .wave-layer--3 .wave-layer__scroll { animation-duration: 17s; } .wave-layer__scroll svg { width: 100%; height: 100%; display: block; } @keyframes waveScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes waveBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ---- Caustics: shimmering light pattern, cheap radial-gradient tiling --- */ .ocean-backdrop__caustics { position: absolute; inset: -10%; mix-blend-mode: screen; opacity: 0.32; background-image: radial-gradient(circle at 18% 22%, rgba(143, 227, 240, 0.55) 0%, transparent 38%), radial-gradient(circle at 62% 12%, rgba(255, 215, 106, 0.32) 0%, transparent 32%), radial-gradient(circle at 40% 58%, rgba(143, 227, 240, 0.4) 0%, transparent 34%), radial-gradient(circle at 82% 64%, rgba(62, 198, 224, 0.4) 0%, transparent 30%), radial-gradient(circle at 10% 86%, rgba(255, 215, 106, 0.22) 0%, transparent 30%); background-size: 140% 140%; background-repeat: no-repeat; animation: causticDrift 16s ease-in-out infinite alternate; will-change: transform, background-position; } @keyframes causticDrift { 0% { transform: translate(0, 0) scale(1); background-position: 0% 0%; } 50% { transform: translate(-2%, 1.5%) scale(1.06); background-position: 8% 6%; } 100% { transform: translate(2%, -1%) scale(1); background-position: -6% 4%; } } /* Subtle water-distortion: only on capable desktops, see perf gating below */ html.perf-high .ocean-backdrop__caustics, html.perf-high .ocean-backdrop__waves { filter: url(#oceanRipple); } /* ---- Fog: soft, slow-drifting haze for depth ---- */ .ocean-backdrop__fog { position: absolute; inset: 0; mix-blend-mode: screen; } .ocean-fog { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; } .ocean-fog--1 { width: 60vw; height: 30vw; min-width: 480px; min-height: 240px; top: 18%; left: -10%; background: radial-gradient(ellipse, rgba(244, 249, 255, 0.07), transparent 75%); animation: fogDrift1 38s ease-in-out infinite; } .ocean-fog--2 { width: 55vw; height: 26vw; min-width: 420px; min-height: 200px; bottom: 8%; right: -8%; background: radial-gradient(ellipse, rgba(143, 227, 240, 0.06), transparent 75%); animation: fogDrift2 46s ease-in-out infinite; } @keyframes fogDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6vw, 2vh); } } @keyframes fogDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5vw, -3vh); } } /* ---- Performance gating ---- */ html.perf-low .wave-layer--3, html.perf-low .ocean-fog--2 { display: none; } html.perf-low .ocean-backdrop__caustics { opacity: 0.18; animation-duration: 26s; } @media (max-width: 720px) { .ocean-backdrop__waves { height: clamp(110px, 26vw, 170px); } .wave-layer--3 { display: none; } .ocean-fog--2 { display: none; } } @media (prefers-reduced-motion: reduce), (update: slow) { .wave-layer, .wave-layer__scroll, .ocean-backdrop__caustics, .ocean-fog { animation: none !important; } html.perf-high .ocean-backdrop__caustics, html.perf-high .ocean-backdrop__waves { filter: none; } } html.reduced-motion .wave-layer, html.reduced-motion .wave-layer__scroll, html.reduced-motion .ocean-backdrop__caustics, html.reduced-motion .ocean-fog { animation: none !important; } html.reduced-motion .ocean-backdrop__caustics, html.reduced-motion .ocean-backdrop__waves { filter: none !important; } /* ---- Lock the page in place while the PIN screen is up ---- */ html.pin-locked, html.pin-locked body { overflow: hidden; height: 100%; }