/* Movimiento "de comic": pasos cortos y sobrepaso.
   Los elementos [data-reveal] solo se ocultan si hay JS (html.js) para no perder contenido. */

@keyframes pop {
  0%   { opacity: 0; transform: translateY(1.5rem) scale(0.7) rotate(-4deg); }
  60%  { opacity: 1; transform: translateY(-0.4rem) scale(1.08) rotate(1.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes slide {
  0%   { opacity: 0; transform: translateX(-2.5rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes peek {
  0%   { transform: translateY(105%); }
  70%  { transform: translateY(calc(var(--rest, 0%) - 6%)); }
  100% { transform: translateY(var(--rest, 0%)); }
}
@keyframes stamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-10deg); }
  70%  { opacity: 1; transform: scale(0.94) rotate(-4deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes wiggle {
  0%   { transform: rotate(-2.5deg); }
  50%  { transform: rotate(2.5deg) translateY(-0.15rem); }
  100% { transform: rotate(-2.5deg); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes swap {
  0%   { transform: scale(0.85) rotate(-2deg); }
  100% { transform: none; }
}

.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in { animation: var(--dur-pop) var(--ease-comic) both; }
.js [data-reveal="pop"].is-in   { animation-name: pop; }
.js [data-reveal="slide"].is-in { animation-name: slide; }
/* peek: el contenedor se queda quieto (para que IntersectionObserver lo vea) y se anima el hijo */
.js [data-reveal="peek"] { opacity: 1; }
.js [data-reveal="peek"] > * { transform: translateY(105%); }
.js [data-reveal="peek"].is-in > * { animation: peek var(--dur-pop) var(--ease-comic) both; animation-delay: var(--delay, 0ms); }
.js [data-reveal="stamp"].is-in { animation-name: stamp; animation-duration: 360ms; }
.js [data-reveal][style*="--delay"].is-in { animation-delay: var(--delay); }

.wiggle { animation: wiggle 1.6s steps(3, end) infinite; transform-origin: 50% 90%; }
.is-swapping { animation: swap 280ms var(--ease-comic); }

/* Cinta de texto corrido: el contenido va duplicado en .marquee__track */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; animation: marquee 28s linear infinite; will-change: transform; }
.marquee__track > * { flex: none; padding-inline: 1.5rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="peek"] > * { transform: translateY(var(--rest, 0%)); }
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ---------- Portada de la edición: llega, choca con la pantalla y saca las hojas ---------- */
@keyframes mag-slam {
  0%   { transform: translate(10%, -130vh) rotate(-26deg) scale(1.7); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.5); }
  52%  { transform: translate(0, 0) rotate(-4deg) scale(1); animation-timing-function: ease-out; }
  60%  { transform: translate(0, 2.4%) rotate(-4deg) scale(0.97, 0.93); animation-timing-function: ease-out; }
  71%  { transform: translate(0, -1.6%) rotate(-4deg) scale(1.02); animation-timing-function: ease-in-out; }
  84%  { transform: translate(0, 0.7%) rotate(-4deg) scale(0.995); }
  100% { transform: translate(0, 0) rotate(-4deg) scale(1); }
}
@keyframes sheet-out { from { transform: translate(0, 0) rotate(0deg); } }
@keyframes impact-stamp {
  0%, 50% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  58%     { opacity: 1; transform: scale(1.55) rotate(14deg); }
  72%, 100% { opacity: 1; transform: scale(1) rotate(9deg); }
}
@keyframes screen-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-7px, 4px); }
  30% { transform: translate(6px, -5px); }
  45% { transform: translate(-5px, -3px); }
  60% { transform: translate(4px, 4px); }
  80% { transform: translate(-2px, 1px); }
}

.js [data-reveal="slam"] { opacity: 1; }
.js [data-reveal="slam"]:not(.is-in) .mag,
.js [data-reveal="slam"]:not(.is-in) .mag__impact { opacity: 0; }
.js [data-reveal="slam"].is-in { animation: none; }
.js .featured.is-in .mag { animation: mag-slam 1150ms backwards; }
.js .featured.is-in .mag__sheet { animation: sheet-out 420ms steps(5, end) backwards; }
.js .featured.is-in .mag__sheet--1 { animation-delay: 640ms; }
.js .featured.is-in .mag__sheet--2 { animation-delay: 720ms; }
.js .featured.is-in .mag__sheet--3 { animation-delay: 800ms; }
.js .featured.is-in .mag__impact { animation: impact-stamp 1150ms backwards; }
.js .featured.is-in .featured__stage { animation: screen-shake 420ms steps(8, end) 590ms; }