/* METRIDIUM v2 — Seafloor */

.seafloor-visual {
  position: relative;
  width: 100%;
  min-height: 115vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 4, 12, 0.6) 20%,
    rgba(0, 2, 8, 0.85) 50%,
    #000206 100%);
}

.ocean {
  position: absolute;
  inset: 0;
}

.ocean::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -15%, rgba(148, 226, 255, 0.14), transparent 58%),
    radial-gradient(circle at 15% 18%, rgba(97, 243, 206, 0.07), transparent 55%),
    radial-gradient(circle at 72% 22%, rgba(148, 226, 255, 0.05), transparent 65%),
    linear-gradient(180deg, rgba(4, 10, 22, 0.16) 0%, rgba(2, 4, 9, 0.52) 35%, rgba(0, 1, 8, 0.76) 70%, rgba(0, 1, 8, 0.9) 100%);
  opacity: 0.8;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ocean::after {
  content: '';
  position: absolute;
  inset: -10% -10%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 32%, rgba(97, 243, 206, 0.06), transparent 58%),
    radial-gradient(circle at 62% 22%, rgba(148, 226, 255, 0.05), transparent 60%),
    radial-gradient(circle at 78% 45%, rgba(255, 255, 255, 0.03), transparent 55%),
    radial-gradient(circle at 50% 92%, rgba(10, 18, 30, 0.35), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.5;
  filter: blur(0.45px);
  animation: mistDrift 28s ease-in-out infinite alternate;
}

.light-shafts {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  z-index: 1;
  background:
    linear-gradient(172deg, transparent 0%, rgba(70, 120, 160, 0.012) 15%, transparent 40%),
    linear-gradient(188deg, transparent 5%, rgba(60, 110, 150, 0.01) 25%, transparent 50%),
    linear-gradient(178deg, transparent 0%, rgba(80, 130, 170, 0.008) 20%, transparent 45%);
  animation: seafloorShaftDrift 35s ease-in-out infinite alternate;
  pointer-events: none;
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 22% 38%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1px 1px at 45% 22%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.5px 0.5px at 68% 55%, rgba(255,255,255,0.22), transparent),
    radial-gradient(1px 1px at 85% 32%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 33% 72%, rgba(255,255,255,0.25), transparent),
    radial-gradient(0.5px 0.5px at 78% 88%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 12% 65%, rgba(255,255,255,0.28), transparent),
    radial-gradient(0.75px 0.75px at 58% 12%, rgba(255,255,255,0.18), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,0.16), transparent);
  background-size: 360px 360px;
  animation: seafloorSnowDrift 120s linear infinite;
  opacity: 0.55;
  filter: blur(0.2px);
}

.particles::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 55% 28%, rgba(200,220,240,0.25), transparent),
    radial-gradient(1px 1px at 18% 75%, rgba(255,255,255,0.18), transparent),
    radial-gradient(1px 1px at 82% 48%, rgba(200,220,240,0.22), transparent),
    radial-gradient(0.5px 0.5px at 40% 92%, rgba(255,255,255,0.15), transparent),
    radial-gradient(0.75px 0.75px at 6% 44%, rgba(200,220,240,0.12), transparent);
  background-size: 520px 520px;
  animation: seafloorSnowDriftReverse 160s linear infinite;
  opacity: 0.35;
  filter: blur(0.25px);
}

.particles--slow::before,
.particles--slow::after {
  animation-duration: 160s;
  animation-timing-function: linear;
}

.particles--fast::before,
.particles--fast::after {
  animation-duration: 90s;
  animation-timing-function: linear;
  opacity: 0.4;
  filter: blur(0.15px);
}

.depth-haze {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 2;
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(15, 30, 45, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 25% 100%, rgba(12, 25, 38, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 35% at 75% 100%, rgba(14, 28, 42, 0.1) 0%, transparent 45%);
  pointer-events: none;
  opacity: 0.92;
  filter: blur(0.35px);
}

.anemone-field {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 82%;
  z-index: 4;
  pointer-events: none;
}

.anemone-belt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.anemone-belt--rear { z-index: 1; opacity: 0.55; isolation: isolate; }
.anemone-belt--mid { z-index: 2; opacity: 0.7; isolation: isolate; }
.anemone-belt--hero { z-index: 3; isolation: isolate; filter: drop-shadow(0 0 18px rgba(111, 196, 255, 0.04)); }
.anemone-belt--accent { z-index: 4; opacity: 0.88; isolation: isolate; }
.anemone-belt--micro { z-index: 5; opacity: 0.75; isolation: isolate; }

.anemone--seafloor,
.anemone--seafloor ~ .anemone,
.anemone-field .anemone {
  --pointer-tilt: 0deg;
  --pointer-lift: 0px;
  --pointer-glow: 0;
  position: absolute;
  bottom: var(--bottom, 0);
  left: var(--x);
  transform: translateX(-50%);
  width: var(--w);
  height: var(--h);
  animation: seafloorSway var(--sway-duration, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform-origin: bottom center;
  filter: var(--depth-filter, none);
  opacity: var(--opacity, 1);
}

.anemone--seafloor svg,
.anemone-field .anemone svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 calc(8px + 14px * var(--pointer-glow, 0)) rgba(111, 196, 255, 0.15))
    drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
  transform: translateY(var(--pointer-lift, 0px));
  transition: transform 0.4s ease;
}

