/* All sea creatures are decorative. The only animation control is the page toggle. */
.ocean,.ocean *{pointer-events:none!important;user-select:none}
#ocean-canvas{position:relative;z-index:1}
.ocean-vignette,.water-grain{z-index:2}
.ocean-vignette{background:linear-gradient(90deg,rgba(2,9,16,.20),transparent 55%),linear-gradient(0deg,rgba(1,7,13,.18),transparent 20%,transparent 85%,rgba(2,8,14,.25))}
.ocean-signature{color:#809cae;font-size:10px;letter-spacing:.08em}
.seafloor-art{position:absolute;z-index:0;left:50%;bottom:0;transform:translateX(-50%);width:100%;min-width:1060px;height:clamp(200px,29vh,300px);fill:none;stroke:#6996a5;stroke-width:1.12;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.seafloor-art path{vector-effect:non-scaling-stroke}
.seabed-contours{opacity:.24}.leaf-vein{opacity:.48}.shell-lines{opacity:.83}.shell-small{opacity:.56}
.kelp-sway{transform-box:fill-box;transform-origin:50% 100%;animation:kelp-drift 8s ease-in-out infinite alternate}
.kelp-b{animation-duration:10s;animation-delay:-5s}.kelp-c{animation-duration:7s;animation-delay:-3s}
@keyframes kelp-drift{from{transform:rotate(-2.2deg) skewX(-1deg)}to{transform:rotate(2.6deg) skewX(1.2deg)}}
.motion-toggle{display:flex;gap:9px;width:auto;min-height:40px;padding:0 14px;border-radius:24px;font-size:11px;white-space:nowrap}
.motion-toggle svg{flex:none}
.is-paused .motion-toggle{color:#d6f3f6;background:rgba(27,66,82,.46);border-color:#577d8f}
/* Explicit product choice: on at entry, off only when the visitor presses the toggle. */
.water-light{animation:water-light 22s ease-in-out infinite alternate}
.wheel-hint svg path{animation:wheel-drift 2.6s ease-in-out infinite}
body.is-paused .kelp-sway,body.is-paused .water-light,body.is-paused .wheel-hint svg path{animation-play-state:paused!important}
body.is-paused .art-plane,body.is-paused .gallery-progress span::after,body.is-paused .enter-button,body.is-paused .enter-button svg{transition:none!important}
body.is-paused *,body.is-paused *::before,body.is-paused *::after{animation-play-state:paused!important;transition-duration:0s!important;scroll-behavior:auto!important}
body.scene-inspect .hero{visibility:hidden;pointer-events:none}
body.scene-inspect .seafloor-art{visibility:hidden}
@media(max-width:650px){
  .ocean-signature{font-size:9px;gap:7px}.ocean-signature span:last-child,.ocean-signature i{display:none}
  .motion-toggle{min-height:44px;font-size:10px}.is-paused .sound-note{display:none}.footer-right{gap:8px}
  .seafloor-art{height:240px;opacity:.37}
}