/* Potencia — capa de movimiento compartida (design-to-motion + landing-page-design).
   Se carga después de los <style> inline de cada página, así que sobreescribe .reveal. */
:root{--ease:cubic-bezier(0.22,1,0.36,1);--ease-io:cubic-bezier(0.65,0,0.35,1)}

/* Reveal al scrollear: sube, se enfoca y aparece */
.reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(5px);
  transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0);filter:none}

/* Hero appear: 6px + blur 2px, en orden de lectura, una sola vez */
.ha{opacity:0;transform:translateY(6px);filter:blur(2px)}
.ha.ha-in{opacity:1;transform:none;filter:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease);
  transition-delay:var(--d,0ms)}

/* Tagline palabra por palabra al scrollear */
.tagline-reveal .w{opacity:.18;transition:opacity .35s var(--ease),color .35s var(--ease)}
.tagline-reveal .w.on{opacity:1}
.tagline-reveal .w.hl.on{color:#a78bfa}

/* Story loops: se pausan fuera de pantalla (motion.js agrega .story-paused) */
.story-paused,.story-paused *{animation-play-state:paused!important}

/* Tipografía */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* Estados */
:focus-visible{outline:2px solid #a78bfa;outline-offset:3px}
button:not(:disabled):active,a.cta-shine:active,a[class*="rounded-full"]:active,a[class*="rounded-xl"][class*="bg-"]:active{transform:scale(.98)}

/* Skip link */
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:#7c3aed;color:#fff;font-weight:700;
  font-size:14px;padding:10px 16px;border-radius:10px;transition:top .25s var(--ease)}
.skip-link:focus{top:16px}

@media (prefers-reduced-motion:reduce){
  .reveal,.ha{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .tagline-reveal .w{opacity:1;transition:none}
}