/* ============================================================
   METRIDIUM v2 — Marine Snow & Ambient Effects
   Enhanced HD version with deeper parallax, richer particles,
   caustic light shafts, and subtle organic drift.
   ============================================================ */

/* ── Primary particle layer ── */
.marine-snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  will-change: background-position;
  background-image:
    radial-gradient(1.2px 1.2px at 10% 20%, rgba(200, 225, 245, 0.45), transparent),
    radial-gradient(1px 1px at 25% 55%, rgba(180, 215, 240, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(220, 240, 255, 0.3), transparent),
    radial-gradient(0.8px 0.8px at 55% 70%, rgba(190, 225, 250, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 70% 35%, rgba(210, 235, 255, 0.32), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(200, 225, 245, 0.38), transparent),
    radial-gradient(1.8px 1.8px at 18% 80%, rgba(180, 210, 240, 0.18), transparent),
    radial-gradient(0.6px 0.6px at 92% 12%, rgba(230, 245, 255, 0.25), transparent);
  background-size: 220px 220px, 280px 280px, 310px 310px, 250px 250px, 195px 195px, 240px 240px, 320px 320px, 260px 260px;
  animation: snowDrift 45s linear infinite;
}

/* ── Deep layer — slower, larger, warmer particles ── */
.marine-snow-deep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  will-change: background-position;
  background-image:
    radial-gradient(2px 2px at 12% 30%, rgba(160, 195, 230, 0.25), transparent),
    radial-gradient(1.8px 1.8px at 38% 65%, rgba(140, 190, 225, 0.2), transparent),
    radial-gradient(2.2px 2.2px at 62% 20%, rgba(180, 220, 250, 0.22), transparent),
    radial-gradient(1.6px 1.6px at 80% 75%, rgba(150, 200, 235, 0.18), transparent),
    radial-gradient(2.8px 2.8px at 5% 50%, rgba(120, 170, 210, 0.12), transparent),
    radial-gradient(2.4px 2.4px at 48% 88%, rgba(140, 185, 220, 0.15), transparent);
  background-size: 350px 350px, 300px 300px, 380px 380px, 280px 280px, 320px 320px, 360px 360px;
  animation: snowDriftDeep 65s linear infinite;
}

/* ── Caustic light layer — slow-shifting underwater light bands ── */
.marine-caustics {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  will-change: background-position, opacity;
  background-image:
    radial-gradient(ellipse 120% 80% at 30% 25%, rgba(150, 210, 255, 0.5), transparent 60%),
    radial-gradient(ellipse 100% 60% at 70% 60%, rgba(100, 200, 240, 0.4), transparent 55%);
  background-size: 100% 100%;
  animation: causticShift 20s ease-in-out infinite alternate;
}

/* ── Volumetric gradient — adds depth perception ── */
.marine-depth-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(2, 4, 10, 0) 30%,
      rgba(3, 8, 16, 0.15) 60%,
      rgba(2, 4, 8, 0.35) 85%,
      rgba(1, 2, 5, 0.5) 100%);
}

/* ── Organic drift — subtle parallax movement base ── */
.marine-organic-drift {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  will-change: transform;
  background-image:
    radial-gradient(circle at 25% 40%, rgba(0, 255, 200, 0.8), transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(100, 200, 255, 0.6), transparent 35%);
  background-size: 150% 150%;
  animation: organicDrift 30s ease-in-out infinite alternate;
  filter: blur(40px);
}

@keyframes snowDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 220px 440px, -280px 280px, 310px 620px, -250px 500px, 195px 390px, 240px 480px, -160px 350px, 180px 520px; }
}

@keyframes snowDriftDeep {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 350px 250px, -300px 200px, 380px 180px, -280px 280px, 200px 160px, -320px 240px; }
}

@keyframes causticShift {
  0% {
    background-position: 0% 0%, 100% 100%;
    opacity: 0.04;
  }
  50% {
    background-position: 30% 15%, 70% 50%;
    opacity: 0.06;
  }
  100% {
    background-position: 20% 25%, 80% 70%;
    opacity: 0.05;
  }
}

@keyframes organicDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -2%) scale(1.05); }
  100% { transform: translate(-2%, 3%) scale(0.97); }
}

/* ── HD enhancement: reduce motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .marine-snow,
  .marine-snow-deep,
  .marine-caustics,
  .marine-organic-drift {
    animation: none !important;
  }
}

/* ── High-DPI enhancement ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .marine-snow {
    opacity: 0.85;
  }
  .marine-snow-deep {
    opacity: 0.55;
  }
  .marine-caustics {
    opacity: 0.06;
  }
}