/* =====================================================================
   animations.css — Capa de animación de scroll-animator (nivel cinemático).
   Carga DESPUÉS de styles.css. Solo opacity/transform. Respeta
   prefers-reduced-motion. Ajusta intensidad con las variables de :root.
   ===================================================================== */
:root {
  --anim-duration: 900ms;        /* sutil: 400ms · dinámico: 600ms · cinemático: 800-900ms */
  --anim-distance: 48px;         /* sutil: 12px · dinámico: 24px · cinemático: 40-48px */
  --anim-ease: cubic-bezier(.16, 1, .3, 1);
  --anim-stagger: 90ms;
  --word-stagger: 60ms;          /* retraso entre palabras de los titulares */
  --marquee-duration: 30s;
}

/* ---------- Reveals genéricos (solo con JS activo: html.js) ---------- */
html.js [data-animate]:not([data-animate="stagger"]):not([data-animate="marquee"]):not([data-animate^="reveal-"]):not(.is-visible),
html.js [data-animate="stagger"] > *:not(.is-visible) {
  opacity: 0;
  transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}
html.js [data-animate="fade-up"]:not(.is-visible),
html.js [data-animate="stagger"] > *:not(.is-visible) { transform: translateY(var(--anim-distance)); }
html.js [data-animate="fade-in"]:not(.is-visible) { transform: none; }
html.js [data-animate="fade-left"]:not(.is-visible) { transform: translateX(calc(var(--anim-distance) * -1)); }
html.js [data-animate="fade-right"]:not(.is-visible) { transform: translateX(var(--anim-distance)); }
html.js [data-animate="scale-in"]:not(.is-visible) { transform: scale(.92); }

html.js [data-animate].is-visible,
html.js [data-animate="stagger"] > *.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}

/* Variantes de cascada por sección */
html.js .bento > *:not(.is-visible) { transform: translateY(80px) scale(.94); }
html.js .formats__rail > *:not(.is-visible) { transform: translateY(120px) rotate(4deg); }
html.js .cities > *:not(.is-visible) { transform: translateX(90px); }
html.js .kpis > *:not(.is-visible) { transform: translateY(60px); }

/* ---------- Titulares: palabras que suben desde una máscara ---------- */
html.js [data-animate="reveal-words"] .w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0 .06em .14em; margin: 0 -.06em -.14em;
}
html.js [data-animate="reveal-words"] .w__i {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: left bottom;
  transition: transform calc(var(--anim-duration) * 1.2) var(--anim-ease);
  transition-delay: calc(var(--anim-delay, 0ms) + var(--i, 0) * var(--word-stagger));
}
html.js [data-animate="reveal-words"].is-visible .w__i { transform: none; }

/* Letras del logotipo gigante del footer */
html.js [data-animate="reveal-chars"] { overflow: hidden; padding-bottom: .08em; }
html.js [data-animate="reveal-chars"] .ch {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--anim-ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
html.js [data-animate="reveal-chars"].is-visible .ch { transform: none; }

/* ---------- Pasos: la línea superior se dibuja ---------- */
html.js .steps > .step { border-top-color: transparent; }
html.js .steps > .step::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--color-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}
html.js .steps > .step.is-visible::before { transform: scaleX(1); }

/* ---------- Tarjetas de formato: zoom del media al pasar el ratón ---------- */
.format-card__media > * { transition: transform .9s var(--anim-ease); }
.format-card:hover .format-card__media > * { transform: scale(1.06); }

/* ---------- Nav: se esconde al bajar y reaparece al subir ---------- */
.nav { transition: color .3s ease, translate .5s var(--anim-ease); }
.nav.is-hidden { translate: 0 -140%; }

