/* Smoother arcade: a light that runs once around a random button now and then, screens that slide in from the side
   of the tab you picked, a gliding underline on the mode tabs, cards that lift and grey placeholders while a list loads.
   Loaded last. Colours come from the theme variables. The Motion setting (html.no-motion, style.css) and reduced
   motion stop all of it; there is no separate switch. */

@property --sm-a{syntax:'<angle>'; initial-value:0deg; inherits:false;}

/* ---------- the button light run (smooth.js picks the button) ---------- */
.sm-pos{position:relative;} /* only on buttons that were not positioned already (smooth.js) */
:is(.btn,.dw-btn,.ld-cta,.connect-btn,.try-btn).sm-run::after{content:""; position:absolute; inset:0; padding:3px; pointer-events:none; border-radius:inherit;
  background:conic-gradient(from var(--sm-a), transparent 0 68%, color-mix(in srgb, #F5C542 45%, transparent) 78%, #fff 84%, #F5C542 88%, transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sm-run var(--sm-speed, 1.3s) linear 1 both;}
@keyframes sm-run{0%{--sm-a:0deg; opacity:0;}12%{opacity:1;}85%{opacity:1;}100%{--sm-a:360deg; opacity:0;}}

/* ---------- screens slide in from the side of the tab you picked ---------- */
@keyframes sm-in-r{from{transform:translateX(28px); opacity:0;}to{transform:none; opacity:1;}}
@keyframes sm-in-l{from{transform:translateX(-28px); opacity:0;}to{transform:none; opacity:1;}}
:root[data-sm-dir="r"] .screen.active{animation:sm-in-r .36s cubic-bezier(.2,.8,.2,1);}
:root[data-sm-dir="l"] .screen.active{animation:sm-in-l .36s cubic-bezier(.2,.8,.2,1);}
:root.playing .screen.active{animation:none;} /* a game never slides */

/* ---------- the mode tabs: one underline that glides to the picked tab ---------- */
/* .mode-tabs is already positioned (sticky, fixed on phones), so the underline can sit in it */
.sm-ink{position:absolute; bottom:-2px; left:0; width:0; height:3px; background:var(--sm-c, var(--accent-amber)); pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), background-color .35s;}
.mode-tabs.sm-glide .mode-tab.on{border-bottom-color:transparent;}
:root.no-motion .sm-ink{display:none;}
:root.no-motion .mode-tabs.sm-glide .mode-tab.on{border-bottom-color:var(--c);}

/* ---------- cards lift ---------- */
.mini-card,.comp-card,.dw-card{transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s;}
.mini-card:hover,.comp-card:hover,.dw-card:hover{transform:translateY(-3px);}

/* ---------- loading placeholders ---------- */
.sm-skel{display:flex; flex-direction:column; gap:12px; padding:4px 0;}
.sm-skel .sm-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;}
.sm-sk{position:relative; overflow:hidden; border-radius:10px; background:var(--bg-panel, #1E0E0D); border:2px solid var(--border);}
.sm-sk::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 9%, transparent), transparent); animation:sm-shimmer 1.1s infinite;}
@keyframes sm-shimmer{to{transform:translateX(100%);}}
.sm-skel .sm-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  :is(.btn,.dw-btn,.ld-cta,.connect-btn,.try-btn).sm-run::after,.sm-sk::after{animation:none; display:none;}
  :root[data-sm-dir] .screen.active{animation:none;}
  .sm-ink{transition:none;}
}