/* ============================================================================
   exotic — motion kit · css/motion-kit.css
   ----------------------------------------------------------------------------
   Styles for the specimens built by js/motion-kit.js. Two atoms — the globe's
   dot-and-ring beat and the mark's travelling wave — at UI scale.

   Everything here obeys the round-2 laws: three curves (--ease-out / --ease-emph
   / --ease-inout), six durations (--t-press…--t-story), the ramp as LIGHT only,
   and nothing bouncy — these are all light, and light does not overshoot.

   REDUCED MOTION IS CURATED, NOT NUKED (kit.css's precedent, DESIGN.md law):
   a progress cue survives as a legible STATIC state, pure delight goes dark.
   Every rule that stops is in the one block at the bottom, with its reason.
   ========================================================================== */

/* the announcement a loading state owes a screen reader */
.mk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================================
   PULSE · ping — the globe's tick-dot, inline
   letter/globe.js: radius 3 → 12px, alpha (1−k)·0.5, linear across 2.2s. Here
   the ring is a 24px box (r=12) scaled from .25 (r=3) — the same numbers.
   The 3.2s cycle gives the beat a breath between pulses; on the globe that
   space is filled by the neighbouring dots' staggered rings.
   ========================================================================== */
/* DEFAULT: an INK dot inside a RAMP ring. That split is the meridian law, not
   a styling whim — the ramp exists as light, never as a fill, so the halo
   carries the brand and the dot stays neutral. It also survives the colorway:
   under Solar the whole ramp is warm, and a warm FILLED dot beside a --warn
   dot is a real ambiguity. A ring around ink never is.
   A semantic tone (up/down/warn) colours BOTH, because there the colour is
   the meaning; `ramp` colours both for surfaces with nothing else warm. */
.mk-ping{position:relative;display:inline-block;width:8px;height:8px;flex:0 0 auto;vertical-align:-1px;
  --mk-dot:var(--ink-2); --mk-ring:var(--g4)}
.mk-ping[data-tone="ramp"]{--mk-dot:var(--g4)}
.mk-ping[data-tone="up"]{--mk-dot:var(--up);--mk-ring:var(--up)}
.mk-ping[data-tone="down"]{--mk-dot:var(--down);--mk-ring:var(--down)}
.mk-ping[data-tone="warn"]{--mk-dot:var(--warn);--mk-ring:var(--warn)}
.mk-ping[data-tone="ink"]{--mk-dot:var(--ink-2);--mk-ring:var(--ink-2)}
.mk-ping i{position:absolute;inset:0;border-radius:50%;background:var(--mk-dot);display:block}
.mk-ping::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border-radius:50%;border:1px solid var(--mk-ring);opacity:0;pointer-events:none;
  animation:mkPing 3.2s linear infinite}
/* .quiet = the dot without its ring — the scale kit.css's `.pending` runs at,
   where a 24px ring would not fit inside the button */
.mk-ping.quiet::after{content:none}
@keyframes mkPing{
  0%     {transform:scale(.25);opacity:.5}
  68.75% {transform:scale(1);  opacity:0}    /* 2.2s of 3.2s — the globe's pulse */
  100%   {transform:scale(1);  opacity:0}
}

/* PULSE · ripple — the same ring, once, from the point pressed */
.mk-ripple{position:absolute;width:var(--mk-rip,30px);height:var(--mk-rip,30px);border-radius:50%;
  border:1px solid var(--mk-ring,var(--g4));translate:-50% -50%;pointer-events:none;z-index:2;
  animation:mkRipple .62s linear forwards}
.mk-ripple[data-tone="up"]{--mk-ring:var(--up)}
.mk-ripple[data-tone="down"]{--mk-ring:var(--down)}
@keyframes mkRipple{from{transform:scale(.25);opacity:.5}to{transform:scale(1);opacity:0}}

/* ============================================================================
   LATTICE · field / trail — canvas specimens
   The host sizes them; the canvas fills it. Give the host a height.
   ========================================================================== */
.mk-field,.mk-trail{position:relative;display:block;width:100%;min-height:40px}
.mk-field>canvas,.mk-trail>canvas{transition:opacity var(--t-slow,.3s) var(--ease-out)}

/* ============================================================================
   LATTICE · tally — countable steps, walking the meridian
   The frontier dot wears the ping: the one thing happening is the one thing
   that beats. Each dot lands one LAG (77ms) after the last — the mark's own
   per-stroke lag, which is also the load storyboard's row stagger.
   ========================================================================== */
.mk-tally{display:inline-flex;align-items:center;gap:9px}
.mk-tally i{position:relative;display:block;width:7px;height:7px;border-radius:50%;
  background:var(--hairline);flex:0 0 auto;
  transition:background var(--t-med,.24s) var(--ease-out),transform var(--t-med,.24s) var(--ease-out);
  transition-delay:var(--mk-d,0ms)}
.mk-tally i.on{background:var(--mk-c)}
.mk-tally i.now{background:var(--mk-c);transform:scale(1.25)}
.mk-tally i.now::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--mk-c);opacity:0;animation:mkPing 3.2s linear infinite}

