/* Kiasu Games: motion on every page. Works with assets/js/motion.js. The rules are the
   "Motion" standing order in the plan doc and the README.
   Every rule sits inside the reduce-motion check, so phones set to reduce motion see a still page. */
:root{--onair:#FF2D2D;--caret:var(--accent)}
:root[data-skin="riso"]{--onair:#FF48B0}
:root[data-skin="afterdark"]{--onair:#FF4FD8}
:root[data-skin="kindred"]{--onair:#FF8A3D}

.m-brand{display:inline-flex;align-items:center;gap:7px;min-width:0}
.onair{display:block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--onair)}

@media (prefers-reduced-motion:no-preference){

/* ---------- intro: waiting in the wings, then on stage ---------- */
.m-wait{opacity:0}
.m-go.m-drop{animation:m-drop .5s cubic-bezier(.2,.9,.3,1.2) var(--d,0ms) backwards}
.m-go.m-up{animation:m-up .45s cubic-bezier(.2,.8,.3,1) var(--d,0ms) backwards}
.m-go.m-pop{animation:m-pop .42s cubic-bezier(.3,1.5,.5,1) var(--d,0ms) backwards}
.m-go.m-deal{animation:m-deal .62s cubic-bezier(.2,.85,.3,1.05) var(--d,0ms) backwards}
/* once a card lands: the sticker is slapped on and the Play button pops */
.m-go.m-deal .sticker{animation:m-slap .36s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + var(--late,430ms)) backwards}
.m-go.m-deal .go{animation:m-pop .38s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + var(--late,430ms) + 120ms) backwards}
.m-go.m-deal .gicon{animation:m-spin .5s cubic-bezier(.3,1.4,.5,1) calc(var(--d,0ms) + 200ms) backwards}

/* the quick version, when coming back from a game */
.m-quick{--late:140ms}
.m-quick .m-go.m-drop,.m-quick .m-go.m-up,.m-quick .m-go.m-pop{animation-duration:.3s}
.m-quick .m-go.m-deal{animation-duration:.4s}

@keyframes m-drop{from{opacity:0;transform:translateY(-16px)}}
@keyframes m-up{from{opacity:0;transform:translateY(10px)}}
@keyframes m-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}}
@keyframes m-deal{0%{opacity:0;transform:translate(var(--dx,24px),72px) rotate(var(--dr,7deg)) scale(.94)}55%{opacity:1;transform:translate(0,-6px) rotate(calc(var(--dr,7deg) * -.2))}}
@keyframes m-slap{0%{opacity:0;transform:scale(2.1) rotate(-16deg)}65%{opacity:1;transform:scale(.93) rotate(var(--sticker-rot))}}
@keyframes m-spin{0%{transform:rotate(-90deg) scale(.5)}70%{transform:rotate(8deg) scale(1.05)}}

/* ---------- typing ---------- */
.m-type{animation:m-bump .32s ease-out var(--end,0ms) backwards;transform-origin:left center}
.m-type .ch{position:relative;opacity:0;animation:m-show .01s linear var(--d) forwards}
.m-type .ch::after{content:"";position:absolute;left:100%;top:.08em;bottom:.04em;width:.09em;margin-left:.03em;border-radius:2px;background:var(--caret);opacity:0;animation:m-caret var(--st) linear var(--d)}
.m-type .ch.last::after{animation:m-blink .9s steps(1,end) var(--d) 2}
@keyframes m-show{to{opacity:1}}
@keyframes m-caret{from,to{opacity:1}}
@keyframes m-blink{0%{opacity:1}50%{opacity:0}}
@keyframes m-bump{50%{transform:scale(1.035)}}

/* ---------- live ---------- */
.m-live .onair{animation:m-onair 2.4s ease-in-out infinite}
.m-live .passpill[data-state="off"]{position:relative;overflow:hidden}
.m-live .passpill[data-state="off"]::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-18deg);animation:m-shine 12s ease-in-out 9.5s infinite;pointer-events:none}

