/* ============================================================================
   The Depth System
   Shared across Ocean ID, Izu Dive Forecast and My Dive Map.
   Reference: https://claude.ai/artifact/SuC5uzyLUaGFjXqNLLSpRB

   One vertical axis runs through all three products: sunlit surface at the
   top, abyss at the bottom. Each product sits at a different point on that
   axis, and that position sets its light level, accent and motion budget.

   Canonical copy lives in izu-dive-forecast/public/depth.css. The three
   projects have no shared build, so this file is copied. Keep them in step.

   Only the water is fixed to the viewport. The sky and the light rays belong
   to the TOP OF THE DOCUMENT and scroll away, because that is what descending
   means: you leave the surface behind. An earlier version pinned them to the
   viewport, which dragged a bright band over content as it scrolled and left
   body text at 1.18:1 against it.

   To adopt, set the zone knobs on :root and add the layer elements as the
   first children of <body>:

     <div class="depth-bg"></div>
     <div class="depth-sky"></div>      // surface zone only
     <div class="depth-caustics"></div> // sunlit zone only
     <div class="depth-rays"><i></i><i></i><i></i><i></i></div>
   ========================================================================= */

:root {
  /* The shared ramp. Never varied between products. */
  --sunbeam: #ffe8a3;
  --shallow: #7fd4dd;
  --ocean:   #1b6f8c;
  --deep:    #0a2a45;
  --abyss:   #040f1a;
  --coral:   #ff7a5c; /* warnings only, never decorative */

  /* Zone knobs. Each product overrides these after importing. */
  --zone-accent: #2dd4bf;
  --zone-top: #14506b;      /* top of the descent. Must stay dark enough that
                                body and muted text clear AA once the sky has
                                scrolled past. */
  --ray-strength: 1;         /* 1 sunlit, .6 surface, .25 deep */
  --caustic-strength: 0;     /* sunlit zone only */
  --sky-height: 0px;         /* surface zone only */
  --read-start: 30%;         /* rays fade out before text begins */
  --read-end: 62%;
}

/* --- 1. The constant. Fixed, so content descends through it. ------------- */
.depth-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--zone-top) 0%,
    var(--ocean) 9%,
    #0e3f5e 22%,
    var(--deep) 38%,
    #061a2b 60%,
    var(--abyss) 82%,
    #02080f 100%
  );
}

/* --- 2. Sky. The surface zone is the only product that shows air. -------- */
.depth-sky {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: var(--sky-height);
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(180deg, #ffd9a0 0%, #f0a860 38%, #2a7fa0 100%);
}
.depth-sky::after {
  /* The waterline. A hard edge is the whole point. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 163, 0.9), transparent);
}

/* --- 3. Caustics. The strongest underwater cue. Sunlit zone only. -------- */
.depth-caustics {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--caustic-strength);
}
.depth-caustics::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 34% 16% at 22% 24%, rgba(190, 245, 240, 0.3), transparent 60%),
    radial-gradient(ellipse 26% 12% at 62% 38%, rgba(255, 247, 214, 0.26), transparent 62%),
    radial-gradient(ellipse 40% 14% at 82% 18%, rgba(160, 230, 235, 0.22), transparent 60%),
    radial-gradient(ellipse 22% 10% at 40% 58%, rgba(200, 250, 245, 0.18), transparent 64%);
  filter: blur(11px);
  mix-blend-mode: screen;
  animation: depth-caustic 15s ease-in-out infinite alternate;
}
@keyframes depth-caustic {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}

/* --- 4. Rays. Masked out before the reading zone. ------------------------ */
.depth-rays {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--ray-strength);
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--read-start), transparent var(--read-end));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--read-start), transparent var(--read-end));
}
.depth-rays i {
  position: absolute;
  top: -25%;
  height: 150%;
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(255, 247, 214, 0.5),
    rgba(180, 235, 240, 0.16) 42%,
    transparent 72%
  );
  filter: blur(22px);
  mix-blend-mode: screen;
  transform-origin: top center;
}
.depth-rays i:nth-child(1) { left: 8%;  width: 90px;  transform: rotate(11deg);  animation: depth-ray-a 13s ease-in-out infinite; }
.depth-rays i:nth-child(2) { left: 34%; width: 140px; transform: rotate(-6deg);  animation: depth-ray-b 17s ease-in-out infinite; }
.depth-rays i:nth-child(3) { left: 62%; width: 70px;  transform: rotate(15deg);  animation: depth-ray-c 11s ease-in-out infinite; }
.depth-rays i:nth-child(4) { left: 84%; width: 110px; transform: rotate(-13deg); animation: depth-ray-b 19s ease-in-out infinite; }

@keyframes depth-ray-a {
  0%, 100% { opacity: 0.5;  transform: rotate(11deg) translateX(0); }
  50%      { opacity: 0.85; transform: rotate(9deg)  translateX(14px); }
}
@keyframes depth-ray-b {
  0%, 100% { opacity: 0.34; transform: rotate(-6deg) translateX(0); }
  50%      { opacity: 0.62; transform: rotate(-8deg) translateX(-18px); }
}
@keyframes depth-ray-c {
  0%, 100% { opacity: 0.26; transform: rotate(15deg); }
  50%      { opacity: 0.5;  transform: rotate(13deg); }
}

/* --- 5. Submerged surfaces. Panels sit in the water, not on top of it. --- */
.depth-panel {
  background: rgba(10, 42, 69, 0.42);
  border: 1px solid rgba(126, 207, 204, 0.16);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .depth-rays i,
  .depth-caustics::before {
    animation: none !important;
  }
}