/* Pantalla de carga con cuervos.
   Solo se ve cuando <html> tiene la clase "intro-on" (la pone un script pequeño del <head>,
   y solo la primera vez que se abre la web en esa pestaña). Sin esa clase, nada de esto afecta a la página. */

/* Mientras dura la animación la página no se puede mover con el scroll */
html.intro-on,
html.intro-on body { overflow: hidden; }

#intro-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  touch-action: none;
  background: radial-gradient(ellipse 62% 56% at 70% 26%, #5e4220 0%, #2a1a0c 40%, #0b0704 76%, #050403 100%);
  transition: opacity 1.3s ease;
}
/* Seguro extra: aunque falle todo el código, a los 9 s la pantalla de carga se quita sola */
html.intro-on #intro-loader { display: block; animation: introFailsafe .6s ease 9s forwards; }
#intro-loader.out { opacity: 0; pointer-events: none; }
#intro-loader.done { display: none !important; }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.intro-moon {
  position: absolute;
  left: 70%;
  top: 24%;
  width: clamp(90px, 12vmin, 160px);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 38%, #fff3d2 0%, #f2d98a 55%, #c99f56 100%);
  box-shadow: 0 0 60px 30px rgba(240, 200, 120, .35), 0 0 180px 90px rgba(212, 175, 55, .18);
  opacity: .92;
}
.intro-mist {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 45%;
  background: radial-gradient(ellipse at 50% 50%, rgba(205, 165, 95, .17), transparent 65%);
  filter: blur(12px);
  animation: introDrift 14s ease-in-out infinite alternate;
}
.intro-mist.m1 { bottom: 6%; }
.intro-mist.m2 { top: 38%; animation-direction: alternate-reverse; animation-duration: 18s; }
@keyframes introDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

#intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Portada: el título, la frase y el botón esperan escondidos y entran poco a poco al terminar */
html.intro-pre .hero-content > * { opacity: 0; transform: translateY(18px); }
html.intro-play .hero-content > * { animation: introRise 1.1s ease backwards; }
html.intro-play .hero-content > :nth-child(2) { animation-delay: .25s; }
html.intro-play .hero-content > :nth-child(3) { animation-delay: .55s; }
@keyframes introRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Si la persona tiene activado "reducir movimiento": sin cuervos, solo un fundido corto */
html.intro-fade body { animation: introFadeIn .45s ease backwards; }
@keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .intro-mist { animation: none; }
}