/* The spotlight (motion.js lights one card at a time with .m-lit). */
.m-lit{position:relative;z-index:2;overflow:hidden;animation:m-lift 2s ease-out}
/* a band of coloured stage light drifts across, behind the words */
.m-lit::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 20%,var(--wash-a) 38%,var(--wash-b) 52%,var(--wash-c) 66%,transparent 82%);
  background-size:260% 100%;animation:m-wash 2s ease-in-out both}
/* then a quick white shine over the top */
.m-lit::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-200%) skewX(-16deg);animation:m-glint .8s ease-in-out .35s}
.m-lit .gicon{animation:m-boing .7s cubic-bezier(.3,1.6,.5,1) .12s}
.m-lit .sticker{animation:m-twitch .75s ease-in-out .3s,m-tint 1.1s steps(1,end) .25s}
/* The home page tagline in the spotlight: no lift or stage light, just the Kiasu sticker twitching and blinking. */
.tagline.m-lit{animation:none;overflow:visible}
.tagline.m-lit::before,.tagline.m-lit::after{display:none}
.tagline.m-lit .sticker{animation:m-twitch .75s ease-in-out .1s,m-tint 1.1s steps(1,end) .05s}
/* the meaning bubble pops open */
.define:not([hidden]){transform-origin:82px 0;animation:m-pop .3s cubic-bezier(.3,1.5,.5,1)}
.m-lit .go,.m-lit .price{animation:m-nudge .8s ease-in-out .5s,m-flash .8s steps(1,end) .5s}
.m-lit .status{animation:m-pop .45s cubic-bezier(.3,1.5,.5,1) .35s}

/* how high a card lifts, and the colours of the stage light, in each look */
:root,:root[data-skin="gameshow"]{--lift:9px 11px 0 #111111;--wash-a:rgba(255,255,255,.35);--wash-b:rgba(255,138,216,.55);--wash-c:rgba(182,242,58,.5)}
:root[data-skin="riso"]{--lift:8px 10px 0 #FF48B0;--wash-a:rgba(255,232,0,.45);--wash-b:rgba(255,72,176,.4);--wash-c:rgba(0,120,191,.3)}
:root[data-skin="afterdark"]{--lift:0 0 0 2px #FF4FD8,0 0 38px rgba(255,79,216,.55);--wash-a:rgba(61,232,255,.25);--wash-b:rgba(255,79,216,.35);--wash-c:rgba(198,255,61,.3)}
:root[data-skin="kindred"]{--lift:0 20px 38px rgba(42,33,64,.22);--wash-a:rgba(255,231,163,.6);--wash-b:rgba(244,163,192,.45);--wash-c:rgba(156,200,240,.45)}

@keyframes m-lift{
  0%{transform:none}
  12%{transform:translate(-3px,-7px) scale(1.045) rotate(-1deg);box-shadow:var(--lift)}
  20%{transform:translate(-3px,-5px) scale(1.03) rotate(.5deg);box-shadow:var(--lift)}
  85%{transform:translate(-3px,-5px) scale(1.03) rotate(0);box-shadow:var(--lift)}}
@keyframes m-wash{0%{background-position:100% 0;opacity:0}20%{opacity:1}80%{opacity:1}100%{background-position:0 0;opacity:0}}
@keyframes m-glint{from{transform:translateX(-200%) skewX(-16deg)}to{transform:translateX(450%) skewX(-16deg)}}
@keyframes m-boing{0%{transform:none}35%{transform:rotate(-14deg) scale(1.2)}65%{transform:rotate(8deg) scale(1.05)}}
@keyframes m-twitch{0%,100%{transform:rotate(var(--sticker-rot))}20%{transform:rotate(calc(var(--sticker-rot) - 8deg)) scale(1.1)}45%{transform:rotate(calc(var(--sticker-rot) + 5deg)) scale(1.05)}70%{transform:rotate(calc(var(--sticker-rot) - 2deg))}}
@keyframes m-tint{0%{background:var(--c5-bg);color:var(--c5-ink)}33%{background:var(--c6-bg);color:var(--c6-ink)}66%{background:var(--c3-bg);color:var(--c3-ink)}}
@keyframes m-nudge{0%,100%{transform:none}20%{transform:translateX(6px) scale(1.06)}40%{transform:none}60%{transform:translateX(4px)}}
@keyframes m-flash{0%{background:var(--c6-bg);color:var(--c6-ink)}50%{background:var(--c3-bg);color:var(--c3-ink)}}
@keyframes m-onair{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--onair) 60%,transparent)}50%{opacity:.5;box-shadow:0 0 0 6px color-mix(in srgb,var(--onair) 0%,transparent)}}
@keyframes m-shine{0%{transform:translateX(-160%) skewX(-18deg)}7%,100%{transform:translateX(330%) skewX(-18deg)}}
}

