/* The reef stays behind the arena and never intercepts input. */
.drift-reef{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#168ab425,transparent 66%)}
.reef-defs{position:absolute}
.reef-swimmer,.reef-coral{position:absolute;left:var(--x);width:var(--w);height:var(--w);color:var(--ink);overflow:visible}
.reef-swimmer{top:var(--y);opacity:.7;filter:drop-shadow(0 0 8px currentColor);animation:reef-hover var(--duration) var(--delay) ease-in-out infinite alternate}
.reef-fish{animation-name:reef-cross;animation-timing-function:linear;animation-direction:normal}
.reef-manta{animation-name:reef-glide;animation-timing-function:linear;animation-direction:normal;opacity:.55}
.reef-jelly{animation-name:reef-pulse}
.reef-coral{bottom:-28px;opacity:.77;filter:drop-shadow(0 0 7px currentColor);transform:rotate(var(--tilt));transform-origin:bottom center}
@keyframes reef-hover{to{transform:translate(22px,-28px) rotate(-7deg)}}
@keyframes reef-pulse{to{transform:translate(15px,-48px) scale(.88,1.07);opacity:.48}}
@keyframes reef-cross{0%{transform:translateX(calc(94vw + 100px))}48%{transform:translate(40vw,-22px)}100%{transform:translateX(-250px)}}
@keyframes reef-glide{0%{transform:translateX(-260px) rotate(-8deg)}49%{transform:translate(47vw,-22px) rotate(6deg)}100%{transform:translateX(calc(100vw + 60px)) rotate(-8deg)}}
body:has(.ocean-motion-toggle[aria-pressed="true"]) .reef-swimmer{animation-play-state:paused}
@media(max-width:600px){.reef-swimmer,.reef-coral{scale:.72;opacity:.55}.reef-coral{bottom:-40px}.reef-octopus{margin-left:-26px}}
@media(prefers-reduced-motion:reduce){.reef-swimmer{animation:none}}