/* CandleForge home v3: the motion layer. Shared tokens and components live in site.css. */

/* ---------- intro: three candles are forged, then the curtain lifts ---------- */
#intro {
  position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 22px;
  animation: introSafety .6s ease 3.2s forwards;   /* if the script never runs, the page still opens */
}
@keyframes introSafety { to { opacity: 0; visibility: hidden; } }
.no-intro #intro { display: none; }
.intro-mark { display: flex; gap: 14px; align-items: flex-end; height: 92px; }
.ic { position: relative; width: 22px; display: block; }
.ic i { position: absolute; left: 50%; width: 2px; transform: translateX(-50%); }
.ic b { position: absolute; left: 0; width: 22px; border-radius: 3px; transform-origin: 50% 100%; }
.ic.r { height: 70px; } .ic.r i { top: 0; bottom: 6px; background: var(--down); } .ic.r b { bottom: 14px; height: 40px; background: var(--down); }
.ic.g { height: 82px; } .ic.g i { top: 0; bottom: 0; background: var(--up); } .ic.g b { bottom: 10px; height: 56px; background: var(--up); }
.ic.y { height: 92px; } .ic.y i { top: 0; bottom: 4px; background: var(--gold); } .ic.y b { bottom: 12px; height: 66px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 40px rgba(232, 181, 88, .5); }
.intro-word { font: 900 30px/1 var(--display); letter-spacing: .16em; color: var(--ink); }
.intro-word b { color: var(--gold); font-weight: 900; }
.intro-bar { width: 180px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.intro-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- scroll progress ---------- */
.progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(232, 181, 88, .7); }

/* nav hides on the way down, comes back on the way up */
.nav { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease; }
.nav-hidden .nav { transform: translateY(calc(-100% - 2px)); }
.menu-open .nav { transform: none; }

/* ---------- hero ---------- */
.h3 { position: relative; min-height: min(100svh, 980px); display: grid; align-items: center; overflow: hidden; isolation: isolate; padding-block: 80px 120px; }
#forge3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.h3-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 20% 58%, rgba(9, 11, 16, .94), rgba(9, 11, 16, .62) 52%, transparent 82%),
    linear-gradient(180deg, rgba(9, 11, 16, .7) 0%, transparent 22%, transparent 70%, var(--bg) 100%); }
.h3-inner { position: relative; }
.h3-title { font-size: clamp(54px, 10.4vw, 150px); line-height: .86; margin-top: 22px; }
.h3-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }
.h3-title .w > span { display: inline-block; will-change: transform; }
.molten { background-size: 220% 100%; }
@media (prefers-reduced-motion: no-preference) { .molten { animation: shimmer 6s ease-in-out infinite; } }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.h3-lede { max-width: 52ch; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(180deg, var(--gold), transparent); position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue i::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--gold-2); animation: drip 1.8s ease-in-out infinite; } }
@keyframes drip { from { top: -14px; } to { top: 46px; } }
@media (max-width: 720px) { .scroll-cue { display: none; } .h3 { min-height: auto; padding-block: 64px 72px; } }

/* market strip: a pulsing dot per market */
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 10px rgba(31, 209, 139, .8); flex: none; }

