/* ==========================================================================
   BIANCHINI AGROTECH — CAPA DE ANIMACIÓN (100% nativa, sin librerías)
   --------------------------------------------------------------------------
   Reemplaza a GSAP + ScrollTrigger, que se cargaban desde cdnjs.

   TRES NIVELES, de mejor a peor, y en los tres se ve TODO el contenido:

     1. El navegador entiende `animation-timeline` -> la animación la maneja
        el compositor, sin JS. Es lo más fluido que se puede conseguir.
     2. No lo entiende pero hay JS -> motor.js pone la clase .anim-js y las
        mismas animaciones corren con IntersectionObserver.
     3. No hay JS -> no se agrega ninguna clase y todo queda visible y quieto.

   Por eso el estado por defecto de .revelar es VISIBLE. Lo ocultamos solo
   cuando ya sabemos que lo vamos a poder mostrar de nuevo. Un revelado que
   se traba y deja la sección invisible es peor que no tener animación.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes ag-aparecer      { from { opacity: 0; transform: translateY(28px); } }
@keyframes ag-aparecer-izq  { from { opacity: 0; transform: translateX(-44px); } }
@keyframes ag-aparecer-der  { from { opacity: 0; transform: translateX(44px); } }
@keyframes ag-escalar       { from { opacity: 0; transform: scale(.94); } }
@keyframes ag-crecer-x      { from { transform: scaleX(0); } }
@keyframes ag-caer-pin      { from { opacity: 0; transform: translateY(-26px) scale(.5); } }
@keyframes ag-dibujar       { from { stroke-dashoffset: var(--largo, 1000); } }
@keyframes ag-latir         { 50% { transform: scale(1.06); } }

/* --------------------------------------------------------------------------
   2. REVELADOS AL SCROLLEAR — versión nativa (nivel 1)
   --------------------------------------------------------------------------
   `animation-timeline: view()` ata la animación a la posición del elemento
   dentro de la ventana. `animation-range` dice en qué tramo ocurre:
   arranca cuando asoma un 12% y termina cuando entró un 42%.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
    html.anim-scroll :is(.revelar, .revelar-izq, .revelar-der, .revelar-escala) {
        animation: ag-aparecer both linear;
        animation-timeline: view();
        animation-range: entry 12% cover 42%;
    }
    html.anim-scroll .revelar-izq    { animation-name: ag-aparecer-izq; }
    html.anim-scroll .revelar-der    { animation-name: ag-aparecer-der; }
    html.anim-scroll .revelar-escala { animation-name: ag-escalar; }

    /* Barras de progreso que se llenan a medida que subís. */
    html.anim-scroll .barra-scroll {
        transform-origin: left center;
        animation: ag-crecer-x both linear;
        animation-timeline: view();
        animation-range: entry 20% cover 50%;
    }

    /* Barra de progreso de lectura, arriba de todo. Usa el scroll del
       documento entero en vez de la posición de un elemento. */
    html.anim-scroll .progreso-lectura {
        transform-origin: left center;
        animation: ag-crecer-x both linear;
        animation-timeline: scroll(root block);
    }
}

/* --------------------------------------------------------------------------
   3. REVELADOS — versión con JS (nivel 2)
   -------------------------------------------------------------------------- */
html.anim-js :is(.revelar, .revelar-izq, .revelar-der, .revelar-escala) {
    opacity: 0;
    transition: opacity .75s var(--ease-salida), transform .75s var(--ease-salida);
    transition-delay: var(--retraso, 0ms);
}
html.anim-js .revelar        { transform: translateY(28px); }
html.anim-js .revelar-izq    { transform: translateX(-44px); }
html.anim-js .revelar-der    { transform: translateX(44px); }
html.anim-js .revelar-escala { transform: scale(.94); }
html.anim-js :is(.revelar, .revelar-izq, .revelar-der, .revelar-escala).visto {
    opacity: 1; transform: none;
}
html.anim-js .barra-scroll {
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.4s var(--ease-salida);
}
html.anim-js .barra-scroll.visto { transform: scaleX(1); }

