/*
 * Ported verbatim from frontend/src/styles/tokens.css (.spark-burst-particle
 * + @keyframes spark-fly). Pairs with sparkle.js. Not linked from
 * styles.css or any template yet -- that's M1.4.
 */
.spark-burst-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 18px;
  animation: spark-fly 0.75s ease-out forwards;
}

@keyframes spark-fly {
  0% {
    transform: translate(0, 0) scale(0.4) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(180deg);
    opacity: 0;
  }
}

/* The reduced-motion ceremony (M2/DS): a single static glow -- one ✦,
   glowing in place, no animation and no movement at all. */
.spark-burst-particle--static {
  animation: none;
  transform: translate(-50%, -50%) scale(1.3);
  text-shadow: 0 0 18px currentColor;
  opacity: 1;
}

/* Light-up on the trail (PR 5): the step just marked from the Log. Base
   styles are the finished picture, so reduced motion shows it at once.
   Order: the rail draws out of the lit step (400ms), the next step's rail
   half draws in, its dot arrives, then its glow fades in (600ms) and stays.
   Nothing bounces. */
.is-just .trail-rail__dot { width: 28px; height: 28px; }
.trail-stone--just .trail-stone__state { color: var(--mastered-text); font-weight: 700; }
.trail-drawer__lit { margin: 12px 0 0; font-weight: 700; color: var(--text-strong); }

@keyframes trail-lit-draw { from { transform: scaleY(0); } }
@keyframes trail-lit-arrive { from { width: 22px; height: 22px; background: var(--bg); border-color: var(--bg); box-shadow: 0 0 0 3px var(--text-muted); } }
@keyframes trail-lit-bloom { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .trail-rail--lit .is-just .trail-rail__a::after { transform-origin: top; animation: trail-lit-draw 400ms ease-out backwards; }
  .trail-rail--lit .is-current .trail-rail__a::before { transform-origin: top; animation: trail-lit-draw 400ms ease-out 400ms backwards; }
  .trail-rail--lit .is-current .trail-rail__dot { animation: trail-lit-arrive 400ms ease-out 800ms backwards; }
  .trail-rail--lit .is-current .trail-rail__glow { animation: trail-lit-bloom 600ms ease-out 800ms backwards; }
}