/* ============================================================================
   WAVE · think — the mark, thinking
   Draw at 6× and scale down so the round stroke caps stay crisp at 20px.
   ========================================================================== */
.mk-think{position:relative;display:inline-block;flex:0 0 auto;line-height:0;vertical-align:middle;
  transition:opacity var(--t-med,.24s) var(--ease-out)}
.mk-think>svg{display:block;width:100%;height:100%}
.mk-think.done{opacity:.35}

/* WAVE · rule — the breathing hairline, and the crest that ends it */
.mk-rule{display:block;width:100%;overflow:visible;
  transition:opacity var(--t-med,.24s) var(--ease-out)}
.mk-rule.settled{opacity:.5}

/* ============================================================================
   AUCTION · arc — a determinate wait, because the wait IS determinate
   ========================================================================== */
.mk-arc{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
.mk-arc>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk-arc-face{position:relative;text-align:center;font-family:var(--font-num);line-height:1.1;
  transition:color var(--t-med,.24s) var(--ease-out)}
.mk-arc-face b{display:block;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;color:var(--ink)}
.mk-arc-face span{display:block;font-size:8px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);margin-top:3px;min-height:10px}
.mk-arc-face.done b{color:var(--up);font-size:13px;letter-spacing:var(--track-caps,.07em);
  text-transform:uppercase}
/* the landing crest: the swell, radially. One pass out, then gone — the same
   shape as the rule's crest, wrapped around a circle. */
.mk-arc-crest{stroke:var(--g4);stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center}
.mk-arc.landed .mk-arc-crest{animation:mkArcCrest .7s var(--ease-emph,cubic-bezier(.16,1,.3,1)) both}
@keyframes mkArcCrest{from{transform:scale(.92);opacity:.7}to{transform:scale(1.22);opacity:0}}

/* ============================================================================
   DELIGHT · swim — the wordmark's underline is the mark's own wave, in phase
   ========================================================================== */
.mk-swim{position:relative;display:inline-flex;align-items:center;gap:9px;padding-bottom:11px}
.mk-swim .m{display:block;line-height:0;flex:0 0 auto}
.mk-swim .m>svg{display:block;width:100%;height:100%}
.mk-swim .t{font-family:var(--font-sans);font-weight:700;letter-spacing:-0.045em;
  text-transform:lowercase;color:var(--ink);line-height:1}
.mk-swim .w{position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none}
.mk-swim .w>svg{display:block;width:100%;height:100%;overflow:visible}

/* ============================================================================
   DELIGHT · wash — the page sweep, scoped to one card
   Inherits the host's radius so the wave never squares off a rounded card.
   ========================================================================== */
.mk-wash{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  border-radius:inherit;opacity:0}
.mk-wash.on{opacity:1}
.mk-wash>svg{display:block;width:100%;height:100%}

/* ============================================================================
   REDUCED MOTION — curated, one rule at a time, each with its reason

   The selectors are listed twice on purpose: the media query is the product
   behaviour, `html.mk-reduce` is a PREVIEW hook so Motion.html and QA can see
   this build without changing an OS setting. js/motion-kit.js reads the same
   two signals. Keep the two lists identical.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  /* PROGRESS CUES SURVIVE, STATICALLY — the user still needs the state.
     kit.css keeps the pending dot as a steady dot for exactly this reason. */
  .mk-ping::after,.mk-tally i.now::after{animation:none;opacity:0}
  /* the live dot stays a dot; the frontier step stays visibly the frontier */
  .mk-ping i{box-shadow:0 0 0 2px color-mix(in oklab,var(--mk-ring) 30%,transparent)}
  .mk-tally i.now{transform:scale(1.35);box-shadow:0 0 0 2px color-mix(in oklab,var(--mk-c) 26%,transparent)}
  .mk-tally i{transition:none}
  /* the arc keeps its dots, its numeral and its cleared state — only the
     radial swell goes, because the swell is celebration, not information */
  .mk-arc.landed .mk-arc-crest{animation:none;opacity:0}
  /* PURE DELIGHT GOES DARK. (ripple, swim, wash and the canvas specimens
     short-circuit in js/motion-kit.js — nothing to stop here.) */
  .mk-ripple{display:none}
  .mk-think,.mk-rule,.mk-field>canvas,.mk-trail>canvas{transition:none}
}
html.mk-reduce .mk-ping::after,html.mk-reduce .mk-tally i.now::after{animation:none;opacity:0}
html.mk-reduce .mk-ping i{box-shadow:0 0 0 2px color-mix(in oklab,var(--mk-ring) 30%,transparent)}
html.mk-reduce .mk-tally i.now{transform:scale(1.35);box-shadow:0 0 0 2px color-mix(in oklab,var(--mk-c) 26%,transparent)}
html.mk-reduce .mk-tally i{transition:none}
html.mk-reduce .mk-arc.landed .mk-arc-crest{animation:none;opacity:0}
html.mk-reduce .mk-ripple{display:none}
html.mk-reduce :is(.mk-think,.mk-rule,.mk-field>canvas,.mk-trail>canvas){transition:none}