/* Escalonado: cada tarjeta sale un toque después que la anterior.
   El HTML solo pone style="--i:3" y el CSS hace la cuenta. */
.escalonado > *                  { --retraso: calc(var(--i, 0) * 70ms); }
html.anim-scroll .escalonado > * { animation-delay: calc(var(--i, 0) * 40ms); }

/* --------------------------------------------------------------------------
   4. BARRA DE PROGRESO DE LECTURA
   -------------------------------------------------------------------------- */
.progreso-lectura {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1200;
    background: linear-gradient(90deg, var(--tinta-600), var(--acento));
    transform: scaleX(0); transform-origin: left center;
}

/* --------------------------------------------------------------------------
   5. SCROLLYTELLING — el mockup queda clavado y el texto cambia al lado
   -------------------------------------------------------------------------- */
.escena           { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7);
                    align-items: start; }
.escena-pegada    { position: sticky; top: 100px; align-self: start; }
.escena-pasos > * { min-height: 62vh; display: flex; flex-direction: column;
                    justify-content: center; }
@media (max-width: 900px) {
    .escena { grid-template-columns: 1fr; }
    .escena-pegada { position: static; }
    .escena-pasos > * { min-height: 0; margin-bottom: var(--e-6); }
}

/* --------------------------------------------------------------------------
   6. CARRIL HORIZONTAL CON IMANTADO ("Un día en la concesionaria")
   -------------------------------------------------------------------------- */
.carril {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 330px);
    gap: var(--e-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: var(--e-4) var(--e-4) var(--e-5);
    scrollbar-width: thin;
}
.carril > * { scroll-snap-align: center; }
.carril::-webkit-scrollbar { height: 8px; }
.carril::-webkit-scrollbar-thumb { background: var(--tinta-300); border-radius: var(--r-full); }

/* --------------------------------------------------------------------------
   7. DESPLEGABLES QUE SE ANIMAN DE VERDAD
   --------------------------------------------------------------------------
   `interpolate-size: allow-keywords` es lo que por fin permite transicionar
   hasta `height: auto`. Donde no está, el desplegable abre de golpe: sigue
   funcionando perfecto, solo que sin deslizarse.
   -------------------------------------------------------------------------- */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
}
details.plegable { border-bottom: 1px solid var(--linea); }
details.plegable > summary {
    cursor: pointer; list-style: none; padding: var(--e-4) var(--e-6) var(--e-4) 0;
    font-weight: 700; color: var(--tinta-900); position: relative;
    font-size: var(--t-cuerpo); display: block;
}
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after {
    content: "+"; position: absolute; right: var(--e-2); top: 50%;
    translate: 0 -50%; font-size: 1.5rem; font-weight: 400; line-height: 1;
    color: var(--tinta-500); transition: rotate var(--v-medio) var(--ease-rebote);
}
details.plegable[open] > summary::after { rotate: 135deg; }
details.plegable > summary:hover { color: var(--tinta-600); }

@supports selector(::details-content) {
    details.plegable::details-content {
        block-size: 0; overflow: hidden;
        transition: block-size var(--v-medio) var(--ease-suave),
                    content-visibility var(--v-medio) allow-discrete;
    }
    details.plegable[open]::details-content { block-size: auto; }
}
details.plegable .plegable-cuerpo {
    padding-bottom: var(--e-5); color: var(--texto-2); line-height: 1.65;
    max-width: var(--ancho-texto);
}

/* --------------------------------------------------------------------------
   8. PANELES `popover` NATIVOS (el mapa de módulos)
   --------------------------------------------------------------------------
   El atributo popover regala Escape, cerrar al clickear afuera y manejo de
   foco. Escribir eso a mano son ~60 líneas de JS que siempre quedan a medias.
   -------------------------------------------------------------------------- */
