/* ============================================================================
   interactions.css — thoughtful micro-interactions across every element.
   Hover, press, and focus states tuned to feel tactile and intentional.
   Loaded last so these layer cleanly over component styles.
   ============================================================================ */

/* ── Universal press feedback ──────────────────────────────────────────────
   Magnetic buttons carry an inline transform from JS, so they use brightness;
   plain controls scale down. */
.btn { transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s, filter .12s var(--ease), box-shadow .25s var(--ease); }
.btn:active { filter: brightness(0.88); }
.nav-cta:active,
.pt-btn:active,
.pt-ai-send:active,
.pt-viewall:active,
.range-toggle button:active,
.srail-node:active .srn-dot,
.cc-row:active { transform: scale(0.95); }
.nav-cta, .pt-btn, .pt-ai-send, .pt-viewall { transition: transform .18s var(--ease), background .25s, box-shadow .25s, color .2s; }
.sys-step:active { transform: translateY(-1px) scale(0.99); }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav-links a { transition: color .2s var(--ease), transform .2s var(--ease); }
.nav-links a:hover { transform: translateY(-1px); }
.nav-links a::before {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  transition: right .3s var(--ease);
}
.nav-links a:hover::before { right: 0; }
.nav-brand { transition: transform .25s var(--ease); }
.nav-brand:hover { transform: translateX(1px); }
.nav-brand:hover .bdot { box-shadow: 0 0 16px var(--accent); }
.nav-brand .bdot { transition: box-shadow .3s var(--ease); }

/* ── Hero console — quiet life on hover (presentational) ─────────────────── */
.console .rail-item, .console .kpi, .feed-row, .con-source { transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.console:hover .rail-item.active { background: color-mix(in oklch, var(--accent) 12%, var(--surface-3)); }
.kpi:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.feed-row:hover { background: color-mix(in oklch, var(--accent) 6%, transparent); }

/* ── §02 build feature visuals ──────────────────────────────────────────── */
.bv { transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease); }
.bv:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: 0 40px 90px -42px rgba(0,0,0,0.8), 0 0 70px -28px var(--accent-glow);
}
.feat-points li { transition: color .2s var(--ease); }
.feat-points li:hover { color: var(--text); }
.feat-points li:hover .fp-tick { box-shadow: 0 0 12px var(--accent-glow); }
.fp-tick { transition: box-shadow .25s var(--ease); }

/* ── §03 work cards ─────────────────────────────────────────────────────── */
.work-card { transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.work-card:hover { border-color: var(--line-2); box-shadow: 0 50px 100px -50px rgba(0,0,0,0.9); }
.wc-metric { transition: transform .3s var(--ease); }
.wc-metric:hover { transform: translateY(-3px); }
.wc-metric:hover .metric { text-shadow: 0 0 22px var(--accent-glow); }
.metric, .metric-live { transition: text-shadow .3s var(--ease); }
.chip { transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease); }
.chip:hover { border-color: var(--accent-line); color: var(--text); transform: translateY(-2px); }

/* ── §04 portal — make the dashboard feel alive ─────────────────────────── */
.pt-navitem { cursor: pointer; }
.pt-navitem:hover { background: var(--surface-3); color: var(--text-2); }
.pt-navitem:hover .pt-navico { color: var(--accent); }
.pt-stat { transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.pt-stat:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: 0 24px 48px -28px var(--accent-glow); }
.pt-doc { transition: background .22s var(--ease); cursor: pointer; }
.pt-doc:hover { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.pt-doc-dl { transition: transform .25s var(--ease), color .25s var(--ease); }
.pt-doc:hover .pt-doc-dl { transform: translateY(2px); color: var(--accent); }
.pt-doc:hover .pt-doc-ico { color: var(--accent); }
.pt-doc-ico { transition: color .25s var(--ease); }
.pt-act { transition: background .22s var(--ease); }
.pt-act:hover { background: color-mix(in oklch, var(--text) 3%, transparent); }
.pt-viewall:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-bell, .pt-avatar { transition: transform .25s var(--ease), box-shadow .25s var(--ease); cursor: pointer; }
.pt-bell:hover { transform: scale(1.08); border-color: var(--accent-line); }
.pt-avatar:hover { box-shadow: 0 0 18px var(--accent-glow); }

/* ── §05 proof — numbers respond ───────────────────────────────────────── */
.proof-item { transition: background .3s var(--ease); }
.proof-item:hover { background: color-mix(in oklch, var(--accent) 4%, transparent); }
.proof-item .proof-num { transition: text-shadow .3s var(--ease), transform .3s var(--ease); display: inline-block; }
.proof-item:hover .proof-num { text-shadow: 0 0 26px var(--accent-glow); transform: translateY(-2px); }

/* ── §06 contact ───────────────────────────────────────────────────────── */
.cc-row { transition: padding-left .25s var(--ease); border-radius: 8px; }
.cc-row:hover { padding-left: 8px; }
.cc-row:hover .cc-k { color: var(--accent); }
.cc-k { transition: color .25s var(--ease); }
.field input, .field textarea { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--line-3); }

/* ── footer ────────────────────────────────────────────────────────────── */
.footer-mark { transition: transform .4s var(--ease); }
.footer-mark:hover { transform: translateX(4px); }
.footer-mark:hover .accent { text-shadow: 0 0 22px var(--accent); }
.footer-mark .accent { transition: text-shadow .3s var(--ease); }

/* ── badges get a gentle hover lift wherever they're in interactive rows ── */
.range-toggle, .sys-step, .work-card, .bv { will-change: transform; }

/* ── reduced motion: keep states, drop the movement ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-links a:hover, .kpi:hover, .bv:hover, .wc-metric:hover, .chip:hover,
  .pt-stat:hover, .proof-item:hover .proof-num, .footer-mark:hover,
  .sys-step:active, .nav-brand:hover { transform: none !important; }
}