/* =====================================================================================
   Athena polish layer (loaded last, after motion.css). Movement that explains what changed, never decoration:
   pages arrive with a soft rise, cards answer the pointer with a faint gold spotlight (clickable ones also lift),
   buttons lift and press, rows light up, the header frosts once the page scrolls, numbers count up once
   (public/js/polish.js). Colours come from the tokens only — ink for actions, Athena gold as the one accent — so
   dark mode follows by itself. Everything stands still under prefers-reduced-motion.
   ===================================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --spot: color-mix(in srgb, var(--accent) 11%, transparent);
  --spot-line: color-mix(in srgb, var(--accent) 34%, var(--line));
  --row-hover: color-mix(in srgb, var(--accent) 6%, transparent);
}
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }

/* Scrollbars: thin, quiet, darker on hover */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 34%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 30%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text-3) 55%, transparent); }

/* ---------- pages arrive: title first, then the body, a soft rise out of a slight blur ---------- */
#main.route-in > .page-h { animation: ath-rise .42s var(--ease-out) both; }
#main.route-in > .page-body, #main.route-in > .demo-strip { animation: ath-rise .56s var(--ease-out) .05s both; }
@keyframes ath-rise { from { opacity: 0; transform: translateY(12px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* Header frosts once its page has scrolled (polish.js sets .is-scrolled) */
#main > .page-h { transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out); }
#main.is-scrolled > .page-h { box-shadow: 0 1px 0 var(--line-2), 0 10px 24px -18px rgba(0, 0, 0, .35); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); position: relative; z-index: 6; }

/* ---------- cards: a spotlight that follows the pointer; clickable cards also lift ---------- */
.ath-spotlight {
  position: relative; isolation: isolate;
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out), background-color .2s;
}
.ath-spotlight::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 64%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 42%);
  transition: opacity .35s var(--ease-out);
}
.ath-spotlight:hover::after, .ath-spotlight:focus-within::after { opacity: 1; }
.ath-spotlight:hover, .ath-spotlight:focus-within {
  border-color: var(--spot-line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 18px 42px -28px color-mix(in srgb, var(--accent) 48%, rgba(21, 23, 28, .38));
}
:where(.card, .st-card, .po-card, .fn-card, .cs-card, .sx-card, .ev-bcard):hover { border-color: var(--spot-line); }
/* Clickable cards lift a little and cast a deeper shadow */
:where(a.card, a.topic-card, a.cc-leader, a.po-pcard, a.pl-post, a.po-post, .cc-net:has(a), .kpi-link, a.kpi-link, .wa-chat, .fn-row):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
:where(a.card, a.topic-card, a.cc-leader, a.po-pcard, a.pl-post, a.po-post, .kpi-link, .wa-chat, .fn-row):active { transform: translateY(0) scale(.995); transition-duration: .1s; }
:where(.kpi-link, .wa-chat, .fn-row) { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background-color .2s; }

/* ---------- buttons: lift on hover, press on click, a light sheen across the primary one ---------- */
.btn { transition: transform .14s var(--ease-out), box-shadow .22s var(--ease-out), background-color .2s, border-color .2s, color .2s, background-position .8s var(--ease-out); }
.btn:hover:not(:disabled):not(.btn-ghost) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: var(--shadow); transition-duration: .08s; }
.btn-primary { background-image: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--on-primary) 16%, transparent) 48%, transparent 61%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }
.btn-primary:hover:not(:disabled) { background-position: -30% 0; }
.icon-btn { transition: background-color .18s, color .18s, transform .14s var(--ease-out); }
.icon-btn:hover { transform: scale(1.06); }
.icon-btn:active { transform: scale(.94); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; border-radius: 6px; }
.input, input.input, select.input, textarea.input { transition: border-color .18s, box-shadow .22s var(--ease-out), background-color .18s; }
.input:focus, input.input:focus, select.input:focus, textarea.input:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }

/* ---------- rows: tables and lists light up under the pointer ---------- */
:where(.table, .po-tbl, .yt-table table, .fn-table) tbody tr, .fn-tr:not(.fn-th) { transition: background-color .16s; }
:where(.table, .po-tbl, .yt-table table) tbody tr:hover, .fn-tr:not(.fn-th):hover { background: var(--row-hover); }
:where(.table, .po-tbl) tbody tr:hover > :first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ---------- navigation: the sidebar answers softly; the active mark grows in ---------- */
.sb-item { transition: background-color .18s, color .18s; }
.sb-item .sb-ic { transition: transform .22s var(--ease-spring), color .18s; }
.sb-item:hover .sb-ic { transform: translateX(1px) scale(1.08); }
.sb-item.active::before { animation: ath-grow .36s var(--ease-spring) both; transform-origin: center; }
@keyframes ath-grow { from { transform: scaleY(0); opacity: 0; } }
.nav-child { transition: background-color .18s, color .18s, padding-left .22s var(--ease-out); }
.nav-child:not(.active):hover { padding-left: calc(var(--nav-pad, 20px) + 3px); }

/* Tabs and segments: the chosen one settles in with a spring */
:where(.po-tabs a, .tabs button, .tabs a, .st-seg button, .seg button, .seg a, .period-bar button) { transition: background-color .2s, color .2s, box-shadow .25s var(--ease-out), transform .2s var(--ease-spring); }
:where(.po-tabs a.on, .st-seg button.on, .seg button.on, .period-bar button.on) { animation: ath-settle .34s var(--ease-spring); }
@keyframes ath-settle { from { transform: scale(.94); } }

/* Chips and badges */
:where(.chip, .cs-tag, .wb-chip, .po-chip) { transition: transform .18s var(--ease-out), background-color .18s, border-color .18s; }
:where(a.chip, button.chip, .wb-chip, .po-pick a):hover { transform: translateY(-1px); }

/* ---------- overlays: modal and toasts arrive with a little spring; the backdrop frosts ---------- */
.modal-wrap { backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); background: color-mix(in srgb, #0b0d12 42%, transparent); }
.modal { animation: ath-pop .36s var(--ease-spring) both; }
@keyframes ath-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.toast { animation: ath-toast .42s var(--ease-spring) both; }
.toast.out { opacity: 0; transform: translateY(8px) scale(.98); }
@keyframes ath-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.menu, .popover, .dropdown { animation: ath-drop .2s var(--ease-out) both; transform-origin: top; }
@keyframes ath-drop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Charts and heat cells: values fade in */
.po-matrix td, .st-bar > i, .po-meter > i, .bar > span { transition: width .9s var(--ease-out), background-color .3s; }

/* Counting numbers keep their width steady */
.ath-counting { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  #main.route-in > *, .modal, .toast, .menu, .popover, .dropdown, .sb-item.active::before { animation: none !important; }
  .ath-spotlight::after { display: none !important; }
  :where(.card, .st-card, .po-card, .fn-card, .cs-card, .cc-net, .cc-leader, .topic-card, .ev-bcard, .sx-card, .po-pcard, .pl-post, .po-post, .kpi-link, .wa-chat, .fn-row, .btn, .icon-btn):hover { transform: none !important; }
}