.anemone--seafloor::after,
.anemone-field .anemone::after {
  content: '';
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 46, 52, 0.55), rgba(6, 5, 4, 0));
  opacity: calc(var(--base-opacity, 0.28) + var(--pointer-glow, 0) * 0.4);
  filter: blur(8px);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
}

.anemone--solid {
  isolation: isolate;
}

.anemone--solid::before {
  content: '';
  position: absolute;
  inset: -4% -6% -6%;
  background:
    radial-gradient(circle at 50% 35%, rgba(5, 10, 18, 0.95), rgba(3, 7, 14, 0.85) 55%, rgba(3, 7, 14, 0.3) 85%, transparent 100%);
  z-index: -1;
  border-radius: 60% 40% 70% 30% / 60% 60% 40% 40%;
  filter: blur(3px);
  opacity: 0.9;
}

.anemone--occlude {
  isolation: isolate;
}

.anemone--occlude::before {
  content: '';
  position: absolute;
  inset: -4% -6% -8%;
  clip-path: ellipse(48% 62% at 50% 42%);
  background:
    radial-gradient(circle at 45% 20%, rgba(8, 14, 22, 0.95), rgba(6, 10, 18, 0.78) 55%, rgba(4, 6, 10, 0.4) 75%, transparent 95%);
  z-index: -1;
  filter: blur(3px);
  opacity: 0.92;
  pointer-events: none;
}

.akrorhagi ellipse {
  animation: akrorhagiPulse 9s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.akrorhagi-filaments path {
  animation: akrorhagiDrift 6s ease-in-out infinite;
}

.tentacles--seafloor {
  animation: seafloorTentacleWave var(--tentacle-speed, 7s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transform-origin: 50% 100%;
}

.seabed-mining-block {
  position: relative;
  z-index: 5;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--white-06);
  background:
    linear-gradient(135deg, rgba(2, 5, 12, 0.85), rgba(3, 10, 20, 0.6)),
    rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 30px rgba(148, 226, 255, 0.03);
}

.seabed-mining-block .mission-content h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.seabed-mining-block .mission-subheading {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201, 162, 39, 0.6);
  margin-bottom: 1rem;
}

.seabed-mining-block .mission-highlight {
  border-left: 2px solid rgba(148, 226, 255, 0.2);
  padding-left: 1rem;
  margin: 0 0 1rem;
  color: rgba(148, 226, 255, 0.7);
  font-style: italic;
}

.seabed-mining-block .mission-content p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}

.seabed-mining-block .mission-detail {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.9rem;
}

.abyss-intro {
  margin-top: clamp(4rem, 12vh, 8rem);
  position: relative;
  z-index: 5;
  max-width: 820px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.abyss-text h3 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin: 0.35rem 0 0.75rem;
}

.abyss-text p {
  color: var(--muted);
  margin: 0;
}

.abyss-halo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(148, 226, 255, 0.45), rgba(5, 10, 19, 0.05) 70%);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  animation: haloPulse 5s ease-in-out infinite;
}

@keyframes seafloorSnowDrift {
  from { transform: translate(0, 0); }
  to { transform: translate(-200px, 300px); }
}

@keyframes seafloorSnowDriftReverse {
  from { transform: translate(0, 0); }
  to { transform: translate(200px, -300px); }
}

@keyframes seafloorShaftDrift {
  from { transform: translateX(-3%); opacity: 0.6; }
  to { transform: translateX(3%); opacity: 1; }
}

@keyframes seafloorSway {
  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(var(--pointer-lift, 0px))
      rotate(calc(-1deg + var(--pointer-tilt, 0deg)))
      scaleY(1)
      skewX(-0.3deg);
  }
  50% {
    transform:
      translateX(-50%)
      translateY(var(--pointer-lift, 0px))
      rotate(calc(1deg + var(--pointer-tilt, 0deg)))
      scaleY(1.012)
      skewX(0.3deg);
  }
}

@keyframes seafloorTentacleWave {
  0% { transform: scaleX(0.97) scaleY(1.008) skewX(-1.2deg); }
  100% { transform: scaleX(1.03) scaleY(0.992) skewX(1.2deg); }
}

@keyframes akrorhagiPulse {
  0%,
  100% { opacity: 0.45; transform: scale3d(0.94, 0.94, 1); }
  40% { opacity: 0.9; transform: scale3d(1.04, 1.04, 1); }
  70% { opacity: 0.7; transform: scale3d(0.98, 0.98, 1); }
}

@keyframes akrorhagiDrift {
  0% { stroke-dashoffset: 0; opacity: 0.65; }
  50% { stroke-dashoffset: 4; opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0.65; }
}

@keyframes sway {
  0%,
  100% {
    transform: translateX(-50%) rotate(-0.6deg);
  }
  50% {
    transform: translateX(-50%) rotate(1.4deg);
  }
}

@keyframes haloPulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes mistDrift {
  0% {
    transform: translate3d(-2%, -2%, 0);
  }
  100% {
    transform: translate3d(2%, 1%, 0);
  }
}