/* =====================================================================
   Motion & interactivity layer (loaded after app.css)
   ===================================================================== */

/* ---------- clickable badges ---------- */
.gp{cursor:pointer;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s,filter .15s;user-select:none}
.pill.gp:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12);filter:saturate(1.15)}
.pill.gp:active{transform:scale(.95)}
.health.gp{padding:2px 8px 2px 6px;margin-left:-6px;border-radius:999px}
.health.gp:hover{background:var(--surface-2)}
b.gp:hover{color:var(--teal-d,#037F79);text-decoration:underline}
.tag.gp:hover{background:var(--lime);color:#fff}
.av[data-u]{cursor:pointer;transition:transform .2s cubic-bezier(.2,1.4,.4,1),box-shadow .2s}
.av[data-u]:hover{transform:translateY(-2px) scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:2;position:relative}
.al-t{font-weight:600;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.al-t:hover{background-size:100% 1.5px;color:var(--teal-d,#037F79)}
.lnk{background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 2px no-repeat;transition:background-size .3s,color .15s}
.lnk:hover{background-size:100% 2px;border-bottom-color:transparent}

/* filter banner */
.fbanner{display:flex;align-items:center;gap:10px;background:var(--lime-2);border:1px solid #BFE5E2;color:#0B5753;padding:9px 10px 9px 14px;border-radius:12px;margin:0 0 14px;font-size:13px;animation:slideDown .35s cubic-bezier(.2,.8,.2,1) both}
.fbanner span{flex:1}
.fbanner .btn{background:#fff}

/* ---------- KPI cards (all inner pages) ---------- */
.kpi.kpi2{display:flex;flex-direction:column;gap:8px;border-radius:16px;padding:16px 18px;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.kpi2.dark,.kpi2.lime{color:#fff}
.kpi2.dark .v small,.kpi2.lime .v small{color:rgba(255,255,255,.75)}
.kpi2 .kpi-top{display:flex;align-items:center;gap:10px}
.kpi2 .l{flex:1;font-size:13px;font-weight:500}
.kpi2 .v{margin-top:2px;font-size:30px;letter-spacing:-.045em}
.kpi2.kgo{cursor:pointer}
.kpi2.kgo:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.09);border-color:#cfe9e7}
.kpi2.kgo:hover .itile{transform:rotate(-8deg) scale(1.08)}
.kpi2.kgo:hover .stat-go{background:var(--lime);color:#fff;transform:translateX(2px)}
.kpi2.dark .stat-go,.kpi2.lime .stat-go{background:rgba(255,255,255,.15);color:#fff}
.t-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* shimmer sweep on highlighted cards */
.kpi.lime::after,.kpi.dark::after,.stat.s-teal::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:sweep 5.5s ease-in-out infinite}
.stat.s-teal::after{background:linear-gradient(100deg,transparent,rgba(4,162,155,.10),transparent)}

/* ---------- alarm cards come alive ---------- */
.alarm{position:relative;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.alarm:hover{transform:translateX(3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.alarm.red{animation:redGlow 2.6s ease-in-out infinite}
.alarm .impact{position:relative;overflow:hidden}
.alarm.red .impact::before,.alarm:not(.red):not(.green) .impact::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:scan 4s ease-in-out infinite}
.pill.red .i,.pill.amber .i{animation:wiggle 3s ease-in-out infinite;transform-origin:50% 80%}

/* table rows & cards hover */
.tbl tbody tr.click td{transition:background .15s}
.tbl tbody tr.click:hover td:first-child{box-shadow:inset 3px 0 0 var(--lime)}
.card{transition:box-shadow .25s,transform .25s}
.sku-card:hover,.card.sku-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.sku-card .sku-art svg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sku-card:hover .sku-art svg{transform:scale(1.08) rotate(-3deg)}
.tcard{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.tcard:hover{transform:translateY(-2px) rotate(-.4deg);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.chip{transition:all .15s}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.tabs button,.tabs a{position:relative;transition:color .15s}
.tabs .on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);animation:tabIn .35s cubic-bezier(.2,.8,.2,1)}
.step.cur .c{animation:curPulse 2.2s ease-out infinite}
.modal{animation:modalIn .3s cubic-bezier(.2,.9,.25,1.1)}
.overlay{backdrop-filter:blur(3px)}
.toast{animation:toastIn .45s cubic-bezier(.2,1.3,.4,1)}

/* ---------- page entry choreography ---------- */
.anim .rv{opacity:0;animation:riseIn .75s cubic-bezier(.16,.8,.24,1) forwards;animation-delay:calc(var(--i,0) * 65ms)}
.anim tbody tr.rv{animation-name:rowIn;animation-duration:.55s}
.anim .tcard.rv{animation-name:dropIn}
.anim .alarm.rv{animation:slideIn .7s cubic-bezier(.16,.8,.24,1) forwards,redGlowOnce 0s;animation-delay:calc(var(--i,0) * 80ms)}
.anim .alarm.red.rv{animation:slideIn .7s cubic-bezier(.16,.8,.24,1) forwards, redGlow 2.6s 1s ease-in-out infinite;animation-delay:calc(var(--i,0) * 80ms),1.2s}
.anim .stepper .step.rv{animation-name:popIn;animation-duration:.5s}
.anim .ph h1{animation:titleIn .8s cubic-bezier(.16,.8,.24,1) both}
.anim .ph p{animation:riseIn .8s .1s cubic-bezier(.16,.8,.24,1) both}
.anim .kpi2 .itile,.anim .stat .itile{animation:popIn .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i,0) * 65ms + .25s)}

/* ---------- keyframes ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-16px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes titleIn{from{opacity:0;transform:translateY(16px);letter-spacing:.02em}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes sweep{0%,70%{left:-60%}100%{left:130%}}
@keyframes scan{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes redGlow{0%,100%{box-shadow:0 0 0 0 rgba(218,58,46,0)}50%{box-shadow:0 0 0 4px rgba(218,58,46,.10),0 8px 24px rgba(218,58,46,.10)}}
@keyframes redGlowOnce{}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg)}92%{transform:rotate(12deg)}95%{transform:rotate(-8deg)}}
@keyframes tabIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes curPulse{0%{box-shadow:0 0 0 0 rgba(4,162,155,.45)}100%{box-shadow:0 0 0 10px rgba(4,162,155,0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}

/* Reduced motion is now a user toggle (calm mode, see dash2.css) so the client demo always shows full motion */
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* ---------- everything-clickable layer (ui3) ---------- */
[data-go]{cursor:pointer}
svg.gx,.itile.gx,.ic.gx,.dblock.gx,.ring.gx,.thumb.gx,.sku-art.gx{transition:transform .2s cubic-bezier(.2,1.4,.4,1),color .15s,filter .15s}
svg.gx:hover{color:var(--lime);transform:scale(1.18)}
.itile.gx:hover,.ic.gx:hover,.dblock.gx:hover,.ring.gx:hover{transform:scale(1.08) rotate(-4deg)}
.thumb.gx:hover,.sku-art.gx:hover{transform:scale(1.03);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.progress.gx:hover i{filter:brightness(1.3)}
.hchip.gp:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.page .row .hchip.gp:hover,.profile .hchip.gp:hover{background:var(--lime-2);border-color:#BFE5E2}
.note.gx:hover{border-color:var(--lime);box-shadow:0 4px 14px rgba(4,162,155,.12)}
.check.gx:hover{background:var(--surface-2)}
.gate.gx{transition:transform .2s,box-shadow .2s}
.gate.gx:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.07)}
.bars .br.gx{border-radius:8px;padding:5px 6px;margin:0 -6px}
.bars .br.gx:hover{background:var(--lime-2)}
.legend > span.gx:hover{color:var(--teal-d,#037F79)}
.step[data-go]{cursor:pointer;transition:transform .2s}
.step[data-go]:hover{transform:translateY(-2px)}
.step[data-go]:hover .c{box-shadow:0 0 0 4px rgba(4,162,155,.18)}
.card-h h3.gx{cursor:pointer;user-select:none}
.card-h h3 .h-tg{display:inline-grid;place-items:center;margin-left:6px;color:var(--muted);opacity:0;transition:opacity .15s,transform .25s}
.card-h h3:hover .h-tg{opacity:1}
.card.collapsed .card-b{display:none}
.card.collapsed .card-h{padding-bottom:16px}
.card.collapsed .h-tg{opacity:1;transform:rotate(-90deg)}
.card.flash{animation:flashCard 1.6s ease}
@keyframes flashCard{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 4px rgba(4,162,155,.35)}}