/* FitBuddy illustration.

   The system has exactly one illustration: the streak flame. Everything else
   visual is a photograph or a Lucide outline icon, and that rule is unchanged.
   The flame exists because a streak is the one number a product is allowed to
   make a small ceremony of, and an outline icon cannot carry a ceremony.

   Why it does not break the other rules:

   - It is built only from the ember ramp already in the palette, so it is
     i-Fitness red catching light, not a new colour.
   - It is capped in size by the component. Red is a fingernail here, never a
     field. Do not scale it past `xl`.
   - It animates transform and opacity only, like everything else, and stops
     dead under prefers-reduced-motion.
   - It belongs to the streak, which belongs to the crews direction. The class
     path states its number plainly and shows no flame at all.

   Geometry lives in the markup (StreakFlame.jsx, or the same paths inlined in
   the prototypes). This file owns only how it is painted and how it moves. */

.streakflame {
  display: inline-block;
  position: relative;
  line-height: 0;
  flex: none;
}
/* Visible overflow so the tip can sway and embers can leave the box without
   being sliced off at the edge. */
.streakflame svg { display: block; overflow: visible }

/* Each layer flexes from where it burns, not from its middle. */
.fl-outer, .fl-mid, .fl-core { transform-origin: 50% 100% }

.fl-outer {
  fill: var(--flame-outer);
  animation: fb-flame-sway var(--dur-flame-outer) var(--ease-in-out) infinite;
}
.fl-mid {
  fill: var(--flame-mid);
  animation: fb-flame-counter var(--dur-flame-mid) var(--ease-in-out) infinite;
}
.fl-core {
  fill: var(--flame-core);
  animation: fb-flame-sway var(--dur-flame-core) var(--ease-in-out) infinite;
}

/* The count, knocked out of the core. Chivo Black italic, tabular, which is
   the same treatment every other number in the system gets. */
.fl-num {
  fill: var(--flame-ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  text-anchor: middle;
}

/* Embers. Position sits on a parent group and the animation on the child,
   because an SVG transform scales about user-space 0,0: animating scale on a
   positioned element drags it toward the corner of the viewBox. */
.fl-ember { fill: var(--flame-ember); animation: fb-ember var(--dur-ember) var(--ease-out) infinite }
.fl-e1 .fl-ember { --ember-rise: -22px }
.fl-e2 .fl-ember {
  --ember-rise: -28px;
  animation-duration: calc(var(--dur-ember) * 1.45);
  animation-delay: calc(var(--dur-ember) * -0.55);
}
.fl-e3 .fl-ember {
  --ember-rise: -16px;
  animation-duration: calc(var(--dur-ember) * 1.15);
  animation-delay: calc(var(--dur-ember) * -1.1);
}

/* Arriving. This is the one place the reserved spring is unambiguously
   correct: a streak advancing is the example the motion rule itself gives. */
/* No fill-mode, see the note in the prototypes: fb-pop starts at opacity 0 and
   `both` would hide the flame entirely if the animation never ran. */
.streakflame.is-new { animation: fb-pop var(--t-celebrate) }

/* No streak yet. The flame is not drawn as a dead or broken thing, because
   nothing in this system dramatises absence. It is simply a different mark:
   see the `sprout` icon, which is what the component renders instead. */

@media (prefers-reduced-motion: reduce) {
  .fl-outer, .fl-mid, .fl-core, .fl-ember, .streakflame.is-new { animation: none }
  /* Embers would otherwise sit frozen at full opacity mid-rise. */
  .fl-ember { opacity: 0 }
}