/* Motion and small interaction details, kept apart from layout in design.css.
   Everything here is optional polish: html[data-motion="off"] removes it all (and "auto" does
   when the system asks for reduced motion); nothing in this file is needed to read the data. */

:root {
  --spring: cubic-bezier(.22,.95,.3,1.06);
  --out: cubic-bezier(.2,.8,.2,1);
  --paid-dim: rgba(233,180,76,.32);
  --good-ring: rgba(76,201,155,.45);
  --glow: rgba(255,255,255,.022);
  --glow-edge: rgba(255,255,255,.13);
}
:root[data-theme="light"] {
  --paid-dim: rgba(183,121,31,.3);
  --good-ring: rgba(12,132,96,.35);
  --glow: rgba(24,24,16,.022);
  --glow-edge: rgba(24,24,16,.24);
}

/* ---------- thin meters (live spend column, spend ranking) ---------- */
.meter { display: block; height: 3px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; }
.meter i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--paid-dim), var(--paid)); transform-origin: left center; transition: width .5s var(--out); }
.rows-in .meter i { animation: meter-in .9s var(--out) both; animation-delay: calc(var(--row-delay, 0ms) + 120ms); }
@keyframes meter-in { from { transform: scaleX(0); } }

.cost-cell { position: relative; }
.cost-cell .meter { position: absolute; left: calc(var(--cell-x) + 18px); right: var(--cell-x); bottom: calc(var(--row-y) * .38); }
/* the figures are right-aligned, so the fill grows from the right edge to stay next to them */
.cost-cell .meter i { margin-left: auto; background: linear-gradient(270deg, var(--paid-dim), var(--paid)); transform-origin: right center; }
.top-item .meter { position: absolute; left: 34px; right: 8px; bottom: 4px; height: 2px; }

/* ---------- sliding indicator (tabs, segmented controls) ---------- */
.has-glider { position: relative; }
.glider { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 7px; background: var(--surface-3); opacity: 0; transition: transform .38s var(--spring), width .38s var(--spring), height .38s var(--spring), opacity .2s; }
.has-glider > button { position: relative; z-index: 1; }
.seg.has-glider button.on { background: transparent; box-shadow: none; }
:root[data-theme="light"] .seg .glider { background: var(--surface); box-shadow: 0 1px 3px rgba(24,24,16,.14); }
.tabs .glider { border-radius: 9px; background: var(--neutral-soft); }
.tabs.has-glider .tab.active { background: transparent; }
.tab svg { transition: transform .3s var(--spring); }
.tab.active svg { transform: scale(1.06); }

/* ---------- press feedback ---------- */
.btn, .icon-btn, .seg button, .tab, .pref-choices button, .top-item, .mover-item, .action-item, .palette-item { transition-property: background, border-color, color, opacity, transform; transition-duration: .15s; }
.btn:active:not(:disabled), .icon-btn:active, .seg button:active, .pref-choices button:active { transform: scale(.96); }
.top-item:active, .mover-item:active, .action-item:active { transform: scale(.99); }
#syncNow.busy svg, #reloadBtn.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* healthy sync: a slow ping instead of a static dot */
.status-dot:not(.warn):not(.busy) { animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--good-ring); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- entrances ---------- */
.panel { animation: none; }
.enter { animation: enter .6s var(--out) both; animation-delay: var(--enter-delay, 0ms); }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
/* table rows only fade: a transform on a row would unpin its sticky first cell */
tbody.rows-in > tr { animation: row-in .4s ease-out both; animation-delay: var(--row-delay, 0ms); }
@keyframes row-in { from { opacity: 0; } }
ol.rows-in > li, .rows-in > .mobile-game-card { animation: enter .5s var(--out) both; animation-delay: var(--row-delay, 0ms); }

.popover { transform-origin: top right; animation: pop-in .22s var(--out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.palette-card { animation: pop-in .2s var(--out); transform-origin: top center; }
.kpi-value { transition: color .3s; }
.score-track i { animation: meter-in .8s var(--out) both; transform-origin: left center; }

/* ---------- pointer light (hover devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card, .kpi, .split { position: relative; }
  .card, .split { isolation: isolate; }
  .card::after, .kpi::after, .split::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 62%);
    opacity: 0; transition: opacity .35s;
  }
  .card::before, .split::before {
    content: ""; position: absolute; inset: -1px; z-index: 6; pointer-events: none; border-radius: inherit; padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glow-edge), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .35s;
  }
  .card:hover::after, .kpi:hover::after, .split:hover::after, .card:hover::before, .split:hover::before { opacity: 1; }
}

/* ---------- theme change: the new theme grows from the click (see motion.mjs) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- login ---------- */
.login-bars { display: flex; align-items: flex-end; gap: 10px; padding: 0 3vw; background: none; }
.login-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(to top, var(--line-strong), var(--neutral-soft) 70%, transparent); transform-origin: bottom; animation: breathe var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate; }
.login-bars i:nth-child(7n+3) { background: linear-gradient(to top, var(--paid-dim), transparent); }
@keyframes breathe { from { transform: scaleY(.52); } to { transform: scaleY(1); } }
.login-card { animation: enter .7s var(--out) both; }
.login-card .logo i { transform-origin: bottom; animation: logo-bar .8s var(--spring) both; }
.login-card .logo i:nth-child(2) { animation-delay: .08s; }
.login-card .logo i:nth-child(3) { animation-delay: .16s; }
@keyframes logo-bar { from { transform: scaleY(0); } }
.login-card input { transition: border-color .2s, box-shadow .2s; }
.login-card input:focus { box-shadow: 0 0 0 4px var(--neutral-soft); }
.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 25%, 75% { transform: translateX(5px); } 40%, 60% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }

/* ---------- motion off ---------- */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="off"] .card::after, :root[data-motion="off"] .card::before, :root[data-motion="off"] .kpi::after, :root[data-motion="off"] .split::after, :root[data-motion="off"] .split::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] *, :root[data-motion="auto"] *::before, :root[data-motion="auto"] *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .tabs .glider { background: transparent; }
  .tabs .glider::after { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--text); }
  .tab.active svg { transform: translateY(-1px) scale(1.06); }
  .popover { transform-origin: top center; }
}