/**
 * Animation layer (GSAP). Estado inicial anti-FOUC y utilidades de movimiento.
 *
 * `html.js-anim` lo agrega un script inline en <head> solo si hay JS y el
 * usuario no pide movimiento reducido. GSAP revela cada elemento con autoAlpha;
 * si GSAP no llega a cargar, un timeout quita la clase y todo queda visible.
 */

html.js-anim [data-anim],
html.js-anim .section-heading {
    visibility: hidden;
}

/* Los heroes no se ocultan: su fondo debe pintarse de inmediato. */
html.js-anim [data-anim-hero] {
    visibility: visible;
}

/*
 * Fondo de los heroes: vive en ::before (pintado desde el primer frame, sin
 * nodos que JS cree despues). GSAP solo anima las variables --hero-scale /
 * --hero-y de la seccion. Sin JS o con movimiento reducido valen 1 y 0.
 */
.page-hero[data-anim-hero] {
    background: #20262c;
}

.page-hero[data-anim-hero]::before,
.home-page .home-hero[data-anim-hero]::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform-origin: 50% 40%;
    scale: var(--hero-scale, 1);
    translate: 0 var(--hero-y, 0%);
    pointer-events: none;
    content: "";
}

/* Video de fondo del home y su poster: mismo scale-out y parallax que la imagen. */
.home-page .home-hero[data-anim-hero] .home-hero__video,
.home-page .home-hero[data-anim-hero] .home-hero__poster {
    transform-origin: 50% 40%;
    scale: var(--hero-scale, 1);
    translate: 0 var(--hero-y, 0%);
}

[data-hero-intro] .home-hero__video,
[data-hero-scroll] .home-hero__video,
[data-hero-intro] .home-hero__poster,
[data-hero-scroll] .home-hero__poster {
    will-change: scale, translate;
}

.page-hero[data-anim-hero]::before {
    background:
        linear-gradient(rgba(32, 38, 44, 0.62), rgba(32, 38, 44, 0.62)),
        var(--page-hero-image, none) center / cover no-repeat;
}

@media (min-width: 1101px) {
    body.page-template-page-noticias .page-hero[data-anim-hero]::before {
        background-position: 0 0, center calc(-14.5vw);
        background-size: auto, 103% auto;
    }
}

/* Vista de categoria: fondo plano sin foto (lo pinta la seccion). */
body.category .page-hero[data-anim-hero]::before {
    display: none;
}

.home-page .home-hero[data-anim-hero] {
    overflow: clip;
}

/* Estado inicial del scale-out: coincide con el primer valor de la animacion. */
html.js-anim .page-hero[data-anim-hero] {
    --hero-scale: 1.1;
}

html.js-anim .home-page .home-hero[data-anim-hero] {
    --hero-scale: 1.12;
}

/* Capa compuesta solo mientras se mueve (JS pone/quita estos atributos). */
[data-hero-intro]::before,
[data-hero-scroll]::before {
    will-change: scale, translate;
}

/* Lineas de SplitText: evita que el recorte corte acentos y descendentes. */
.anim-line-mask {
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

/*
 * Parallax de media (VinsonAnim.parallaxMedia). Usa las propiedades
 * individuales `translate` / `scale` para no competir con el `transform`
 * de hovers CSS ni con el reveal de data-anim="media".
 */
.anim-parallax {
    overflow: hidden;
}

.anim-parallax__inner {
    scale: var(--anim-pscale, 1.12);
    translate: 0 var(--anim-py, 0%);
    will-change: translate;
}

/* La primera pintura debe coincidir con el inicio del parallax. Si la escala
   aparece recien al iniciar JS, las imagenes parecen acomodarse al cargar. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .js-anim [data-anim-parallax] {
        --anim-py: -5%;
        overflow: hidden;
    }

    .js-anim [data-anim-parallax="4"] {
        --anim-py: -4%;
    }

    .js-anim [data-anim-parallax] > :is(img, picture, video) {
        scale: var(--anim-pscale, 1.12);
        translate: 0 var(--anim-py);
    }
}

/* Frases que se encienden con el scroll (data-anim="scrub-words"). */
.anim-scrub-word {
    will-change: opacity;
}

/* Contadores: la cifra tiene su ancho final reservado (sin saltos de linea), asi
   el texto que la sigue no se mueve. Dentro de ese ancho se alinea como su
   contenedor: al inicio en bloques alineados a la izquierda (si no, una cifra
   corta como "3" quedaba corrida respecto de su etiqueta), centrada o al final
   donde el diseno centra o alinea a la derecha. */
.anim-counter {
    font-variant-numeric: tabular-nums;
}

.anim-counter__num {
    display: inline-block;
    text-align: inherit;
}

/* Marquee de logos: GSAP reemplaza la animacion CSS del track. */
.anim-marquee__track {
    animation: none !important;
    will-change: transform;
}

/* Pin narrativo por pasos (data-anim-pin="steps"): indicador de progreso. */
.anim-steps-host {
    position: relative;
}

.anim-steps {
    position: absolute;
    top: calc(100% + 44px);
    left: 50%;
    display: flex;
    gap: 8px;
    width: min(280px, 60%);
    translate: -50% 0;
    pointer-events: none;
}

.anim-steps__seg {
    position: relative;
    flex: 1 1 0;
    height: 2px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.anim-steps__fill {
    position: absolute;
    inset: 0;
    background: var(--color-blue, #3d5afe);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.anim-steps--top {
    top: auto;
    bottom: calc(100% + 40px);
}

.nos-sello .anim-steps,
.home-methodology .anim-steps {
    color: var(--color-paper, #fff);
}