/*
 * Animaciones ligadas al scroll de las vistas públicas (landing y planes/registro).
 *
 * Reglas de la casa:
 * - Solo con `animation-timeline` nativo (scroll-driven, sin JS) y solo si el usuario no pide
 *   menos movimiento. Sin soporte o con movimiento reducido, la página queda como siempre
 *   (el reveal por IntersectionObserver de cada plantilla sigue de respaldo).
 * - Se anima `opacity`, `translate` y `scale`, nunca `transform`: así no se pisan los hover de
 *   tarjetas y botones, que usan `transform`.
 * - Los keyframes de entrada solo declaran el `from`: al acabar, el elemento vuelve a su estilo
 *   normal (hover incluido).
 * - Rangos cortos de `entry`: todo queda quieto y legible en cuanto está en pantalla; nada
 *   depende de llegar al final de la página para verse entero.
 */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* ---------- Progreso de lectura: una línea fina sobre la barra de navegación ---------- */
    nav.topnav::before,
    .ag-public-header::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 2px;
      background: linear-gradient(90deg, #00D4FF, #7B61FF);
      box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
      transform-origin: 0 50%;
      scale: 0 1;
      animation: ag-sd-progreso linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
    @keyframes ag-sd-progreso { to { scale: 1 1; } }

    /* ---------- La barra se asienta al empezar a bajar: más opaca y con sombra ---------- */
    nav.topnav .nav-inner,
    .ag-public-header .ag-nav-inner {
      animation: ag-sd-barra linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
    @keyframes ag-sd-barra {
      to {
        background: rgba(5, 10, 20, 0.86);
        border-color: rgba(120, 180, 255, 0.22);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
      }
    }

    /* ---------- Entrada de bloques: suben y aparecen al entrar en pantalla ---------- */
    /* El reveal antiguo (opacidad 0 hasta que el JS pone `.visible`) se neutraliza: aquí manda el
       scroll. `html` sube la especificidad sobre el CSS en línea de cada plantilla. */
    html :is(.reveal, .ag-reveal) {
      opacity: 1;
      transform: none;
    }
    .reveal,
    .ag-reveal,
    .ag-plan,
    .sp-card,
    .pillar {
      animation: ag-sd-entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes ag-sd-entrar {
      from { opacity: 0; translate: 0 32px; }
    }

    /* Vistas con `public_base` (planes, registro): el pie es fijo y tapa la franja de abajo, así
       que la ventana de la animación la descuenta; si no, lo que entra se anima detrás del pie. */
    .ag-reveal,
    .ag-plan {
      animation-timeline: view(block 0px 120px);
    }
    /* Las tarjetas de planes entran como una fila, a la vez y alineadas: una tabla de precios
       escalonada parece descolocada. Más corto y sin tanto recorrido. */
    .ag-plan {
      animation-name: ag-sd-entrar-suave;
      animation-range: entry 0% entry 30%;
    }
    @keyframes ag-sd-entrar-suave {
      from { opacity: 0.25; translate: 0 18px; }
    }

    /* En rejilla, escalonadas: cada columna acaba un poco después que la anterior */
    :is(.geo-grid, .testimonial-grid, .pillars, .sp-grid) > :nth-child(3n + 2) {
      animation-range: entry 0% entry 85%;
    }
    :is(.geo-grid, .testimonial-grid, .pillars, .sp-grid) > :nth-child(3n + 3) {
      animation-range: entry 0% entry 100%;
    }

    /* ---------- Portada: al irse hacia arriba se aleja con suavidad ---------- */
    .hero-content,
    .ag-plans-head {
      animation: ag-sd-salir linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes ag-sd-salir {
      to { opacity: 0.15; translate: 0 -48px; scale: 0.985; }
    }

    /* ---------- «Cinco pasos»: una línea que se completa paso a paso al recorrer la sección ---------- */
    .flow-grid {
      view-timeline: --ag-flujo block;
    }
    .flow-step {
      position: relative;
    }
    .flow-step::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 2px;
      background: linear-gradient(90deg, #00D4FF, #7B61FF);
      transform-origin: 0 50%;
      scale: 0 1;
      animation: ag-sd-paso linear both;
      animation-timeline: --ag-flujo;
    }
    .flow-step:nth-child(1)::before { animation-range: entry 60% cover 30%; }
    .flow-step:nth-child(2)::before { animation-range: cover 30% cover 38%; }
    .flow-step:nth-child(3)::before { animation-range: cover 38% cover 46%; }
    .flow-step:nth-child(4)::before { animation-range: cover 46% cover 54%; }
    .flow-step:nth-child(5)::before { animation-range: cover 54% cover 62%; }
    @keyframes ag-sd-paso { to { scale: 1 1; } }

    /* ---------- Titulares de sección: el degradado del texto destacado se desliza al pasar ---------- */
    .section-header h2 em,
    .ag-ai-copy h2 em,
    .ag-plans-head h1 em {
      background-size: 220% 100%;
      animation: ag-sd-brillo linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 60%;
    }
    @keyframes ag-sd-brillo {
      from { background-position: 100% 0; }
      to { background-position: 0% 0; }
    }
  }
}