/* Hover — the site. One tagline, one scroller, one close. Void ground,
   Manrope display, the real product as the only imagery. Body face is Inter
   (the product's UI face); display is Manrope (the lockup's face). */

:root {
  --void: #08090A;
  --surface: #101214;
  --line: #23272B;
  --paper: #F2F4F3;
  --dim: #C9CFD3;
  --muted: #8A9199;
  --signal: #C6F24E;
  --core: #E8FBB4;
  --danger: #FF6B4A;
  --amber: #FFC773;
  --flux: #5AD1E6;
  --disp: 'Manrope', system-ui, sans-serif;
  --body: 'Inter', system-ui, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  color: var(--dim);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(198, 242, 78, .28); color: var(--paper); }

/* ------------------------------------------------------------ atmosphere */
/* Three soft color fields drifting over the void, plus a film of grain.
   Fixed and negative-z: they live behind everything, above the canvas. */
.aurora { position: fixed; inset: -14%; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) {
  width: 64vw; height: 64vw; left: -14vw; top: -20vh;
  background: radial-gradient(circle, rgba(198, 242, 78, .12), transparent 63%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 56vw; height: 56vw; right: -16vw; top: 12vh;
  background: radial-gradient(circle, rgba(90, 209, 230, .10), transparent 63%);
  animation: drift2 33s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 60vw; height: 60vw; left: 18vw; bottom: -32vh;
  background: radial-gradient(circle, rgba(198, 242, 78, .07), transparent 63%);
  animation: drift3 39s ease-in-out infinite alternate;
}
.aurora i:nth-child(4) {
  width: 44vw; height: 44vw; right: 4vw; bottom: -14vh;
  background: radial-gradient(circle, rgba(255, 107, 74, .06), transparent 62%);
  animation: drift4 29s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(16vw, 12vh) scale(1.22); } }
@keyframes drift2 { to { transform: translate(-14vw, -14vh) scale(1.16); } }
@keyframes drift3 { to { transform: translate(-15vw, -9vh) scale(1.24); } }
@keyframes drift4 { to { transform: translate(-10vw, -16vh) scale(1.18); } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
}

/* ------------------------------------------------------------------ header */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  background: linear-gradient(180deg, rgba(8, 9, 10, .85), rgba(8, 9, 10, 0));
}
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark img { height: 30px; width: auto; display: block; }

/* --------------------------------------------------------------------- CTA */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em; text-decoration: none;
  color: #0B0D08; background: linear-gradient(180deg, var(--core), var(--signal));
  padding: 13px 26px; border-radius: 14px;
  box-shadow: 0 6px 26px -8px rgba(198, 242, 78, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 32px -8px rgba(198, 242, 78, .7); }
.cta.small { padding: 9px 16px; font-size: 13px; border-radius: 11px; }
.cta.big { padding: 17px 38px; font-size: 16px; border-radius: 16px; }

/* -------------------------------------------------------------------- hero */
.hero {
  min-height: 94vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px 24px 24px; position: relative;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  color: var(--dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px; padding: 9px 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-bottom: 34px;
}
.hero h1 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(48px, 8.6vw, 100px);
  line-height: 1.02; letter-spacing: -0.035em; color: var(--paper);
}
.hero .sub {
  margin-top: 26px;
  font-size: clamp(17px, 1.9vw, 20px); color: var(--muted);
}
.hero-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.fine {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.cashtags {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  /* dead zone behind the headline: tags materialize as they travel outward */
  -webkit-mask-image: radial-gradient(circle at 50% 46%,
    transparent 0, transparent 130px, rgba(0, 0, 0, .7) 260px, #000 360px);
          mask-image: radial-gradient(circle at 50% 46%,
    transparent 0, transparent 130px, rgba(0, 0, 0, .7) 260px, #000 360px);
}
.cashtags span {
  position: absolute; left: 50%; top: 44%;
  font-family: var(--mono); font-weight: 600;
  color: var(--paper); opacity: 0;
  will-change: transform, opacity;
  /* flight animation is set inline per launch by site.js */
}
.cashtags span.lime { color: var(--signal); }
.cashtags span.cyan { color: var(--flux); }
@keyframes tagfly {
  0% { transform: translate(-50%, -50%) translate(calc(var(--dx) * .14), calc(var(--dy) * .14)) scale(.72); opacity: 0; }
  14% { opacity: var(--o); }
  76% { opacity: calc(var(--o) * .5); }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.14); opacity: 0; }
}
.hero .eyebrow, .hero h1, .hero .sub, .hero .hero-cta { position: relative; z-index: 1; }

.cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 18px; opacity: .6;
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ----------------------------------------------------------------- scrolly */
.scrolly {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 48px;
}
.step {
  min-height: 96vh;
  display: flex; flex-direction: column; justify-content: center;
}
.step h2 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
  letter-spacing: -0.03em; color: var(--paper);
  max-width: 11em;
}
.step p { margin-top: 16px; max-width: 26rem; color: var(--muted); font-size: 17px; }

