:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
@keyframes tactiqo-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes tactiqo-dialog{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tactiqo-backdrop{from{opacity:0}to{opacity:1}}
@keyframes tactiqo-ambient{0%,100%{opacity:.72}50%{opacity:1}}
.motion-enter>.hero,.motion-enter>.players-hero{animation:tactiqo-enter 500ms var(--motion-ease) both}
.motion-enter>.toolbar,.motion-enter>.builder-layout,.motion-enter>.overlay-stage,.motion-enter>.overlay-controls{animation:tactiqo-enter 520ms 60ms var(--motion-ease) both}
.motion-enter .card{animation:tactiqo-enter 460ms var(--motion-ease) both;animation-delay:calc(var(--entry-order,0)*45ms + 90ms)}
.motion-enter .card:nth-child(2){--entry-order:1}.motion-enter .card:nth-child(3){--entry-order:2}.motion-enter .card:nth-child(4){--entry-order:3}.motion-enter .card:nth-child(5){--entry-order:4}.motion-enter .card:nth-child(6){--entry-order:5}.motion-enter .card:nth-child(n+7){--entry-order:6}
.card{transition:border-color 220ms,background-color 220ms,box-shadow 250ms}
.nav,.chip,.primary,.outline,.favorite,.brand-mark{transition:transform 180ms var(--motion-ease),background-color 200ms,border-color 200ms,color 200ms,box-shadow 220ms}
.portrait,.item-card,.item-option{transition:transform 180ms var(--motion-ease),border-color 200ms,box-shadow 200ms}
input,select{transition:border-color 180ms,box-shadow 200ms}
input:focus,select:focus{border-color:var(--mint);box-shadow:0 0 0 3px #a5f5ce0d}
dialog[open]{animation:tactiqo-dialog 260ms var(--motion-ease)}dialog[open]::backdrop{animation:tactiqo-backdrop 220ms ease;backdrop-filter:blur(5px)}
.trait-background{animation:tactiqo-ambient 18s ease-in-out infinite}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:#5c8c7b;background-color:#15232a;box-shadow:0 8px 28px #0003}.nav:hover{transform:translateX(3px)}.chip:hover,.primary:hover,.outline:hover{transform:translateY(-2px);box-shadow:0 5px 16px #0003}.brand:hover .brand-mark{transform:rotate(-5deg)}.unit:hover .portrait{transform:translateY(-3px) scale(1.06);box-shadow:0 5px 14px #0006}.item-card:hover{transform:translateY(-2px)}.favorite:hover{transform:scale(1.14)}}
.primary:active,.outline:active,.chip:active,.favorite:active{transform:scale(.97)}
/* Respect OS motion preferences; never animate board cells or drag targets. */
@media(prefers-reduced-motion:reduce){.motion-enter>* ,.motion-enter .card,dialog[open],dialog[open]::backdrop,.trait-background{animation:none!important}.nav,.chip,.primary,.outline,.favorite,.brand-mark,.portrait,.item-card,.item-option,input,select,.card{transition:none!important}.nav:hover,.chip:hover,.primary:hover,.outline:hover,.brand:hover .brand-mark,.unit:hover .portrait,.item-card:hover,.favorite:hover,.primary:active,.outline:active,.chip:active,.favorite:active{transform:none!important}}

/* Second motion pass: coordinated filtering, cursor light and richer depth. */
@keyframes tactiqo-filter{from{opacity:.25;transform:translateY(7px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
.motion-filter .cards{animation:tactiqo-filter 300ms var(--motion-ease) both}
.card{position:relative;isolation:isolate;transition:border-color 220ms,background-color 220ms,box-shadow 280ms,transform 280ms var(--motion-ease)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 320px 160px at var(--light-x,50%) var(--light-y,50%),#a5f5ce12,transparent 75%);opacity:0;transition:opacity 280ms}
.card.pointer-lit::before{opacity:1}
.nav{position:relative}.nav::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:2px;border-radius:2px;background:var(--mint);transform:scaleY(0);opacity:0;transition:transform 280ms var(--motion-ease),opacity 200ms}.nav.active::before{transform:scaleY(1);opacity:1}
.hero h1 span{display:inline-block;text-shadow:0 0 32px #a5f5ce0a}.motion-enter .hero h1 span{animation:tactiqo-enter 650ms 100ms var(--motion-ease) both}
.primary{position:relative;overflow:hidden;isolation:isolate}.primary::after{content:"";position:absolute;inset:-40% auto -40% -55%;width:35%;background:linear-gradient(90deg,transparent,#ffffff30,transparent);transform:skewX(-20deg);pointer-events:none;transition:left 550ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px #0004}.primary:hover::after{left:125%}.card:hover .comp-title{color:var(--mint)}.trait-panel .tag{transition:border-color 200ms,background-color 200ms}.trait-panel .tag:hover{border-color:#6c9d8a;background-color:#a5f5ce12}}
@media(prefers-reduced-motion:reduce){.motion-filter .cards,.motion-enter .hero h1 span{animation:none!important}.card::before,.nav::before,.primary::after,.trait-panel .tag{transition:none!important}.card:hover{transform:none!important}.primary::after{display:none}.trait-background{animation:none!important}}