/* fx.css — this demo's motion styles (demo-design.md section 10-3 · ADR 0065 Amend (3), 2026-10-12).
   Loaded after the inline <style> and mk/motion-kit.css. Static layout is unchanged; everything here is
   either motion, a press state, or decoration that is invisible when nothing animates.
   Floor 1: the reduced-motion and body.capture-mode zero blocks (inline <style> + kit) still apply. */

/* ── tokens: the run's motion family (literal values moved here) ───────────── */
:root {
  --dur-4: 640ms;          /* entries, overlays, signature beats */
  --dur-5: 1100ms;         /* long draws (frame trace, count-ups) */
  --stagger: 45ms;
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-win: 520ms;        /* M1 per-cell win-pop (was a literal) */
  --dur-flash: 1400ms;     /* [직접 해 보기] target outline (was a literal) */
}

/* M1 and flash now read the tokens (same values as before) */
.board.solved .pc-cell { animation:win-pop var(--dur-win) var(--ease-settle) both; animation-delay:var(--d, 0ms); }
.flash { animation:flash var(--dur-flash) var(--ease-out) 1; }

/* entry animations for these are driven by JS (fx.js) so they can be interrupted and staggered */
.toast, .sheet { animation:none; }

/* ── screen changes: fx.js swap() — the outgoing screen leaves as a click-through clone and the real screen
   slides in (WAAPI), so input is never blocked. The only View Transition left is the theme circle below. */
@media (prefers-reduced-motion: no-preference) {
  /* theme switch: new colours open as a circle from the pressed button */
  html.vt-theme::view-transition-old(root) { animation:none; mix-blend-mode:normal; }
  html.vt-theme::view-transition-new(root) { animation:fx-theme var(--dur-4) var(--ease-expo) both; mix-blend-mode:normal; }
}
@keyframes fx-theme { from { clip-path:circle(0 at var(--vt-x, 90%) var(--vt-y, 0)); } to { clip-path:circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 0)); } }

/* ── sliding indicators (created by JS only while motion is on) ──────────── */
.fx-ind-bar { height:3px; border-radius:3px; z-index:2; }
.dev-tabs.fx-ind .dev-tab[aria-selected="true"] { border-bottom-color:transparent; }

/* ── overlays: closing ones never catch clicks ──────────────────────────── */
.dlg-backdrop.closing, .menu-backdrop.closing, .guide-backdrop.closing, #unsupTip.closing { pointer-events:none; }

/* ── signature layers ───────────────────────────────────────────────────── */
.fx-burst { position:fixed; inset:0; width:100vw; height:100vh; z-index:60; pointer-events:none; display:none; }
.fx-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.fx-frame rect { fill:none; stroke:var(--ok); stroke-width:5; stroke-dasharray:1 1; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--ok)); }
.fx-clone { animation:none !important; }

/* "지금" tile breathes: a ring that is invisible unless the animation runs (capture/reduce: none) */
.lt { position:relative; }
.lt.now::after {
  content:''; position:absolute; inset:-3px; border-radius:inherit; border:3px solid var(--accent);
  opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference) {
  .lt.now::after { animation:fx-breathe 2.4s var(--ease-out) infinite; }
}
@keyframes fx-breathe { 0% { opacity:.55; transform:scale(1); } 70%, 100% { opacity:0; transform:scale(1.06); } }

/* ── press depth for the remaining tappables ─────────────────────────────── */
.bc::before { transition:background var(--dur-1) var(--ease-out), outline-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.bc:not(.fx):active::before { transform:scale(.9); }
.lt-thumb { transition:transform var(--dur-2) var(--ease-spring); }
.lt:hover .lt-thumb { transform:rotate(-4deg) scale(1.06); }
.pat-card:hover .pat-grid { transform:scale(1.03); }
.pat-grid { transition:transform var(--dur-2) var(--ease-spring); }
.step-pic { transition:transform var(--dur-2) var(--ease-spring); }
.step:hover .step-pic { transform:translateY(-3px) rotate(-4deg); }
@media (hover:none) { .lt:hover .lt-thumb, .step:hover .step-pic, .pat-card:hover .pat-grid { transform:none; } }