.stage-wrap { position: relative; }
.scene-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
/* absolute so its fixed 480x620 coordinate space never bloats the grid */
.scene-fit { position: absolute; left: 50%; top: 50%; width: 480px; height: 620px;
  transform: translate(-50%, -50%) scale(1.08); }

/* every scene element is positioned and faded by the scroll engine directly */
.sc { position: absolute; opacity: 0; pointer-events: none; }
.stx { will-change: transform, opacity; }

/* -- the post ---------------------------------------------------------- */
.post {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 92vw);
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  text-align: left;
  background: #0C0E10; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.post .pfp {
  width: 40px; height: 40px; border-radius: 50%;
  background: #14181C url(./img/ansem.jpg) center/cover;
}
.post .who { font-size: 14px; color: var(--paper); }
.post .who b { font-weight: 700; }
.post .who span { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 13px; }
.post p { margin-top: 3px; font-size: 14.5px; color: var(--dim); }
.post .ct {
  font-style: normal; color: var(--signal); font-weight: 600;
  border-radius: 6px; padding: 1px 3px; margin: -1px -3px;
  transition: background .3s ease, box-shadow .3s ease;
}
.post .ct.lit {
  background: rgba(198, 242, 78, .16);
  box-shadow: 0 0 0 1px rgba(198, 242, 78, .55), 0 0 18px -4px rgba(198, 242, 78, .5);
}

/* -- the cursor -------------------------------------------------------- */
.cursor { width: 26px; height: 26px; z-index: 6; left: 0; top: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); will-change: left, top; }

/* -- the panel --------------------------------------------------------- */
/* anchored by its TOP so the deck opening only extends DOWNWARD, like the
   real panel.
   112px, not 84. At 84 the card sat high enough that the cursor's approach to
   HOVER TO BUY was a short hop into a crowded bottom edge; the extra 28px give
   the travel somewhere to happen and let the closed card breathe. The open
   deck still clears the 620 fit — the panel is 348 tall closed and the tiles
   reveal below it, which the fit lets overflow. */
.panelmount {
  left: 50%; top: 112px;
  transform: translate(-50%, 0);
  width: 360px; z-index: 2;
  filter: drop-shadow(0 34px 70px rgba(0, 0, 0, .6));
  will-change: transform, opacity, filter;
}
.panelmount .hvx-lp { position: relative; }

/* -- tile balance (site fixture: qty+symbol on one line) ---------------- */
.scene-stage .tile { gap: 4px !important; }
.scene-stage .tile .cap { font-size: 15px !important; line-height: 1 !important; }
.scene-stage .tile .qn { margin-top: 0 !important; font-size: 10px !important; letter-spacing: .03em; }
.scene-stage .tile .qs { display: none !important; }

/* -- the buy celebration ------------------------------------------------ */
.buyflash {
  left: 0; top: 0; width: 300px; height: 300px; z-index: 5;
  background: radial-gradient(circle, rgba(198, 242, 78, .5), rgba(198, 242, 78, .12) 38%, transparent 62%);
  will-change: transform, opacity;
}
.scene-stage .swapbtn.bought {
  color: #D8FA7C !important;
  border-color: rgba(198, 242, 78, .85) !important;
  background: rgba(198, 242, 78, .1) !important;
}

