/*
|--------------------------------------------------------------------------
|   public/css/logo-anime.css
|--------------------------------------------------------------------------
|
|   Logo NY2E animé de l'en-tête (12/11), repris de la borne Sigap.
|   Le SVG est dans resources/views/partials/logo-ny2e-anime.blade.php.
|
|   Trois modèles se relaient (public/js/logo-anime.js pose la classe) :
|   vague → retournement → construction. Chacun joue UNE fois, puis le
|   logo reste immobile jusqu'au cycle suivant : un logo qui bouge sans
|   arrêt fatigue l'œil et détourne du contenu.
*/

.logo-anime {
    display: block;
    height: 3.5rem;
    width: auto;
    overflow: visible;
}

/* Sans transform-box, un groupe SVG tournerait autour du coin haut
   gauche du dessin entier, pas autour de son propre centre. */
.logo-anime .logo-carre {
    transform-box: fill-box;
    transform-origin: center;
}

/* Rangs 0, 1, 3, 2 : l'animation tourne dans le sens des aiguilles
   d'une montre (haut gauche, haut droite, bas droite, bas gauche). */
.logo-anime .logo-carre:nth-child(1) {
    --rang: 0;
}

.logo-anime .logo-carre:nth-child(2) {
    --rang: 1;
}

.logo-anime .logo-carre:nth-child(3) {
    --rang: 3;
}

.logo-anime .logo-carre:nth-child(4) {
    --rang: 2;
}

/* ── Modèle 1 : vague, chaque carré saute à son tour ── */
.logo-anime.vague .logo-carre {
    animation: logo-sauter .6s ease-in-out calc(var(--rang) * .15s) 2 both;
}

@keyframes logo-sauter {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18%);
    }
}

/* ── Modèle 2 : retournement, chaque carré pivote sur lui-même ──
   scaleX plutôt que rotateY : la 3D sur un élément de SVG n'est pas
   rendue pareil par tous les navigateurs, l'effet à plat si. */
.logo-anime.retournement .logo-carre {
    animation: logo-retourner .8s ease-in-out calc(var(--rang) * .2s) 1 both;
}

@keyframes logo-retourner {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }
}

/* ── Modèle 3 : construction, les carrés se posent un par un ── */
.logo-anime.construction .logo-carre {
    animation: logo-poser .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--rang) * .25s) 1 both;
}

@keyframes logo-poser {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 48rem) {
    .logo-anime {
        height: 2.75rem;
    }
}

/* Mouvements réduits demandés par le système : logo fixe. */
@media (prefers-reduced-motion: reduce) {
    .logo-anime .logo-carre {
        animation: none;
    }
}