/* SPEC §6.5 — one motion vocabulary. Transforms and opacity only; never
   width/height/top/left. Every duration ≤ 420 ms.
   The off switch: html[data-motion="off"] (Options), html.opt-reduce-motion
   (the shell's class) and the OS preference all zero everything out. */

/* ------------------------------------------------------------------- cards */
@keyframes sc-pop-in {
  0%   { transform:scale(.6); opacity:0; }
  62%  { transform:scale(1.04); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes sc-pop-off {
  0%   { transform:scale(1); opacity:1; }
  100% { transform:scale(.6); opacity:0; }
}
@keyframes sc-shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-9px); }
  40% { transform:translateX(8px); }
  60% { transform:translateX(-6px); }
  80% { transform:translateX(4px); }
}
@keyframes sc-flash {
  0%,100% { box-shadow:0 0 0 0 rgba(232,163,23,0); background-color:var(--cream); }
  15%,55% { box-shadow:0 0 0 12px rgba(232,163,23,.55); background-color:var(--amber-pale); }
  35%,75% { box-shadow:0 0 0 0 rgba(232,163,23,0); background-color:var(--cream); }
}
@keyframes sc-slide-in {
  from { transform:translateX(46px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
@keyframes sc-slide-back {
  from { transform:translateX(-46px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
@keyframes sc-flagpop {
  0%   { transform:scale(.2) translateY(10px); opacity:0; }
  70%  { transform:scale(1.18) translateY(0); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes sc-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(232,163,23,.75); }
  50%     { box-shadow:0 0 0 14px rgba(232,163,23,0); }
}
@keyframes sc-check {
  from { stroke-dashoffset:64; }
  to   { stroke-dashoffset:0; }
}

.anim-pop-in  { animation:sc-pop-in .26s cubic-bezier(.2,.9,.3,1.2) both;
                animation-delay:calc(var(--i, 0) * 70ms); }
.anim-pop-off { animation:sc-pop-off .18s ease-in both; }
.anim-shake   { animation:sc-shake .3s ease-in-out both; }
.anim-flash   { animation:sc-flash .76s ease-in-out both; }
.anim-slide-in   { animation:sc-slide-in .28s cubic-bezier(.2,.8,.3,1) both; }
.anim-slide-back { animation:sc-slide-back .28s cubic-bezier(.2,.8,.3,1) both; }
.anim-flagpop { animation:sc-flagpop .26s cubic-bezier(.2,.9,.3,1.4) both; }
.anim-pulse   { animation:sc-pulse 1.5s ease-out infinite; }

/* --------------------------------------------------------------- the card */
.card { perspective:900px; }
.card__inner { transition:transform .42s cubic-bezier(.3,.7,.3,1); transform-style:preserve-3d; }
.card.is-down .card__inner { transform:rotateY(180deg); }

/* ------------------------------------------------------------- the markers */
.ladder__cup, .utrack__fillmark { transition:transform .4s cubic-bezier(.3,.8,.3,1); }

/* ------------------------------------------------------------- the buttons */
.btn, .gbtn { transition:transform .08s ease, filter .08s ease, background-color .12s ease; }
.gbtn:hover { filter:brightness(.94); }
.gbtn:active, .btn:active { transform:scale(.96); filter:brightness(.88); }
.gbtn.is-disabled:active { transform:none; filter:none; }

.btn__check {
  position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); pointer-events:none;
}
.btn__check path {
  fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:64; stroke-dashoffset:64; animation:sc-check .24s ease-out forwards;
}
.is-checked { position:relative; }
.is-checked > .btn__label, .is-checked > .gbtn__label { opacity:0; }

/* --------------------------------------------------------------- the flier */
.flier { will-change:transform; }

/* ------------------------------------------------------------- the off switch */
html[data-motion="off"] .anim-pop-in,
html[data-motion="off"] .anim-pop-off,
html[data-motion="off"] .anim-shake,
html[data-motion="off"] .anim-flash,
html[data-motion="off"] .anim-slide-in,
html[data-motion="off"] .anim-slide-back,
html[data-motion="off"] .anim-flagpop,
html[data-motion="off"] .anim-pulse,
html.opt-reduce-motion .anim-pop-in,
html.opt-reduce-motion .anim-pop-off,
html.opt-reduce-motion .anim-shake,
html.opt-reduce-motion .anim-flash,
html.opt-reduce-motion .anim-slide-in,
html.opt-reduce-motion .anim-slide-back,
html.opt-reduce-motion .anim-flagpop,
html.opt-reduce-motion .anim-pulse { animation:none !important; }

html[data-motion="off"] .card__inner,
html[data-motion="off"] .ladder__cup,
html[data-motion="off"] .utrack__fillmark,
html[data-motion="off"] .gbtn,
html[data-motion="off"] .btn,
html.opt-reduce-motion .card__inner,
html.opt-reduce-motion .ladder__cup,
html.opt-reduce-motion .utrack__fillmark,
html.opt-reduce-motion .gbtn,
html.opt-reduce-motion .btn { transition:none !important; }

html[data-motion="off"] .btn__check path,
html.opt-reduce-motion .btn__check path { animation:none !important; stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) * {
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}