/* ---------- statement ---------- */
.statement-sec { padding-block: clamp(80px, 12vw, 170px); }
.statement { margin: 0; max-width: 24ch; font: 800 clamp(34px, 5.6vw, 78px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.statement em { font-style: normal; color: var(--gold); }
.statement .sw { opacity: .14; transition: none; }

/* ---------- story: one candle opened ---------- */
.story { position: relative; }
.story-pin { min-height: 100svh; display: grid; align-items: center; padding-block: 90px 40px; }
.story-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.story-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; }
.story-steps li { grid-area: 1 / 1; transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: translateY(18px); pointer-events: none; }
.story-steps li.on { opacity: 1; transform: none; pointer-events: auto; }
.story-steps h2 { margin: 0; }
.story-steps p { margin: 18px 0 0; color: var(--ink-2); font-size: 18px; max-width: 44ch; }
.story-dots { display: flex; gap: 8px; margin-top: 30px; }
.story-dots i { width: 28px; height: 3px; border-radius: 3px; background: var(--line-2); transition: background-color .3s ease, width .3s ease; }
.story-dots i.on { background: var(--gold); width: 46px; }
.story-viz { display: grid; place-items: center; min-width: 0; }
.cv { position: relative; width: min(100%, 580px); height: min(62svh, 540px); min-height: 400px; border: 1px solid var(--line-2); border-radius: 22px;
  background: radial-gradient(420px 300px at 50% 40%, rgba(31, 209, 139, .07), transparent 70%), linear-gradient(180deg, var(--panel), var(--bg-2)); overflow: hidden; }
.cv-axis { position: absolute; left: 0; top: 64px; bottom: 96px; width: 74px; border-right: 1px solid var(--line); display: grid; }
.cv-axis span { display: grid; align-items: center; justify-content: end; padding-right: 10px; font: 500 11px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cv-axis span.poc { color: var(--gold); font-weight: 700; }
.cv-wick { position: absolute; left: calc(74px + (100% - 74px) / 2); top: 40px; bottom: 80px; width: 2px; transform: translateX(-50%); background: var(--up); }
.cv-body { position: absolute; top: 64px; bottom: 96px; left: calc(74px + (100% - 74px) / 2); width: 64px; transform: translateX(-50%); border-radius: 6px;
  background: var(--up); display: grid; overflow: hidden; box-shadow: 0 0 60px -10px rgba(31, 209, 139, .5); }
.cv-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-inline: 14px; border-top: 1px solid rgba(9, 11, 16, .0);
  font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; position: relative; }
.cv-row .s { text-align: right; color: var(--down); } .cv-row .b { color: var(--up); } .cv-row .x { color: var(--ink-3); }
.cv-row > * { opacity: 0; }
.cv-row::before { content: ""; position: absolute; inset: 0; opacity: 0; background: var(--hl, transparent); }
.cv-row.lit::before { opacity: 1; transition: opacity .4s ease; }
.cv-row.ib-b { --hl: rgba(31, 209, 139, .2); } .cv-row.ib-s { --hl: rgba(255, 79, 99, .2); } .cv-row.poc { --hl: rgba(232, 181, 88, .16); }
.cv-abs { position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 4px; opacity: 0; box-shadow: 0 0 22px rgba(232, 181, 88, .5); pointer-events: none; }
.cv-whales { position: absolute; top: 64px; bottom: 96px; right: 0; width: 1px; }
.whale { position: absolute; right: 14px; transform: translateY(-50%) scale(0); transform-origin: 100% 50%; display: flex; align-items: center; gap: 8px; }
.whale i { display: block; border-radius: 50%; flex: none; }
.whale.b i { background: radial-gradient(circle at 35% 35%, #6FF2C0, var(--up)); box-shadow: 0 0 24px rgba(31, 209, 139, .6); }
.whale.s i { background: radial-gradient(circle at 35% 35%, #FF9AA8, var(--down)); box-shadow: 0 0 24px rgba(255, 79, 99, .6); }
.whale span { font: 700 10.5px/1.2 var(--mono); color: var(--ink); background: rgba(9, 11, 16, .85); border: 1px solid var(--line-2); padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.cv-delta { position: absolute; left: 20px; right: 20px; bottom: 44px; display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; font: 600 12px/1 var(--mono); color: var(--ink-3); opacity: 0; }
.cv-delta b { color: var(--up); min-width: 5ch; }
.cv-delta i { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cv-delta em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--up), #6FF2C0); border-radius: 4px; }
.cv-ohlc { position: absolute; left: 20px; right: 20px; top: 18px; font-size: 11.5px; color: var(--ink-2); }
.cv-tag { position: absolute; right: 14px; bottom: 14px; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; }
@media (max-width: 520px) { .cv { height: 380px; min-height: 0; } .story-pin { padding-block: 70px 20px; } .story-steps p { font-size: 15.5px; margin-top: 10px; } .story-grid { gap: 18px; } .cv-row { padding-inline: 8px; gap: 5px; font-size: 11.5px; } .cv-axis { width: 64px; } .cv-wick, .cv-body { left: calc(64px + (100% - 64px) / 2); } .whale span { display: none; } }
/* without motion every stage is shown at once */
.rm .cv-row > *, .rm .cv-row::before, .rm .cv-row.lit::before, .rm .cv-abs, .rm .cv-delta { opacity: 1; }
.rm .whale { transform: translateY(-50%) scale(1); }
.rm .story-steps { gap: 28px; }
.rm .story-steps li { grid-area: auto; opacity: 1; transform: none; }
.rm .story-dots { display: none; }

/* ---------- terminal ---------- */
.term-sec .window-wrap { margin-top: 44px; perspective: 1800px; }
.term-sec .window { transform-origin: 50% 0; will-change: transform; }
.counters { margin-top: 56px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.counters div { background: var(--bg); padding: 26px 22px; display: grid; gap: 8px; }
.counters b { font: 900 clamp(44px, 5vw, 68px)/.9 var(--display); background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #B57A26); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.counters span { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 980px) { .counters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- river tape ---------- */
.river { border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; min-height: 520px; }
@media (min-width: 980px) { .split > .river { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); } }
.river-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.river-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); }
.river-tabs button { font: 600 12.5px/1 var(--body); color: var(--ink-2); background: transparent; border: 0; border-radius: 7px; padding: 8px 12px; cursor: pointer; }
.river-tabs button[aria-selected="true"] { background: var(--gold); color: #1A1104; }
.river-stage { position: relative; min-height: 400px; }
.river-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-feed { list-style: none; margin: 0; padding: 10px 14px; position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; font: 500 13px/1.4 var(--mono); }
.story-feed li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
.story-feed li b { color: var(--ink); font-weight: 700; }
.story-feed li.buy { border-left: 3px solid var(--up); } .story-feed li.sell { border-left: 3px solid var(--down); } .story-feed li.whale { border-color: rgba(232, 181, 88, .5); background: rgba(232, 181, 88, .06); }
.story-feed time { color: var(--ink-3); }
/* the views share the stage: a hidden one is gone (the display rules above would otherwise keep it on screen) */
.story-feed[hidden], .river-stage canvas[hidden] { display: none !important; }
.story-feed { background: var(--panel); }
@media (prefers-reduced-motion: no-preference) { .story-feed li:first-child { animation: slide .4s ease-out; } }
.river-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.river-foot b { color: var(--ink); }
.river-foot .tv { margin-left: auto; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }

/* ---------- horizontal gallery ---------- */
.gallery { border-top: 1px solid var(--line); overflow: hidden; }
.gallery-pin { padding-block: clamp(64px, 9vw, 110px); }
.gallery-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.gallery-head .sub { margin: 0; max-width: 40ch; }
.drag-hint { color: var(--gold); font-family: var(--mono); font-size: 13px; }
.gallery-track { display: flex; gap: 18px; margin-top: 44px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 24px; will-change: transform; }
@media (min-width: 720px) { .gallery-track { padding-left: max(24px, calc((100vw - var(--wrap)) / 2)); } }
.gcard { flex: none; width: min(380px, 82vw); border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(180deg, var(--panel), var(--bg)); overflow: hidden; display: grid; grid-template-rows: 230px auto; }
.gcard canvas { width: 100%; height: 230px; display: block; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.gcard-copy { padding: 20px 22px 24px; display: grid; gap: 10px; }
.gcard h3 { margin: 0; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.gcard p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.gcard .ind-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gcard .tag { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.gcard .tag.new { color: var(--gold); border-color: var(--gold-deep); }
/* order flow, live: the same cards in a grid */
.of-grid { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.of-grid .gcard { width: auto; }
/* how-to videos: 16:9 frames; a card becomes a player once its video is set (site.js) */
.vids { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.vid { border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.vid-frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 25% 15%, rgba(232, 181, 88, .12), transparent 60%), linear-gradient(180deg, #121722, #0b0e14); }
.vid-frame::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; }
.vid-play { position: relative; width: 60px; height: 60px; border-radius: 50%; background: rgba(232, 181, 88, .12); border: 1px solid rgba(232, 181, 88, .5); transition: transform .25s ease, background-color .25s ease; }
.vid-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--gold); }
.vid-n { position: absolute; left: 14px; top: 12px; font: 700 12px/1 var(--mono); letter-spacing: .08em; color: var(--gold); }
.vid-tag { position: absolute; right: 12px; top: 10px; font: 700 10px/1 var(--mono); letter-spacing: .1em; color: #1A1104; background: var(--gold); border-radius: 999px; padding: 4px 8px; }
.vid-soon { position: absolute; left: 14px; bottom: 12px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vid-copy { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.vid-copy h3 { margin: 0; font: 700 18px/1.3 var(--body); }
.vid-copy p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.vid.ready .vid-frame { cursor: pointer; }
.vid.ready .vid-soon { display: none; }
.vid.ready .vid-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid.ready .vid-play { background: rgba(9, 11, 16, .72); }
.vid.ready .vid-frame:hover .vid-play { transform: scale(1.08); background: rgba(232, 181, 88, .25); }
.vid-frame iframe, .vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vid-note { margin: 22px 0 0; color: var(--ink-2); font-size: 14.5px; }
.vid-note a { color: var(--gold); }
/* phones and reduced motion: a swipeable row instead of the pinned scroll */
.gallery.native .gallery-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
.gallery.native .gallery-track::-webkit-scrollbar { display: none; }
.gallery.native .gcard { scroll-snap-align: start; }
.gallery:not(.native) .drag-hint { display: none; }

/* ---------- bento ---------- */
.bento { display: grid; gap: 16px; margin-top: 44px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
.bx { position: relative; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--panel), var(--bg)); padding: 24px; display: grid; gap: 18px; align-content: start; overflow: hidden; min-width: 0; }
.bx h3 { margin: 0; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bx p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 52ch; }
.bx-tag { position: absolute; right: 16px; top: 16px; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; }
.bx-money { grid-column: span 4; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.bx-rrg { grid-column: span 2; grid-row: span 2; grid-template-rows: auto 1fr; }
.bx-heat { grid-column: span 2; }
.bx-news { grid-column: span 2; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-money { grid-column: span 2; } .bx-rrg { grid-column: span 2; grid-row: auto; } .bx-heat, .bx-news { grid-column: span 1; } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bx-money { grid-template-columns: minmax(0, 1fr); } .bx-money, .bx-rrg, .bx-heat, .bx-news { grid-column: auto; } }
.flowbars { display: grid; gap: 12px; }
.flowbars div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.flowbars i { height: 12px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.flowbars em { display: block; height: 100%; width: var(--w); border-radius: 6px; transform-origin: 0 50%; }
.flowbars em.b { background: linear-gradient(90deg, rgba(31, 209, 139, .4), var(--up)); }
.flowbars em.s { background: linear-gradient(90deg, rgba(255, 79, 99, .4), var(--down)); }
#rrg { width: 100%; height: 100%; min-height: 300px; display: block; }
.heat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.heat i { aspect-ratio: 1.4; border-radius: 4px; display: grid; place-items: center; font: 600 9px/1 var(--mono); color: rgba(255, 255, 255, .85); transition: background-color 1.2s ease; }
.news { display: grid; gap: 12px; }
.news-count { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gold-deep); background: rgba(232, 181, 88, .06); }
.news-count span { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.news-count b { font-size: 22px; color: var(--gold); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.news-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.news-list li i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.news-list li i.hi { background: var(--down); box-shadow: 0 0 10px rgba(255, 79, 99, .7); }
.news-list li em { font: 600 10px/1 var(--mono); font-style: normal; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- chart types (drawn in) ---------- */
.types svg path, .types svg line, .types svg rect, .types svg circle { vector-effect: non-scaling-stroke; }

/* ---------- connect network ---------- */
.connect-split { align-items: center; }
.net { border: 1px solid var(--line-2); border-radius: 20px; background: radial-gradient(400px 300px at 50% 55%, rgba(232, 181, 88, .08), transparent 70%), var(--panel); padding: 12px; display: grid; gap: 10px; }
.net > svg { width: 100%; height: auto; display: block; }
.net .safe { margin: 0; }
.net-label { font: 700 12px/1 var(--mono); fill: var(--ink); }
.net-sub { font: 500 10px/1 var(--mono); fill: var(--ink-3); }

/* ---------- steps line ---------- */
.steps-line { height: 2px; background: var(--line); border-radius: 2px; margin-top: 40px; overflow: hidden; }
.steps-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }
.rm .steps-line i { transform: none; }
.steps { margin-top: 20px; }

/* ---------- plans tilt ---------- */
.tilt { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }

/* windows card: a slow gold ring around it */
.ring { position: relative; }
.ring::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--gold) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) { .ring::after { animation: spin 5s linear infinite; } }
@keyframes spin { to { --ang: 360deg; } }

/* ---------- final ---------- */
.final { padding-bottom: 0; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.mega { position: relative; margin-top: clamp(56px, 8vw, 100px); display: grid; overflow: hidden; user-select: none; }
.mega span { grid-area: 1 / 1; font: 900 clamp(60px, 16.6vw, 270px)/.78 var(--display); letter-spacing: -.01em; text-align: center; white-space: nowrap; padding-bottom: .02em; }
.mega-out { color: transparent; -webkit-text-stroke: 1px rgba(232, 181, 88, .35); }
.mega-fill { background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, #7A541A); -webkit-background-clip: text; background-clip: text; color: transparent; clip-path: inset(0 100% 0 0); }
.rm .mega-fill { clip-path: none; }

/* ---------- cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor { display: block; }
  .cursor i { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
  .cursor-dot { width: 6px; height: 6px; background: var(--gold); }
  .cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(232, 181, 88, .55); transition: width .2s ease, height .2s ease, background-color .2s ease, border-color .2s ease; }
  .cursor.hover .cursor-ring { width: 64px; height: 64px; background: rgba(232, 181, 88, .08); border-color: var(--gold); }
}

/* elements revealed on scroll start where they finish when there is no motion */
.rm [data-reveal], .rm [data-stagger] > * { opacity: 1 !important; transform: none !important; }

/* Lenis drives the scroll on this page (home.js). The browser's own smooth scrolling (site.css: html { scroll-behavior:
   smooth }) must be off under it, or each step Lenis sets is animated again and the mouse wheel stalls. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }