/* ParadoxChess UI motion + polish layer. Loaded last on every page.
   Only touches chrome (buttons, chips, tiles, panels, inputs, nav, dialogs) — never the board squares or pieces.
   Everything is disabled under prefers-reduced-motion. */
:root{
  --ui-spring:cubic-bezier(.34,1.56,.64,1);
  --ui-out:cubic-bezier(.22,1,.36,1);
  --ui-soft:cubic-bezier(.4,0,.2,1);
  --ui-ring:0 0 0 3px color-mix(in srgb,var(--accent,#81b64c) 45%,transparent);
}

/* ---------- page entrance ---------- */
@keyframes ui-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-pop{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes ui-slide-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes ui-slide-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ui-drop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

body{animation:ui-fade .35s var(--ui-soft) both}
body.ui-leaving{opacity:0;transform:scale(.985);transition:opacity .18s var(--ui-soft),transform .18s var(--ui-soft)}
header.top,.pl-top{animation:ui-drop .5s var(--ui-out) both}
.oc-left{animation:ui-slide-l .55s var(--ui-out) .05s both}
.oc-right{animation:ui-slide-r .55s var(--ui-out) .1s both}
.oc-center{animation:ui-pop .6s var(--ui-out) both}
.oc-right>*,.oc-left>*{animation:ui-rise .5s var(--ui-out) both;animation-delay:calc(.12s + var(--ui-i,0) * 45ms)}
.pl-card,.panel,.search,.chips{animation:ui-rise .55s var(--ui-out) both;animation-delay:calc(var(--ui-i,0) * 70ms)}

/* ---------- staggered grid tiles (index) ---------- */
@keyframes ui-tile-in{0%{opacity:0;transform:translateY(18px) scale(.9) rotate(-2deg)}70%{opacity:1;transform:translateY(-2px) scale(1.02)}100%{transform:none}}
.grid .tile{animation:ui-tile-in .6s var(--ui-out) both;animation-delay:calc(var(--ui-i,0) * 22ms)}
.grid.ui-refilter .tile{animation-duration:.4s;animation-delay:calc(var(--ui-i,0) * 14ms)}

/* tile: 3D tilt + light sheen following the pointer */
.tile{transform-style:preserve-3d;will-change:transform;
  transition:transform .35s var(--ui-out),box-shadow .35s var(--ui-out)!important}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#ffffff38,transparent 45%)}
.tile:hover::after{opacity:1}
.tile:hover{transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-5px) scale(1.035)!important;
  box-shadow:0 1px 0 #ffffff30 inset,0 18px 34px -6px #000a,0 0 0 2px #ffffff22!important;z-index:2}
.tile:hover svg{transform:scale(1.12) translateY(-3px) rotate(-3deg)!important}
.tile:active{transform:perspective(700px) translateY(1px) scale(.95)!important;transition-duration:.08s!important}
.tile b{transition:transform .3s var(--ui-spring),letter-spacing .3s var(--ui-out)}
.tile:hover b{transform:translateY(-3px);letter-spacing:.09em}
.tile.ui-launch{animation:ui-launch .42s var(--ui-in,cubic-bezier(.55,0,1,.45)) forwards!important;z-index:10}
@keyframes ui-launch{40%{transform:scale(.92)}100%{transform:scale(1.5);opacity:0;filter:blur(4px)}}

/* ---------- buttons ---------- */
button,.btn,a.back{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ui-spring),box-shadow .22s var(--ui-out),filter .2s,background-color .25s,color .25s!important}
button:not(:disabled):hover{transform:translateY(-2px)}
button:not(:disabled):active{transform:translateY(3px) scale(.97);transition-duration:.06s!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--ui-ring)!important}
button::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,#ffffff40 48%,transparent 66%);transform:translateX(-120%)}
button:not(:disabled):hover::before{transform:translateX(120%);transition:transform .65s var(--ui-soft)}
.ui-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.28;
  transform:scale(0);animation:ui-ripple .6s var(--ui-out) forwards;z-index:0}
@keyframes ui-ripple{to{transform:scale(1);opacity:0}}
button.ui-bump{animation:ui-bump .38s var(--ui-spring)}
@keyframes ui-bump{40%{transform:scale(1.08)}}
.pl-go:not(:disabled),.pl-card .pl-go{background-size:200% 100%;
  background-image:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));
  animation:ui-glow 3s ease-in-out infinite}
@keyframes ui-glow{50%{background-position:100% 0;box-shadow:0 4px 0 var(--accent-low),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}}

/* segmented controls: selected pill springs in */
.pl-seg button[aria-checked=true]{animation:ui-bump .35s var(--ui-spring)}

