/* Homepage scroll experience: smooth scroll, living background, pinned storytelling.
   Loaded after styles.css. */

html { scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* Sections that pin content: sticky needs a non-scrolling ancestor */
.section.has-pin { overflow: clip; transform: none !important; opacity: 1 !important; padding: 0 var(--gutter); }

/* Living background: flowing lines drawn on a canvas behind everything */
.bg-lines { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; pointer-events: none; }

/* The problem: one sentence that lights up as you scroll */
.say { position: relative; height: 210svh; }
.say__pin { position: sticky; top: 0; height: 100svh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: var(--nav-h) 6vw 0; text-align: center; overflow: hidden; }
.say__ring { position: absolute; left: 50%; top: 50%; width: min(70vw, 780px); aspect-ratio: 1; margin: calc(min(70vw, 780px) / -2) 0 0 calc(min(70vw, 780px) / -2); border-radius: 50%; border: 1px solid rgba(101, 200, 241, .12); box-shadow: inset 0 0 120px rgba(101, 200, 241, .06), 0 0 120px rgba(101, 200, 241, .05); animation: f5spin 60s linear infinite; pointer-events: none; }
.say__ring::before, .say__ring::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(101, 200, 241, .14); }
.say__ring::after { inset: 28%; border-style: solid; border-color: rgba(101, 200, 241, .08); }
@keyframes f5spin { to { transform: rotate(360deg); } }
.section .say__text { position: relative; max-width: 19em; margin: 0; font: 600 clamp(1.9rem, 4vw, 3.8rem)/1.12 var(--font-display); letter-spacing: -.03em; }
.say__text .w { opacity: .13; transition: opacity .25s, color .25s, text-shadow .25s; }
.say__text .w.on { opacity: 1; }
.say__text .w.hi.on { color: var(--cyan-2); text-shadow: 0 0 24px rgba(101, 200, 241, .45); }
.positioning.has-pin .position-grid { padding-bottom: 120px; }

/* Our method: five steps as a pinned journey */
.mj { position: relative; height: 600svh; }
.mj__pin { --tint: 101, 200, 241; position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 130px; gap: 3vw; align-items: center; padding: calc(var(--nav-h) + 24px) 0 40px; overflow: hidden; }
.mj__pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 65% at 60% 55%, rgba(var(--tint), .14), transparent 70%); }
.section .mj__title { margin: 14px 0 34px; max-width: 18em; color: var(--muted); font: 500 1.0625rem/1.45 var(--font-body); letter-spacing: 0; }
.mj__no { display: block; font: 600 .875rem var(--font-mono); letter-spacing: .14em; color: var(--cyan); }
.section .mj__swap h3 { margin: 10px 0 14px; font: 600 clamp(2.6rem, 5vw, 4.8rem)/1 var(--font-display); letter-spacing: -.04em; }
.mj__swap p { margin: 0; max-width: 24em; color: var(--muted); font-size: 1.125rem; line-height: 1.55; }
.mj__swap.in { animation: f5swap .55s var(--ease); }
@keyframes f5swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.hud { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(101, 200, 241, .6); pointer-events: none; }
.hud.tl { left: 0; top: calc(var(--nav-h) + 8px); border-right: 0; border-bottom: 0; } .hud.tr { right: 0; top: calc(var(--nav-h) + 8px); border-left: 0; border-bottom: 0; }
.hud.bl { left: 0; bottom: 24px; border-right: 0; border-top: 0; } .hud.br { right: 0; bottom: 24px; border-left: 0; border-top: 0; }
.mj__tag { position: absolute; left: 50%; top: calc(var(--nav-h) + 14px); transform: translateX(-50%); margin: 0; font: 600 .75rem var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

.mj__stage { position: relative; padding: 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(9, 23, 42, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.mj__stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(101, 200, 241, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 200, 241, .05) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.mj__stage svg { position: relative; display: block; width: 100%; height: auto; max-height: 58svh; overflow: visible; }
.mj-bar { fill: rgba(101, 200, 241, .07); stroke: rgba(101, 200, 241, .2); transition: fill .6s, stroke .6s, transform .8s var(--ease); transform-box: fill-box; transform-origin: bottom; transform: scaleY(.25); }
.mj-bar.on { fill: rgba(101, 200, 241, .18); stroke: rgba(101, 200, 241, .55); transform: scaleY(1); }
.mj-path { fill: none; stroke: rgba(156, 206, 244, .18); stroke-width: 2; }
.mj-prog { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(101, 200, 241, .8)); transition: stroke-dashoffset .9s var(--ease); }
.mj-node circle { fill: #071a30; stroke: rgba(156, 206, 244, .4); stroke-width: 2; transition: fill .5s, stroke .5s; }
.mj-node text { fill: var(--muted); font: 600 15px var(--font-body); text-anchor: middle; transition: fill .5s; }
.mj-node.on circle { fill: var(--cyan); stroke: var(--cyan-2); }
.mj-node.on text { fill: var(--text); }
.mj-node .ring { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; }
.mj-node.cur .ring { animation: f5ring 1.8s ease-out infinite; }
@keyframes f5ring { 0% { r: 12; opacity: .9; } 100% { r: 34; opacity: 0; } }
.mj-chaos circle { fill: rgba(156, 170, 195, .55); transition: opacity .8s, transform 1.2s var(--ease); }
.st2 .mj-chaos circle, .st3 .mj-chaos circle, .st4 .mj-chaos circle, .st5 .mj-chaos circle { opacity: 0; transform: translate(80px, -40px); }
.mj__big { position: absolute; right: 22px; top: 6px; font: 700 clamp(5rem, 11vw, 9rem)/1 var(--font-display); letter-spacing: -.06em; color: rgba(101, 200, 241, .07); pointer-events: none; }

.mj__rail { position: relative; height: 54svh; align-self: center; }
.mj__rail::before { content: ""; position: absolute; right: 7px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.mj__rail .fill { position: absolute; right: 7px; top: 0; width: 1px; height: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.mj__rail button { all: unset; cursor: pointer; position: absolute; right: 0; display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: .875rem; transform: translateY(-50%); }
.mj__rail button::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--dim); background: var(--bg); transition: all .4s; }
.mj__rail button.on { color: var(--text); } .mj__rail button.on::after { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(101, 200, 241, .18); }
.mj__rail button:focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 980px) {
  .mj__pin { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: calc(var(--nav-h) + 40px); }
  .mj__stage { order: -1; padding: 14px; } .mj__stage svg { max-height: 34svh; }
  .mj__title { display: none; } .section .mj__swap h3 { font-size: 2.4rem; margin: 6px 0 8px; } .mj__swap p { font-size: 1rem; }
  .mj__rail { position: absolute; left: 8px; right: 8px; top: calc(var(--nav-h) + 16px); height: 2px; }
  .mj__rail::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; } .mj__rail .fill { display: none; }
  .mj__rail button { top: 0 !important; font-size: 0; gap: 0; transform: translate(-50%, -50%); }
  .mj__rail button:nth-of-type(1) { left: 0; } .mj__rail button:nth-of-type(2) { left: 25%; } .mj__rail button:nth-of-type(3) { left: 50%; } .mj__rail button:nth-of-type(4) { left: 75%; } .mj__rail button:nth-of-type(5) { left: 100%; }
  .hud, .mj__tag, .mj__big { display: none; }
}
@media (prefers-reduced-motion: reduce) { .say__ring, .mj-node.cur .ring { animation: none; } .say__text .w { opacity: 1; } }