/* ═══════════════════════════════════════════
 * ESCENA · canvas + overlays + neblina + vignette
 * ═══════════════════════════════════════════ */

#canvas-tormenta {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-canvas);
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#canvas-faro-3d {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-canvas);
  pointer-events: none;
  display: none;
}

#canvas-faro-3d.activo {
  display: block;
}

/* Canvas dedicado al haz del faro · va sobre el overlay para ser visible al inicio */
#canvas-haz {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

.overlay-noche {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Inicio CASI NEGRO TOTAL · cubre faro 3D y olas · solo pasa el haz */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.96) 100%);
  z-index: 3; /* sobre las olas también */
  pointer-events: none;
  transition: opacity 1s, background 1s;
}

/* Aclara progresivamente conforme el scroll avanza · final hacia paraíso */
.overlay-noche.calmando {
  background:
    radial-gradient(ellipse at 85% 40%, rgba(244, 200, 122, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(2, 4, 12, 0.7) 0%, rgba(8, 14, 28, 0.55) 100%);
}

.overlay-noche.paraiso {
  background:
    radial-gradient(ellipse at 75% 35%, rgba(255, 200, 130, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(40, 30, 50, 0.4) 0%, rgba(20, 24, 40, 0.35) 100%);
}

.neblina {
  position: fixed;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100vh;
  z-index: 4; /* sobre el overlay */
  pointer-events: none;
  /* Niebla GRUESA al inicio · MUCHAS capas radiales */
  background:
    radial-gradient(ellipse at 30% 40%, rgba(200, 210, 225, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(180, 190, 215, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 30%, rgba(210, 220, 235, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(190, 200, 220, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 35%, rgba(195, 205, 225, 0.25) 0%, transparent 45%);
  animation: nebla-deriva 22s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 1.5s ease-out;
}

/* Niebla se despeja con el scroll */
.neblina.despejando {
  opacity: 0.55;
}

.neblina.clara {
  opacity: 0.2;
}

.relampago {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(220, 230, 255, 0);
  z-index: var(--z-relampago);
  pointer-events: none;
  transition: background 0.03s;
}

.relampago.activo {
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(255, 200, 100, 0.6) 0%,
    rgba(255, 230, 180, 0.4) 40%,
    rgba(245, 240, 255, 0.25) 100%
  );
  transition: background 0.02s;
}

/* ═══ Progreso de scroll · línea fina arriba ═══ */
.progreso-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--bronce-vivo), var(--oro-vivo));
  z-index: var(--z-header);
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(244, 200, 122, 0.5);
}