/* motion.css — mouvements. Uniquement transform et opacity (stroke-dashoffset pour la Lovia et les graphiques).
   Le mouvement est une réponse à une action : rien au chargement, rien en boucle. */

/* ---------- Lovia : anneaux et riz (déclenchés par un ajout) ---------- */

.lovia__arc,
.lovia__arc--over {
  transition: stroke-dashoffset var(--d-8) var(--ressort-doux);
}

.lovia__rice {
  transition: transform var(--d-8) var(--ressort-doux);
  will-change: transform;
}

.lovia__group {
  transform-origin: center;
  transform-box: fill-box;
}

.lovia--breathe .lovia__group {
  animation: lovia-breathe var(--d-4) var(--sortie);
}

@keyframes lovia-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

.lovia__check {
  opacity: 0;
  transition: opacity 200ms var(--sortie);
}

.lovia--reached .lovia__check {
  opacity: 1;
}

.lovia__arc--fade {
  transition: opacity 200ms var(--sortie), stroke-dashoffset var(--d-8) var(--ressort-doux);
}

/* ---------- Lignes de journal : entrée / sortie ---------- */

.entry-enter {
  animation: entry-in 280ms var(--ressort-doux);
}

@keyframes entry-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swipe-row__content {
  transition: transform var(--d-5) var(--ressort-vif);
}

.swipe-row--leaving .swipe-row__content {
  transition: transform 220ms var(--entree), opacity 220ms var(--entree);
  opacity: 0;
}

.swipe-row--pressed .swipe-row__content {
  transition: transform var(--d-2) var(--sortie);
}

/* ---------- Mascotte ---------- */

.maky--pop {
  animation: maky-fade 200ms var(--sortie);
}

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

/* ---------- Changement d'écran (View Transitions API) ---------- */

::view-transition-old(root) {
  animation: 120ms var(--entree) both vt-out;
}

::view-transition-new(root) {
  animation: 220ms var(--sortie) both vt-in;
}

/* ⚠️ Ne JAMAIS écrire `animation: none` sur un ::view-transition-old/new. Un élément nommé présent dans
   l'ancien écran mais absent du nouveau (la Lovia quand on quitte Aujourd'hui) produit un `old` sans `new` :
   sans animation, ce pseudo-élément ne se retire jamais, la couche de transition reste au-dessus de la page
   et avale tous les taps — l'application paraît figée. La nav et la Lovia n'ont donc pas de
   `view-transition-name` : elles font partie du fondu de la racine, où elles restent visuellement en place. */

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

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Réduction des animations ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .lovia--breathe .lovia__group,
  .nav__item:active .icon,
  .btn:active,
  .icon-btn:active {
    animation: none !important;
    transform: none !important;
  }

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

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

html[data-motion="reduce"] .lovia--breathe .lovia__group {
  animation: none !important;
}