/* ---------- chips with sliding active pill ---------- */
.chips{position:relative}
.chip{position:relative;z-index:1;transition:transform .25s var(--ui-spring),color .25s,background-color .25s!important}
.chip:hover{transform:translateY(-2px) scale(1.04)!important}
.chip:active{transform:scale(.94)!important}
.chips.ui-has-pill .chip[aria-pressed=true]{background:transparent!important}
.ui-pill{position:absolute;z-index:0;top:0;left:0;border-radius:999px;background:var(--chip-on,#e8ecf2);pointer-events:none;
  box-shadow:0 6px 18px -4px #0008;transition:transform .45s var(--ui-spring),width .45s var(--ui-spring),height .3s}

/* ---------- inputs ---------- */
input[type=search],input[type=text],input:not([type]),select{transition:border-color .2s,background-color .2s,box-shadow .25s var(--ui-out),transform .25s var(--ui-spring)!important}
input:focus{transform:scale(1.01)}
.search svg{transition:transform .35s var(--ui-spring),stroke .2s}
.search:focus-within svg{transform:translateY(-50%) scale(1.18) rotate(-10deg)!important;stroke:var(--accent)!important}
.noresult:not([hidden]){animation:ui-pop .45s var(--ui-out)}

/* ---------- nav links: underline grows ---------- */
header.top a:not(.logo),.pl-nav a{position:relative;transition:color .2s}
header.top a:not(.logo)::after,.pl-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ui-out)}
header.top a:not(.logo):hover::after,.pl-nav a:hover::after{transform:scaleX(1)}
header.top a:not(.logo):hover,.pl-nav a:hover{color:var(--accent)}
.logo i,.pl-logo i{transition:transform .5s var(--ui-spring),box-shadow .3s;animation:ui-logo 6s ease-in-out infinite}
.logo:hover i,.pl-logo:hover i{transform:rotate(-12deg) scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent)}
@keyframes ui-logo{0%,90%,100%{transform:none}93%{transform:rotate(-10deg) scale(1.08)}96%{transform:rotate(6deg)}}
header.top.ui-scrolled{box-shadow:0 10px 30px -12px #000c}

/* ---------- panels / cards ---------- */
.pl-card,.panel:not(.oc-right .panel){transition:transform .35s var(--ui-out),box-shadow .35s var(--ui-out)}
.pl-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -10px #000a,0 0 0 1px #ffffff14}
.oc-howto h2,.oc-right h2{position:relative;padding-left:10px}
.oc-howto h2::before,.oc-right h2::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;border-radius:3px;background:var(--accent);
  transform:scaleY(0);animation:ui-bar .5s var(--ui-spring) .45s forwards}
@keyframes ui-bar{to{transform:scaleY(1)}}

/* status line: re-animates on every change (class toggled by ui-motion.js) */
#status.ui-change,.oc-status.ui-change,#m-title.ui-change{animation:ui-status .45s var(--ui-spring)}
@keyframes ui-status{0%{opacity:.2;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:none}}
/* move-log rows slide in */
#moves>li:last-child,#log>*:last-child,.oc-log>*:last-child{animation:ui-slide-r .35s var(--ui-out)}

/* screens & overlays */
.pl-screen:not([hidden]){animation:ui-rise .45s var(--ui-out)}
#promo:not([hidden]){animation:ui-fade .2s both}
#promo:not([hidden]) button{animation:ui-pop .4s var(--ui-spring) both}
#promo button:nth-child(2){animation-delay:.05s}#promo button:nth-child(3){animation-delay:.1s}#promo button:nth-child(4){animation-delay:.15s}
dialog[open],[role=dialog]:not([hidden]){animation:ui-pop .4s var(--ui-out)}
dialog::backdrop{animation:ui-fade .25s}
.pl-spin{animation-timing-function:cubic-bezier(.5,.1,.5,.9)!important}
.pl-dot.on{animation:ui-pulse 1.8s ease-out infinite}
@keyframes ui-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .tile:hover{transform:none!important}
}
/* respects the in-game "Animations" switch (motionctl.js) */
.oc-noanim *:not(.pc):not(.sq),.oc-noanim *::before,.oc-noanim *::after{animation:none!important}
.oc-noanim .tile:hover{transform:none!important}
/* game boards: hand cursor only over pieces */
.oc-center *,#board *{cursor:default!important}
.oc-center .pz,.oc-center .pz *,.oc-center :has(>.pz),#board .pz,#board .pz *,#board :has(>.pz){cursor:pointer!important}
/* game-over card: black pieces sit on a light chip so they read on the dark card */
.caps .gl .pc.b{display:inline-flex;align-items:center;gap:1px;background:#e4e1da;border-radius:7px;padding:3px 7px;box-shadow:inset 0 -2px 0 #0002}