/* ============================================================
   Coreografía de entradas (estándar §6, con los selectores del home)
   · Hero al cargar (gateado por html.js): etiqueta → titular con barrido
     izquierda → derecha → texto → botones desde la izquierda; imagen desde la derecha.
   · Al hacer scroll solo se animan elementos con [data-rv] (los pone entradas.js);
     sin JS todo se ve completo. Con movimiento reducido no se anima nada.
   ============================================================ */

@keyframes wipe-in {
  from { clip-path: inset(-20% 100% -20% -4%); transform: translateX(-18px); }
  to   { clip-path: inset(-20% -4% -20% -4%); transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

.js .hero-text > .hero-eyebrow { animation: fade-in .5s var(--ease-out) backwards; }
.js .hero-text > .hero-h1 { animation: wipe-in .8s var(--ease-out) .12s backwards; }
.js .hero-text > .hero-h1 .hero-accent { display: inline-block; animation: wipe-in .7s var(--ease-out) .45s backwards; }
.js .hero-text > .hero-sub { animation: fade-in .6s var(--ease-out) .75s backwards; }
.js .hero-actions > * { animation: slide-from-left .6s var(--ease-out) backwards; }
.js .hero-actions > *:nth-child(1) { animation-delay: .85s; }
.js .hero-actions > *:nth-child(2) { animation-delay: .95s; }
.js .hero-visual { animation: slide-from-right 1s var(--ease-out) .25s backwards; }

/* ─── Al hacer scroll ─── */
html [data-rv] { transition-delay: var(--stagger, 0ms); }
html .rv-init, html .rv-init *, html .rv-init::before { transition: none !important; }

html [data-rv="left"] { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="left"]:not(.is-in) { opacity: 0; transform: translateX(-28px); }
html [data-rv="right"] { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="right"]:not(.is-in) { opacity: 0; transform: translateX(40px); }
html [data-rv="fade"] { transition: opacity .6s var(--ease-out); transition-delay: var(--stagger, 0ms); }
html [data-rv="fade"]:not(.is-in) { opacity: 0; }

/* Datos destacados: del centro hacia afuera, con un pequeño rebote */
html [data-rv="pop"] { transition: opacity .45s var(--ease-out), transform .6s var(--ease-pop); transition-delay: var(--stagger, 0ms); }
html [data-rv="pop"]:not(.is-in) { opacity: 0; transform: scale(.7); }

/* Barra de refuerzos: uno por uno, cada bloque crece desde su centro */
html [data-rv="grow"] { transition: opacity .35s var(--ease-out), transform .55s var(--ease-pop); transition-delay: var(--stagger, 0ms); transform-origin: center; }
html [data-rv="grow"]:not(.is-in) { opacity: 0; transform: scale(.82); }

/* Títulos de sección: etiqueta → barrido del título → texto */
html [data-rv="intro"] > .eyebrow { transition: opacity .5s var(--ease-out); }
html [data-rv="intro"] > h2 { transition: clip-path .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s; }
html [data-rv="intro"] > p:not(.eyebrow) { transition: opacity .6s var(--ease-out) .45s; }
html [data-rv="intro"]:not(.is-in) > .eyebrow { opacity: 0; }
html [data-rv="intro"]:not(.is-in) > h2 { clip-path: inset(-20% 100% -20% -4%); transform: translateX(-18px); }
html [data-rv="intro"].is-in > h2 { clip-path: inset(-20% -4% -20% -4%); }
html [data-rv="intro"]:not(.is-in) > p:not(.eyebrow) { opacity: 0; }

/* Bloque de cierre: se expande desde el centro; su contenido entra por los lados */
html [data-rv="expand"] { transition: clip-path .9s var(--ease-out), opacity .4s var(--ease-out); }
html [data-rv="expand"]:not(.is-in) { clip-path: inset(0 10%); opacity: 0; }
html [data-rv="expand"].is-in { clip-path: inset(0 0); }
.cta-banner[data-rv] .cta-h2, .cta-banner[data-rv] .cta-sub { transition: opacity .6s var(--ease-out) .3s, transform .7s var(--ease-out) .3s; }
.cta-banner[data-rv] .cta-actions { transition: opacity .6s var(--ease-out) .45s, transform .7s var(--ease-out) .45s; }
.cta-banner[data-rv]:not(.is-in) .cta-h2, .cta-banner[data-rv]:not(.is-in) .cta-sub { opacity: 0; transform: translateX(-28px); }
.cta-banner[data-rv]:not(.is-in) .cta-actions { opacity: 0; transform: translateX(28px); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-text > *, .js .hero-text .hero-accent, .js .hero-actions > *, .js .hero-visual { animation: none; }
}