/* =============================================
   CLUB SIREN — depth.css
   Fixed underwater background, caustic overlay,
   water surface wave, depth layers
   ============================================= */

/* ---- Fixed depth background ---- */
#depth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Ocean blue — hero has its own sunset gradient so depth-bg never shows orange */
  background: linear-gradient(to bottom, rgb(20,120,200) 0%, rgb(5,60,150) 42%, rgb(0,35,100) 100%);
  pointer-events: none;
  will-change: background;
}

/* ---- Floating plankton / debris particles ---- */
/* CSS-only ambient particles that give the water depth and life */
#depth-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 12% 20%, rgba(180,240,255,0.55) 0%, transparent 100%),
    radial-gradient(circle 1px   at 28% 65%, rgba(160,220,255,0.4)  0%, transparent 100%),
    radial-gradient(circle 2px   at 42% 35%, rgba(200,245,255,0.5)  0%, transparent 100%),
    radial-gradient(circle 1px   at 58% 80%, rgba(140,210,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 72% 15%, rgba(180,235,255,0.5)  0%, transparent 100%),
    radial-gradient(circle 1px   at 85% 50%, rgba(160,225,255,0.4)  0%, transparent 100%),
    radial-gradient(circle 2px   at 95% 75%, rgba(200,240,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 1px   at 6%  88%, rgba(150,215,255,0.4)  0%, transparent 100%),
    radial-gradient(circle 1.5px at 33% 92%, rgba(170,230,255,0.45) 0%, transparent 100%),
    radial-gradient(circle 1px   at 65% 45%, rgba(140,205,255,0.4)  0%, transparent 100%);
  animation: plankton-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes plankton-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(12px, -18px); }
  66%  { transform: translate(-8px, 14px); }
  100% { transform: translate(6px, -8px); }
}

/* ---- Caustic light ripple overlay ----
   Simulates underwater light patterns refracted through the surface.
   Fades out with depth via --caustic-opacity set by JS.       */
#depth-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 28% at 22% 18%, rgba(0,212,255,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 35% 18% at 75% 35%, rgba(100,200,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 45% 22% at 50% 65%, rgba(0,100,255,0.06) 0%, transparent 70%);
  animation: caustic-drift 14s ease-in-out infinite alternate;
  opacity: var(--caustic-opacity, 1);
  transition: opacity 0.3s;
  pointer-events: none;
}

@keyframes caustic-drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(2%, 3%) scale(1.06) rotate(1deg); }
  66%  { transform: translate(-1%, 2%) scale(0.97) rotate(-1deg); }
  100% { transform: translate(-2.5%, -1.5%) scale(1.03) rotate(0.5deg); }
}

/* ---- School-of-fish canvas — behind content panels ---- */
#school-canvas {
  position: fixed;
  inset: 0;
  z-index: 6;    /* behind scroll-container (z:10), behind bubbles (z:8) */
  pointer-events: none;
  /* No mix-blend-mode here — it breaks backdrop-filter on glass panels above */
}

/* ---- Bubble canvas — behind content panels ---- */
#bubble-canvas {
  position: fixed;
  inset: 0;
  z-index: 8;    /* behind scroll-container (z:10), above school canvas */
  pointer-events: none;
  will-change: transform;
}

/* ---- Creature layer — above content, below bubbles ---- */
#creature-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Coral layer — above content sections ---- */
#coral-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Scroll container (actual scrolling content) ---- */
#scroll-container {
  position: relative;
  z-index: 10;
  /* overflow-x: hidden would force overflow-y:auto (CSS spec), turning this into
     a second scroll container and producing a duplicate scrollbar on desktop.
     overflow-x: clip clips horizontally without that side-effect. */
  overflow-x: hidden; /* fallback for Safari < 16 */
  overflow-x: clip;
}

/* ---- Hero water surface wave ---- */
#hero {
  position: relative;
  overflow: hidden;
}

#hero .wave-divider {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  z-index: 5;
}

#hero .wave-divider svg {
  width: 200%;
  height: 100%;
  animation: wave-drift 9s linear infinite;
}

@keyframes wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Depth vignette — darkens viewport edges as depth increases ---- */
#depth-vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at center, transparent 30%, rgba(0,0,20,0.75) 100%);
  opacity: 0;
  transition: opacity 0.12s;
}

/* ---- Particle sparks — bioluminescent specks deep down ---- */
#spark-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;
}
#spark-canvas.visible {
  opacity: 1;
}

/* ---- Water shimmer at surface (top of page) ---- */
.surface-shimmer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(135, 206, 235, 0.35) 0%,
    transparent 100%
  );
  opacity: 1;
  transition: opacity 0.5s;
}

/* ---- Mobile: reduce compositor layer count ---- */
/* Every position:fixed element is a separate GPU compositor layer.
   On mobile, maintaining many full-screen layers during scroll causes
   GPU pressure that manifests as compositor/main-thread desync — the
   "blue background cut off at bottom then snap" the user sees. */
@media (max-width: 600px) {
  /* depth-bg: replaced by a static body gradient on mobile (see main.css).
     Hiding this position:fixed element removes its compositor layer entirely,
     eliminating the main source of compositor/main-thread desync on Android.
     Its ::before/:after animations (plankton-drift, caustic-drift) are also
     eliminated as a side-effect. */
  #depth-bg { display: none; }

  /* bubble-canvas never moves — will-change:transform promotion is wasted */
  #bubble-canvas { will-change: auto; }

  /* surface-shimmer is a subtle top-of-page gradient not needed on mobile */
  .surface-shimmer { display: none; }

  /* Empty / always-invisible fixed layers — each one the browser promotes to
     a compositor layer during scroll. Hiding them reduces GPU layer count. */
  #creature-layer,
  #coral-layer    { display: none; }

  /* spark-canvas and depth-vignette are always opacity:0 on mobile */
  #spark-canvas,
  #depth-vignette { display: none; }
}