/* ═══════════════════════════════════════════════════════════
   Ocean Background Layers — CalipsoMarin
   Fixed-position layered background system driven by scroll.
   CSS custom properties are updated by bg.js at runtime.
   ═══════════════════════════════════════════════════════════ */

/* ── Container ── */
#ocean-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* Large viewport height prevents the address bar gap */
  z-index: -1;
  overflow: hidden;
  will-change: contents;
  /* Fallback while JS loads */
  background: linear-gradient(180deg, #87CEEB 0%, #AFDDEE 50%, #D2C3AA 100%);
}

/* ── Gradient Layer ── */
.ocean-gradient-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--ocean-top-color)    0%,
    var(--ocean-mid-color)    50%,
    var(--ocean-bottom-color) 100%
  );
}

/* ── Canvas (God Rays & Particles) ── */
#ocean-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ── Sun ── */
.ocean-sun {
  position: absolute;
  z-index: 3;
  top: var(--sun-top);
  left: 50%;
  width:  min(360px, 50vw);
  height: min(360px, 50vw);
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  will-change: top, opacity;
  opacity: var(--sun-opacity);
  background:
    radial-gradient(
      circle,
      rgba(255, 248, 230, 0.50) 0%,
      rgba(255, 235, 190, 0.85) 20%,
      rgba(255, 215, 140, 0.40) 45%,
      rgba(255, 200, 100, 0.15) 65%,
      transparent 80%
    );
}

/* Sun glow halo */
.ocean-sun::after {
  content: '';
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 240, 200, 0.15) 0%,
      rgba(255, 220, 160, 0.06) 40%,
      transparent 70%
    );
  opacity: var(--sun-opacity);
}

/* ── Sun Flare ── */
.ocean-sun-flare {
  position: absolute;
  z-index: 4;
  top: var(--flare-top);
  left: 50%;
  width: 400px;
  height: 800px; /* Tall container for multiple artifacts */
  transform: translateX(-50%);
  pointer-events: none;
  will-change: top, opacity;
  opacity: var(--flare-opacity);
  /* A chain of realistic lens flare artifacts (bokeh circles and rings) */
  background:
    /* Artifact 1: Large soft blue halo */
    radial-gradient(circle at 50% 20%, rgba(150, 210, 255, 0.12) 0%, transparent 20%),
    /* Artifact 2: Distinct teal ring */
    radial-gradient(circle at 50% 25%, transparent 8%, rgba(100, 240, 220, 0.16) 10%, transparent 12%),
    /* Artifact 3: Solid soft orange dot */
    radial-gradient(circle at 50% 30%, rgba(255, 180, 120, 0.25) 0%, transparent 5%),
    /* Artifact 4: Large faint green-blue wash */
    radial-gradient(circle at 50% 35%, rgba(100, 255, 200, 0.09) 0%, transparent 25%),
    /* Artifact 5: Small bright white-blue dot */
    radial-gradient(circle at 50% 40%, rgba(220, 240, 255, 0.4) 0%, transparent 3%);
  /* Blending for optical light effect */
  mix-blend-mode: screen;
}

/* ── Vignette ── */
.ocean-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  will-change: opacity;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 50%,
      transparent 30%,
      rgba(0, 5, 15, var(--vignette-opacity)) 100%
    );
}

/* ── Depth Fog — adds haze towards bottom of viewport in mid-depth ── */
.ocean-depth-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    rgba(0, 8, 20, 0.15) 85%,
    rgba(0, 5, 15, 0.30) 100%
  );
  transition: opacity 0.3s ease;
}

/* ── Responsive Adjustments ── */
@media (max-width: 768px) {
  .ocean-sun {
    width:  min(260px, 60vw);
    height: min(260px, 60vw);
  }
}

@media (max-width: 480px) {
  .ocean-sun {
    width:  min(200px, 65vw);
    height: min(200px, 65vw);
  }
}