/* ProductPad motion layer. Loaded after site.css/app.css on every page; never changes layout or tokens.
   Timing borrowed from pryzm (see REFERENCES.md#motion): spring 180/30/1, reveal y 24 + stagger 80ms, hover .15s.
   Only transform-family (translate/scale/rotate/transform) and opacity animate. `.m` is set by motion.js when
   motion is allowed; without JS or with reduced motion everything renders static and fully visible. */

@view-transition { navigation: auto; }
:root {
  interpolate-size: allow-keywords;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --spring: linear(0, 0.143 6%, 0.37 13%, 0.564 19%, 0.706 25%, 0.804 31%, 0.87 38%, 0.915 44%, 0.944 50%, 0.963 56%, 0.976 63%, 0.984 69%, 0.989 75%, 0.993 81%, 0.995 88%, 0.997 94%, 1);
  --spring-t: .81s;
}
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
[id] { scroll-margin-top: 72px; }

:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.input:focus-within { outline: 2px solid #FFFFFF59; outline-offset: 1px; }
.input input:focus-visible { outline: 0; }
.tab:focus-visible, .btn:focus-visible { outline-offset: 3px; }

/* ---------- page transitions ---------- */
::view-transition-old(root) { animation: .18s var(--ease-ui) both vt-out; }
::view-transition-new(root) { animation: .45s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- reveal ---------- */
.m .rv { opacity: 0; translate: 0 24px; transition: opacity .6s var(--ease-out), translate var(--spring-t) var(--spring); transition-delay: calc(var(--i, 0) * 80ms + 50ms); }
.m .rv.in { opacity: 1; translate: none; }
.m .rv-fade { opacity: 0; transition: opacity .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 50ms); }
.m .rv-fade.in { opacity: 1; }

/* ---------- nav: fixed/sticky, blur + condense on scroll ---------- */
.hero > .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.app-nav { position: sticky; top: 0; z-index: 50; }
.nav { transition: translate .35s var(--ease-out); }
.nav::before {
  content: ""; position: absolute; z-index: -1; top: -16px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: #000000A6; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-line); opacity: 0; transition: opacity .3s var(--ease-ui); pointer-events: none;
}
.nav.scrolled { translate: 0 -8px; }
.nav.scrolled::before { opacity: 1; }
.nav.scrolled .brand { scale: .94; }
.brand { transform-origin: left center; transition: scale .35s var(--ease-out); }
.brand img { transition: rotate .5s var(--spring); }
.brand:hover img { rotate: -12deg; }
.nav-links .nav-link { position: relative; transition: color .15s var(--ease-ui); }
.nav-links .nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 1px; border-radius: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale .3s var(--ease-out); }
.nav-links .nav-link:hover::after, .nav-links .nav-link[aria-current="page"]::after { scale: 1 1; }
.nav-links .nav-link[aria-current="page"] { color: var(--color-fg); }

/* mobile menu */
.nav-menu { position: relative; transition: scale .15s var(--ease-ui); }
.nav-menu:active { scale: .92; }
.nav-menu i { position: absolute; left: 9px; width: 12px; height: 1.4px; border-radius: 1px; background: var(--color-fg); transition: translate .3s var(--ease-out), rotate .3s var(--ease-out); }
.nav-menu i:first-child { translate: 0 -2.5px; }
.nav-menu i:last-child { translate: 0 2.5px; }
.nav-menu[aria-expanded="true"] i:first-child { translate: 0 0; rotate: 45deg; }
.nav-menu[aria-expanded="true"] i:last-child { translate: 0 0; rotate: -45deg; }
.mnav {
  position: fixed; inset: 48px 0 auto; z-index: 49; display: flex; flex-direction: column; padding: 8px 20px 24px;
  background: #000000E6; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line);
  opacity: 0; translate: 0 -8px; pointer-events: none; visibility: hidden;
  transition: opacity .25s var(--ease-ui), translate .35s var(--ease-out), visibility 0s .35s;
}
.mnav.open { opacity: 1; translate: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mnav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-line); font: 500 18px/24px var(--ff-display); letter-spacing: var(--tracking-display);
  opacity: 0; translate: 0 8px; transition: opacity .3s var(--ease-out), translate .45s var(--ease-out); transition-delay: calc(var(--i) * 40ms); }
.mnav.open a { opacity: 1; translate: none; }
.mnav .btn { margin-top: 16px; height: 44px; font-size: 14px; border-bottom: 0; justify-content: center; }
@media (min-width: 721px) { .mnav { display: none; } }

/* ---------- buttons ---------- */
.btn { position: relative; transition: translate .2s var(--ease-out), scale .15s var(--ease-ui), filter .15s var(--ease-ui); }
.btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-ui);
  box-shadow: 0 8px 24px -8px #FFFFFF59, inset 0 0 0 1px #FFFFFF33; }
