/* Water stays behind content; the light field crosses page sections. */
html { background-color: #061d30; }
body:has(racco-ocean) { position: relative; isolation: isolate; background: transparent; }
racco-ocean { --water-light: .7; --water-shift: 0px; --water-x: 0px; --water-y: 0px; display: block; position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #061d30; contain: strict; }
racco-ocean > div { position: absolute; inset: -10%; pointer-events: none; }
.ocean-water { background: radial-gradient(ellipse at 75% -10%, #17536a, transparent 65%), linear-gradient(165deg, #082b43, #031527 80%); }
.ocean-surface { opacity: var(--water-light); background: radial-gradient(ellipse at 83% -15%, #5d918b, transparent 55%), radial-gradient(ellipse at 0% 100%, #075265, transparent 70%), linear-gradient(150deg, #155260, #26636b 55%, #125b75); }
.ocean-rays { transform: translate3d(var(--water-x), calc(var(--water-shift) + var(--water-y)), 0); opacity: calc(var(--water-light) * .65); background: conic-gradient(from 155deg at 75% -8%, transparent 0deg, #d6fff133 4deg, transparent 9deg 18deg, #c0fbec22 22deg, transparent 27deg 37deg, #d6fff12e 40deg, transparent 45deg); filter: blur(7px); mask-image: linear-gradient(#000, transparent 90%); }
.ocean-caustics { background: url('/water-light.svg') center top / 720px 580px; opacity: calc(var(--water-light) * .055); mask-image: linear-gradient(#000, transparent 85%); transform-origin: center top; animation: water-refraction 22s ease-in-out infinite alternate; }
.ocean-motes { opacity: .22; background-image: radial-gradient(circle at 16% 21%, #d8faf2 0 1px, transparent 2px), radial-gradient(circle at 77% 48%, #d8faf2 0 1px, transparent 2px), radial-gradient(circle at 42% 83%, #d8faf2 0 .7px, transparent 2px); background-size: 257px 311px, 389px 443px, 173px 239px; animation: water-drift 34s linear infinite; mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); }
@keyframes water-refraction { from { transform: perspective(700px) rotateX(28deg) scale(1.15) translate(-1%, -2%); } to { transform: perspective(700px) rotateX(32deg) scale(1.25) translate(2%, 3%); } }
@keyframes water-drift { from { transform: translateY(20px); } to { transform: translateY(-160px); } }
racco-ocean[data-mode=reading] { --water-light: .18; }
racco-ocean[data-mode=reading] .ocean-motes { display: none; }
racco-ocean[data-mode=reading] .ocean-caustics { animation: none; opacity: .025; }
racco-ocean[data-mode=reading] .ocean-rays { opacity: .12; }
racco-ocean:is([data-mode=talk], [data-mode=bike], [data-mode=gasha], [data-mode=game]) .ocean-motes { display: none; }
racco-ocean:is([data-mode=talk], [data-mode=bike], [data-mode=gasha], [data-mode=game]) .ocean-caustics { animation-duration: 40s; }
body[data-game-state=playing] racco-ocean *, body[data-game-state=ending] racco-ocean *, .ocean-motion-paused racco-ocean *, racco-ocean.ocean-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { racco-ocean * { animation: none !important; } }
@media print { racco-ocean { display: none; } }

.ocean-air { transition: opacity 900ms ease; opacity: calc(1 - var(--submerge,0)); background: radial-gradient(ellipse at 84% 16%, #f1e9d8, transparent 60%), linear-gradient(150deg, #fcfaf4, #ede9df); }

@media(prefers-reduced-motion:reduce) { .ocean-air { transition: none; } }


racco-ocean[data-mode=home] .ocean-air { opacity: 1; inset: 0; clip-path: polygon(0 0,100% 0,100% var(--surface-y,90vh),0 var(--surface-y,90vh)); transition: none; }
.ocean-waterline { position: absolute; left: 0; top: 0; transform: translate3d(0,calc(var(--surface-y,90vh) - 40px),0); width: 100%; height: 80px; overflow: visible; will-change: transform; }
.ocean-waterline path { fill: #ede9df; stroke: none; }
.ocean-waterline path + path { fill: none; stroke: #f3fffba0; stroke-width: 2; }
.ocean-webgl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
racco-ocean[data-mode=home].has-water-scene .ocean-caustics { display: none; }
@media(prefers-reduced-motion:no-preference) {
  .home-shell .sea-glass { animation: glass-light 16s ease-in-out infinite alternate; }
  .home-shell .sea-glass:nth-child(even) { animation-delay: -7s; }
  .home-shell .sea-glass:is(:hover,:focus-within) { animation: glass-settle 420ms ease-out; }
}
@keyframes glass-light { from { border-color: #e0f7f42b; } to { border-color: #e0f7f450; } }
@media(prefers-reduced-motion:reduce) { .ocean-webgl,.ocean-waterline { display: none; } }

racco-ocean[data-mode=home].has-water-scene .ocean-air { clip-path: none; transform: translate3d(0,calc(var(--surface-y,90vh) - 100% - 32px),0); will-change: transform; background: linear-gradient(150deg,#fcfaf4,#ede9df 95%); }