/* CocoHub — muted deep aquarium */
.underwater-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #010a10;
}

.water-depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 55% at 50% -5%, rgba(20, 80, 90, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 20% 40%, rgba(8, 45, 58, 0.25) 0%, transparent 45%),
    linear-gradient(180deg, #0a2530 0%, #061a22 40%, #041218 75%, #010a10 100%);
}

.water-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(0, 5, 10, 0.55) 100%);
  pointer-events: none;
}

.light-rays {
  position: absolute;
  top: -5%;
  left: 50%;
  width: 120%;
  height: 55%;
  transform: translateX(-50%);
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    rgba(80, 140, 160, 0.04) 25deg,
    transparent 50deg,
    rgba(60, 120, 140, 0.03) 80deg,
    transparent 120deg
  );
  filter: blur(12px);
  animation: rays-drift 20s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes rays-drift {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); opacity: 0.45; }
  50% { transform: translateX(-49%) rotate(1deg); opacity: 0.55; }
}

.caustics {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  animation: caustics-move 28s linear infinite;
  mix-blend-mode: soft-light;
}

@keyframes caustics-move {
  0% { background-position: 0 0; }
  100% { background-position: 200px 140px; }
}

.sand-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(70, 55, 40, 0.18), transparent 60%),
    linear-gradient(180deg, transparent, rgba(50, 38, 28, 0.15) 45%, rgba(35, 26, 18, 0.28) 100%);
  background-size: 80px 80px, 100% 100%, 100% 100%;
}

.sand-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 60%, rgba(90, 70, 50, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(70, 55, 40, 0.1) 0.8px, transparent 0.8px);
  background-size: 28px 28px, 22px 22px;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, transparent, black 30%);
}

.seaweed-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32%;
  pointer-events: none;
}

.seaweed {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  opacity: var(--weed-opacity, 0.55);
}

.seaweed--a { animation: weed-sway-a var(--weed-dur, 7s) ease-in-out infinite; }
.seaweed--b { animation: weed-sway-b var(--weed-dur, 8.5s) ease-in-out infinite; }
.seaweed--c { animation: weed-sway-c var(--weed-dur, 6.5s) ease-in-out infinite; }

