/* Rebuy motion layer: reveals, hovers, counters, ticker, hero loop. Calm mode under prefers-reduced-motion. */
:root { --ease: cubic-bezier(.2,.8,.2,1); }
html { scroll-behavior: smooth; }
::selection { background: var(--buy); color: var(--buy-ink); }

/* reveal on scroll (only once JS has marked the page, so no-JS still shows everything) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ambient background */
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(184,255,60,.10), transparent 60%),
    radial-gradient(30vmax 30vmax at 88% 22%, rgba(255,91,31,.09), transparent 60%),
    radial-gradient(34vmax 34vmax at 60% 95%, rgba(127,178,255,.06), transparent 60%);
  animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg); } }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }

/* nav */
.brand img { transition: transform .7s var(--ease); }
.brand:hover img { transform: rotate(-360deg); }
.nav .links a:not(.btn) { position: relative; }
.nav .links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--buy); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav .links a:not(.btn):hover::after, .nav .links a[aria-current]::after { transform: scaleX(1); }

/* buttons */
.btn { transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s, background .2s; }
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(184,255,60,.16), 0 10px 34px rgba(184,255,60,.28); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.04); }
.btn[disabled]:hover { transform: none; box-shadow: none; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* cards: lift + cursor spotlight */
.card { position: relative; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(184,255,60,.09), transparent 60%); }
.card:hover::before { opacity: 1; }
.steps .card:hover, .stat.card:hover, .card.lift:hover { transform: translateY(-4px); border-color: var(--line2); box-shadow: 0 18px 40px rgba(0,0,0,.35); }

/* counters */
.meter .big, .stat .v { display: inline-block; transform-origin: left center; font-variant-numeric: tabular-nums; }
.bump { animation: bump .7s var(--ease); }
@keyframes bump { 30% { color: var(--buy); transform: scale(1.07); } }

/* split bar: fills in on reveal, hover focuses one share */
.split > div { transition: filter .25s, flex-grow 1.1s var(--ease); }
.split.pre > div { flex-grow: .001 !important; }
.split:hover > div { filter: saturate(.55) brightness(.7); }
.split > div:hover { filter: none; }
.split-legend > div { transition: color .25s, transform .25s var(--ease); }
.split-legend > div.hl { color: var(--ink); transform: translateY(-2px); }
.split .b { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); background-size: 250% 100%; animation: sheen 3.8s ease-in-out infinite; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* feed rows */
.ev { transition: transform .25s var(--ease), border-color .25s, background .25s; }
.ev:hover { transform: translateX(4px); border-color: var(--line2); background: color-mix(in srgb, var(--card) 92%, var(--buy)); }
.ev .ico { transition: transform .4s var(--ease); }
.ev:hover .ico { transform: rotate(-8deg) scale(1.08); }
.ev.new { animation: slidein .6s var(--ease), flash 1.6s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(-10px); } }
.ev.new .tag.burn { animation: burnpulse 1s ease 2; }
@keyframes burnpulse { 50% { box-shadow: 0 0 0 4px rgba(255,91,31,.25), 0 0 18px rgba(255,91,31,.6); } }

/* table rows */
.table tbody tr:hover td { background: color-mix(in srgb, var(--bg2) 94%, var(--buy)); }
.coincell img { transition: transform .35s var(--ease); }
.table tr:hover .coincell img { transform: scale(1.12) rotate(-6deg); }

/* steps */
.steps .card { overflow: hidden; }
.steps .card::before { transition: text-shadow .3s; }
.steps .card:hover::before { text-shadow: 0 0 14px rgba(184,255,60,.8); }
.steps .card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--buy); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.steps .card:hover::after { transform: scaleX(1); }
/* the step number uses ::before; keep the spotlight off these */
.steps .card::before { position: static; background: none; opacity: 1; inset: auto; border-radius: 0; }

/* live ticker under the nav */
.ticker { border-bottom: 1px solid var(--line); background: rgba(17,20,15,.75); overflow: hidden; white-space: nowrap; font: 500 13px var(--mono); color: var(--ink2); height: 34px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker[hidden] { display: none; }
.ticker .track { display: inline-flex; gap: 42px; padding-left: 42px; animation: marquee var(--dur, 40s) linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker a { text-decoration: none; }
.ticker a:hover { color: var(--buy); }
.ticker .fire { color: var(--burn); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* hero loop graphic */
.hero-visual { position: relative; }
.orbit { position: absolute; top: -70px; right: -50px; width: 340px; height: 340px; pointer-events: none; opacity: .8; z-index: 0; }
.orbit .ring { transform-origin: 170px 170px; animation: spin 14s linear infinite; }
.orbit .ring2 { transform-origin: 170px 170px; animation: spin 24s linear infinite reverse; }
.orbit .core { transform-origin: 170px 170px; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.14); opacity: .8; } }
.hero-visual .meter { z-index: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: color-mix(in srgb, var(--card) 62%, transparent); }
@media (max-width: 900px) { .orbit { width: 240px; height: 240px; top: -50px; right: -20px; } }

/* headline shimmer */
h1 .loop { background: linear-gradient(90deg, var(--buy) 0%, #efffc9 45%, var(--buy) 60%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }

/* forms */
.field input, .field textarea { transition: border-color .2s, box-shadow .25s var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(184,255,60,.12); }
.drop { transition: border-color .25s, transform .3s var(--ease), box-shadow .3s, color .25s; }
.drop:hover, .drop.over { border-color: var(--buy); transform: scale(1.03); box-shadow: 0 0 0 4px rgba(184,255,60,.1); color: var(--ink); }
.chip { transition: border-color .2s, color .2s, transform .2s var(--ease); }
a.chip:hover, .chip.copy:hover { border-color: var(--buy); color: var(--ink); transform: translateY(-1px); }
.note.ok { animation: okpop .6s var(--ease); }
@keyframes okpop { from { transform: scale(.96); opacity: 0; } }

/* burst particles */
.spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 50; animation: spark .9s var(--ease) forwards; }
@keyframes spark { to { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* calm mode: keep fades and gentle loops, drop large movement */
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  .ticker .track { animation-duration: calc(var(--dur, 40s) * 1.6); }
  .ev:hover, .steps .card:hover, .stat.card:hover { transform: none; }
}
.card > * { position: relative; }
/* hovering a share highlights its legend (pure CSS) */
.split:has(.c:hover) + .split-legend > div:nth-child(1), .split:has(.b:hover) + .split-legend > div:nth-child(2), .split:has(.t:hover) + .split-legend > div:nth-child(3) { color: var(--ink); transform: translateY(-2px); }