/* ==========================================================================
   transitions.css — Transitions de page fluides (View Transitions API)
   + entrée échelonnée (stagger) pour listes/cartes.
   Géré par assets/js/app.js (App._renderWithTransition / App._applyStagger).
   Tout est désactivé sous prefers-reduced-motion: reduce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Crossfade racine via View Transitions API
   Sortie plus rapide que l'entrée pour une sensation réactive.
   -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
    /* On pilote nous-mêmes les animations ci-dessous */
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: vt-fade-out 120ms ease forwards;
}

::view-transition-new(root) {
    animation: vt-fade-in 180ms ease forwards;
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2) Entrée échelonnée (stagger) — fade + translateY(8px) -> 0
   La classe `.stagger` est ajoutée par app.js au 1er conteneur liste/grille.
   -------------------------------------------------------------------------- */
@keyframes anim-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger > * {
    animation: anim-in 260ms ease both;
    /* will-change léger pour la fluidité, retiré une fois l'anim terminée */
    will-change: opacity, transform;
}

/* Délais croissants par enfant (~35ms par pas, jusqu'à ~20 enfants) */
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 35ms; }
.stagger > *:nth-child(3)  { animation-delay: 70ms; }
.stagger > *:nth-child(4)  { animation-delay: 105ms; }
.stagger > *:nth-child(5)  { animation-delay: 140ms; }
.stagger > *:nth-child(6)  { animation-delay: 175ms; }
.stagger > *:nth-child(7)  { animation-delay: 210ms; }
.stagger > *:nth-child(8)  { animation-delay: 245ms; }
.stagger > *:nth-child(9)  { animation-delay: 280ms; }
.stagger > *:nth-child(10) { animation-delay: 315ms; }
.stagger > *:nth-child(11) { animation-delay: 350ms; }
.stagger > *:nth-child(12) { animation-delay: 385ms; }
.stagger > *:nth-child(13) { animation-delay: 420ms; }
.stagger > *:nth-child(14) { animation-delay: 455ms; }
.stagger > *:nth-child(15) { animation-delay: 490ms; }
.stagger > *:nth-child(16) { animation-delay: 525ms; }
.stagger > *:nth-child(17) { animation-delay: 560ms; }
.stagger > *:nth-child(18) { animation-delay: 595ms; }
.stagger > *:nth-child(19) { animation-delay: 630ms; }
.stagger > *:nth-child(20) { animation-delay: 665ms; }
/* Au-delà de 20 enfants : pas de délai supplémentaire (entrée immédiate) */
.stagger > *:nth-child(n+21) { animation-delay: 700ms; }

/* Classe utilitaire ponctuelle si une page veut animer un seul élément */
.anim-in {
    animation: anim-in 260ms ease both;
}

/* --------------------------------------------------------------------------
   3) Accessibilité — tout instantané si l'utilisateur réduit les animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .stagger > *,
    .anim-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }
}