/* app-motion.css — 158859 color dictionary demo, motion layer (ADR 0065 Amend (3), 2026-10-12).
   Loaded after the inline token stylesheet and mk/motion-kit.css. Uses the app's tokens
   (--dur-1..5, --stagger, --ease-*). Floors: every rule that moves is zeroed by the
   prefers-reduced-motion and body.capture-mode blocks (inline tokens + motion-kit.css + the end of
   this file). Pre-reveal hiding exists only where JS adds it while motion is on. */

/* ── text selection (audit low: section 10-4 focus/selection color) ─────── */
::selection { background:var(--accent-bg); color:var(--text); }

/* ── sticky [데모] strip: a hairline shadow once the page scrolls (JS adds it only with motion on) ── */
.demo-strip { transition:box-shadow var(--dur-2) var(--ease-out); }
.demo-strip.is-scrolled { box-shadow:var(--elev-2); }

/* ── press depth on tappable rows and links (buttons/chips come from motion-kit.css) ── */
.nav-link, .row-btn, .s1-opt, .s1-link, .s4-row, .s4-feat, .menu-row, .s3-pic-btn, .a1-row, .a3-c {
  transition-property:color, background-color, border-color, transform, box-shadow;
  transition-duration:var(--dur-1);
  transition-timing-function:var(--ease-out);
}
.nav-link:active, .menu-row:active { transform:scale(.96); }
.row-btn:active, .s1-opt:active, .s1-link:active, .s4-row:active, .s4-feat:active { transform:scale(.985); }
.s3-pic-btn:active { transform:scale(.97); }
.s1-band:active { transform:scaleY(1.08); }
.s1-band { transition:transform var(--dur-2) var(--ease-spring); }
.s1-band:focus-visible { outline-offset:4px; }

/* ── sliding tab indicator (JS creates .fx-ind only when motion is on; static borders stay otherwise) ── */
.fx-ind {
  position:absolute; left:0; top:0; width:0; height:3px; border-radius:var(--r-sm);
  background:var(--accent); pointer-events:none; z-index:1;
  transition:transform var(--dur-3) var(--ease-expo), width var(--dur-3) var(--ease-expo), height var(--dur-3) var(--ease-expo), opacity var(--dur-2) var(--ease-out);
}
.fx-has-ind > .nav-link[aria-current="page"] { border-top-color:transparent; border-bottom-color:transparent; border-left-color:transparent; }

/* ── screen transitions: direction-aware slide of <main> (name set by the shell only during the swap) ── */
@keyframes fx-out-l { to { opacity:0; transform:translateX(-48px); } }
@keyframes fx-out-r { to { opacity:0; transform:translateX(48px); } }
@keyframes fx-in-r  { from { opacity:0; transform:translateX(72px); } }
@keyframes fx-in-l  { from { opacity:0; transform:translateX(-72px); } }
:root[data-nav-dir="fwd"]::view-transition-old(screen)  { animation:fx-out-l var(--dur-2) var(--ease-in-out) both; }
:root[data-nav-dir="fwd"]::view-transition-new(screen)  { animation:fx-in-r var(--dur-4) var(--ease-expo) both; }
:root[data-nav-dir="back"]::view-transition-old(screen) { animation:fx-out-r var(--dur-2) var(--ease-in-out) both; }
:root[data-nav-dir="back"]::view-transition-new(screen) { animation:fx-in-l var(--dur-4) var(--ease-expo) both; }
::view-transition-group(screen) { animation-duration:var(--dur-4); }
/* input never waits for a transition: the overlay lets clicks/taps through to the live DOM underneath
   (the new screen is already in place; a new navigation skips the running transition) */
::view-transition { pointer-events:none; }
/* other same-document transitions (filters, quiz steps, color-face morph): a plain cross-fade of the page,
   no page-wide slide; during a screen swap the chrome stays put and only <main> travels */