/* ---------- hover: pick the card up ----------
   Only with a mouse or trackpad. Phones have no hover, and a tapped card can get stuck in its hover
   state there, so phones keep the press only. Neighbouring cards tilt opposite ways. Main buttons
   lift without tilting. ":not(#_)" just makes these rules win over the look-specific shadows in styles.css. */
:root,:root[data-skin="gameshow"]{--hov:7px 8px 0 #111111;--hov-sm:5px 6px 0 #111111;--hov-btn:6px 7px 0 #FF5A36}
:root[data-skin="riso"]{--hov:7px 8px 0 #FF48B0;--hov-sm:4px 5px 0 #FF48B0;--hov-btn:6px 7px 0 #FF48B0}
:root[data-skin="afterdark"]{--hov:0 0 26px rgba(198,255,61,.32);--hov-sm:0 0 18px rgba(198,255,61,.3);--hov-btn:0 0 30px rgba(198,255,61,.55)}
:root[data-skin="kindred"]{--hov:0 14px 28px rgba(42,33,64,.16);--hov-sm:0 10px 20px rgba(42,33,64,.14);--hov-btn:0 10px 20px rgba(42,33,64,.22)}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.game,.strip,.crowd,.opt,.chip,.g,.acard,.vote-opt,.theme,.btn{--tilt:-1deg;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s ease}
.game:nth-of-type(even),.acard:nth-of-type(even),.vote-opt:nth-of-type(even){--tilt:1deg}
.crowd,.opt,.chip,.theme{--tilt:-1.5deg}
.crowd:nth-child(even),.opt:nth-child(even),.chip:nth-child(even),.theme:nth-child(even){--tilt:1.5deg}
.g{--tilt:-3deg}
.g:nth-child(even){--tilt:3deg}
/* cards */
.game:hover:not(#_),.strip:hover:not(#_),.acard:hover:not(:disabled):not(#_),.vote-opt:hover:not(:disabled):not(#_){transform:translate(-2px,-3px) rotate(var(--tilt));box-shadow:var(--hov)}
/* smaller choices */
.crowd:hover:not(#_),.opt:hover:not(#_),.chip:hover:not(:disabled):not(#_),.g:hover:not(:disabled):not(#_),.theme:hover:not(#_){transform:translate(-2px,-3px) rotate(var(--tilt));box-shadow:var(--hov-sm)}
/* main buttons: lift, no tilt */
.btn:hover:not(:disabled):not(#_){transform:translate(-1px,-2px);box-shadow:var(--hov-btn)}
.btn.secondary:hover:not(:disabled):not(#_){box-shadow:var(--hov-sm)}
/* pressing wins: it drops flat and the shadow squashes, as if pressed into the table */
.game:active:not(#_),.strip:active:not(#_),.crowd:active:not(#_),.opt:active:not(#_),.chip:active:not(:disabled):not(#_),
.g:active:not(:disabled):not(#_),.acard:active:not(:disabled):not(#_),.vote-opt:active:not(:disabled):not(#_),.theme:active:not(#_),
.btn:active:not(:disabled):not(#_){transform:translate(2px,2px);box-shadow:var(--btn-press);transition-duration:.06s}
}