/* ============================================================
   animations.css — Movimiento
   Principios: solo transform y opacity (salvo la máscara de imágenes),
   una curva de salida suave, ritmos distintos por sección, nada
   infinito ni con rebotes. Los estados ocultos solo existen con
   html.js (si no hay JavaScript, todo se ve).
   ============================================================ */

/* ---------- Entrada del hero (inicio) ---------- */
/* Cada pieza lleva data-hero y --d (orden). Las líneas del título suben
   desde una máscara; la foto aparece con fade + leve escala. */
.js .hero [data-hero] {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 1000ms var(--ease-out-expo) forwards;
  animation-delay: calc(140ms + var(--d, 0) * 110ms);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: block; }
.js .hero__title .line > span {
  transform: translateY(105%);
  animation: line-up 1100ms var(--ease-out-expo) forwards;
  animation-delay: calc(220ms + var(--l, 0) * 120ms);
}
.js .hero__frame {
  opacity: 0;
  transform: scale(1.04);
  animation: frame-in 1500ms var(--ease-out-expo) 200ms forwards;
}
.js .hero__ring { opacity: 0; animation: fade 1600ms var(--ease) 600ms forwards; }
.js .float-card {
  opacity: 0;
  translate: 0 14px;
  animation: card-in 900ms var(--ease-out-expo) forwards;
  animation-delay: calc(900ms + var(--d, 0) * 160ms);
}
.js .hero__link-line path {
  stroke-dashoffset: 400;
  animation: draw 1600ms var(--ease-in-out) 1300ms forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes frame-in { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes card-in { to { opacity: 1; translate: 0 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Encabezado de páginas internas: misma familia de entrada, más breve */
.js .phero [data-hero] {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 900ms var(--ease-out-expo) forwards;
  animation-delay: calc(80ms + var(--d, 0) * 90ms);
}
.js .phero .phero__media { opacity: 0; transform: scale(1.03); animation: frame-in 1300ms var(--ease-out-expo) 250ms forwards; }

/* ---------- Reveal al hacer scroll (motion.js agrega .is-in) ---------- */
/* data-reveal = up (por defecto) · fade · scale · mask (imágenes) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 1000ms var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal="fade"] { transform: none; transition-duration: 1100ms; }
.js [data-reveal="scale"] { transform: scale(0.97); }
.js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(14% 0 0 0 round var(--r-xl));
  transition: clip-path 1300ms var(--ease-out-expo);
}
.js [data-reveal="mask"] img { transform: scale(1.08); transition: transform 1600ms var(--ease-out-expo); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.js [data-reveal="mask"].is-in img { transform: none; }
.media-frame--arch[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round 999px 999px var(--r-xl) var(--r-xl)); }
.js .media-frame--arch[data-reveal="mask"] { clip-path: inset(14% 0 0 0 round 999px 999px var(--r-xl) var(--r-xl)); }

/* Cascada: los hijos directos entran uno tras otro (motion.js asigna --i) */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 900ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--step, 70ms));
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
/* Al terminar la entrada, los hovers responden sin retraso */
.js [data-stagger].is-done > * { transition-delay: 0ms; }

/* ---------- Parallax (motion.js mueve --py en px) ---------- */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }

/* ---------- Reducir movimiento: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero [data-hero], .js .hero__title .line > span, .js .hero__frame, .js .hero__ring, .js .float-card,
  .js .phero [data-hero], .js .phero .phero__media,
  .js [data-reveal], .js [data-stagger] > *, .js [data-reveal="mask"] img {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .hero__link-line path { stroke-dashoffset: 0; animation: none; }
  [data-parallax] { translate: none !important; }
  .status.is-open::before { animation: none; }
}