@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); }

    /* ---- Hero "Convergencia": pulsos que recorren los tres carriles y encienden la marca ----
       Estado base (encendido) en components.css; aquí se cicla. Solo transform/opacity/dashoffset. */
    .hero-conv .conv-hub         { animation: ks-conv-ignite 7s infinite; }
    .hero-conv .conv-hub-breathe { transform-box: fill-box; transform-origin: center; will-change: transform; animation: ks-conv-breathe 7s infinite; }
    .hero-conv .conv-glowc       { animation: ks-conv-glow 7s infinite; }
    .hero-conv .conv-hex         { animation: ks-conv-hex 7s infinite; }
    .hero-conv .conv-sq,
    .hero-conv .conv-city,
    .hero-conv .conv-geo,
    .hero-conv .conv-ia,
    .hero-conv .conv-out         { transform-box: fill-box; transform-origin: center; will-change: transform; animation: ks-conv-pop 7s infinite; }
    .hero-conv .conv-flow--a, .hero-conv .conv-flow--b { animation: ks-conv-flow 7s linear infinite; }
    .hero-conv .conv-flow--c { animation: ks-conv-flow-ia 7s linear infinite; }

    @keyframes ks-conv-ignite  { 0%, 44% { opacity: .5; } 50%, 86% { opacity: 1; } 100% { opacity: .5; } }
    @keyframes ks-conv-glow    { 0%, 44% { opacity: 0; } 50%, 84% { opacity: .5; } 100% { opacity: 0; } }
    @keyframes ks-conv-breathe { 0%, 48% { transform: scale(1); } 56% { transform: scale(1.02); } 72% { transform: scale(1); } 88% { transform: scale(1.02); } 100% { transform: scale(1); } }
    @keyframes ks-conv-hex     { 0%, 46% { stroke-opacity: .35; } 51% { stroke-opacity: .95; } 60%, 100% { stroke-opacity: .35; } }
    @keyframes ks-conv-pop     { 0%, 46% { transform: scale(1); } 51% { transform: scale(1.3); } 58%, 100% { transform: scale(1); } }
    @keyframes ks-conv-flow    { 0% { stroke-dashoffset: 16; opacity: 0; } 7% { opacity: 0; } 10% { stroke-dashoffset: 16; opacity: 1; } 41% { stroke-dashoffset: -100; opacity: 1; } 45% { stroke-dashoffset: -100; opacity: 0; } 100% { opacity: 0; } }
    @keyframes ks-conv-flow-ia { 0% { stroke-dashoffset: 16; opacity: 0; } 7% { opacity: 0; } 10% { stroke-dashoffset: 16; opacity: 1; } 46% { stroke-dashoffset: -100; opacity: 1; } 50% { stroke-dashoffset: -100; opacity: 0; } 100% { opacity: 0; } }
  }
}