/* ============================================================
   DarksOpMedia — effects.css
   Capa de efectos: grano de película, sistema de reveals y
   coreografía de entrada del hero.
   Contrato: los reveals SOLO se activan con html.js (la clase
   la añade main.js); sin JavaScript todo el contenido es
   visible por defecto.
   ============================================================ */

/* ---- 1 · Grano de película (fixed, sobre todo el sitio) ---- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60; /* por encima del toast (--z-toast: 50); no intercepta nada */
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='grain'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.65'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---- 2 · Reveals de scroll (gate: html.js) ---- */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

html.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Titulares por líneas: anima cada <span class="line">,
   el contenedor no anima (pisaría el stagger). */
html.js .reveal--lines {
  opacity: 1;
  transform: none;
}

html.js .reveal--lines .line {
  display: block;
  opacity: 0;
  transform: translateY(1.1em);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

html.js .reveal--lines.in-view .line {
  opacity: 1;
  transform: none;
}

html.js .reveal--lines.in-view .line:nth-child(1) { transition-delay: 0s; }
html.js .reveal--lines.in-view .line:nth-child(2) { transition-delay: 0.09s; }
html.js .reveal--lines.in-view .line:nth-child(3) { transition-delay: 0.18s; }

/* ---- 3 · Coreografía de entrada del hero ---- */
/* Misma mecánica de reveal con duraciones algo más largas y
   delays escalonados: topline → líneas del H1 → sub → CTAs. */

html.js .hero .reveal,
html.js .hero .reveal--lines .line {
  transition-duration: 0.95s;
}

html.js .hero .hero__topline.in-view { transition-delay: 0.12s; }

html.js .hero .reveal--lines.in-view .line:nth-child(1) { transition-delay: 0.25s; }
html.js .hero .reveal--lines.in-view .line:nth-child(2) { transition-delay: 0.37s; }
html.js .hero .reveal--lines.in-view .line:nth-child(3) { transition-delay: 0.49s; }

html.js .hero .hero__sub.in-view { transition-delay: 0.62s; }
html.js .hero .hero__ctas.in-view { transition-delay: 0.74s; }

/* ---- 4 · Reduced motion: todo quieto, todo visible ---- */
/* Bloque maestro. Mantener SIEMPRE al final del archivo. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #particles {
    display: none;
  }

  html.js .reveal,
  html.js .reveal--lines .line {
    opacity: 1 !important;
    transform: none !important;
  }
}