.btn-primary::after { box-shadow: 0 10px 30px -8px #FFFFFF73, 0 0 0 1px #FFFFFF40; }
.btn:hover { translate: 0 -1px; }
.btn:hover::after { opacity: 1; }
.btn:active { translate: none; scale: .97; transition-duration: .08s; }
.btn svg { transition: translate .25s var(--ease-out); }
.btn:hover svg { translate: 2px 0; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; }
.tab { position: relative; transition: color .15s var(--ease-ui), scale .15s var(--ease-ui); }
.tab:active { scale: .96; }
.tab:hover { color: var(--color-fg); }

/* ---------- surfaces: border light-up + cursor spotlight + tilt ---------- */
.sl { position: relative; isolation: isolate; overflow: clip; transition: border-color .25s var(--ease-ui); }
.sl::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF12, #FFFFFF00); translate: var(--mx, -999px) var(--my, -999px);
  opacity: 0; transition: opacity .35s var(--ease-ui); pointer-events: none;
}
.sl:hover::before { opacity: 1; }
.sl:hover { border-color: var(--color-line-strong); }
.table .tr.sl:hover { border-color: var(--color-line); }
.table .tr.sl::before { width: 640px; height: 640px; margin: -320px 0 0 -320px; background: radial-gradient(closest-side, #FFFFFF0D, #FFFFFF00); }
.table .tr:not(.th) { transition: background-color .2s var(--ease-ui); }
.table a.tr:hover, .table .tr[data-row]:hover { background-color: #FFFFFF05; }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), border-color .25s var(--ease-ui); will-change: transform; }
.tilt.tilting { transition: transform .12s linear, border-color .25s var(--ease-ui); }

/* icons: idle float + hover turn (translate via keyframes, hover via rotate/scale so they compose) */
.m .step-icon, .m .panel-icon, .m .side-hero img, .m .point img, .m .mf-desk .box img, .m .mf-node img, .m .mf-row img {
  animation: float-sm 6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.3s);
}
.step-icon, .panel-icon, .side-hero img, .point img, .mf-desk .box img, .mf-node img, .mf-row img { transition: rotate .6s var(--spring), scale .6s var(--spring); }
.step:hover .step-icon, .panel:hover .panel-icon, .side:hover .side-hero img, .point:hover img, .mf-desk .box:hover img, .mf-node:hover img, .mf-row:hover img { rotate: -8deg; scale: 1.08; }
.point { transition: translate .3s var(--ease-out); }
.point:hover { translate: 4px 0; }
@keyframes float-sm { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes float-lg { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } }

/* hero tiles drift */
.m .hero-stage .tile, .m .scatter .tile { animation: float-lg 9s ease-in-out infinite; }
.m .hero-stage .tile:nth-child(2n), .m .scatter .tile:nth-child(2n) { animation-duration: 11s; animation-delay: -4s; }
.m .hero-stage .tile:nth-child(3n), .m .scatter .tile:nth-child(3n) { animation-duration: 13s; animation-delay: -7s; }

/* ---------- upvote ---------- */
.upvote[role="button"] { cursor: pointer; transition: scale .5s var(--spring), background-color .2s var(--ease-ui), border-color .2s var(--ease-ui); user-select: none; }
.upvote[role="button"] svg { transition: translate .3s var(--ease-out); }
.upvote[role="button"]:hover { border-color: var(--color-hunt); }
.upvote[role="button"]:hover svg { translate: 0 -2px; }
.upvote[role="button"]:active { scale: .92; transition-duration: .08s; }
.upvote[aria-pressed="true"] { background: var(--color-hunt); border-color: var(--color-hunt); color: #fff; }
.upvote[aria-pressed="true"] path { fill: #fff; }
.upvote.bump { animation: bump .5s var(--spring); }
.uv-n { display: inline-block; font-variant-numeric: tabular-nums; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.14) translateY(-2px); } 100% { transform: scale(1); } }

/* ---------- live bits ---------- */
.live-tag .dot, .pill-live .dot, .dot.ping { position: relative; }
.m .live-tag .dot::after, .m .pill-live .dot::after, .m .dot.ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.tcard-price .big, .tcard-price .chg { position: relative; font-variant-numeric: tabular-nums; }
.tcard-price .big::after { content: ""; position: absolute; inset: -1px -5px; border-radius: 5px; opacity: 0; pointer-events: none; }
.tcard-price .big.up::after { background: #3DDC9733; animation: flash .9s var(--ease-out); }
.tcard-price .big.down::after { background: #FF615433; animation: flash .9s var(--ease-out); }
.tcard-price .chg.neg { color: var(--color-hunt); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.stats b, .tcard-kv b, .kvs b, .tcard-vault .vault, .td-num, .c-num { font-variant-numeric: tabular-nums; }
.aura-drift { position: absolute; inset: -25%; background: inherit; pointer-events: none; }
.m .aura-drift { animation: aura 12s ease-in-out infinite alternate; }
.m .closing::before, .m .stage::before { content: ""; position: absolute; inset: -12%; background: inherit; pointer-events: none; animation: aura 16s ease-in-out infinite alternate; }
.m .stage::before { animation-duration: 12s; animation-delay: -5s; border-radius: inherit; }
@keyframes aura { 0% { transform: translate(0, 0) scale(1); opacity: .75; } 50% { opacity: 1; } 100% { transform: translate(3%, -4%) scale(1.1); opacity: .85; } }

/* ticker */
.ticker { position: relative; overflow: clip; border-block: 1px solid var(--color-line); background: #050505; height: 40px; display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; }
.m .ticker-track { animation: marquee var(--dur, 40s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; align-items: center; }
.ticker a { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font: 400 var(--text-mono)/16px var(--ff-mono); letter-spacing: var(--tracking-ui); color: var(--color-muted); white-space: nowrap; transition: color .15s var(--ease-ui); }
.ticker a:hover { color: var(--color-fg); }
.ticker a b { font-weight: 500; color: var(--color-fg); }
.ticker a .vault { color: var(--color-vault); }
.ticker a i { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.ticker .sep { width: 3px; height: 3px; border-radius: 9px; background: var(--color-line-strong); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- how it works: steps light in sequence, connectors flow ---------- */
.m .flow .step { transition: opacity .5s var(--ease-ui), border-color .5s var(--ease-ui), transform .6s var(--ease-out); }
.m .flow .step:not(.lit) { opacity: .4; }
.flow .step.lit { border-color: var(--color-line-strong); }
.flow .step.lit:nth-of-type(6) { border-color: #3DDC9799; }
.m .flow .step .step-icon { scale: .85; transition: scale .6s var(--spring), rotate .6s var(--spring); }
.m .flow .step.lit .step-icon { scale: 1; }
.flow.on > svg g[stroke-dasharray] path { animation: flow-edge-dash .7s linear infinite; }
.flow.on::before { animation: flow-rail 1s linear infinite; }
@keyframes flow-edge-dash { to { stroke-dashoffset: -8px; } }
@keyframes flow-rail { to { transform: translateY(8px); } }
.m .segbar i { scale: 1 0; transform-origin: bottom; transition: scale .5s var(--spring); transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.m .in .segbar i, .m .segbar.in i { scale: 1 1; }

/* ---------- money flow: path draws, SOL particles travel ---------- */
.mf-desk > svg { z-index: 0; }
.mf-desk .n, .mf-desk .lbl { z-index: 2; }
.m .mf-desk::before { content: ""; position: absolute; inset: 0 -4px; z-index: 1; background: #0B0B0B; transform-origin: right; transition: scale 1.6s var(--ease-out) .2s; pointer-events: none; }
.m .mf-desk.in::before { scale: 0 1; }
.mf-desk .pt { opacity: 0; transition: opacity .6s; }
.mf-desk.flowing .pt { opacity: 1; }
.m .mf-arrow svg { animation: float-sm 1.4s ease-in-out infinite alternate; }

/* ---------- fills ---------- */
.m .bar i, .m .progress i { scale: 0 1; transform-origin: left; transition: scale 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + .3s); }
.m .bar.in i, .m .progress.in i { scale: 1 1; }
.m .timeline { isolation: isolate; }
.timeline .tl { z-index: 2; }
.m .timeline::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 16px; background: var(--color-card); transform-origin: right; transition: scale 1.8s var(--ease-out) .2s; pointer-events: none; }
.m .timeline.in::before { scale: 0 1; }
.m .timeline .node { scale: 0; transition: scale .6s var(--spring); }
.m .timeline.in .node { scale: 1; }
.m .timeline.in .tl:nth-of-type(2) .node { transition-delay: .55s; }
.m .timeline.in .tl:nth-of-type(3) .node { transition-delay: 1s; }
.m .timeline.in .tl:nth-of-type(4) .node { transition-delay: 1.5s; }
.m .timeline .tl > div { opacity: 0; translate: 0 6px; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); }
.m .timeline.in .tl > div { opacity: 1; translate: none; }
.m .timeline.in .tl:nth-of-type(2) > div { transition-delay: .6s; }
.m .timeline.in .tl:nth-of-type(3) > div { transition-delay: 1.05s; }
.m .timeline.in .tl:nth-of-type(4) > div { transition-delay: 1.55s; }
.m .timeline.in .tl:nth-of-type(4) .node { animation: ping-node 2s var(--ease-out) 2.2s infinite; }
@keyframes ping-node { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(1); } }
@media (max-width: 720px) { .m .timeline::before { display: none; } }

/* ---------- faq ---------- */
.faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-list details p { transition: opacity .35s var(--ease-out), translate .35s var(--ease-out); }
.faq-list details:not([open]) p { opacity: 0; translate: 0 -4px; }
.faq-list summary { transition: color .15s var(--ease-ui); }
.faq-list summary:hover { color: #fff; }
.faq-list summary svg { transition: transform .4s var(--spring), stroke .15s; }

/* ---------- copy to clipboard ---------- */
[data-copy] { cursor: copy; position: relative; border-radius: 4px; transition: color .15s var(--ease-ui); }
[data-copy]:hover { color: var(--color-fg); text-decoration: underline dotted #FFFFFF66; text-underline-offset: 3px; }
[data-copy]::after { content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 2px 6px; border-radius: 5px; background: var(--color-fg); color: var(--color-card);
  font: 500 10px/14px var(--ff-mono); white-space: nowrap; translate: -50% 4px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-ui), translate .3s var(--ease-out); }
[data-copy].copied::after { opacity: 1; translate: -50% 0; }
button[data-copy] { font: inherit; color: inherit; text-align: left; word-break: break-all; }

/* ---------- wallet modal ---------- */
.wm { opacity: 0; translate: 0 12px; scale: .98;
  transition: opacity .25s var(--ease-ui), translate .45s var(--ease-out), scale .45s var(--ease-out), overlay .25s allow-discrete, display .25s allow-discrete; }
.wm[open] { opacity: 1; translate: none; scale: 1; }
@starting-style { .wm[open] { opacity: 0; translate: 0 12px; scale: .98; } }
.wm::backdrop { background: #000000B3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease-ui), overlay .25s allow-discrete, display .25s allow-discrete; }
.wm[open]::backdrop { opacity: 1; }
@starting-style { .wm[open]::backdrop { opacity: 0; } }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #FFFFFF33; border-top-color: var(--color-fg); flex-shrink: 0; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.ok-mark { width: 16px; height: 16px; flex-shrink: 0; }
.ok-mark path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: draw .4s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column-reverse; gap: 8px; width: min(360px, 100% - 40px); pointer-events: none; }
.toast { pointer-events: auto; animation: toast-in .5s var(--spring) both; transition: opacity .25s var(--ease-ui), translate .3s var(--ease-out), border-color .3s var(--ease-ui); }
.toast.swap { animation: toast-swap .45s var(--spring); }
.toast .t-ic { animation: bump .5s var(--spring); }
.toast .t-ic path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw .35s var(--ease-out) .12s forwards; }
@keyframes toast-swap { 40% { transform: scale(1.025); } }
.toast.out { opacity: 0; translate: 16px 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@media (max-width: 720px) { .toasts { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* ---------- skeletons, empty, error ---------- */
.sk-b { display: block; height: 12px; border-radius: 6px; background: #FFFFFF0F; position: relative; overflow: clip; }
.sk-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FFFFFF00, #FFFFFF14, #FFFFFF00); transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty.err { color: var(--color-hunt); }
.empty.err::before { content: "!"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #FF615466; font: 600 12px/1 var(--ff-mono); }
.status { transition: opacity .2s; }
.stepbox { transition: opacity .35s var(--ease-ui), border-color .25s var(--ease-ui); }
.steps .stepbox.done h3::before { animation: bump .5s var(--spring); }

/* board filters */
::view-transition-group(*.row) { animation-duration: .4s; animation-timing-function: var(--ease-out); }
::view-transition-old(*.row) { animation: .2s var(--ease-ui) both vt-out; }
::view-transition-new(*.row) { animation: .35s var(--ease-out) both vt-in; }

/* ---------- mobile: landing nav is fixed, keep hero content below it ---------- */
@media (max-width: 720px) {
  .hero { padding-top: 48px; }
  .hero > .nav { width: 100%; }
  .nav.scrolled { translate: 0 -4px; }
  .mnav { top: 44px; }
}

/* ---------- reduced motion: no travel, no loops; keep opacity + color feedback ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .wm-opt:hover, .point:hover, .nav.scrolled, .upvote[role="button"]:active { translate: none; scale: none; }
  .nav.scrolled .brand, .brand:hover img, .step:hover .step-icon, .panel:hover .panel-icon, .side:hover .side-hero img, .point:hover img { rotate: none; scale: none; }
  .tilt { transform: none !important; }
  .mnav, .mnav a, .wm, .toast { translate: none !important; scale: none !important; }
  .mf-desk .pt { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}