/* OWNER: Charlie. Formulas screen only, three moments, September 21 2026. Uses only css/motion-tokens.css durations
   and curves. Transform and opacity only, one sparing clip-path wipe. Load after css/motion.css. No JS: the result
   block and the card list are both full innerHTML re renders, so a plain animation on the selector replays exactly
   when new nodes land, which is what moment 1 wants and moment 2 avoids by scoping to [data-mo-enter="formulas"]. */
@media (prefers-reduced-motion: no-preference) {

  /* Moment 1, the signature: a conversion result reveals like a swatch wiped onto paper. */
  .fm-cv-result strong {
    animation: fm-cv-wipe var(--mo-slow) var(--mo-ease-out) both;
  }
  .fm-cv-line {
    animation: fm-cv-rise var(--mo-base) var(--mo-ease-out) both;
  }
  .fm-cv-grade-row .chip,
  .fm-cv-result .chip {
    animation: fm-chip-pop var(--mo-fast) var(--mo-spring) both;
    animation-delay: calc(var(--mo-fast) / 2);
  }
  @keyframes fm-cv-wipe {
    from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(var(--mo-rise)); }
    to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
  }
  @keyframes fm-cv-rise {
    from { opacity: 0; transform: translateY(var(--mo-rise)); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fm-chip-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Moment 2: formula cards rise in a calm stagger, first 8 only, scoped to the mount window so a save never
     replays it. [data-mo-enter="formulas"] is removed 700ms after mount by js/motion-core.js. */
  [data-mo-enter="formulas"] .fm-row:nth-child(-n+8) {
    animation: fm-row-rise var(--mo-base) var(--mo-ease-out) both;
  }
  [data-mo-enter="formulas"] .fm-row:nth-child(1) { animation-delay: 0ms; }
  [data-mo-enter="formulas"] .fm-row:nth-child(2) { animation-delay: var(--mo-stagger); }
  [data-mo-enter="formulas"] .fm-row:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 2); }
  [data-mo-enter="formulas"] .fm-row:nth-child(4) { animation-delay: calc(var(--mo-stagger) * 3); }
  [data-mo-enter="formulas"] .fm-row:nth-child(5) { animation-delay: calc(var(--mo-stagger) * 4); }
  [data-mo-enter="formulas"] .fm-row:nth-child(6) { animation-delay: calc(var(--mo-stagger) * 5); }
  [data-mo-enter="formulas"] .fm-row:nth-child(7) { animation-delay: calc(var(--mo-stagger) * 6); }
  [data-mo-enter="formulas"] .fm-row:nth-child(8) { animation-delay: calc(var(--mo-stagger) * 7); }
  @keyframes fm-row-rise {
    from { opacity: 0; transform: translateY(var(--mo-rise)); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Moment 3: the mixing notes disclosure opens softly. Native details/summary hides content via display, so an
     animation on the content re fires every time it becomes visible; never height, opacity and transform only. */
  .fm-cv-more[open] > :not(summary) {
    animation: fm-details-in var(--mo-base) var(--mo-ease-out) both;
  }
  @keyframes fm-details-in {
    from { opacity: 0; transform: translateY(calc(var(--mo-rise) * -1)); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Sep 29 fan out. Moment 4: a formula card settling when saved. [data-mo-fresh] is set by
     js/motion-people.js only on the one row that actually just appeared or changed (a save, a
     share update), never on the whole list, so this never replays on a search keystroke. */
  .fm-row[data-mo-fresh] {
    animation: fm-row-settle var(--mo-base) var(--mo-ease-out);
  }
  @keyframes fm-row-settle {
    from { opacity: 0; transform: translateY(var(--mo-rise)); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* The private lock's one soft blink: the "Private to you" chip on a card that just settled. Opacity
     only, one pulse, no loop. */
  .fm-row[data-mo-fresh] .chip-quiet {
    animation: fm-lock-blink var(--mo-base) var(--mo-ease-out);
  }
  @keyframes fm-lock-blink {
    0% { opacity: 1; }
    45% { opacity: .35; }
    100% { opacity: 1; }
  }

  /* Moment 5, the @ chips: a tagged stylist's chip landing on a card that just settled. Reuses the
     pop from moment 1 (fm-chip-pop) rather than a fourth keyframe for the same shape of motion. */
  .fm-row[data-mo-fresh] .chip-warn {
    animation: fm-chip-pop var(--mo-base) var(--mo-spring) both;
  }

  /* Moment 5, the .fm-tag buttons: the Add/Share sheet's tag picker lands its chips once when it
     first reveals ([data-mo-fresh] on .fm-tags, set by js/motion-people.js only on that reveal, never
     on the tag toggles that follow and redraw the same picker). First eight only, same stagger shape
     as the directory rows in css/motion-people.css. */
  .fm-tags[data-mo-fresh] .fm-tag {
    animation: fm-chip-pop var(--mo-base) var(--mo-spring) both;
  }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(1) { animation-delay: 0ms; }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(2) { animation-delay: var(--mo-stagger); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 2); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(4) { animation-delay: calc(var(--mo-stagger) * 3); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(5) { animation-delay: calc(var(--mo-stagger) * 4); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(6) { animation-delay: calc(var(--mo-stagger) * 5); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(7) { animation-delay: calc(var(--mo-stagger) * 6); }
  .fm-tags[data-mo-fresh] .fm-tag:nth-child(8) { animation-delay: calc(var(--mo-stagger) * 7); }
}