/* Reshape GTM — micro animations. Transform/opacity only, 150–400ms for UI, longer only for
   chart entrances. Everything collapses to a static final state under prefers-reduced-motion. */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 400ms;
}
/* count-up spans inherit the number's typography (some parents style every child span as a label) */
.m-kpis b > .mx-num, .dist-cell b > .mx-num, .num > .mx-num, .big > .mx-num, .val > .mx-num, .up > .mx-num, .down > .mx-num { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; display: inline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- scroll reveal (set by autoReveal in shared.jsx) ---------- */
[data-mx="wait"] { opacity: 0; transform: translateY(14px); }
[data-mx="in"] { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: calc(var(--mx-i, 0) * 60ms); }
/* elements that already have their own transform on hover keep it after the reveal */
.dist-cell[data-mx="in"], .plan[data-mx="in"], .chart-card[data-mx="in"], .kpis > div[data-mx="in"] { transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out), border-color var(--t-med), box-shadow var(--t-med), background var(--t-med); }

/* ---------- buttons, links, inputs ---------- */
.btn { transition: background var(--t-fast) var(--ease-out), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out); will-change: transform; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -10px oklch(0.18 0.01 60 / 0.45); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 80ms; }
.btn .arrow { display: inline-block; transition: transform 300ms var(--ease-out); }
.seg button { transition: background var(--t-med) var(--ease-out), color var(--t-med), transform var(--t-fast); }
.seg button:active { transform: scale(0.96); }
.toggle-link { transition: color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.toggle-link:hover { transform: translateX(2px); }
.input, .select, .textarea { transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-med); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.kb :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-offset var(--t-fast); }
.nav .links a { position: relative; }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
.nav .links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .brand .dot { display: inline-block; transition: transform 300ms var(--ease-back); }
.nav .brand:hover .dot { transform: translateY(-3px); }
a.accent, .banner a { transition: opacity var(--t-fast), text-underline-offset var(--t-fast); }
.banner a:hover { text-underline-offset: 5px; }

/* ---------- cards ---------- */
.chart-card { transition: transform var(--t-med) var(--ease-out); }
.m-chart, .m-dash, .profile-card { transition: border-color var(--t-med), box-shadow var(--t-slow) var(--ease-out); }
.m-chart:hover, .m-dash:hover, .profile-card:hover { border-color: var(--ink-faint); box-shadow: 0 18px 40px -28px oklch(0.18 0.01 60 / 0.35); }
.kpis > div { transition: border-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.kpis > div:hover { border-color: var(--ink-faint); transform: translateY(-2px); box-shadow: 0 10px 24px -18px oklch(0.18 0.01 60 / 0.35); }
.dist-cell { transition: transform var(--t-med) var(--ease-out), flex-grow 600ms var(--ease-io), box-shadow var(--t-med); }
a.dist-cell:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -16px oklch(0.18 0.01 60 / 0.4); }
.plan { transition: border-color var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med), background var(--t-med); }
.plan:not(.disabled):not([disabled]):hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px oklch(0.18 0.01 60 / 0.4); }
.plan:not(.disabled):not([disabled]):active { transform: translateY(-1px) scale(0.99); }
.price { display: inline-block; }
.mx-swap { display: inline-block; animation: mx-swap 360ms var(--ease-out) both; }
@keyframes mx-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.list li { transition: background var(--t-fast); }
.list li > div:first-child { transition: transform var(--t-med) var(--ease-out); }
.list li:hover > div:first-child { transform: translateX(4px); }
.tbl tr.click td { transition: background var(--t-fast); }
.m-steps li { transition: border-color var(--t-med); }
.m-steps li:hover { border-top-color: var(--accent); }
.m-props > div .m-num { display: inline-block; transition: transform var(--t-med) var(--ease-back); }
.m-props > div:hover .m-num { transform: translateX(4px); }
.tpl-card { transition: background 300ms, transform var(--t-med) var(--ease-out); }

