/* ============================================================
   animations.css — keyframes, scroll-reveal, transiciones
   ============================================================ */

/* --- Scroll reveal ---
   Sólo escondemos si el JS está vivo (la clase .js la pone un script inline en
   el <head>). Sin esa guarda, un fallo de red en interactions.js dejaba todo el
   contenido del sitio en opacity:0, es decir: página en blanco. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* liberamos la capa de composición al terminar: 27 elementos con
     will-change permanente mantienen memoria de GPU reservada de más */
  will-change: auto;
}

/* Escalonado suave dentro de cada grid */
.js .grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.js .grid .reveal:nth-child(6) { transition-delay: 0.40s; }

/* --- Nav oculta al bajar --- */
.nav.is-hidden { transform: translateY(-100%); }

/* --- Scroll hint --- */
@keyframes hintDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold), transparent);
  animation: hintDrop 2.2s var(--ease) infinite;
}

/* --- Glyph CTA final: respiración --- */
@keyframes glyphPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.final-cta__glyph { animation: glyphPulse 4s ease-in-out infinite; }

/* --- Capa de imagen: revelado + Ken Burns lento --- */
.backdrop__img { transition: opacity 1.5s var(--ease); }

@keyframes kenBurns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.13) translate(-1.6%, -1.1%); }
}
.backdrop__img.is-loaded { animation: kenBurns 28s ease-in-out infinite alternate; }

/* --- Respeto a preferencias de movimiento --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .final-cta__glyph,
  .scroll-hint__line::after,
  .backdrop__img { animation: none; }
  .stack__card { transition: none; }
}