/* ---------------------------------------------------------------------------
   Animations par classes (atgf-fx.js) — variables, classes utilitaires et
   effets pilotés par transitions CSS.

   Le JS lit les variables `--atgf-*` sur l'élément au démarrage et recopie les
   attributs `data-atgf-*` en variables inline : une classe utilitaire, un
   attribut ou un CSS perso règlent la même chose.
   --------------------------------------------------------------------------- */

.atgf-count,
.atgf-odometer,
.atgf-scramble,
.atgf-rotate,
.atgf-typewriter,
.atgf-reveal-words,
.atgf-reveal-chars,
.atgf-progress,
.atgf-progress-ring,
.atgf-reveal-image {
    --atgf-fx-duration: 1.6s;
    --atgf-fx-delay: 0s;
    --atgf-fx-easing: out-expo;
    /* posée par le JS d'après --atgf-fx-easing ; repli : out-expo */
    --atgf-css-easing: cubic-bezier(.16, 1, .3, 1);
}

/* Texte lu par les lecteurs d'écran quand les glyphes visibles ne le sont plus. */
.atgf-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Vitesse, retard, courbe --------------------------------------------- */

.atgf-fx-fast {
    --atgf-fx-duration: 0.8s;
}

.atgf-fx-slow {
    --atgf-fx-duration: 3s;
}

.atgf-fx-delay-1 {
    --atgf-fx-delay: 0.3s;
}

.atgf-fx-delay-2 {
    --atgf-fx-delay: 0.6s;
}

.atgf-fx-linear {
    --atgf-fx-easing: linear;
}

/* --- Compteurs ------------------------------------------------------------ */

.atgf-count,
.atgf-odometer {
    font-variant-numeric: tabular-nums;
}

/* Odomètre : une colonne par chiffre, le ruban 0-9 (×2) roule verticalement. */
.atgf-odo {
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
    line-height: 1;
}

.atgf-odo__digit {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    line-height: 1;
}

.atgf-odo__roll {
    display: block;
    transition: transform var(--atgf-fx-duration, 1.6s) var(--atgf-css-easing);
    will-change: transform;
}

.atgf-odo__d {
    display: block;
    height: 1em;
    line-height: 1;
}

.atgf-odo__sep {
    display: inline-block;
    line-height: 1;
}

/* --- Brouillage ------------------------------------------------------------ */

.atgf-scramble {
    --atgf-scramble-chars: "!<>-_\\/[]{}—=+*^?#________";
}

.atgf-fx-matrix {
    --atgf-scramble-chars: "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉ0123456789";
}

.atgf-fx-binary {
    --atgf-scramble-chars: "01";
}

.atgf-fx-letters {
    --atgf-scramble-chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
}

/* --- Mots tournants / machine à écrire ------------------------------------- */

.atgf-rotate,
.atgf-typewriter {
    --atgf-type-speed: 70ms;
    --atgf-type-erase: 40ms;
    --atgf-type-pause: 1800ms;
    --atgf-cursor-color: currentColor;
}

/* Curseur : un trait qui clignote tant que ça tape. */
.atgf-rotate.is-typing::after,
.atgf-typewriter.is-typing::after {
    content: "";
    display: inline-block;
    width: 0.08em;
    height: 1em;
    margin-left: 0.06em;
    vertical-align: -0.12em;
    background: var(--atgf-cursor-color);
    animation: atgf-cursor 1s steps(1) infinite;
}

.atgf-fx-no-cursor.is-typing::after {
    display: none;
}

@keyframes atgf-cursor {
    50% {
        opacity: 0;
    }
}

/* --- Révélation mot à mot / lettre à lettre --------------------------------- */

.atgf-reveal-words,
.atgf-reveal-chars {
    --atgf-fx-duration: 0.7s;
    --atgf-reveal-stagger: 60ms;
    --atgf-reveal-distance: 0.6em;
}

.atgf-reveal-chars {
    --atgf-reveal-stagger: 30ms;
}

.atgf-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(var(--atgf-reveal-distance));
    transition:
        opacity var(--atgf-fx-duration) var(--atgf-css-easing),
        transform var(--atgf-fx-duration) var(--atgf-css-easing);
    transition-delay: calc(var(--atgf-i, 0) * var(--atgf-reveal-stagger));
    will-change: opacity, transform;
}

.is-in>.atgf-w,
.is-in .atgf-w {
    opacity: 1;
    transform: none;
}

/* Variantes de mouvement */
.atgf-reveal-down {
    --atgf-reveal-distance: -0.6em;
}

.atgf-reveal-still {
    --atgf-reveal-distance: 0em;
}