/* ---------- hero entrance ---------- */
.m-hero > div:first-child > * { animation: mx-rise 700ms var(--ease-out) both; }
.m-hero > div:first-child > *:nth-child(2) { animation-delay: 80ms; }
.m-hero > div:first-child > *:nth-child(3) { animation-delay: 160ms; }
.m-hero > div:first-child > *:nth-child(4) { animation-delay: 240ms; }
.m-hero .m-chart { animation: mx-rise 800ms 180ms var(--ease-out) both; }
@keyframes mx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.live-tag { display: inline-flex; align-items: center; gap: 8px; float: right; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.live-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: mx-ping 2.2s var(--ease-out) infinite; }
@keyframes mx-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- charts ---------- */
/* scatter */
.mx-scatter .mx-frame { opacity: 0; transition: opacity 500ms var(--ease-out); }
.mx-scatter.in .mx-frame { opacity: 1; }
.mx-scatter .mx-split-x, .mx-scatter .mx-split-y { transition: stroke-dashoffset 1.2s linear; }
.mx-scatter.live .mx-split-x, .mx-scatter.live .mx-split-y { animation: mx-march 2.4s linear infinite; }
@keyframes mx-march { to { stroke-dashoffset: -14; } }
.mx-scatter .mx-trails { opacity: 0; transition: opacity 600ms 450ms var(--ease-out); }
.mx-scatter.in .mx-trails { opacity: 0.8; }
.mx-scatter .mx-trails polyline { transition: all 1.4s var(--ease-io); }
.mx-pt { transition: transform 1.4s var(--ease-io); }
.mx-pop { transform: scale(0); opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform 520ms var(--ease-back), opacity 300ms var(--ease-out); transition-delay: calc(var(--mx-i, 0) * 45ms + 180ms); }
.mx-scatter.in .mx-pop { transform: none; opacity: 1; }
.mx-dot { transition: fill 900ms var(--ease-io), r 200ms var(--ease-out); }
.mx-pt:hover .mx-dot { r: 7.5; }
.mx-scatter.live .mx-float { animation: mx-float var(--fd, 4s) var(--fl, 0s) ease-in-out infinite alternate; }
@keyframes mx-float { from { transform: translate(0, 0); } to { transform: translate(var(--fx, 2px), var(--fy, -2px)); } }
.mx-scatter.paused .mx-float, .mx-scatter.paused .mx-split-x, .mx-scatter.paused .mx-split-y { animation-play-state: paused; }

/* radar */
.mx-radar .mx-ring { opacity: 0; transform: scale(0.6); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--mx-i, 0) * 60ms); }
.mx-radar.in .mx-ring { opacity: 1; transform: none; }
.mx-radar .mx-spoke { opacity: 0; transition: opacity 600ms 200ms var(--ease-out); }
.mx-radar.in .mx-spoke { opacity: 1; }
.mx-radar .mx-label { opacity: 0; transition: opacity 400ms var(--ease-out); transition-delay: calc(var(--mx-i, 0) * 22ms + 300ms); }
.mx-radar.in .mx-label { opacity: 1; }
.mx-radar.live .mx-breathe { animation: mx-breathe 3.6s ease-in-out infinite; }
.mx-radar.paused .mx-breathe { animation-play-state: paused; }
@keyframes mx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* bars */
.bar > i { transition: width 700ms var(--ease-out); }
.pillar-bars .bar > i { transition: width 900ms var(--ease-io); }
.pillar-bars .row .name { transition: color var(--t-med); }
.pillar-bars .row:hover .name { color: var(--accent); }

