/*
 * Film set motion — "Hard entries, no bounce, no soft dissolve. The red plate lands last."
 *
 * Every animation below lives inside (prefers-reduced-motion: no-preference): with
 * reduced motion nothing moves and every element simply shows its final state.
 * Content is visible at rest — nothing waits at opacity 0 for JavaScript. The CSS
 * starts when an element is first displayed (insertion, or leaving display:none),
 * so a view arrives each time it is shown, with no flash of the final state.
 *
 * Classes:
 *   .fs-arrive                one element arrives (180 ms linear, 14 px rise) after
 *                             --fs-i × 70 ms; set --fs-i in CSS, or via
 *                             MomentumIllustrations.stagger(elements) (CSSOM)
 *   .fs-stagger > *           children arrive in order, at most 6 steps per view
 *   .fs-land                  lands with the hard ease (480 ms) after the arrivals —
 *                             use it for the red plate
 *   [data-fs-count]           cue for the count-up (illustrations.js counts on
 *                             animationstart, 700 ms ease-out-cubic)
 *   .fs-ring-value .fs-meter-fill .fs-screen.is-lit .fs-wave-path .fs-plate
 *                             data motion built by illustrations.js
 */

@media (prefers-reduced-motion: no-preference) {
  .fs-arrive,
  .fs-stagger > * {
    animation: fs-arrive var(--fs-arrive) linear both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger));
  }

  .fs-stagger > :nth-child(1) { --fs-i: 0; }
  .fs-stagger > :nth-child(2) { --fs-i: 1; }
  .fs-stagger > :nth-child(3) { --fs-i: 2; }
  .fs-stagger > :nth-child(4) { --fs-i: 3; }
  .fs-stagger > :nth-child(5) { --fs-i: 4; }
  .fs-stagger > :nth-child(n + 6) { --fs-i: 5; }

  .fs-land {
    animation: fs-land var(--fs-land) var(--fs-ease-hard) both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + var(--fs-arrive) + 120ms);
  }

  /* The red plate is always the last thing to land in its view. */
  .fs-plate {
    animation: fs-land var(--fs-land) var(--fs-ease-hard) both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + var(--fs-arrive) + 240ms);
  }

  [data-fs-count] {
    animation: fs-count-cue var(--fs-count) linear both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger));
  }

  .fs-ring-value {
    animation: fs-draw var(--fs-draw) var(--fs-ease-hard) both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + 120ms);
  }

  .fs-wave-path {
    animation: fs-draw var(--fs-count) var(--fs-ease-hard) both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + 120ms);
  }

  .fs-meter-fill {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: fs-grow var(--fs-grow) var(--fs-ease-hard) both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + 160ms);
  }

  /* Each active Mac powers on in turn: a 160 ms colour swap, no crossfade. */
  .fs-screen.is-lit .fs-screen-frame,
  .fs-screen.is-lit .fs-screen-stand {
    animation: fs-power-on var(--fs-state) linear both;
    animation-delay: calc(var(--fs-i, 0) * var(--fs-stagger) + 260ms + var(--fs-screen-i, 0) * 140ms);
  }

  .fs-screen.is-lit .fs-screen-stand {
    animation-name: fs-power-on-stand;
  }

  .fs-screen:nth-child(2) { --fs-screen-i: 1; }
  .fs-screen:nth-child(3) { --fs-screen-i: 2; }
  .fs-screen:nth-child(4) { --fs-screen-i: 3; }

  .fs-toast {
    animation: fs-toast-in var(--fs-arrive) linear both;
  }

  /* State changes are a 160 ms colour swap — never a crossfade of the whole panel. */
  .fs-tile,
  .fs-banner,
  .fs-pill,
  .fs-button {
    transition: background-color var(--fs-state) linear, border-color var(--fs-state) linear, color var(--fs-state) linear;
  }
}

@keyframes fs-arrive {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes fs-land {
  from { opacity: 0; transform: translateY(-14px); }
}

@keyframes fs-draw {
  from { stroke-dashoffset: 100; }
}

@keyframes fs-grow {
  from { transform: scaleX(0); }
}

@keyframes fs-power-on {
  from { stroke: rgba(255, 255, 255, .34); fill: rgba(255, 255, 255, .03); }
}

@keyframes fs-power-on-stand {
  from { fill: rgba(255, 255, 255, .34); }
}

@keyframes fs-toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
}

/* No visual change: a timing cue whose animationstart starts the JS count-up. */
@keyframes fs-count-cue {
  from { --fs-count-cue: 0; }
  to { --fs-count-cue: 1; }
}