@keyframes weed-sway-a {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes weed-sway-b {
  0%, 100% { transform: rotate(1.5deg); }
  33% { transform: rotate(-2deg); }
  66% { transform: rotate(2deg); }
}

@keyframes weed-sway-c {
  0%, 100% { transform: rotate(-1deg) skewX(0deg); }
  50% { transform: rotate(1.5deg) skewX(1deg); }
}

.fish-school {
  position: absolute;
  inset: 0;
}

.fish {
  position: absolute;
  will-change: transform;
  opacity: var(--fish-opacity, 0.62);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.fish svg { display: block; overflow: visible; }

.fish--flip > svg { transform: scaleX(-1); }

.fish--wiggle .fish-tail {
  animation: tail-wiggle 0.45s ease-in-out infinite;
  transform-origin: 12% 50%;
}
.fish--path-a {
  animation: fish-path-a var(--fish-duration, 38s) linear infinite;
  animation-delay: var(--fish-delay, 0s);
}

.fish--path-b {
  animation: fish-path-b var(--fish-duration, 42s) linear infinite;
  animation-delay: var(--fish-delay, 0s);
}

.fish--path-c {
  animation: fish-path-c var(--fish-duration, 36s) linear infinite;
  animation-delay: var(--fish-delay, 0s);
}

.fish--path-d {
  animation: fish-path-d var(--fish-duration, 45s) linear infinite;
  animation-delay: var(--fish-delay, 0s);
}

.fish--wiggle .fish-body {
  animation: body-glide 2.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes body-glide {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(0.8deg); }
}

@keyframes fish-path-a {
  0% { transform: translate3d(-12vw, var(--fish-y, 0px), 0) scaleX(1); }
  25% { transform: translate3d(25vw, calc(var(--fish-y, 0px) - 4px), 0) scaleX(1); }
  50% { transform: translate3d(50vw, calc(var(--fish-y, 0px) + 3px), 0) scaleX(1); }
  75% { transform: translate3d(75vw, calc(var(--fish-y, 0px) - 2px), 0) scaleX(1); }
  100% { transform: translate3d(112vw, var(--fish-y, 0px), 0) scaleX(1); }
}

@keyframes fish-path-b {
  0% { transform: translate3d(112vw, var(--fish-y, 0px), 0); }
  25% { transform: translate3d(78vw, calc(var(--fish-y, 0px) + 3px), 0); }
  50% { transform: translate3d(48vw, calc(var(--fish-y, 0px) - 4px), 0); }
  75% { transform: translate3d(22vw, calc(var(--fish-y, 0px) + 2px), 0); }
  100% { transform: translate3d(-12vw, var(--fish-y, 0px), 0); }
}

@keyframes fish-path-c {
  0% { transform: translate3d(-12vw, var(--fish-y, 0px), 0) scaleX(1); }
  33% { transform: translate3d(35vw, calc(var(--fish-y, 0px) - 6px), 0) scaleX(1); }
  66% { transform: translate3d(72vw, calc(var(--fish-y, 0px) + 4px), 0) scaleX(1); }
  100% { transform: translate3d(112vw, var(--fish-y, 0px), 0) scaleX(1); }
}

@keyframes fish-path-d {
  0% { transform: translate3d(112vw, var(--fish-y, 0px), 0); }
  30% { transform: translate3d(70vw, calc(var(--fish-y, 0px) - 5px), 0); }
  60% { transform: translate3d(35vw, calc(var(--fish-y, 0px) + 3px), 0); }
  100% { transform: translate3d(-12vw, var(--fish-y, 0px), 0); }
}

@keyframes tail-wiggle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

.jellyfish-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jellyfish {
  position: absolute;
  opacity: var(--jelly-opacity, 0.45);
  animation: jelly-drift var(--jelly-duration, 16s) ease-in-out infinite;
  animation-delay: var(--jelly-delay, 0s);
  filter: drop-shadow(0 2px 10px rgba(80, 40, 120, 0.2));
}

.jellyfish .jelly-tentacles {
  animation: jelly-tentacles 4.5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes jelly-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(6px, -10px, 0); }
  45% { transform: translate3d(-4px, -6px, 0); }
  70% { transform: translate3d(5px, -14px, 0); }
  85% { transform: translate3d(-2px, -8px, 0); }
}

@keyframes jelly-tentacles {
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  33% { transform: scaleY(1.04) skewX(1.5deg); }
  66% { transform: scaleY(0.97) skewX(-1deg); }
}

.bubbles-layer {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.55), rgba(180, 220, 230, 0.12) 45%, transparent 68%);
  border: 1px solid rgba(160, 210, 220, 0.18);
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.15);
  animation: bubble-rise var(--bubble-duration, 14s) ease-in infinite;
  animation-delay: var(--bubble-delay, 0s);
  opacity: 0;
}

@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.3); opacity: 0; }
  10% { opacity: 0.35; }
  50% { transform: translate3d(var(--bubble-drift, 6px), -48vh, 0) scale(0.75); }
  85% { opacity: 0.15; }
  100% { transform: translate3d(calc(var(--bubble-drift, 6px) * 1.5), -100vh, 0) scale(0.9); opacity: 0; }
}

.particles-drift {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(180, 220, 230, 0.25) 0.5px, transparent 0.5px);
  background-size: 100px 100px;
  opacity: 0.04;
  animation: particles-float 55s linear infinite;
}

@keyframes particles-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-60px); }
}

@media (prefers-reduced-motion: reduce) {
  .fish, .bubble, .seaweed, .light-rays, .caustics, .particles-drift, .jellyfish {
    animation: none !important;
  }
  .fish--wiggle .fish-tail, .jellyfish .jelly-tentacles { animation: none !important; }
  .fish--wiggle .fish-body { animation: none !important; }
}