/* El Faro — movimiento de la APLICACIÓN (solo pantalla; el PDF no lo carga ni le afecta).
   Transiciones entre páginas (View Transitions entre documentos), entrada escalonada del contenido, barras que crecen,
   cifras que cuentan, tarjetas que responden al cursor y paneles plegables que se despliegan.
   Todo dentro de «prefers-reduced-motion: no-preference»: quien pide menos movimiento ve la página quieta. */

@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --suave: cubic-bezier(.2, .7, .2, 1);
    --rebote: cubic-bezier(.34, 1.4, .64, 1);
  }

  /* ───── Transición entre páginas ───── */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms ease-in both salir; }
  ::view-transition-new(root) { animation: 320ms var(--suave) both entrar; }
  /* barra lateral y pestañas se quedan quietas; la píldora activa se desliza a su nueva posición */
  .lateral { view-transition-name: lateral; }
  .pestanas { view-transition-name: pestanas; }
  .lateral__nav a[aria-current="page"] { view-transition-name: lateral-activa; }
  .pestanas a[aria-current="page"] { view-transition-name: pestana-activa; }
  ::view-transition-group(lateral-activa), ::view-transition-group(pestana-activa) { animation-duration: 380ms; animation-timing-function: var(--suave); }
  ::view-transition-old(lateral), ::view-transition-new(lateral), ::view-transition-old(pestanas), ::view-transition-new(pestanas) { animation: none; }

  @keyframes salir { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes entrar { from { opacity: 0; transform: translateY(10px); } }

  /* ───── Entrada escalonada del contenido ───── */
  /* solo opacidad y desplazamiento: los resuelve la GPU sin volver a pintar (un blur repinta cada bloque en cada fotograma) */
  @keyframes aparecer { from { opacity: 0; transform: translateY(12px); } }
  main#contenido > *, .rejilla > *, .kpis > .kpi, .portada__haz, .acceso__haz {
    animation: aparecer 560ms var(--suave) both;
  }
  main#contenido > :nth-child(2), .rejilla > :nth-child(2), .kpis > :nth-child(2) { animation-delay: 60ms; }
  main#contenido > :nth-child(3), .rejilla > :nth-child(3), .kpis > :nth-child(3) { animation-delay: 120ms; }
  main#contenido > :nth-child(4), .rejilla > :nth-child(4), .kpis > :nth-child(4) { animation-delay: 180ms; }
  main#contenido > :nth-child(5) { animation-delay: 240ms; }
  main#contenido > :nth-child(n + 6) { animation-delay: 300ms; }

  /* Listas: cada elemento entra al hacerse visible (si el navegador lo admite); si no, quedan quietos */
  @supports (animation-timeline: view()) {
    .tarjeta-marca, .rival, .hallazgo, .decision {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes revelar { from { opacity: 0; transform: translateY(18px); } }
  }

  /* ───── Barras y progreso ───── */
  .barras__relleno { transform-origin: left center; animation: crecer 900ms var(--suave) both; animation-delay: 200ms; }
  .barras__intervalo { animation: aparecer-simple 600ms ease both; animation-delay: 800ms; }
  .barras__fila:nth-child(2) .barras__relleno { animation-delay: 260ms; }
  .barras__fila:nth-child(3) .barras__relleno { animation-delay: 320ms; }
  .barras__fila:nth-child(4) .barras__relleno { animation-delay: 380ms; }
  .barras__fila:nth-child(n + 5) .barras__relleno { animation-delay: 440ms; }
  @keyframes crecer { from { transform: scaleX(0); } }
  @keyframes aparecer-simple { from { opacity: 0; } }

  .progreso-faro__barra span { position: relative; overflow: hidden; transition: width 700ms var(--suave); }
  .progreso-faro__barra span::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    animation: destello 1.6s linear infinite;
  }
  @keyframes destello { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  /* ───── Respuesta al cursor ───── */
  .tarjeta-marca, .rival, .kpi, .acceso-rapido a, .lanzar .tarjeta {
    transition: transform 260ms var(--suave), background-color 200ms ease;
  }
  /* la sombra no se anima (repintaría la tarjeta en cada fotograma): está ya pintada en una capa que aparece */
  .tarjeta-marca, .rival, .kpi { position: relative; }
  .tarjeta-marca::after, .rival::after, .kpi::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
    opacity: 0; transition: opacity 260ms var(--suave);
  }
  .tarjeta-marca:hover, .rival:hover, .kpi:hover { transform: translateY(-3px); }
  .tarjeta-marca:hover::after, .rival:hover::after, .kpi:hover::after { opacity: 1; }
  .boton, button.boton { transition: transform 120ms var(--rebote), background-color 160ms ease; }
  .boton:hover { transform: translateY(-1px); }
  .boton:active { transform: translateY(0) scale(.97); transition-duration: 60ms; }
  .boton:not(.boton--secundario):not(.boton--fantasma):not(.boton--peligro):hover { box-shadow: 0 6px 20px rgba(0, 102, 230, .35), var(--sombra-pildora); }
  .lateral__nav a, .pestanas a { transition: background-color 180ms ease, color 180ms ease; }
  .lateral__nav a .icono { transition: transform 260ms var(--rebote); }
  .lateral__nav a:hover .icono { transform: translateX(2px) scale(1.08); }
  .matriz__celda { transition: background-color 160ms ease, transform 160ms var(--suave); }
  .matriz__celda:hover { transform: translateY(-1px); }
  input, select, textarea { transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease; }

  /* ───── Plegables: se despliegan en vez de saltar ───── */
  details::details-content { opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 260ms var(--suave), content-visibility 260ms allow-discrete; }
  details[open]::details-content { opacity: 1; transform: none; }
  summary::marker, summary::before { transition: transform 200ms var(--suave); }

  /* ───── Avisos y resultados de formulario ───── */
  .aviso { animation: aviso 420ms var(--rebote) both; }
  @keyframes aviso { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
  .conexion-pasos { animation: aparecer 480ms var(--suave) both; }

  /* resaltado de marcas en una respuesta: se «encienden» al llegar */
  .respuesta__texto mark { animation: encender 900ms ease both; animation-delay: 350ms; }
  @keyframes encender { from { background-color: transparent; box-shadow: none; } }
}