@keyframes fx-fade-out { to { opacity:0; } }
@keyframes fx-fade-in { from { opacity:0; } }
::view-transition-old(root) { animation:fx-fade-out var(--dur-2) var(--ease-out) both; }
::view-transition-new(root) { animation:fx-fade-in var(--dur-3) var(--ease-out) both; }
:root[data-nav-dir]::view-transition-old(root) { animation:none; opacity:0; }
:root[data-nav-dir]::view-transition-new(root) { animation:none; }

/* ── S1 result: stronger staggered rise for the result sections (delays set by ui-site.js) ── */
@keyframes fx-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.s1-res .enter { animation:fx-rise var(--dur-4) var(--ease-expo) both; }
.s1-face-in { will-change:auto; }
.s1-bar-fill { transform-origin:left center; }

/* ── S1 home signature: pigment canvas lies over the band section while it plays ── */
.s1-band-sec { position:relative; }
.fx-pigment { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* ── S2 result face: a slower, stronger fill + sheen pass ── */
.s2-face { animation-duration:var(--dur-4); animation-timing-function:var(--ease-expo); }

/* ── toasts: spring in, animated out (.is-leaving set by the shell) ── */
@keyframes fx-toast-in  { from { opacity:0; transform:translateY(24px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes fx-toast-out { to { opacity:0; transform:translateY(12px) scale(.96); } }
@keyframes fx-shake { 0%,100% { transform:none; } 20% { transform:translateX(-8px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(3px); } }
.toast { animation:fx-toast-in var(--dur-3) var(--ease-spring) both; }
.toast[data-tone="bad"], .toast[data-tone="warn"] { animation:fx-toast-in var(--dur-3) var(--ease-spring) both, fx-shake 420ms var(--ease-out) var(--dur-2); }
.toast.is-leaving { animation:fx-toast-out var(--dur-2) var(--ease-in-out) forwards; pointer-events:none; }
.toast-ic-draw circle, .toast-ic-draw path { stroke-dasharray:1; stroke-dashoffset:0; }
.toast-ic-draw circle { animation:fx-draw var(--dur-4) var(--ease-out) var(--dur-1) both; }
.toast-ic-draw path { animation:fx-draw var(--dur-3) var(--ease-out) var(--dur-3) both; }
@keyframes fx-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

/* ── layers: stronger open, and the same motion in reverse on close (.is-closing set by the shell) ── */
.layer { transition:opacity var(--dur-3) var(--ease-out); }
.dlg { transform:translateY(40px) scale(.97); transition:transform var(--dur-3) var(--ease-expo); }
.sheet { transform:translateY(64px); transition:transform var(--dur-3) var(--ease-expo); }
.guide-backdrop { transition:opacity var(--dur-3) var(--ease-out); }
.guide-modal { transform:translateY(32px) scale(.97); transition:transform var(--dur-3) var(--ease-expo); }
.layer.is-closing, .guide-backdrop.is-closing { pointer-events:none; transition-duration:var(--dur-2); }
.layer.is-closing .dlg, .layer.is-closing .sheet, .guide-backdrop.is-closing .guide-modal { transition-duration:var(--dur-2); transition-timing-function:var(--ease-in-out); }
#unsupTip { transform:translateY(-8px) scale(.97); transform-origin:top left; transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
#unsupTip.is-closing { pointer-events:none; }
@media (min-width:768px) {
  .sheet { transform:translateX(56px); }
}

/* ── A1 delete collapse, flashes: literal durations moved onto tokens (audit low) ── */
.flash { animation-duration:var(--dur-5); }
.is-new { animation-duration:calc(var(--dur-5) + var(--dur-3)); }

/* ── floor 1 (repeated here so this file is safe on its own) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .fx-pigment, .fx-ind { display:none !important; }
}
body.capture-mode *, body.capture-mode *::before, body.capture-mode *::after { animation:none !important; transition:none !important; }
body.capture-mode .fx-pigment, body.capture-mode .fx-ind { display:none !important; }
:root[data-capture]::view-transition-group(*), :root[data-capture]::view-transition-old(*), :root[data-capture]::view-transition-new(*) { animation:none !important; }