/* JavaScript course figures: shared motion tokens, the paper frame, kickers, hints, controls, the still mode.
   Adapted from courses/mobile/figures/fx.css. Built on the course tokens (javascript.css, design spec section 2):
   --engine purple, --host sky, --you amber, --ok, --no; selected controls are an ink pill, never indigo.
   One motion language with the films: arrive with --fx-ease-out, move with --fx-ease-io; 160 ms to answer a press,
   200 ms to cross-fade a chip, 320 ms to appear, 600 ms to change state. Nothing here moves under .fx--still. */

:root {
  --fx-ease-out: cubic-bezier(.2, .7, .2, 1);
  --fx-ease-io: cubic-bezier(.65, 0, .35, 1);
  --fx-ease-in: cubic-bezier(.55, 0, .85, .35);
  --fx-t-micro: 160ms; --fx-t-fade: 200ms; --fx-t-short: 320ms; --fx-t-med: 600ms; --fx-t-long: 950ms;
  --fx-aur-1: rgba(126, 34, 206, .055); --fx-aur-2: rgba(3, 105, 161, .06); --fx-aur-3: rgba(154, 91, 0, .045);
  --fx-dot: rgba(22, 22, 31, .065);
}
:root[data-theme="dark"] {
  --fx-aur-1: rgba(192, 132, 252, .11); --fx-aur-2: rgba(125, 211, 252, .09); --fx-aur-3: rgba(251, 191, 36, .05);
  --fx-dot: rgba(255, 255, 255, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fx-aur-1: rgba(192, 132, 252, .11); --fx-aur-2: rgba(125, 211, 252, .09); --fx-aur-3: rgba(251, 191, 36, .05);
    --fx-dot: rgba(255, 255, 255, .05);
  }
}

/* ---------- The paper frame of an interactive figure ---------- */
.fx { container: fx / inline-size; position: relative; margin-block: 26px 16px; color: var(--ink); }
.fx__stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(16px, 3.4cqi, 30px);
  border-radius: 22px; border: 1px solid var(--rule); box-shadow: var(--shadow);
  background:
    radial-gradient(70% 90% at 0% 0%, var(--fx-aur-1), transparent 60%),
    radial-gradient(60% 80% at 100% 0%, var(--fx-aur-2), transparent 62%),
    radial-gradient(80% 70% at 60% 110%, var(--fx-aur-3), transparent 60%),
    var(--surface);
}
.fx__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(var(--fx-dot) 1px, transparent 1.3px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}
/* The kicker: ink-3 and the course's ring mark (a sky ring, a purple dot), never the accent. */
.fx__kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 700 .72rem/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fx__kicker::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--host); background: radial-gradient(circle, var(--engine) 0 2.6px, transparent 3.2px);
}
.fx__hint { margin: 0 0 16px; max-width: 62ch; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.fx__note { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }

/* ---------- Controls: native inputs, styled. Chosen = an ink pill (indigo stays for focus and hover). ---------- */
.fx-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fx-seg > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font: 700 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fx-seg label { position: relative; display: inline-flex; cursor: pointer; }
.fx-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fx-seg label > span {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 48px; width: 100%; padding: 7px 16px;
  border-radius: 16px; border: 1px solid var(--control); background: var(--surface);
  font: 600 .92rem/1.2 var(--font-body); color: var(--ink);
  transition: background-color var(--fx-t-micro) ease, color var(--fx-t-micro) ease, border-color var(--fx-t-micro) ease, transform var(--fx-t-micro) var(--fx-ease-out);
}
.fx-seg label > span small { font: 500 .74rem/1.25 var(--font-body); color: var(--ink-3); }
.fx-seg label:hover > span { border-color: var(--accent); }
.fx-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fx-seg input:checked + span small { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); }
.fx-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx-seg label:active > span { transform: scale(.97); }

.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 15px;
  border-radius: 12px; border: 1px solid var(--control); background: var(--surface); color: var(--ink);
  font: 600 .9rem/1.2 var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--fx-t-micro) var(--fx-ease-out), border-color var(--fx-t-micro) ease, background-color var(--fx-t-micro) ease;
}
.fx-btn:hover { border-color: var(--accent); }
.fx-btn:active { transform: scale(.96); }
.fx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx-btn svg { width: 16px; height: 16px; flex: none; }
.fx-btn code { font: 600 .86rem/1 var(--font-mono); background: none; border: 0; padding: 0; color: inherit; }
.fx-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.fx-in { animation: fx-in var(--fx-t-short) var(--fx-ease-out) both; }
@keyframes fx-in { from { opacity: 0; transform: translateY(5px); } }

.fx .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Reduced motion, or motion paused: every state arrives at once ---------- */
.fx--still *, .fx--still *::before, .fx--still *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }

@media (forced-colors: active) {
  .fx-seg input:checked + span, .fx-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
  .fx__stage { box-shadow: none; background: #fff; }
  .fx__stage::before { display: none; }
}