@layer motion {
  /* Todo el movimiento se desactiva por completo si el usuario lo prefiere. */
  @media (prefers-reduced-motion: no-preference) {

    /* ---- Reveal al hacer scroll ----
       reveal.js añade la clase .reveal (y luego .is-visible).
       Sin JS: los elementos no reciben .reveal y se ven normales (mejora progresiva). */
    .reveal { opacity: 0; transform: translateY(26px) scale(.985);
      transition: opacity .7s ease, transform .8s cubic-bezier(.22, .7, .2, 1); }
    .reveal.is-visible { opacity: 1; transform: none; }

    /* ---- Entrada del hero (CSS puro, sin JS) ---- */
    .hero .eyebrow, .hero h1, .hero__lead, .hero__cta { animation: ks-rise .7s both; }
    .hero .eyebrow { animation-delay: .04s; }
    .hero h1       { animation-delay: .12s; }
    .hero__lead    { animation-delay: .24s; }
    .hero__cta     { animation-delay: .34s; }
    .hero__art     { animation: ks-pop .9s .15s both; }
    .hero__art img { animation: ks-bob 6s ease-in-out 1.2s infinite; }

    @keyframes ks-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    @keyframes ks-pop  { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes ks-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

    /* ---- Aurora del hero (deriva lenta, solo transform = capa de composición) ---- */
    .hero-aurora::before { animation: ks-aurora-a 22s ease-in-out infinite alternate; will-change: transform; }
    .hero-aurora::after  { animation: ks-aurora-b 27s ease-in-out infinite alternate; will-change: transform; }
    @keyframes ks-aurora-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 7%, 0) scale(1.15); } }
    @keyframes ks-aurora-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8%, -6%, 0) scale(1.1); } }

    /* ---- Micro-interacciones ---- */
    .btn--lg { position: relative; overflow: hidden; isolation: isolate; }
    .btn--lg::after { content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .28), transparent 65%);
      transform: translateX(-130%); transition: transform .6s ease; }
    .btn--lg:hover::after { transform: translateX(130%); }

    .card__icon { transition: transform .3s cubic-bezier(.22, .7, .2, 1); }
    .card:hover .card__icon { transform: translateY(-2px) scale(1.06); }

    /* ---- Muro de clientes: apertura/cierre suave ---- */
    .clients-wrap.is-collapsible { transition: max-height .5s cubic-bezier(.22, .7, .2, 1); }
  }
}