/*
 * Le mouvement est en CSS et se limite aux navigateurs qui le gèrent ; seules les frappes sur la peau du djembé passent par le contrôleur ostinato.
 * Avec prefers-reduced-motion, rien ne bouge : l'état de repos est l'état par défaut.
 */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: var(--duree);
        animation-timing-function: var(--courbe);
    }

    /*
     * L'ostinato du graj : huit frappes par mesure, deux mesures, une seule fois.
     * La première fait sauter « Rythme » puis pulser « Code » ; la seconde finit sur deux « boum » du mot-symbole, à la noire.
     * Une double croche à 100 BPM (noire à 0,6 s, mesure à 2/4) : ce réglage fixe tout le tempo.
     * Les images clés tombent sur les huitièmes de mesure, soit 12,5 % chacun.
     */
    .ouverture {
        --double-croche: 0.15s;
    }

    .ouverture .djembe__peau {
        transform-box: fill-box;
        transform-origin: center;
        animation: peau-frappee calc(var(--double-croche) * 8) 2;
    }

    .ouverture .djembe__onde {
        transform-origin: 113px 38px;
    }

    .ouverture .djembe__onde--gauche {
        animation: onde-gauche calc(var(--double-croche) * 8) 2;
    }

    .ouverture .djembe__onde--droite {
        animation: onde-droite calc(var(--double-croche) * 8) 2;
    }

    /* La lettre de rang n de « Rythme » saute une seule fois, sur la frappe n ; « Code » pulse en entier sur les frappes 7 à 10. */
    .ouverture__mot:first-child .lettre {
        animation: saut calc(var(--double-croche) * 10) calc(var(--double-croche) * var(--rang));
    }

    .ouverture__mot + .ouverture__mot {
        transform-origin: left center;
        animation: pulsation calc(var(--double-croche) * 4) calc(var(--double-croche) * 6);
    }

    /* Deux « boum » à une noire d'écart, frappes 12 et 16 : le second tombe sur la dernière frappe du djembé. « Rythme » et « Code » grandissent ensemble vers la droite, à l'opposé du djembé. */
    .ouverture__titre {
        transform-origin: left center;
        animation: boum calc(var(--double-croche) * 4) calc(var(--double-croche) * 11) 2;
    }

    /* Rangs calés sur les six lettres de « Rythme » : à revoir si ouverture.titre change dans content/accueil.yaml. */
    .lettre:nth-child(1) { --rang: 0; }
    .lettre:nth-child(2) { --rang: 1; }
    .lettre:nth-child(3) { --rang: 2; }
    .lettre:nth-child(4) { --rang: 3; }
    .lettre:nth-child(5) { --rang: 4; }
    .lettre:nth-child(6) { --rang: 5; }

    /*
     * Dès la première frappe sur la peau, le contrôleur ostinato coupe l'ouverture puis pose .frappe sur une cible à la fois.
     * Sans animation de repos, retirer puis remettre .frappe relance l'animation à chaque frappe.
     */
    .ouverture--libre .djembe__peau,
    .ouverture--libre .djembe__onde,
    .ouverture--libre .ouverture__titre,
    .ouverture--libre .ouverture__mot,
    .ouverture--libre .ouverture__mot .lettre {
        animation: none;
    }

    .ouverture--libre .frappe .djembe__peau {
        animation: peau-une-frappe calc(var(--double-croche) * 2);
    }

    .ouverture--libre .ouverture__mot.frappe {
        animation: pulsation calc(var(--double-croche) * 4);
    }

    .ouverture--libre .ouverture__mot .lettre.frappe {
        animation: saut calc(var(--double-croche) * 10);
    }

    @supports (animation-timeline: view()) {
        .temps {
            animation: apparaitre linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 35%;
        }
    }
}

/* Frappes dans l'ordre : grave G, médium D, grave G, aigu D, aigu G, médium D, aigu G, aigu D. */
@keyframes peau-frappee {
    0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
        transform: none;
    }

    2%, 27% {
        transform: translateY(4px) scale(0.95, 0.74);
    }

    14.5%, 64.5% {
        transform: translateY(2.6px) scale(0.97, 0.84);
    }

    39.5%, 52%, 77%, 89.5% {
        transform: translateY(1.3px) scale(0.985, 0.92);
    }
}

/* La main gauche frappe aux temps 1, 3, 5 et 7 : grave, grave, aigu, aigu. */
@keyframes onde-gauche {
    0%, 25%, 50%, 75% {
        scale: 1;
        opacity: 0.9;
    }

    24.9%, 49.9% {
        scale: 1.5;
        opacity: 0;
    }

    74.9%, 100% {
        scale: 1.15;
        opacity: 0;
    }
}

/* La main droite frappe aux temps 2, 4, 6 et 8 : médium, aigu, médium, aigu. */
@keyframes onde-droite {
    0%, 12.4% {
        scale: 1;
        opacity: 0;
    }

    12.5%, 37.5%, 62.5%, 87.5% {
        scale: 1;
        opacity: 0.9;
    }

    37.4%, 87.4% {
        scale: 1.3;
        opacity: 0;
    }

    62.4%, 100% {
        scale: 1.15;
        opacity: 0;
    }
}

@keyframes peau-une-frappe {
    0%, 100% {
        transform: none;
    }

    30% {
        transform: translateY(2.6px) scale(0.97, 0.84);
    }
}

@keyframes pulsation {
    0%, 100% {
        scale: 1;
    }

    30% {
        scale: 1.06;
    }
}

/* Un coup qui culmine juste après la frappe et retombe en trois doubles croches. Au-delà de 1,12, le mot-symbole agrandi sortirait de l'écran sur mobile. */
@keyframes boum {
    0%, 75%, 100% {
        scale: 1;
    }

    15% {
        scale: 1.1;
    }
}

@keyframes saut {
    0%, 10%, 100% {
        translate: 0 0;
    }

    5% {
        translate: 0 -0.12em;
    }
}

@keyframes apparaitre {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}