/* ============================================================
   animations.css — Revelado al hacer scroll y keyframes
   Todo se desactiva con prefers-reduced-motion.
   ============================================================ */

/* ---------- Revelado al hacer scroll ----------
   Solo se ocultan si JS está activo (clase .js en <html>),
   así el contenido nunca queda invisible sin JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s var(--ease-out) var(--d, 0s),
    transform .8s var(--ease-out) var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Título del hero palabra por palabra ---------- */
.js [data-split]:not(.is-split) { visibility: hidden; }
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: wordUp .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms + 150ms);
}

/* Subrayado dibujado bajo la palabra resaltada del hero */
.hero__title .hl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .14em;
  border-radius: 99px;
  background: var(--terra);
  opacity: .28;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline .8s var(--ease-out) 1.05s forwards;
}

/* ---------- Elementos flotantes ---------- */
.float-card { animation: float 6s ease-in-out infinite; }
.float-card--b { animation-delay: -2s; }
.float-card--c { animation-delay: -4s; }

.dots--a { animation: spin 120s linear infinite; }
.dots--b { animation: float 9s ease-in-out infinite; }
.dots--c { animation: spin 80s linear infinite reverse; }
.dots--d, .dots--e { animation: spin 140s linear infinite; }

/* ---------- Keyframes ---------- */
@keyframes wordUp { to { transform: none; } }
@keyframes underline { to { transform: scaleX(1); } }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes spin { to { rotate: 360deg; } }

@keyframes marquee { to { transform: translateX(-50%); } }

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(224, 122, 95, .6); }
  80%, 100% { box-shadow: 0 0 0 10px rgba(224, 122, 95, 0); }
}

@keyframes stamp {
  0% { transform: scale(1.6) rotate(-14deg); opacity: 0; }
  60% { transform: scale(.9) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}

@keyframes scrollCue {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}

@keyframes bump {
  50% { transform: scale(1.25); }
}

@keyframes confetti {
  to {
    transform: translate(var(--x), 640px) rotate(var(--r));
    opacity: 0;
  }
}

@keyframes zap {
  0%, 70%, 100% { transform: none; }
  75% { transform: scale(1.25) rotate(-10deg); }
  85% { transform: scale(.95) rotate(6deg); }
}

@keyframes measure {
  0%, 15% { transform: scaleX(.35); }
  55%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(.35); }
}

@keyframes grow {
  0%, 10% { transform: scaleY(.3); }
  50%, 85% { transform: scaleY(1); }
  100% { transform: scaleY(.3); }
}
.pillar__art--grow span { transform-origin: bottom; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .marquee__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}