/* ==========================================================
   ANIMACIONES — estilos de apoyo para js/animaciones.js
   Reutilizable: no depende de los colores ni del diseño de la página.
   ========================================================== */

/* ---------- Lenis (scroll suave) — reglas oficiales de lenis@1.3.26 ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================
   ENTRADA DEL HÉROE — 100% CSS
   Arranca en cuanto la pantalla se pinta: no espera a que GSAP llegue
   del CDN (en celular con datos eso puede tardar varios segundos).
   ========================================================== */
:root { --ease-wow: cubic-bezier(.16, 1, .3, 1); }

/* Títulos que suben línea por línea
   <h1 data-anim="lineas"><span class="linea"><span>Texto</span></span></h1>
   El span de afuera es la máscara; el de adentro es el que sube. */
[data-anim="lineas"] .linea {
  display: block; overflow: hidden;
  /* espacio extra para que no se corten tildes ni la "ñ" */
  padding: .12em 0 .1em; margin: -.12em 0 -.1em;
}
[data-anim="lineas"] .linea > span {
  display: inline-block;
  animation: linea-sube 1.1s var(--ease-wow) both;
}
[data-anim="lineas"] .linea:nth-child(2) > span { animation-delay: .12s; }
[data-anim="lineas"] .linea:nth-child(3) > span { animation-delay: .24s; }
@keyframes linea-sube { from { transform: translateY(115%); } }

/* Elementos sueltos del héroe: data-anim-hero="1", "2", "3"… define el orden */
[data-anim-hero] { animation: hero-aparece .9s var(--ease-wow) both; animation-delay: .35s; }
[data-anim-hero="0"] { animation-delay: .05s; }
[data-anim-hero="2"] { animation-delay: .45s; }
[data-anim-hero="3"] { animation-delay: .55s; }
@keyframes hero-aparece { from { opacity: 0; transform: translateY(18px); } }

/* La pizza: espera a que su imagen cargue (clase .lista, la pone el onload
   del <img>) y recién ahí entra girando. Después queda girando muy lento. */
[data-anim="pizza-hero"]:not(.lista) .pizza-disco,
[data-anim="pizza-hero"]:not(.lista) .pizza-halo,
[data-anim="pizza-hero"]:not(.lista) .pizza-sello { opacity: 0; }
[data-anim="pizza-hero"].lista .pizza-disco {
  animation:
    pizza-entra 1.8s var(--ease-wow) both,
    pizza-gira 90s linear 1.8s infinite;
}
[data-anim="pizza-hero"].lista .pizza-halo  { animation: halo-entra 1.6s var(--ease-wow) both; }
[data-anim="pizza-hero"].lista .pizza-sello { animation: sello-entra 1s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
@keyframes pizza-entra { from { opacity: 0; transform: rotate(-150deg) scale(.55); } 25% { opacity: 1; } }
@keyframes pizza-gira  { to { transform: rotate(360deg); } }
@keyframes halo-entra  { from { opacity: 0; transform: scale(.5); } }
@keyframes sello-entra { from { opacity: 0; transform: scale(0) rotate(-90deg); } }

/* ---------- Cinta infinita ----------
   <div data-anim="cinta"><div class="cinta-pista">
     <div class="cinta-set">…</div><div class="cinta-set">…</div>  ← dos copias iguales
   </div></div> */
[data-anim="cinta"] { overflow: hidden; }
[data-anim="cinta"] .cinta-pista { display: flex; width: max-content; will-change: transform; }
[data-anim="cinta"] .cinta-set { display: flex; flex-shrink: 0; }

/* ---------- Barra de progreso de lectura ---------- */
[data-progreso] {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* ---------- Nav que se esconde al bajar y vuelve al subir ---------- */
[data-nav-ocultar] { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
[data-nav-ocultar].nav-oculta { transform: translateY(-100%); }

/* ---------- Modo suave (movimiento reducido) ----------
   Si la persona pidió menos movimiento (iPhone: "Reducir movimiento";
   Android: "Quitar animaciones" o el ahorro de batería), quitamos lo que
   puede marear: giros, desplazamientos, parallax, la cinta que corre.
   PERO no dejamos la página "muerta": las cosas aparecen con fundidos y
   la pizza entra enfocándose. Los fundidos no causan mareo. */
@media (prefers-reduced-motion: reduce) {
  /* Apaga las animaciones CSS decorativas (giro del sello, pistas, etc.) */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* Las transiciones cortas (hover, pestañas, carrito) se mantienen, más rápidas */
  *, *::before, *::after { transition-duration: .2s !important; }

  /* Héroe: fundidos escalonados */
  [data-anim-hero="0"]                    { animation: solo-fundido .9s ease .05s both !important; }
  [data-anim="lineas"] .linea:nth-child(1) > span { animation: solo-fundido 1s ease .15s both !important; }
  [data-anim="lineas"] .linea:nth-child(2) > span { animation: solo-fundido 1s ease .35s both !important; }
  [data-anim-hero="2"]                    { animation: solo-fundido .9s ease .55s both !important; }
  [data-anim-hero="3"]                    { animation: solo-fundido .9s ease .7s both !important; }

  /* La pizza "enfoca": de borrosa a nítida, sin moverse */
  [data-anim="pizza-hero"].lista .pizza-disco { animation: enfoque 1.4s ease both !important; }
  [data-anim="pizza-hero"].lista .pizza-halo  { animation: solo-fundido 1.6s ease .2s both !important; }
  [data-anim="pizza-hero"].lista .pizza-sello { animation: solo-fundido .8s ease .9s both !important; }
}
@keyframes solo-fundido { from { opacity: 0; } }
@keyframes enfoque { from { opacity: 0; filter: blur(16px); } 40% { opacity: 1; } }