/* Reuse the approved waterfront pixels; only existing reflections move.
   Shared local raster, two CSS-composited layers, no WebGL/SVG filters/video. */
.water-reflections{position:absolute;inset:0;pointer-events:none;overflow:hidden;clip-path:polygon(43% 64%,72% 64%,78% 100%,34% 100%);mask-image:linear-gradient(transparent 64%,#000 72%,#000 100%)}
.water-band{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 53%;pointer-events:none;transform-origin:50% 85%;mix-blend-mode:screen;filter:brightness(1.35) saturate(1.12)}
.water-far{opacity:.42;mask-image:linear-gradient(transparent 64%,#000 70%,#000 80%,transparent 89%);animation:water-distant 3.4s ease-in-out infinite}
.water-near{opacity:.48;mask-image:linear-gradient(transparent 72%,#000 81%,#000);animation:water-ripple 4.2s ease-in-out infinite;animation-delay:-1.6s}
.water-glints{position:absolute;inset:0;opacity:.2;mix-blend-mode:screen;background:repeating-linear-gradient(177deg,transparent 0 7px,#a7e9ffaa 8px,#ffe1a266 9px,transparent 11px 20px);mask-image:radial-gradient(ellipse 24% 28% at 53% 91%,#000,transparent);animation:water-glitter 3.1s ease-in-out infinite;transform-origin:50% 90%}
@keyframes water-distant{0%,100%{transform:translate(-3px,.7px) scaleX(1.007);opacity:.28}50%{transform:translate(4px,-.8px) scaleX(1.012);opacity:.58}}
@keyframes water-ripple{0%,100%{transform:translate(-6px,1.4px) scaleX(1.012);opacity:.3}35%{transform:translate(7px,-1.5px) scaleX(1.022);opacity:.64}70%{transform:translate(2px,1.5px) scaleX(1.006);opacity:.44}}
@keyframes water-glitter{0%,100%{transform:translate(-2px,0) scaleX(1);opacity:.13}50%{transform:translate(3px,6px) scaleX(1.025);opacity:.33}}
/* Portraits/form are higher layers. A pause freezes all water CSS too. */
.scene-paused .water-reflections *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.water-reflections{display:none}}
@media(forced-colors:active){.water-reflections{display:none}}