/* ========================================================================== water.css - footer wordmark water fill (pairs with js/water.js). js/water.js rebuilds the #footer-wordmark-track text as an inline SVG: outlined Aeonik glyphs plus a scroll-driven water body clipped to the letters. Everything is namespaced .atl-water and only styles children of the track; endfx.js keeps owning the track's inline transform. PERF LAW: no filter / backdrop-filter anywhere in here. The caustic glow is a wide low-alpha stroke, not a blur, and the water gradient (set in js/water.js) stays alpha <= .85 so the glass aurora reads through. ========================================================================== */ .atl-water{display:block} /* offscreen measuring rig: js/water.js parks it in for one getBBox */ .atl-water-measure{position:absolute;left:-9999px;top:0;width:10px;height:10px; visibility:hidden;pointer-events:none} /* outlined glyphs: mirrors the old 1px text-stroke look plus a low-alpha fill; hover tint matches the #footer-wordmark:hover rule in endfx.css */ .atl-water .atl-water-outline{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.32);stroke-width:1;paint-order:stroke; transition:stroke .5s var(--ease)} @media (hover:hover) and (pointer:fine){ #footer-wordmark:hover .atl-water .atl-water-outline{stroke:rgba(122,138,255,.75)} } /* water body: back swell is a flat deep-blue wash behind the gradient front wave (front fill is the userSpaceOnUse gradient built in js/water.js) */ .atl-water .atl-water-wave-back{fill:rgba(91,124,250,.26)} /* caustic surface line: bright core over a wide soft stroke (no blur) */ .atl-water .atl-water-caustic{stroke:rgba(208,226,255,.92);fill:none; stroke-linecap:round} .atl-water .atl-water-caustic-glow{stroke:rgba(122,150,255,.28);fill:none; stroke-linecap:round} /* tiny rising bubbles */ .atl-water .atl-water-bubbles circle{fill:rgba(214,232,255,.26); stroke:rgba(234,244,255,.5);stroke-width:1} /* reduced motion: js/water.js already builds a static 60 percent fill with no waves or bubbles; these are a backstop if the OS setting flips while a live instance is running */ @media (prefers-reduced-motion:reduce){ .atl-water .atl-water-bubbles{display:none} .atl-water .atl-water-outline{transition:none} }