/* -- the ghost feed lines ----------------------------------------------- */
.feedghost {
  left: 30px; top: 197px;
  display: flex; flex-direction: column; gap: 44px;
}
.feedghost i { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.feedghost i:nth-child(1) { width: 180px; }
.feedghost i:nth-child(2) { width: 122px; }
.feedghost i:nth-child(3) { width: 158px; }
.feedghost i:nth-child(4) { width: 104px; }
.feedghost i:nth-child(5) { width: 142px; }

/* -- the fee ----------------------------------------------------------- */
.feewrap {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 1; will-change: transform, opacity;
}
.feewrap b {
  display: block; font-family: var(--disp); font-weight: 800;
  font-size: 96px; line-height: 1; letter-spacing: -0.04em; color: var(--paper);
}
.feewrap span {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* -- the flock: chain marks that orbit the fee, then become the rail ---- */
.sq {
  position: absolute; left: 0; top: 0;
  width: 46px; height: 46px; border-radius: 13px;
  opacity: 0; z-index: 3; will-change: transform, opacity;
}
.sq .fl {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, #171d23, #0d1014);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid; place-items: center;
  animation: sqfloat 4.6s ease-in-out infinite alternate;
}
.sq:nth-child(2n) .fl { animation-duration: 5.4s; animation-delay: -1.3s; }
.sq:nth-child(3n) .fl { animation-duration: 6.1s; animation-delay: -2.2s; }
.sq.still .fl { animation: none; }
@keyframes sqfloat { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.sq .ca, .sq .tk { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; }
.sq .ca svg { width: 26px; height: 26px; border-radius: 6px; }
.sq .tk { opacity: 0; background-size: cover; background-position: center; }

/* -- the rail line and overflow chip ----------------------------------- */
.railline { left: 0; top: 0; width: 1px; background: var(--line); will-change: opacity; }
.railchip {
  left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(150deg, #14181d, #0c0f12);
  border: 1px solid rgba(255, 255, 255, .08);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  z-index: 3;
}

.finale {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  transform: translateY(102%);
  pointer-events: none;
  will-change: transform;
}
.close-card {
  position: relative; margin: auto; width: min(1120px, calc(100% - 40px));
  min-height: min(560px, 64vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 96px 48px; text-align: center;
  border-radius: 36px;
  background: linear-gradient(165deg, #E4FB9A, #C6F24E 55%, #A7DA2C);
  box-shadow:
    0 30px 120px -16px rgba(198, 242, 78, .5),
    inset 0 1px 0 rgba(255, 255, 255, .5);
  will-change: transform;
}
.close-card h2 {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(44px, 7vw, 88px); line-height: 1.04;
  letter-spacing: -0.035em; color: #0B0D08;
}
.finale-foot { flex: 0 0 auto; }
.close-card .cta.dark {
  margin-top: 38px;
  color: var(--core); background: #0B0D08;
  padding: 17px 38px; font-size: 16px; border-radius: 16px;
  box-shadow: 0 14px 34px -12px rgba(11, 13, 8, .65);
}
.close-card .cta.dark:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(11, 13, 8, .75); }
.close-card .fine.dark { display: block; margin-top: 18px; color: rgba(11, 13, 8, .8); }

/* ------------------------------------------------------------------- strip */
.strip {
  margin: 0 auto; padding: 26px 24px; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ footer */
.pagefoot {
  max-width: 980px; margin: 0 auto; padding: 24px 24px 30px;
  display: flex; align-items: center; gap: 18px;
}
.flogo { height: 28px; width: auto; display: block; }
.fsep { flex: 1; }
.pagefoot a {
  color: var(--muted); text-decoration: none; font-size: 13.5px; margin-left: 18px;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.pagefoot a:hover { color: var(--signal); border-color: rgba(198, 242, 78, .4); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .scrolly { grid-template-columns: 1fr; column-gap: 0; }
  /* steps and stage share one cell so the sticky stage can ride the whole
     scroll; the GRAPHIC pins to the top half, and each step's TEXT pins in
     the lower zone and crossfades on handoff (the scrub drives opacity) */
  .steps, .stage-wrap { grid-area: 1 / 1; }
  .stage-wrap .scene-stage { height: 52vh; z-index: 5; }
  .scene-fit { transform: translate(-50%, -50%) scale(.6); }
  .steps { padding-top: 26vh; }
  /* 145vh: tall enough that the sticky text stays PINNED until the fade
     curve (dead at |dv| .46) has fully killed it — unpinning early is what
     let outgoing copy ride up into the imagery */
  .step { min-height: 145vh; display: block; text-align: center; }
  .step.spacer { min-height: 100vh; }
  .step .stx { position: sticky; top: 58vh; padding: 0 8px; }
  .close-card { padding: 64px 24px; min-height: 54vh; }
  .step h2 { max-width: none; }
  .step p { position: relative; z-index: 1; margin-left: auto; margin-right: auto; }
  .feewrap b { font-size: 68px; }
  .mark img { height: 26px; }
}
@media (max-width: 430px) {
  .scene-fit { transform: translate(-50%, -50%) scale(.55); }
  .post { width: 400px; }
  .cashtags {
    -webkit-mask-image: radial-gradient(circle at 50% 46%,
      transparent 0, transparent 90px, rgba(0, 0, 0, .7) 180px, #000 260px);
            mask-image: radial-gradient(circle at 50% 46%,
      transparent 0, transparent 90px, rgba(0, 0, 0, .7) 180px, #000 260px);
  }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta:hover { transform: none; }
  .cashtags {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  /* dead zone behind the headline: tags materialize as they travel outward */
  -webkit-mask-image: radial-gradient(circle at 50% 46%,
    transparent 0, transparent 130px, rgba(0, 0, 0, .7) 260px, #000 360px);
          mask-image: radial-gradient(circle at 50% 46%,
    transparent 0, transparent 130px, rgba(0, 0, 0, .7) 260px, #000 360px);
}
.cashtags span {
  position: absolute; left: 50%; top: 44%;
  font-family: var(--mono); font-weight: 600;
  color: var(--paper); opacity: 0;
  will-change: transform, opacity;
  /* flight animation is set inline per launch by site.js */
}
.cashtags span.lime { color: var(--signal); }
.cashtags span.cyan { color: var(--flux); }
@keyframes tagfly {
  0% { transform: translate(-50%, -50%) translate(calc(var(--dx) * .14), calc(var(--dy) * .14)) scale(.72); opacity: 0; }
  14% { opacity: var(--o); }
  76% { opacity: calc(var(--o) * .5); }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.14); opacity: 0; }
}
.hero .eyebrow, .hero h1, .hero .sub, .hero .hero-cta { position: relative; z-index: 1; }

.cue { animation: none; }
  .post .ct { transition: none; }
  .aurora i { animation: none; }
  .sq .fl { animation: none; }
}