/* =============================================================
   CloutierMTB — Design System
   ds-anim.css : animations / transitions partagées.
   Toutes les règles sont désactivées par
   `@media (prefers-reduced-motion: reduce)` en fin de fichier.
   ============================================================= */

/* Fade-in au montage d’une vue / d’un panneau */
.ds-fade-in {
  animation: ds-fade-in var(--ds-dur-med) var(--ds-ease-snap) both;
}

.ds-fade-up {
  animation: ds-fade-up var(--ds-dur-med) var(--ds-ease-spring) both;
}

.ds-fade-children > * {
  opacity: 0;
  animation: ds-fade-up var(--ds-dur-med) var(--ds-ease-spring) both;
}
.ds-fade-children > *:nth-child(1)  { animation-delay: calc(var(--ds-stagger) * 0); }
.ds-fade-children > *:nth-child(2)  { animation-delay: calc(var(--ds-stagger) * 1); }
.ds-fade-children > *:nth-child(3)  { animation-delay: calc(var(--ds-stagger) * 2); }
.ds-fade-children > *:nth-child(4)  { animation-delay: calc(var(--ds-stagger) * 3); }
.ds-fade-children > *:nth-child(5)  { animation-delay: calc(var(--ds-stagger) * 4); }
.ds-fade-children > *:nth-child(6)  { animation-delay: calc(var(--ds-stagger) * 5); }
.ds-fade-children > *:nth-child(7)  { animation-delay: calc(var(--ds-stagger) * 6); }
.ds-fade-children > *:nth-child(8)  { animation-delay: calc(var(--ds-stagger) * 7); }
.ds-fade-children > *:nth-child(n+9){ animation-delay: calc(var(--ds-stagger) * 8); }

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

@keyframes ds-fade-up {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Halo hover pour cartes interactives */
.ds-hover-glow {
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-spring),
    box-shadow var(--ds-dur-med) var(--ds-ease-snap);
}
.ds-hover-glow:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-elev-2), var(--ds-glow-accent);
}

/* Counter animé (CSS-only) — s’emploie via --to:<valeur>
   <strong class="ds-count" style="--to:42"></strong> */
@property --ds-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.ds-count {
  counter-reset: ds-num var(--ds-count);
  animation: ds-count var(--ds-dur-slow) var(--ds-ease-snap) forwards;
}
.ds-count::after {
  content: counter(ds-num);
}
@keyframes ds-count {
  from { --ds-count: 0; }
  to   { --ds-count: var(--to, 0); }
}

/* Pulse léger pour badges “nouveau” */
.ds-pulse {
  animation: ds-pulse 2.2s var(--ds-ease-snap) infinite;
}
@keyframes ds-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 255, 91, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(124, 255, 91, 0); }
}

/* Slide pour drawers ouverts par JS via `.is-open` (redondant avec ds-layout,
   gardé ici pour les drawers montés dynamiquement). */
.ds-slide-in-right {
  animation: ds-slide-right var(--ds-dur-med) var(--ds-ease-spring) both;
}
@keyframes ds-slide-right {
  from { transform: translate3d(30px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Soulignement animé pour onglet actif (en plus de ds-tab.is-active::after) */
.ds-underline-grow::after {
  animation: ds-underline var(--ds-dur-med) var(--ds-ease-spring);
}
@keyframes ds-underline {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

/* Transitions de vue (swap d’onglet dashboard). JS ajoute `.ds-view--enter`
   sur la vue cible, puis l’enlève au bout de var(--ds-dur-med). */
.ds-view {
  transition: opacity var(--ds-dur-med) var(--ds-ease-snap);
}
.ds-view[hidden] {
  display: none !important;
}
.ds-view--enter {
  animation: ds-fade-up var(--ds-dur-med) var(--ds-ease-spring) both;
}

/* Respect global des préférences utilisateur. */
@media (prefers-reduced-motion: reduce) {
  .ds-fade-in,
  .ds-fade-up,
  .ds-fade-children > *,
  .ds-slide-in-right,
  .ds-view--enter,
  .ds-count,
  .ds-pulse,
  .ds-hover-glow {
    animation: none !important;
    transform: none !important;
  }
  .ds-fade-children > * { opacity: 1; }
}