/**
 * LIMAF v2.0 — Animaciones
 * Keyframes + estados de reveal controlados por JS (GSAP)
 * REGLA DE ROBUSTEZ: sin la clase .js-anim en <html>, TODO es visible.
 * Los estados iniciales ocultos solo existen cuando el JS confirmó que
 * puede animar. Si una CDN falla, la página se ve completa igualmente.
 */

/* ── KEYFRAMES ────────────────────────────────────────── */

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

@keyframes scroll-drip {
  0%   { top: -100%; }
  55%  { top: 100%; }
  100% { top: 100%; }
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -8%); }
  20%  { transform: translate(-12%, 3%); }
  30%  { transform: translate(6%, -14%); }
  40%  { transform: translate(-4%, 12%); }
  50%  { transform: translate(-12%, 6%); }
  60%  { transform: translate(12%, 0%); }
  70%  { transform: translate(0%, 12%); }
  80%  { transform: translate(3%, 22%); }
  90%  { transform: translate(-8%, 8%); }
  100% { transform: translate(0, 0); }
}

@keyframes flame-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.86; }
  60%      { opacity: 0.95; }
  75%      { opacity: 0.9; }
}

/* ── ESTADOS INICIALES (solo con .js-anim activo) ────── */

html.js-anim [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
html.js-anim [data-reveal="up"]    { transform: translateY(48px); }
html.js-anim [data-reveal="left"]  { transform: translateX(-48px); }
html.js-anim [data-reveal="right"] { transform: translateX(48px); }
html.js-anim [data-reveal="scale"] { transform: scale(0.92); }

/* Cuando GSAP marca el elemento como revelado */
html.js-anim [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Titulares por líneas — nacen ocultas bajo la máscara .line-mask */
.hl-line { display: block; }
html.js-anim [data-split] .hl-line {
  transform: translateY(110%);
  will-change: transform;
}

/* Hero: elementos que orquesta el timeline de entrada */
html.js-anim .hero [data-hero-fade] { opacity: 0; }

/* ── UTILIDADES ANIMADAS ─────────────────────────────── */

/* Subrayado dibujable para links inline */
.u-underline {
  background-image: linear-gradient(var(--fire-500), var(--fire-500));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--e-out);
}
.u-underline:hover { background-size: 100% 1px; }

/* Elemento magnético — el JS mueve, esto suaviza el retorno */
[data-magnetic] { transition: transform var(--d-base) var(--e-out); }
[data-magnetic].is-magnet-active { transition: none; }

/* Loader saliendo */
#loader.is-done {
  transition: opacity 0.7s var(--e-inout), visibility 0s linear 0.7s;
  opacity: 0;
  visibility: hidden;
}

/* Aparición del contenido tras el loader */
html.loading body { overflow: hidden; }