/* ============================================================
   SATVALIS · Movimiento de portada
   Solo lo carga index.html, DESPUÉS de assets/css/motion.css.
   Rigen las dos reglas de motion.css: nada se oculta en el estado
   base, y una sola curva var(--ease).
   ============================================================ */

/* ============================================================
   1 · ENTRADA DEL HÉROE
   Texto y video llegan una sola vez, escalonados. Los fotogramas
   llega y revela-media los define motion.css.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .has-js .home-hero h1    { animation: llega 700ms var(--ease) 80ms backwards; }
    .has-js .home-hero .lead { animation: llega 700ms var(--ease) 220ms backwards; }
    .has-js .home-hero .hero-actions { animation: llega 620ms var(--ease) 340ms backwards; }
    .has-js .home-hero-media { animation: revela-media 1100ms var(--ease) 160ms both; }
    .has-js .assurances      { animation: llega 700ms var(--ease) 520ms backwards; }
}

/* ============================================================
   4 · SÍNTESIS — los iconos de sector se dibujan
   Los cuatro iconos son trazo puro. Dibujarlos en lugar de
   fundirlos convierte su entrada en una síntesis: la estructura
   se construye ante el visitante. El JS normaliza pathLength a 1
   y añade .icons-ready, para que el trazo discontinuo no se vea
   antes de que el motor sepa medirlo.
   ============================================================ */

/* Igual que las imágenes: el icono es un icono normal en reposo. El
   trazo discontinuo solo existe mientras dura la animación. */
@media (prefers-reduced-motion: no-preference) {
    .icons-ready .section--sectores .card.is-drawn .card-icon svg > * {
        animation: sintetiza 820ms var(--ease) backwards;
    }
    /* Cada trazo del icono entra detrás del anterior, tope 240 ms */
    .icons-ready .section--sectores .card.is-drawn .card-icon svg > *:nth-child(2) { animation-delay: 80ms; }
    .icons-ready .section--sectores .card.is-drawn .card-icon svg > *:nth-child(3) { animation-delay: 160ms; }
    .icons-ready .section--sectores .card.is-drawn .card-icon svg > *:nth-child(4) { animation-delay: 240ms; }
}

/* pathLength no está igual de soportado en <circle> que en <path>: al
   terminar se suelta el guion por completo, de modo que el estado en
   reposo es un trazo continuo aunque el navegador lo haya ignorado. */
@keyframes sintetiza {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    98%  { stroke-dasharray: 1; stroke-dashoffset: 0; }
    to   { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Las cuatro tarjetas de sector sí son una lista: el escalonado
   está justificado. Tope total 240 ms para que no se lea como cola. */
@media (prefers-reduced-motion: no-preference) {
    .has-js .section--sectores .grid > .reveal:nth-child(2) { transition-delay: 80ms; }
    .has-js .section--sectores .grid > .reveal:nth-child(3) { transition-delay: 160ms; }
    .has-js .section--sectores .grid > .reveal:nth-child(4) { transition-delay: 240ms; }
}

/* ============================================================
   5 · EL FRENTE REGRESA — las imágenes se revelan igual
   Mismo gesto que el titular, sin protagonismo: dos apariciones
   de una misma idea, no dos efectos distintos.
   ============================================================ */

/* La imagen NUNCA se oculta en el estado base: si el observador no
   llega a activarse, se ve. El recorte inicial vive dentro del
   fotograma "from" y solo existe mientras la animación corre. */
.reveal-wipe { position: relative; }

@media (prefers-reduced-motion: no-preference) {
    .has-js .reveal-wipe.is-in {
        animation: revela-media 1000ms var(--ease) both;
    }
    .has-js .reveal-wipe.is-in::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(100deg,
                    transparent 42%,
                    rgba(46, 158, 148, .45) 48%,
                    rgba(214, 255, 249, .85) 50%,
                    rgba(46, 158, 148, .45) 52%,
                    transparent 58%);
        filter: blur(6px);
        transform: translateX(-104%);
        animation: corre-frente 1100ms var(--ease) forwards;
    }
}

/* revela-media lo define motion.css */

/* ============================================================
   7 · LA VIÑETA MOLECULAR REACCIONA
   Las viñetas de la lista de servicios ya son células con halo.
   Al entrar en pantalla el halo se expande una vez, como una
   reacción que ocurre y se asienta.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    .has-js .split--soluciones .reveal.in .feature-list li::before {
        animation: reacciona-halo 900ms var(--ease) forwards;
    }
    .has-js .split--soluciones .reveal.in .feature-list li:nth-child(2)::before { animation-delay: 120ms; }
    .has-js .split--soluciones .reveal.in .feature-list li:nth-child(3)::before { animation-delay: 240ms; }
}

@keyframes reacciona-halo {
    0%   { box-shadow: 0 0 0 0 var(--teal-25); }
    55%  { box-shadow: 0 0 0 10px rgba(46, 158, 148, 0); }
    100% { box-shadow: 0 0 0 4px var(--teal-12); }
}