/* Kit d'interface BV : mouvement.
   .clock porte une horloge commune (--phase 0 -> 1, --pulse 0 <-> 1) héritée par ses descendants. Elle se pose sur
   l'élément qui la lit, jamais sur une vue entière : une propriété héritée animée recalcule chaque descendant à chaque
   image. theme.js cale chaque horloge sur l'origine du document : un élément reconstruit reprend la phase commune.
   html.intro (posé par theme.js au chargement) et .enter (vue réaffichée) jouent les entrées, après --lead. */

@property --phase { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pulse { syntax: "<number>"; inherits: true; initial-value: 0; }

@keyframes phase { to { --phase: 1; } }
@keyframes pulse { to { --pulse: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.clock { animation: phase 2.4s linear infinite, pulse .9s ease-in-out infinite alternate; }

:is(.intro, .enter) .rise { animation: rise var(--dur-slow) var(--ease) both; animation-delay: var(--lead, 0s); }
:is(.intro, .enter) .rise:nth-child(2) { animation-delay: calc(var(--lead, 0s) + 60ms); }
:is(.intro, .enter) .rise:nth-child(3) { animation-delay: calc(var(--lead, 0s) + 120ms); }
:is(.intro, .enter) .rise:nth-child(4) { animation-delay: calc(var(--lead, 0s) + 180ms); }
:is(.intro, .enter) .stagger > * { animation: rise var(--dur-slow) var(--ease) both; animation-delay: var(--lead, 0s); }
:is(.intro, .enter) .stagger > :nth-child(2) { animation-delay: calc(var(--lead, 0s) + 40ms); }
:is(.intro, .enter) .stagger > :nth-child(3) { animation-delay: calc(var(--lead, 0s) + 80ms); }
:is(.intro, .enter) .stagger > :nth-child(4) { animation-delay: calc(var(--lead, 0s) + 120ms); }
:is(.intro, .enter) .stagger > :nth-child(5) { animation-delay: calc(var(--lead, 0s) + 160ms); }
:is(.intro, .enter) .stagger > :nth-child(6) { animation-delay: calc(var(--lead, 0s) + 200ms); }
:is(.intro, .enter) .stagger > :nth-child(7) { animation-delay: calc(var(--lead, 0s) + 240ms); }
:is(.intro, .enter) .stagger > :nth-child(n+8) { animation-delay: calc(var(--lead, 0s) + 280ms); }

.theming, .theming * {
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), fill var(--dur) var(--ease), stroke var(--dur) var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  /* Jump to the end state: drawn strokes and faded-in text stay visible. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}