/* ---------- rating input feedback ---------- */
.rate button { transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.rate button:active { transform: scale(0.94); }
.rate button.on { animation: mx-tick 320ms var(--ease-back); box-shadow: 0 6px 16px -10px oklch(0.18 0.01 60 / 0.6); }
.rate button.on .n { animation: mx-num-pop 320ms var(--ease-back); }
@keyframes mx-tick { 0% { transform: scale(0.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes mx-num-pop { 0% { transform: translateY(3px); } 100% { transform: none; } }
.progress-dots a { transition: background var(--t-med), border-color var(--t-med), transform var(--t-fast) var(--ease-out); }
.progress-dots a:hover { transform: scale(1.25); }
.progress-dots a.on { animation: mx-dot 360ms var(--ease-back); }
@keyframes mx-dot { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
.item.unrated .item-title::after { animation: mx-ping 2.2s var(--ease-out) infinite; }
.item { transition: background var(--t-slow); }
.panel .big .mx-num { display: inline-block; min-width: 1.1em; }

/* ---------- app shell ---------- */
.side-nav a { position: relative; transition: background var(--t-med) var(--ease-out), color var(--t-med), transform var(--t-fast) var(--ease-out); }
.side-nav a:hover { transform: translateX(3px); }
.side-nav a.on:hover { transform: none; }
.side-nav a .ico { transition: transform var(--t-med) var(--ease-back), opacity var(--t-med); }
.side-nav a:hover .ico { transform: scale(1.18); opacity: 1; }
.side-nav a.on { animation: mx-nav-on 300ms var(--ease-out); }
@keyframes mx-nav-on { from { background: var(--accent-soft); color: var(--ink); } }
.side-logo img, .side-logo .brand { transition: transform var(--t-med) var(--ease-out); }
.side-logo:hover img, .side-logo:hover .brand { transform: scale(1.03); }
.plan-badge { animation: mx-rise 500ms 200ms var(--ease-out) both; }
.mx-page { animation: mx-page 360ms var(--ease-out) both; }
@keyframes mx-page { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.banner { animation: mx-banner 400ms var(--ease-out) both; }
@keyframes mx-banner { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .side { transition: transform 300ms var(--ease-out); }
  .side-scrim { animation: mx-fade 240ms var(--ease-out) both; }
}
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- modal + toast ---------- */
.modal-bg { animation: mx-fade 220ms var(--ease-out) both; }
.modal { animation: mx-modal 320ms var(--ease-back) both; }
@keyframes mx-modal { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.toast { animation: mx-toast-in 320ms var(--ease-back) both; }
.toast.out { animation: mx-toast-out 260ms var(--ease-out) both; }
@keyframes mx-toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mx-toast-out { to { opacity: 0; transform: translate(-50%, 10px); } }
.notice { animation: mx-rise 320ms var(--ease-out) both; }
.login-card { animation: mx-rise 520ms var(--ease-out) both; }
.auth-brand { animation: mx-fade 500ms var(--ease-out) both; }

/* ---------- skeleton shimmer ---------- */
.skel { padding: 8px 0 48px; display: flex; flex-direction: column; gap: 16px; }
.skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.skel-line, .skel-card { border-radius: 10px; background: linear-gradient(90deg, var(--bg-deep) 0%, color-mix(in oklch, var(--rule) 70%, var(--bg)) 40%, var(--bg-deep) 80%); background-size: 240% 100%; animation: mx-shimmer 1.4s linear infinite; }
.skel-line { height: 14px; } .skel-line.w40 { width: 40%; height: 40px; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-card { height: 112px; border-radius: 14px; }
@keyframes mx-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 860px) { .skel-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- homepage: one person, twenty characteristics ---------- */
.profile-card { border: 1px solid var(--rule); border-radius: 18px; padding: 32px; background: var(--bg-deep); margin-top: 32px; }
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.profile-who .h-serif { font-size: 44px; line-height: 1; margin-top: 8px; }
.profile-who .muted { margin-top: 6px; }
.profile-score { display: flex; gap: 28px; align-items: flex-end; }
.profile-score .big { font-family: var(--serif); font-size: 64px; line-height: .9; letter-spacing: -0.03em; }
.profile-score .big small { font-size: 22px; color: var(--ink-faint); }
.profile-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding-top: 28px; }
.profile-body h6 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; margin: 0 0 22px; }
.profile-body .pillar-bars .row { grid-template-columns: 120px 1fr 130px; }
.profile-body .mx-radar { max-width: 520px; margin: 0 auto; display: block; width: 100%; height: auto; overflow: visible; }
.people-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.people-chips button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink-soft); background: transparent; cursor: pointer; transition: border-color var(--t-med), color var(--t-med), transform var(--t-fast) var(--ease-out), background var(--t-med); }
.people-chips button:hover { border-color: var(--ink-faint); color: var(--ink); transform: translateY(-1px); }
.people-chips button:active { transform: scale(0.96); }
.people-chips button.on { border-color: var(--ink); color: var(--ink); background: var(--bg); }
.people-chips button i { width: 8px; height: 8px; border-radius: 50%; }
.people-chips button .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.people-chips button.on .prog { animation: mx-prog var(--cycle, 5s) linear both; }
.people-chips.paused button .prog { animation-play-state: paused; }
@keyframes mx-prog { to { transform: scaleX(1); } }
.qpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: 13px; transition: background 600ms var(--ease-io), border-color 600ms var(--ease-io); }
@media (max-width: 960px) { .profile-body { grid-template-columns: 1fr; } .profile-card { padding: 22px; } .profile-body .pillar-bars .row { grid-template-columns: 100px 1fr 110px; } }

/* ---------- reduced motion: static final state ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-mx] { opacity: 1 !important; transform: none !important; }
  .mx-pop, .mx-ring, .mx-label, .mx-spoke, .mx-frame, .mx-trails { opacity: 1 !important; transform: none !important; }
  .mx-trails { opacity: .8 !important; }
  .people-chips button .prog { display: none; }
}
@media print {
  [data-mx], .mx-pop, .mx-ring, .mx-label, .mx-spoke, .mx-frame { opacity: 1 !important; transform: none !important; animation: none !important; }
}