/* --- Progression ------------------------------------------------------------ */

.atgf-progress {
    --atgf-progress-height: 0.5rem;
    --atgf-progress-track: color-mix(in oklab, currentColor 12%, transparent);
    --atgf-progress-color: var(--atb-primary, #0099DD);
    --atgf-progress-radius: 999px;
    position: relative;
    display: block;
    height: var(--atgf-progress-height);
    background: var(--atgf-progress-track);
    border-radius: var(--atgf-progress-radius);
    overflow: hidden;
}

.atgf-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--atgf-progress-color);
    border-radius: inherit;
    transition: width var(--atgf-fx-duration) var(--atgf-css-easing);
}

.atgf-progress.is-in>.atgf-progress__bar {
    width: var(--atgf-progress, 0%);
}

.atgf-progress-ring {
    --atgf-progress-size: 6rem;
    --atgf-progress-width: 8;
    /* en unités du viewBox (100) */
    --atgf-progress-track: color-mix(in oklab, currentColor 12%, transparent);
    --atgf-progress-color: var(--atb-primary, #0099DD);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--atgf-progress-size);
    height: var(--atgf-progress-size);
    text-align: center;
    padding: 0;
}

.atgf-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.atgf-ring__track,
.atgf-ring__bar {
    fill: none;
    stroke-width: var(--atgf-progress-width);
    stroke-linecap: round;
}

.atgf-ring__track {
    stroke: var(--atgf-progress-track);
}

.atgf-ring__bar {
    stroke: var(--atgf-progress-color);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset var(--atgf-fx-duration) var(--atgf-css-easing);
}

.atgf-progress-ring.is-in .atgf-ring__bar {
    stroke-dashoffset: calc(100 - var(--atgf-progress-n, 0));
}

/* --- Rideau (clip-path) ----------------------------------------------------- */

.atgf-reveal-image {
    --atgf-fx-duration: 1.2s;
    --atgf-reveal-from: inset(0 100% 0 0);
    clip-path: var(--atgf-reveal-from);
    transition: clip-path var(--atgf-fx-duration) var(--atgf-css-easing);
}

.atgf-reveal-image.is-in {
    clip-path: inset(0 0 0 0);
}

.atgf-reveal-right {
    --atgf-reveal-from: inset(0 0 0 100%);
}

.atgf-reveal-top {
    --atgf-reveal-from: inset(0 0 100% 0);
}

.atgf-reveal-bottom {
    --atgf-reveal-from: inset(100% 0 0 0);
}

.atgf-reveal-center {
    --atgf-reveal-from: inset(0 50% 0 50%);
}

/* Léger dézoom de l'image pendant le rideau. */
.atgf-reveal-zoom img,
.atgf-reveal-zoom>picture {
    transform: scale(1.12);
    transition: transform calc(var(--atgf-fx-duration) * 1.4) var(--atgf-css-easing);
    transform-origin: center;
}

.atgf-reveal-zoom.is-in img,
.atgf-reveal-zoom.is-in>picture {
    transform: none;
}

/* --- Animations pilotées par le défilement (CSS pur, amélioration progressive) --- */

@supports (animation-timeline: view()) {

    .atgf-scroll-fade,
    .atgf-scroll-rise,
    .atgf-scroll-zoom,
    .atgf-scroll-reveal {
        --atgf-scroll-range: entry 0% cover 35%;
        animation-timeline: view();
        animation-range: var(--atgf-scroll-range);
        animation-fill-mode: both;
        animation-timing-function: linear;
    }

    .atgf-scroll-fade {
        animation-name: atgf-scroll-fade;
    }

    .atgf-scroll-rise {
        animation-name: atgf-scroll-rise;
    }

    .atgf-scroll-zoom {
        animation-name: atgf-scroll-zoom;
    }

    .atgf-scroll-reveal {
        animation-name: atgf-scroll-reveal;
    }

    .atgf-scroll-long {
        --atgf-scroll-range: entry 0% cover 60%;
    }
}

@keyframes atgf-scroll-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes atgf-scroll-rise {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes atgf-scroll-zoom {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes atgf-scroll-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* --- Mouvement réduit --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .atgf-w,
    .atgf-odo__roll,
    .atgf-progress__bar,
    .atgf-ring__bar,
    .atgf-reveal-image,
    .atgf-reveal-zoom img,
    .atgf-reveal-zoom>picture {
        transition: none !important;
    }

    .atgf-scroll-fade,
    .atgf-scroll-rise,
    .atgf-scroll-zoom,
    .atgf-scroll-reveal {
        animation: none !important;
    }
}