[popover].panel-modulo {
    border: none; padding: 0; max-width: min(94vw, 780px); width: 100%;
    border-radius: var(--r-4); box-shadow: var(--s-4);
    background: var(--papel); color: var(--texto);

    /* ----------------------------------------------------------------------
       ESTAS TRES LÍNEAS ARREGLAN UN BUG QUE TARDÓ EN APARECER. NO LAS SAQUES.

       El navegador centra un `popover` con el `margin: auto` de su hoja de
       estilos propia, y ese mismo `auto` es el que además lo obliga a entrar
       en la pantalla. Pero `styles.css` abre con `* { margin: 0 }`, que le
       gana por orden de carga y lo deja en `margin: 0`.

       Con `inset: 0` y `margin: 0` pasaban las dos cosas juntas:
         · el panel se pegaba al borde IZQUIERDO en vez de quedar al medio;
         · y dejaba de limitarse al alto de la ventana, así que un panel de
           1031px en una pantalla de 900 se cortaba abajo y esos últimos
           130px no había forma de verlos. El visitante quedaba trabado.

       Devolverle el `auto` arregla las dos de una: centra en los dos ejes y
       vuelve a respetar el `max-height`. El `overflow` hace que el contenido
       largo scrollee ADENTRO del panel, y `overscroll-behavior: contain`
       evita que al llegar al final se empiece a mover la página de atrás.
       ---------------------------------------------------------------------- */
    margin: auto;
    /* Dos veces a propósito: si el navegador no entiende `dvh` descarta esa
       línea entera y se queda con la de arriba. Sin el respaldo, en un
       navegador viejo no habría NINGÚN tope de alto y vuelve el bug. */
    max-height: min(92vh, 940px);
    max-height: min(92dvh, 940px);
    overflow: auto;
    overscroll-behavior: contain;

    opacity: 0; scale: .96; translate: 0 12px;
    transition: opacity var(--v-medio) var(--ease-salida),
                scale var(--v-medio) var(--ease-salida),
                translate var(--v-medio) var(--ease-salida),
                display var(--v-medio) allow-discrete,
                overlay var(--v-medio) allow-discrete;
}
[popover].panel-modulo:popover-open { opacity: 1; scale: 1; translate: 0 0; }
@starting-style {
    [popover].panel-modulo:popover-open { opacity: 0; scale: .96; translate: 0 12px; }
}
[popover].panel-modulo::backdrop {
    background: color-mix(in oklab, var(--tinta-950) 62%, transparent);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--v-medio) var(--ease-suave), display var(--v-medio) allow-discrete;
}
[popover].panel-modulo:popover-open::backdrop { opacity: 1; }
@starting-style { [popover].panel-modulo:popover-open::backdrop { opacity: 0; } }

/* --------------------------------------------------------------------------
   9. CONTADOR EN CSS PURO
   --------------------------------------------------------------------------
   Con @property el navegador sabe que --n es un entero y puede interpolarlo.
   counter() lo imprime. Un número que cuenta solo, sin JS.
   Para los importes con separador de miles seguimos usando JS: counter() no
   sabe formatear 11.626 a la argentina.
   -------------------------------------------------------------------------- */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.contador-css { counter-reset: ag var(--n); }
.contador-css::after { content: counter(ag); }
@keyframes ag-contar { from { --n: 0; } }
@supports (animation-timeline: view()) {
    html.anim-scroll .contador-css {
        animation: ag-contar 1s both linear;
        animation-timeline: view();
        animation-range: entry 20% cover 45%;
    }
}