/* ---------- Barra de progreso de lectura ---------- */
.scroll-progress {
  position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ---------- CTA: brillo que sigue al cursor ---------- */
.cta__panel::before {
  right: auto; top: 0; left: 0; width: 520px;
  translate: calc(var(--mx, 70%) - 50%) calc(var(--my, 0%) - 50%);
  transition: translate .6s var(--anim-ease);
}

/* Capas movidas por scroll: el JS solo toca translate/rotate/scale */
[data-parallax], .hero__panel, .hero__bento, .hero__stat, .solution__line, .format-switch__card, .cta__panel { will-change: auto; }
html.js.is-scrubbing .hero__panel,
html.js.is-scrubbing .solution__line,
html.js.is-scrubbing .format-switch__card { will-change: transform; }

/* Marquee (logos) — contrato del pack */
[data-animate="marquee"] {
  display: flex; gap: 3rem; overflow: hidden; flex-wrap: nowrap; justify-content: flex-start;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
[data-animate="marquee"] .marquee__track { display: flex; gap: 3rem; flex-shrink: 0; align-items: center; animation: marquee var(--marquee-duration) linear infinite; }
[data-animate="marquee"]:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 3rem)); } }

/* Sticky stack (nivel cinemático) */
[data-sticky-stack] { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  [data-sticky-stack] > * { position: sticky; top: calc(96px + var(--stack-index, 0) * 24px); }
}

.btn:active, .round-btn:active { transform: translateY(1px) scale(.98); }

/* ---------- Hero: entrada solo con CSS ----------
   Arranca en el primer pintado sin esperar a que cargue el JS: el texto principal
   se ve antes (mejor LCP) y la animación es la misma. El titular sigue con reveal-words. */
@keyframes hero-up { from { opacity: 0; transform: translateY(var(--anim-distance)); } }
@keyframes hero-fade { from { opacity: 0; } }
html.js #hero [data-animate="fade-up"],
html.js #hero [data-animate="fade-in"],
html.js #hero [data-animate="stagger"] > * {
  opacity: 1; transform: none; transition: none;
  animation: hero-up var(--anim-duration) var(--anim-ease) both;
}
html.js #hero [data-animate="fade-in"] { animation-name: hero-fade; }
html.js #hero [data-animate-delay="100"] { animation-delay: 100ms; }
html.js #hero [data-animate-delay="200"] { animation-delay: 200ms; }
html.js #hero [data-animate-delay="300"] { animation-delay: 300ms; }
html.js #hero [data-animate="stagger"] > :nth-child(2) { animation-delay: 90ms; }
html.js #hero [data-animate="stagger"] > :nth-child(3) { animation-delay: 180ms; }
/* Titular del hero: palabras ya partidas en el HTML; suben desde su máscara en cascada */
@keyframes hero-word { from { transform: translateY(110%) rotate(4deg); } }
html.js #hero [data-animate="reveal-words"] .w__i {
  transform: none; transition: none;
  animation: hero-word calc(var(--anim-duration) * 1.2) var(--anim-ease) both;
  animation-delay: calc(100ms + var(--i, 0) * var(--word-stagger));
}
#hero .hero__title .w:nth-child(2) .w__i { --i: 1; }  #hero .hero__title .w:nth-child(3) .w__i { --i: 2; }
#hero .hero__title .w:nth-child(4) .w__i { --i: 3; }  #hero .hero__title .w:nth-child(5) .w__i { --i: 4; }
#hero .hero__title .w:nth-child(6) .w__i { --i: 5; }  #hero .hero__title .w:nth-child(7) .w__i { --i: 6; }
#hero .hero__title .w:nth-child(8) .w__i { --i: 7; }  #hero .hero__title .w:nth-child(9) .w__i { --i: 8; }
#hero .hero__title .w:nth-child(10) .w__i { --i: 9; } #hero .hero__title .w:nth-child(11) .w__i { --i: 10; }
#hero .hero__title .w:nth-child(12) .w__i { --i: 11; }

/* ---------- Reducir movimiento: todo visible, sin transformaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js #hero [data-animate], html.js #hero [data-animate="stagger"] > * { animation: none !important; }
  html.js [data-animate], html.js [data-animate="stagger"] > *,
  html.js [data-animate] .w__i, html.js [data-animate] .ch { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .steps > .step::before { transform: none !important; }
  [data-animate="marquee"] .marquee__track { animation: none; }
  .reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  [data-parallax], .hero__panel, .hero__bento, .hero__stat, .solution__line, .format-switch__card, .cta__panel, .ticker__track { translate: none !important; rotate: none !important; scale: none !important; }
  .scroll-progress { display: none; }
  .hero__tile img { animation: none !important; }
  .hero__tile-alt { opacity: 0 !important; }
}