/* Dolphin — océano por capas (compartido por iadolphin.com y dolphinia.academy). Se mueve con oceano.js. */
/* ---------- capas del océano ---------- */
.mar{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#f6fbfa}
.mar .capa{position:absolute;inset:0;will-change:transform,opacity}
.c-rayos{background:repeating-linear-gradient(104deg,transparent 0 80px,rgba(255,255,255,.55) 80px 130px,transparent 130px 240px);mask-image:linear-gradient(180deg,#000,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);animation:rayosB 16s ease-in-out infinite alternate}
@keyframes rayosB{to{background-position:-160px 0}}
.c-vida{overflow:hidden}
.vida-in{position:absolute;left:0;right:0;top:0}
.vida-in .bu{position:absolute;border-radius:50%;border:1.5px solid rgba(15,168,146,.28);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(15,168,146,.06) 65%);animation:subeB linear infinite}
@keyframes subeB{to{transform:translateY(-180px);opacity:0}}
.vida-in .pl{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(15,120,110,.35)}
.vida-in .banco{position:absolute;animation:banco linear infinite alternate}
.vida-in .banco svg{display:block;fill:rgba(11,110,105,.38)}
@keyframes banco{to{transform:translateX(var(--dx,240px))}}
.vida-in .medusa{position:absolute;animation:medusa 7s ease-in-out infinite}
.vida-in .medusa svg{display:block}
@keyframes medusa{50%{transform:translateY(-26px) scaleY(.92)}}
.mar .c-fondo{top:auto;height:34vh;transform:translateY(100%)}
.c-fondo svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.c-fondo .arena{fill:#5fa79c}.c-fondo .roca{fill:#3d8379}.c-fondo .r2{fill:#2f6f68}.c-fondo .r3{fill:#4a9187}
.algas{position:absolute;inset:0}
.algas i{position:absolute;bottom:10%;width:10px;border-radius:10px 10px 0 0;background:linear-gradient(0deg,#2f7f6f,#5fbfa6);transform-origin:bottom center;animation:alga ease-in-out infinite alternate}
@keyframes alga{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.profundidad{position:fixed;right:22px;top:50%;z-index:15;height:180px;width:2px;transform:translateY(-50%);background:rgba(13,42,47,.12);border-radius:2px;pointer-events:none}
.profundidad i{position:absolute;left:-4px;top:0;width:10px;height:10px;border-radius:50%;background:#0fa892;box-shadow:0 0 0 4px rgba(15,168,146,.18)}
.profundidad span{position:absolute;right:14px;top:0;transform:translateY(-7px);font:600 11px 'Geist Mono';letter-spacing:.06em;color:rgba(13,42,47,.7);white-space:nowrap;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(13,42,47,.1)}
@media (max-width:900px){.profundidad{display:none}}
@media (prefers-reduced-motion:reduce){.mar .capa,.vida-in *{animation:none!important}}


/* móvil: menos animación de fondo (batería y fluidez) */
@media (max-width:900px){.c-rayos{animation:none}.vida-in .medusa{animation-duration:12s}.vida-in .banco{animation:none}}

/* etiqueta del medidor: visible solo al hacer scroll */
.profundidad span{opacity:0;transform:translate(6px,-7px);transition:opacity .3s,transform .3s}
.profundidad.activo span{opacity:1;transform:translate(0,-7px)}