/* --------------------------------------------------------------------------
   10. TRANSICIÓN ENTRE PÁGINAS
   --------------------------------------------------------------------------
   Tres líneas y navegar de la home a /funciones/taller deja de ser un
   parpadeo blanco. El nombre compartido hace que la ficha del módulo se
   agrande y SE CONVIERTA en el encabezado de la página destino.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ag-vt-salir .22s var(--ease-suave) both; }
::view-transition-new(root) { animation: ag-vt-entrar .32s var(--ease-salida) both; }
@keyframes ag-vt-salir  { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes ag-vt-entrar { from { opacity: 0; transform: translateY(10px); } }
.vt-titulo { view-transition-name: ag-titulo; }
.vt-heroe  { view-transition-name: ag-heroe; }

/* --------------------------------------------------------------------------
   11. MOCKUPS CON PROFUNDIDAD (se inclinan siguiendo el mouse)
   --------------------------------------------------------------------------
   motor.js solo escribe --rx y --ry. Toda la geometría vive acá.
   -------------------------------------------------------------------------- */
.tilt { perspective: 1200px; }
.tilt > * {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform var(--v-medio) var(--ease-salida);
    will-change: transform;
}
.iso { transform: perspective(1600px) rotateX(6deg) rotateY(-11deg) rotateZ(1deg); }

/* --------------------------------------------------------------------------
   12. FOCO DE LUZ QUE SIGUE AL PUNTERO
   -------------------------------------------------------------------------- */
.reflector { position: relative; overflow: hidden; }
.reflector::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0; transition: opacity var(--v-medio) var(--ease-suave);
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in oklab, var(--acento) 20%, transparent), transparent 65%);
}
.reflector:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   13. SVG QUE SE DIBUJA SOLO (recorridas y lotes del mapa)
   -------------------------------------------------------------------------- */
.trazo { stroke-dasharray: var(--largo, 1000); stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
    html.anim-scroll .trazo {
        animation: ag-dibujar both linear;
        animation-timeline: view();
        animation-range: entry 10% cover 55%;
    }
}
html.anim-js .trazo {
    stroke-dashoffset: var(--largo, 1000);
    transition: stroke-dashoffset 2s var(--ease-suave);
}
html.anim-js .trazo.visto { stroke-dashoffset: 0; }

.pin-mapa { transform-origin: center bottom; }
@supports (animation-timeline: view()) {
    html.anim-scroll .pin-mapa {
        animation: ag-caer-pin .5s both var(--ease-rebote);
        animation-timeline: view();
        animation-range: entry 8% entry 45%;
        animation-delay: calc(var(--i, 0) * 80ms);
    }
}
html.anim-js .pin-mapa {
    opacity: 0; transform: translateY(-26px) scale(.5);
    transition: opacity .5s var(--ease-rebote) calc(var(--i, 0) * 80ms),
                transform .5s var(--ease-rebote) calc(var(--i, 0) * 80ms);
}
html.anim-js .pin-mapa.visto { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   14. RENDIMIENTO
   --------------------------------------------------------------------------
   La página es larga. content-visibility le dice al navegador que no gaste
   en dibujar lo que todavía está lejos. El tamaño estimado evita que la
   barra de scroll pegue saltos a medida que aparece el contenido.
   -------------------------------------------------------------------------- */
.seccion-diferida { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* --------------------------------------------------------------------------
   15. EL INTERRUPTOR GENERAL
   --------------------------------------------------------------------------
   Quien configuró su sistema para reducir el movimiento (mareos, vértigo,
   migraña) ve la página completa y quieta. No es un detalle opcional: es
   la diferencia entre una página profesional y una genérica.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.anim-scroll :is(.revelar, .revelar-izq, .revelar-der, .revelar-escala,
                         .barra-scroll, .trazo, .pin-mapa, .contador-css,
                         .progreso-lectura) { animation: none !important; }
    html.anim-js :is(.revelar, .revelar-izq, .revelar-der, .revelar-escala,
                     .barra-scroll, .trazo, .pin-mapa) {
        opacity: 1 !important; transform: none !important;
        stroke-dashoffset: 0 !important; transition: none !important;
    }
    .tilt > * { transform: none !important; }
    .carril { scroll-snap-type: none; }
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    @view-transition { navigation: none; }
}