/* ══════════════════════════════════════════════════════
   animations.css — AgencyBox motion system
   Chargé après app.css via views/partials/head.ejs
   ══════════════════════════════════════════════════════ */

/* ── 1. Cross-document view transitions ──────────────── */
/* Support: Chrome 126+, Edge 126+, Safari 18.2+         */
/* Fallback silencieux sur Firefox : navigation normale   */
@view-transition {
  navigation: auto;
}

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

::view-transition-old(root) {
  animation: 220ms ease-out both vt-fade-out;
}
::view-transition-new(root) {
  animation: 220ms ease-out both vt-fade-in;
}

/* ── Sidebar : exclue du crossfade racine ──────────────── */
/* Donne à la sidebar son propre groupe de transition pour  */
/* éviter le flash blanc causé par la semi-transparence du  */
/* root crossfade sur le fond dégradé.                      */
#sidebar {
  view-transition-name: sidebar;
}
/* Crossfade entre deux états identiques = invisible.       */
/* Pas d'animation supplémentaire nécessaire.               */

/* ── 2. Barre de progression (DOM injecté par JS) ────── */
#page-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}
#page-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-from, #7c3aed);
  opacity: 0;
}

/* ── 3. Entrée de page : fadeInUp sur <main> ─────────── */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: fade-in-up 280ms ease-out 80ms both;
}

/* ── 4. Stagger sur grilles de cards ─────────────────── */
/* Ajouter la classe .anim-stagger sur le conteneur.     */
/* Les enfants directs entrent en décalé (max 5).        */
.anim-stagger > * {
  animation: fade-in-up 280ms ease-out both;
}
.anim-stagger > *:nth-child(1) { animation-delay:   0ms; }
.anim-stagger > *:nth-child(2) { animation-delay:  60ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 240ms; }

/* ── 5. Hover lift sur liens-cards dans les grilles ──── */
/* Cible les <a> enfants directs de .anim-stagger        */
/* (ex : cards projets). Pour .module-card, le hover     */
/* translateY est défini dans dashboard/index.ejs.       */
.anim-stagger > a {
  transition: translate 150ms ease, box-shadow 150ms ease;
}
.anim-stagger > a:hover {
  translate: 0 -2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── 6. Feedback clic sur boutons de soumission ─────── */
button[type="submit"] {
  transition: transform 80ms ease;
}
button[type="submit"]:active {
  transform: scale(0.97);
}

/* ── 7. Réduction de mouvement (accessibilité) ───────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}