@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url(/fonts/Pretendard-Medium.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url(/fonts/Pretendard-SemiBold.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url(/fonts/Pretendard-Bold.woff2) format("woff2"); }

:root {
  --bg: #050505; --ink: #f5f5f7; --ink2: rgba(245,245,247,.64); --ink3: rgba(245,245,247,.38); --hair: rgba(255,255,255,.09);
  --orange: #e8590c; --orange2: #ff7a2f;
  --sans: Satoshi, Pretendard, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.3,1.4,.5,1);
  --pad: clamp(20px, 5.5vw, 88px);
  --rx: 50vw; --ry: 50vh; --rr: 120px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); color: var(--ink); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 500 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -.045em; line-height: .98; }
p { margin: 0; }

/* ---------- fixed layers ---------- */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
/* full-bleed photo scenes (the evening, the hand) would cover the ring; lift it over them so it never drops out of the story */
.ring-front #gl { z-index: 3; }
.halo { position: fixed; left: var(--rx); top: var(--ry); width: calc(var(--rr) * 5); height: calc(var(--rr) * 5); translate: -50% -50%;
  border-radius: 50%; z-index: 2; pointer-events: none; opacity: var(--halo, .5); mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(232,89,12,.30), rgba(232,89,12,.08) 45%, transparent 72%); filter: blur(40px); }
main, footer { position: relative; z-index: 2; }

.nav { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad); transition: background .6s var(--out), backdrop-filter .6s; }
.nav.scrolled { background: rgba(5,5,5,.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; font-size: 16px; }
.brand span { color: var(--ink3); font-weight: 500; }
.mark { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 1px var(--orange); display: inline-block; }
.pill { font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid var(--hair);
  transition: background .4s var(--out), transform .5s var(--out); }
.pill:hover { background: rgba(255,255,255,.14); }

.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 99px; background: var(--ink); color: #000; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 0 0 0 rgba(232,89,12,0); transition: transform .5s var(--out), box-shadow .6s var(--out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -6px rgba(232,89,12,.55); }
.link { display: inline-flex; gap: 8px; align-items: center; color: var(--ink2); font-weight: 600; transition: color .3s; }
.link i { font-style: normal; transition: transform .5s var(--out); }
.link:hover { color: var(--ink); } .link:hover i { transform: translateX(4px); }

/* ---------- hero ---------- */
#hero { position: relative; height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) clamp(56px, 9vh, 110px); }
.hero-in { display: grid; justify-items: center; text-align: center; gap: 18px; }
h1 { font-size: clamp(42px, 7.2vw, 118px); font-weight: 700; }
h1 span { display: block; }
h1 span + span { color: var(--ink2); }
.lede { color: var(--ink2); font-size: clamp(17px, 1.5vw, 21px); max-width: 30em; }
.ctas { display: flex; gap: 28px; align-items: center; margin-top: 10px; }
.cue { position: absolute; right: var(--pad); bottom: 32px; display: flex; gap: 10px; align-items: center; color: var(--ink3); }
.cue i { width: 1px; height: 28px; background: linear-gradient(var(--ink3), transparent); animation: cue 2.4s var(--out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); opacity: 0; } }
[data-in] { opacity: 0; transform: translateY(26px); filter: blur(10px); }
.ready [data-in] { opacity: 1; transform: none; filter: none; transition: opacity 1.4s var(--out), transform 1.6s var(--out), filter 1.4s var(--out); transition-delay: calc(var(--d, 0) * 1s); }

/* ---------- sticky stages ---------- */
.tall { height: 260vh; }
#compound { height: 360vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0 var(--pad); }
.copy { position: absolute; max-width: 430px; }
.copy h2, #object h2 { font-size: clamp(40px, 4.8vw, 76px); margin-bottom: 22px; }
.copy p { color: var(--ink2); font-size: 18px; }
.copy p + p { margin-top: 14px; }
.copy .dim { color: var(--ink); }
.kicker { color: var(--ink3); margin-bottom: 20px !important; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kicker b { color: var(--orange2); font-weight: 500; }
q { quotes: "\201C" "\201D"; color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); color: var(--ink3); font-size: 11.5px;
  transition: color .6s var(--out); }
.steps li::before { content: "0" counter(s); color: var(--ink3); transition: color .6s; }
.steps li.on { color: var(--ink); } .steps li.on::before { color: var(--orange2); }
.fine { font-size: 14px !important; color: var(--ink3) !important; margin-top: 18px !important; }

/* problem */

/* belief */
#belief .stage { display: grid; place-content: center; text-align: center; justify-items: center; }
.statement { font-size: clamp(34px, 5vw, 80px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; max-width: 15em; text-wrap: balance; }
.statement .w { opacity: .14; transition: opacity .5s var(--out); }
.statement .w.on { opacity: 1; }
.statement .w.hl { color: var(--orange2); }

/* encounter: shared pieces */
.phones { position: absolute; right: calc(var(--pad) + 2vw); top: 50%; translate: 0 -50%; height: min(76vh, 700px); aspect-ratio: 1206 / 2622; }
.phone { position: absolute; inset: 0; margin: 0; border-radius: 13% / 6%; padding: 2.6%;
  background: linear-gradient(145deg, #3a3936, #151514 40%, #2b2a28); box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.12); }
.phone video { width: 100%; height: 100%; display: block; border-radius: 11% / 5.1%; object-fit: cover; background: #000; }
.press-ring { position: fixed; left: var(--rx); top: var(--ry); width: 0; height: 0; opacity: 0; transition: opacity .8s var(--out); }
.press-ring i { position: absolute; width: calc(var(--rr) * 2.1); height: calc(var(--rr) * 2.1); translate: -50% -50%; border-radius: 50%;
  border: 1.5px solid rgba(255,122,47,.6); opacity: 0; }
.press-ring i { animation: press 3.2s var(--out) infinite; }
.press-ring i + i { animation-delay: .18s; border-color: rgba(255,255,255,.25); }
@keyframes press { 0%, 8% { transform: scale(.82); opacity: 0; } 12% { opacity: 1; } 55%, 100% { transform: scale(1.5); opacity: 0; } }
.soon { color: var(--orange2); border: 1px solid rgba(255,122,47,.35); padding: 4px 9px; border-radius: 99px; letter-spacing: .06em; font-size: 10.5px; margin-right: 8px; white-space: nowrap; }
.wave { width: 100%; height: 64px; display: block; }
.transcript { list-style: none; padding: 0; margin: 26px 0 0; display: grid; }
.transcript li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--hair); color: var(--ink2); font-size: 16px;
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--out), transform .8s var(--out); }
.transcript li.on { opacity: 1; transform: none; }
.who { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.who.them { color: var(--orange2); } .who.you { color: var(--ink); } .who.arca { color: var(--ink3); }
.transcript .note { color: var(--ink); }

/* 03 compound */
.graph { position: fixed; left: var(--rx); top: var(--ry); width: min(920px, 64vw); translate: -50% -50%; overflow: visible; opacity: 0; transition: opacity .8s var(--out); }
.active .graph { opacity: 1; }
.graph .e { stroke: rgba(255,255,255,.16); stroke-width: 1; fill: none; }
.graph .e { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--out); }
.graph .g.on .e { stroke-dashoffset: 0; }
.graph .e.iri { stroke: url(#g-iri); stroke-width: 1.7; }
.graph .e.iri-glow { stroke: url(#g-iri); stroke-width: 7; filter: url(#g-glow); opacity: .45; }
.graph .e.iri.mut { stroke-width: 2.6; } .graph .e.iri-glow.mut { opacity: .9; stroke-width: 10; }
.graph .mut-t { fill: var(--orange2) !important; }
.graph .n:not(.pp) circle { fill: #0d0d0e; stroke: rgba(255,255,255,.28); stroke-width: 1; }
.graph .n.place circle { fill: none; stroke: rgba(255,255,255,.16); stroke-dasharray: 2 3; }
.graph .n.promise circle { fill: var(--orange); stroke: none; }
.graph text { fill: var(--ink2); font: 500 13px var(--sans); letter-spacing: -.01em; }
.graph text.ini { fill: var(--ink); font: 600 11px var(--sans); text-anchor: middle; dominant-baseline: central; letter-spacing: .02em; }
.graph .n.place text, .graph .tag { fill: var(--ink3); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.graph .n.promise text { fill: var(--orange2); }
.graph .hull { fill: rgba(232,89,12,.05); stroke: rgba(255,122,47,.4); stroke-width: 1; stroke-dasharray: 3 6; }
.graph .g { opacity: 0; transition: opacity .9s var(--out); }
.graph .g.on { opacity: 1; }
.graph .char { transform-box: fill-box; transform-origin: center; scale: .3; transition: scale 1.1s var(--spring); }
.graph .g.on .char { scale: 1; }
#compound .copy { left: var(--pad); top: 13vh; }
.notif { position: absolute; right: var(--pad); bottom: 8vh; width: 360px; padding: 16px 18px 18px; border-radius: 24px;
  background: rgba(30,30,32,.62); border: 1px solid var(--hair); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .8s var(--out), transform 1s var(--out); }
.notif.on { opacity: 1; transform: none; }
.n-head { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 10.5px; margin-bottom: 8px; }
.n-head span:last-child { margin-left: auto; color: var(--ink3); }
.n-head .mark { width: 11px; height: 11px; border-width: 2px; }
.notif p { font-size: 15px; color: var(--ink2); line-height: 1.42; } .notif p b { color: var(--ink); font-weight: 600; }
.draft { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 14px; color: var(--ink2); line-height: 1.42;
  opacity: 0; transition: opacity .8s var(--out) .15s; }
.notif.draft-on .draft { opacity: 1; }
.draft span { display: block; color: var(--orange2); font-size: 10px; margin-bottom: 6px; }

/* object: titanium, controls, light */
#object { height: 680vh; }
#object .huge { position: absolute; left: 50%; bottom: 9vh; translate: -50% 0; font-size: clamp(64px, 14vw, 230px); letter-spacing: -.06em; margin: 0;
  background: linear-gradient(180deg, #f5f5f7 20%, rgba(245,245,247,.14)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap;
  transition: opacity 1s var(--out), filter 1s var(--out), transform 1.2s var(--out); }
#object .sub { position: absolute; right: var(--pad); top: 16vh; text-align: right; color: var(--ink2); font-size: 18px; max-width: 380px; transition: opacity .8s var(--out); }
#object:not(.at-1) .huge { opacity: 0; filter: blur(14px); transform: scale(.94); }
#object:not(.at-1) .sub { opacity: 0; }
.ox, .o3, .o4 { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--out); pointer-events: none; }
#object.at-2 .ox, #object.at-3 .o3, #object.at-4 .o4 { opacity: 1; }
#object.at-4 .o4 { pointer-events: auto; }
.side-copy { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; max-width: 380px; }
.side-copy h3 { margin: 0 0 18px; font-size: clamp(36px, 4vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.side-copy p:not(.kicker) { color: var(--ink2); font-size: 18px; }
.finger { position: fixed; left: var(--rx); top: calc(var(--ry) + var(--rr) * .62); width: 0; height: 0; }
.finger .tip { position: absolute; width: 46px; height: 46px; margin: -23px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), rgba(255,255,255,.16) 60%, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: swipe 4s var(--out) infinite; }
.finger .hap { position: absolute; width: 120px; height: 46px; margin: -23px -60px; border-radius: 50%; border: 1.5px solid rgba(255,122,47,.7); opacity: 0;
  animation: hap 4s var(--out) infinite; }
.finger .hap:nth-child(3) { animation-delay: .12s; border-color: rgba(255,255,255,.35); } .finger .hap:nth-child(4) { animation-delay: .24s; }
@keyframes swipe { 0% { transform: translate(-90px, 14px) scale(.9); opacity: 0; } 10% { opacity: 1; transform: translate(-90px, 0) scale(1); }
  45% { transform: translate(90px, 0); opacity: 1; } 55% { transform: translate(90px, 0) scale(.86); } 64% { transform: translate(90px, 0) scale(1); opacity: 1; } 80%, 100% { transform: translate(90px, 14px); opacity: 0; } }
@keyframes hap { 0%, 52% { transform: translateX(90px) scale(.4); opacity: 0; } 56% { opacity: 1; } 80%, 100% { transform: translateX(90px) scale(2.2); opacity: 0; } }
.states { position: absolute; right: var(--pad); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: 280px; }
.states li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hair); color: var(--ink3); transition: color .5s; }
.states li b { color: var(--ink2); font: 600 16px var(--sans); letter-spacing: -.01em; text-transform: none; transition: color .5s; }
.states li i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,122,47,.25); transition: background .5s, box-shadow .5s; }
.states li.on { color: var(--orange2); } .states li.on b { color: var(--ink); } .states li.on i { background: var(--orange2); box-shadow: 0 0 14px var(--orange2); }
.diagram { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity .9s var(--out); overflow: visible; }
#object.active:not(.at-1) .diagram { opacity: 1; }
.diagram circle { fill: none; stroke: rgba(255,122,47,.35); stroke-width: 1; }
.diagram circle.dot { fill: var(--orange2); stroke: none; }
.diagram circle.dash { stroke: rgba(255,255,255,.12); stroke-dasharray: 2 6; }

/* join */
#join { min-height: 120vh; display: grid; place-items: center; padding: 18vh var(--pad) 10vh; position: relative; }
.ascii-ring { width: min(560px, 90vw); aspect-ratio: 1.6; display: block; margin: 0 auto -40px; opacity: 0; transition: opacity 1.2s var(--out); }
.ascii-ring.on { opacity: 1; }
.join-in { display: grid; justify-items: center; text-align: center; gap: 18px; }
.join-in h2 { font-size: clamp(42px, 6.2vw, 96px); }
.join-in > p { color: var(--ink2); font-size: 18px; max-width: 26em; }
#wl { display: flex; gap: 8px; margin-top: 16px; padding: 6px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--hair);
  width: min(480px, 100%); transition: border-color .4s, box-shadow .6s var(--out); }
#wl:focus-within { border-color: rgba(255,122,47,.5); box-shadow: 0 0 0 6px rgba(232,89,12,.12); }
#wl input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 500 16px var(--sans); padding: 0 16px; }
#wl input::placeholder { color: var(--ink3); }
#wl button { height: 48px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--orange); color: #fff; font: 700 15px var(--sans); cursor: pointer;
  transition: transform .5s var(--out), background .3s; white-space: nowrap; }
#wl button:hover { background: #f26a1e; transform: translateY(-1px); }
#wl button:disabled { opacity: .6; cursor: default; }
.wl-msg { min-height: 1.5em; font-size: 15px; color: var(--ink2); }
.wl-msg.ok { color: var(--orange2); }

/* footer */
footer { padding: 4vh var(--pad) 36px; }
.ascii-irl { display: block; width: 100%; height: clamp(110px, 20vw, 300px); }
.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--ink3); border-top: 1px solid var(--hair); padding-top: 22px; margin-top: 24px; }
.foot nav { display: flex; gap: 24px; } .foot a:hover { color: var(--ink); }

/* ---------- texture & light ---------- */
.grain { position: fixed; inset: -50%; z-index: 9; pointer-events: none; opacity: .065; mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 17% { transform: translate(-6%,4%); } 33% { transform: translate(5%,-7%); } 50% { transform: translate(-3%,8%); } 67% { transform: translate(8%,2%); } 83% { transform: translate(-7%,-4%); } 100% { transform: translate(0,0); } }
.cursor-light { position: fixed; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,140,70,.10), rgba(167,139,255,.04) 50%, transparent); mix-blend-mode: screen; }
@media (pointer: coarse) { .cursor-light { display: none; } }
.flares { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; overflow: visible; }
.flare path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.f-glow { stroke: url(#iri); stroke-width: 9; filter: url(#glow); opacity: .75; }
.f-body { stroke: url(#iri); stroke-width: 2.4; }
.f-core { stroke: #fff; stroke-width: .9; opacity: .85; }
.f-star { opacity: 0; mix-blend-mode: screen; }
.burst { position: fixed; z-index: 8; pointer-events: none; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,138,61,.45) 26%, rgba(232,89,12,.16) 52%, transparent 74%);
  filter: blur(16px); animation: burst 1.6s cubic-bezier(.12,.7,.2,1) forwards; }
.burst.iri { background: radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,210,122,.4) 20%, rgba(255,134,216,.3) 34%, rgba(167,139,255,.26) 48%, rgba(122,240,255,.18) 60%, transparent 76%); }
@keyframes burst { 0% { transform: scale(.08); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* springy presses */
.btn:active, .pill:active, #wl button:active { scale: .94; transition: scale .12s; }
.btn, .pill, #wl button { transition: transform .5s var(--out), box-shadow .6s var(--out), background .3s, translate .6s var(--spring), scale .6s var(--spring); }

/* characters */
.avatar { display: block; overflow: visible; }
.avatar.mini { width: 22px; height: 22px; display: inline-block; flex: 0 0 22px; }
.char .eyes { animation: blink 5.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 95%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }

/* number roll */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; vertical-align: bottom; }
.od { display: inline-block; height: 1.15em; overflow: hidden; }
.od > span { display: flex; flex-direction: column; transition: transform 1s var(--spring); }
.od i { font-style: normal; height: 1.15em; line-height: 1.15em; }
.count { color: var(--ink3); margin-top: 22px !important; display: flex; gap: 12px; align-items: baseline; }
.count .odo { color: var(--ink); font-size: 22px; letter-spacing: 0; }

/* encounter beats (one class per beat: .at-1 ... .at-6) */
#encounter { height: 560vh; }
#encounter .stage { --cy: calc(50vh - 0.08 * 100vh); }
.chapter { position: absolute; left: var(--pad); top: 12vh; color: var(--ink3); height: 1.4em; overflow: hidden; margin: 0; }
.chapter span { display: block; transition: transform .9s var(--spring), opacity .6s; }
.chapter b { color: var(--orange2); font-weight: 500; margin-right: 10px; }
.person { position: absolute; margin: 0; top: calc(var(--cy) - 100px); width: 200px; display: grid; justify-items: center; gap: 14px;
  opacity: 0; transition: opacity 1s var(--out), transform 1.2s var(--spring), translate 1.2s var(--spring), scale 1.2s var(--spring); }
.person svg { width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.person figcaption { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); transition: opacity .6s; }
.person.me { left: calc(50% - 360px); transform: translateX(-140px) rotate(-8deg); }
.person.them { left: calc(50% + 160px); transform: translateX(140px) rotate(8deg); }
#encounter:is(.at-1, .at-3) .person { opacity: 1; transform: none; }
#encounter.at-3 .person { translate: 0 -70px; scale: .72; } #encounter.at-3 .person figcaption { opacity: 0; }
.who-copy, .talk > *, .knows { opacity: 0; transition: opacity .8s var(--out), transform 1.1s var(--spring); }
.talk > * { position: absolute; }
.backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--out); pointer-events: none; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(.9) blur(2px); transform: scale(1.06); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, transparent, rgba(5,5,5,.85) 85%), linear-gradient(0deg, #050505, transparent 30%, transparent 70%, #050505); }
#encounter.at-1 .backdrop { opacity: 1; } #encounter.at-2 .backdrop { opacity: .45; }
.island { left: 50%; top: 13vh; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 99px; background: #000;
  border: 1px solid rgba(255,255,255,.1); color: var(--ink2); transform: scale(.6); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.island i { width: 8px; height: 8px; border-radius: 50%; background: #ff4f3a; box-shadow: 0 0 12px #ff4f3a; animation: rec 1.2s ease-in-out infinite alternate; }
.island b { color: var(--orange2); font-weight: 500; font-size: 13px; }
.island .od > span { transition-duration: .45s; }
@keyframes rec { to { opacity: .35; } }
.talk .wave { left: 50%; top: calc(var(--cy) + 150px); width: 300px; height: 54px; translate: -50% 0; }
.bubble { top: calc(var(--cy) - 190px); padding: 12px 16px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid var(--hair); font-size: 15px;
  color: var(--ink); max-width: 240px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(14px) scale(.9); }
.bubble.l { left: calc(50% - 400px); border-bottom-left-radius: 6px; } .bubble.r { left: calc(50% + 150px); border-bottom-right-radius: 6px; background: rgba(232,89,12,.16); border-color: rgba(255,122,47,.25); }
#encounter.at-1 .talk > * { opacity: 1; transform: none; }
#encounter.at-1 .bubble.r { transition-delay: .9s; }
.who-copy { right: var(--pad); top: 50%; translate: 0 -50%; max-width: 470px; transform: translateY(30px); }
#encounter.at-2 .who-copy { opacity: 1; transform: none; }
#encounter.at-2 .press-ring { opacity: 1; }
.knows { position: absolute; left: 50%; top: calc(var(--cy) + 40px); width: min(470px, calc(100vw - 40px)); translate: -50% 0; padding: 18px 20px 20px; border-radius: 24px;
  background: rgba(24,24,26,.66); border: 1px solid var(--hair); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); transform: translateY(30px) scale(.96); }
#encounter.at-3 .knows { opacity: 1; transform: none; }
.k-head { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.k-head .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.k-head b { display: block; font-weight: 700; letter-spacing: -.01em; } .k-head small { color: var(--ink3); font-size: 10px; }
.knows dl { margin: 14px 0 0; display: grid; gap: 6px; }
.knows dt { color: var(--orange2); font-size: 10px; margin-top: 6px; }
.knows dd { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--out), transform .8s var(--out); }
#encounter.at-3 .knows dd { opacity: 1; transform: none; transition-delay: .3s; } #encounter.at-3 .knows dd + dt + dd { transition-delay: .7s; }
.beats { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 8vh; height: 76px; }
.beats li { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 20px;
  font-size: clamp(22px, 2.3vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; opacity: 0; filter: blur(8px); transform: translateY(16px);
  transition: opacity .7s var(--out), transform .9s var(--out), filter .7s var(--out); }
:is(#encounter, #tap).at-1 .beats li:nth-child(1), :is(#encounter, #tap).at-2 .beats li:nth-child(2), :is(#encounter, #tap).at-3 .beats li:nth-child(3), #tap.at-4 .beats li:nth-child(4) { opacity: 1; filter: none; transform: none; }

/* progress rail */
.rail { position: fixed; right: 18px; top: 50%; translate: 0 -50%; width: 2px; height: 22vh; background: rgba(255,255,255,.08); border-radius: 2px; z-index: 10; overflow: hidden; }
.rail i { position: absolute; inset: 0; background: linear-gradient(var(--orange2), #ffd27a); transform-origin: top; transform: scaleY(var(--prog, 0)); }

/* small bits added for characters */
.who { display: inline-flex; gap: 8px; align-items: center; flex: 0 0 76px !important; }
.n-body { display: flex; gap: 12px; align-items: flex-start; } .n-body .avatar { width: 38px; height: 38px; flex-basis: 38px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { padding: 14px 20px; }
  .pill { font-size: 13px; padding: 8px 14px; }
  #hero { padding-bottom: 64px; }
  .hero-in { gap: 14px; }
  .ctas { flex-direction: column; gap: 18px; }
  .cue { display: none; }
  .rail { right: 6px; height: 16vh; }
  .copy { left: 20px; right: 20px; max-width: none; top: auto; bottom: 7svh; translate: none; }
  .copy h2, #object h2, .side-copy h3 { font-size: 38px; margin-bottom: 14px; }
  .copy p, .side-copy p:not(.kicker) { font-size: 16px; }
  .steps { margin-top: 18px; } .steps li { padding: 10px 0; }
  .statement { font-size: 34px; }
  /* encounter */
  #encounter { height: 400vh; }
  #encounter .stage { --cy: calc(50svh - 0.2 * 100svh); }
  .chapter { left: 20px; top: 12svh; }
  .person { width: 96px; top: calc(var(--cy) - 48px); gap: 8px; }
  .person.me { left: calc(50% - 176px); } .person.them { left: calc(50% + 80px); }
  #encounter.at-3 .person { translate: 0 -30px; scale: .7; }
  .phones { left: auto; right: 9vw; top: auto; bottom: 4svh; translate: none; height: 54svh; }
  .island { top: 16.5svh; }
  .talk .wave { top: calc(var(--cy) + 82px); width: 220px; }
  .bubble { font-size: 13.5px; max-width: 210px; }
  .bubble.l { left: 20px; top: calc(var(--cy) + 160px); } .bubble.r { left: auto; right: 20px; top: calc(var(--cy) + 222px); }
  .who-copy { bottom: 5svh; }
  .who-copy h2 { font-size: 32px; }
  .who-copy > p:not(.fine) { font-size: 15px; }
  .transcript { margin-top: 14px; } .transcript li { font-size: 14px; padding: 8px 0; gap: 10px; }
  .knows { top: calc(var(--cy) + 40px); padding: 14px 16px 16px; }
  .knows dd { font-size: 14px; }
  .beats { bottom: 5svh; } .beats li { font-size: 21px; } .beats br { display: none; }
  /* compound */
  .graph { width: 150vw; }
  .graph text { font-size: 17px; } .graph .n.place text, .graph .tag { font-size: 13px; }
  #compound .copy { bottom: 6svh; top: auto; }
  #compound .copy > p:not(.count):not(.kicker) { display: none; }
  #compound .steps { display: none; }
  .notif { left: 20px; right: 20px; width: auto; bottom: 6svh; }
  #compound.late .copy { opacity: 0; transition: opacity .6s; }
  /* object */
  #object .huge { bottom: 14svh; font-size: 21vw; }
  #object .sub { left: 20px; right: 20px; top: 14svh; text-align: center; font-size: 16px; max-width: none; }
  .side-copy { left: 20px; right: 20px; max-width: none; top: auto; bottom: 7svh; translate: none; }
  .o3 .side-copy { top: 11svh; bottom: auto; }
  .o3 .side-copy h3 { font-size: 30px; }
  .ascii-ring { margin-bottom: 0; }
  .states { left: 20px; right: 20px; width: auto; top: auto; bottom: 5svh; translate: none; }
  #wl { flex-direction: column; border-radius: 26px; padding: 6px; }
  #wl input { height: 48px; text-align: center; }
  .foot { flex-direction: column; } .foot nav { gap: 18px; }
}


/* ================= v2 ================= */
.nav .links { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--ink2); margin-left: auto; margin-right: 22px; }
.nav .links a:hover { color: var(--ink); }

/* problem: one event, seven apps, then time */
#problem { height: 820vh; }
.g-copy { position: absolute; left: 50%; top: 58vh; translate: -50% 0; width: min(760px, 90vw); text-align: center; opacity: var(--go, 0); transform: translateY(calc((1 - var(--go, 0)) * 24px)); pointer-events: none; }
.g-copy h2 { font-size: clamp(40px, 5.2vw, 80px); margin-bottom: 18px; }
.g-copy p { color: var(--ink2); font-size: 18px; max-width: 32em; margin: 0 auto; }
.p-copy { opacity: calc(1 - var(--go, 0)); }
.app.pull .ic { box-shadow: 0 0 22px 2px rgba(167,139,255,.55), 0 0 44px rgba(122,240,255,.35), 0 0 60px rgba(255,134,216,.25); border-color: rgba(255,255,255,.35); }
.event { position: absolute; inset: 0; overflow: hidden; opacity: calc(1 - var(--go, 0) * .9); }
.event img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--pp, 0) * .06)); filter: saturate(.9) brightness(calc(.75 - var(--fade, 0) * .45)) blur(calc(var(--fade, 0) * 6px)); }
.event .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 38%, rgba(5,5,5,.15) 70%), linear-gradient(0deg, rgba(5,5,5,.95) 0%, transparent 38%), linear-gradient(180deg, rgba(5,5,5,.7), transparent 22%); }
.spot { position: absolute; left: var(--sx); top: var(--sy); width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--orange2); box-shadow: 0 0 0 0 rgba(255,122,47,.6), 0 0 24px var(--orange2);
  opacity: var(--so, 0); animation: spot 2.2s var(--out) infinite; }
@keyframes spot { 0% { box-shadow: 0 0 0 0 rgba(255,122,47,.55), 0 0 24px var(--orange2); } 100% { box-shadow: 0 0 0 40px rgba(255,122,47,0), 0 0 24px var(--orange2); } }
.p-copy { left: var(--pad); top: 15vh; max-width: 440px; z-index: 2; }
.spot::after { content: attr(data-l); position: absolute; left: 50%; bottom: 22px; translate: -50% 0; white-space: nowrap; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); padding: 5px 9px; border-radius: 99px; background: rgba(5,5,5,.6); border: 1px solid rgba(255,255,255,.14); }
.p-copy .pc2 { margin-top: 14px; color: var(--ink); opacity: var(--pc2, 0); transition: opacity .6s; }
.flyers { position: absolute; inset: 0; pointer-events: none; }
.fly { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 13.5px var(--mono); letter-spacing: .02em; color: var(--ink); padding: 8px 12px; border-radius: 11px;
  background: rgba(30,30,34,.86); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 24px rgba(255,122,47,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); will-change: transform, opacity, filter; opacity: 0; }
.fly i { font-style: normal; color: var(--ink3); margin-right: 7px; }
.dock { position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; display: flex; gap: clamp(10px, 2vw, 28px); }
.app { display: grid; justify-items: center; gap: 8px; opacity: var(--ao, 0); transform: translateY(calc((1 - var(--ao, 0)) * 20px)); }
.app .ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; }
.app .ic svg { width: 26px; height: 26px; fill: var(--ink); }
.app .ic b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--orange); font: 700 11px/20px var(--sans); color: #fff; text-align: center; opacity: var(--bo, 0); transform: scale(calc(.6 + var(--bo, 0) * .4)); }
.app span { font: 500 10px var(--mono); letter-spacing: .06em; color: var(--ink3); text-transform: uppercase; }
.decay { position: absolute; right: var(--pad); top: 15vh; width: 380px; opacity: var(--do, 0); transform: translateY(calc((1 - var(--do, 0)) * 24px)); }
.timeline { position: relative; display: flex; justify-content: space-between; color: var(--ink3); padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.timeline span { transition: color .4s; } .timeline span.on { color: var(--ink); }
.timeline i { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--tl, 0) * 100%); background: linear-gradient(90deg, var(--orange2), #ffd27a); }
.memo { margin-top: 22px; padding: 18px 20px; border-radius: 20px; background: rgba(20,20,22,.6); border: 1px solid var(--hair); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.memo .mono { color: var(--ink3); margin-bottom: 10px; }
.said { font-size: 17px; line-height: 1.5; color: var(--ink); }
.said span { transition: filter .6s, opacity .6s; }

/* tap: the 3D ring touches a clean iPhone; the screen plays the real App Clip */
#tap { height: 980vh; --dh: min(64vh, 600px); --dw: calc(var(--dh) * .4775); --cx: 64%; --cy: 56%; --dh2: calc(var(--dh) * .66); --gap: 150px; }
.t-copy { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(420px, 32vw); z-index: 2; }
.t-lines { position: relative; height: 230px; }
.tl { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s var(--out), transform .9s var(--out), filter .7s var(--out); }
.tl h2 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 18px; }
.tl p { color: var(--ink2); font-size: 18px; line-height: 1.5; }
#tap[data-c="0"] .tl[data-c="0"], #tap[data-c="1"] .tl[data-c="1"], #tap[data-c="2"] .tl[data-c="2"], #tap[data-c="3"] .tl[data-c="3"], #tap[data-c="4"] .tl[data-c="4"], #tap[data-c="5"] .tl[data-c="5"] { opacity: 1; transform: none; filter: none; }
.dev { position: absolute; left: var(--cx); top: var(--cy); height: var(--dh); translate: -50% -50%; padding: calc(var(--dh) * .0155); border-radius: calc(var(--dh) * .076);
  background: linear-gradient(140deg, #5b5b61 0%, #26262a 22%, #121214 50%, #2c2c31 78%, #6a6a70 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 3px #08080a, 0 50px 90px -30px rgba(0,0,0,.95), 0 24px 40px -24px rgba(0,0,0,.8);
  transition: left 1.2s var(--spring), top 1.2s var(--spring), height 1.2s var(--spring), opacity .8s var(--out); }
.glass { position: relative; height: 100%; aspect-ratio: 1206 / 2622; border-radius: calc(var(--dh) * .062); overflow: hidden; background: #000; }
.hw { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3a3f, #77777d); }
.hw.b1 { left: -2px; top: 17%; height: 4%; } .hw.b2 { left: -2px; top: 24%; height: 7%; } .hw.b3 { left: -2px; top: 33%; height: 7%; } .hw.b4 { right: -2px; top: 26%; height: 11%; }
.sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.04) 100%); z-index: 5; }
.glass video.sc { background: #f2f2f5; }
.glass .sc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(5%); transition: opacity .55s var(--out), transform .8s var(--spring); z-index: 2; }
.glass .sc.on, #tap[data-s="1"] .sc[data-s="1"], #tap[data-s="2"] .sc[data-s="2"], #tap[data-s="3"] .sc[data-s="3"] { opacity: 1; transform: none; }
/* lock screen before the tap */
.lock { position: absolute; inset: 0; z-index: 1; display: grid; justify-items: center; align-content: start; padding-top: 34%;
  background: radial-gradient(120% 70% at 50% 108%, rgba(232,89,12,.55), rgba(232,89,12,.08) 55%, transparent 70%), radial-gradient(90% 50% at 20% 0%, rgba(167,139,255,.18), transparent 60%), #050507; }
.isl { position: absolute; left: 50%; top: 1.45%; width: 31%; height: 3.4%; translate: -50% 0; border-radius: 99px; background: #000; }
.l-date { margin: 0; font-size: calc(var(--dh) * .024); font-weight: 600; color: rgba(255,255,255,.8); }
.l-time { margin: 0; font-size: calc(var(--dh) * .125); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: rgba(255,255,255,.92); }
.l-hint { position: absolute; bottom: 7%; left: 50%; translate: -50% 0; white-space: nowrap; font-size: calc(var(--dh) * .016); color: rgba(255,255,255,.55); padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.07); }
.banner { position: absolute; left: 4%; right: 4%; top: 6.5%; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 3.2% 4%; border-radius: calc(var(--dh) * .03);
  background: rgba(40,40,44,.72); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); color: #fff; font-size: calc(var(--dh) * .019);
  opacity: 0; transform: translateY(-140%); transition: opacity .5s var(--out), transform .8s var(--spring); }
.banner b { display: block; font-weight: 700; } .banner span:not(.mark) { color: rgba(255,255,255,.7); } .banner em { margin-left: auto; font-style: normal; font-size: calc(var(--dh) * .014); color: rgba(255,255,255,.5); }
.banner .mark { width: calc(var(--dh) * .04); height: calc(var(--dh) * .04); border-radius: 28%; border: 0; background: radial-gradient(circle, #050505 34%, #e8590c 36%, #ff8a3d 58%, #e8590c 60%); flex: none; }
#tap[data-banner="1"] .banner { opacity: 1; transform: none; }
.so-row { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.so-row i { position: absolute; left: 0; top: 0; width: 9.5%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; background: #fff; opacity: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), 0 0 16px rgba(167,139,255,.5), 0 0 30px rgba(122,240,255,.25); will-change: transform, opacity; }
.so-row svg { width: 56%; height: 56%; fill: #111; color: #111; }
.rip { position: absolute; left: var(--rx0, 62%); top: 0; width: 0; height: 0; z-index: 6; opacity: var(--rip, 0); }
.rip i { position: absolute; width: calc(var(--dh) * .5); height: calc(var(--dh) * .5); margin: calc(var(--dh) * -.25); border-radius: 50%; border: 1.5px solid rgba(255,160,100,.85); animation: ripple 1.8s cubic-bezier(.2,.6,.2,1) infinite; }
.rip i:nth-child(2) { animation-delay: .3s; border-color: rgba(167,139,255,.7); } .rip i:nth-child(3) { animation-delay: .6s; border-color: rgba(122,240,255,.6); }
@keyframes ripple { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.edge-flare { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: calc(var(--dw) * 1.5); height: 3px; translate: -50% -50%; border-radius: 3px; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, transparent, #7af0ff 18%, #a78bff 36%, #ff86d8 52%, #ffd27a 68%, #8dffc0 84%, transparent); filter: blur(1.5px) drop-shadow(0 0 10px rgba(255,180,220,.9));
  opacity: var(--ef, 0); transform: scaleX(calc(.2 + var(--ef, 0) * .8)); }
/* split: both phones */
.dev.yours { opacity: 0; }
#tap.split .dev.their { left: calc(50% - var(--dh2) * .4775 / 2 - var(--gap) / 2); top: calc(11vh + var(--dh2) / 2); height: var(--dh2); }
#tap.split .dev.yours { left: calc(50% + var(--dh2) * .4775 / 2 + var(--gap) / 2); top: calc(11vh + var(--dh2) / 2); height: var(--dh2); opacity: 1; }
.dev.yours { left: calc(50% + var(--dh2) * .4775 / 2 + var(--gap) / 2); top: calc(11vh + var(--dh2) / 2 + 40px); height: var(--dh2); }
#tap.split .t-copy { opacity: 0; transform: translateX(-20px); }
.t-copy { transition: opacity .7s var(--out), transform .9s var(--out); }
.dev-cap { position: absolute; top: calc(11vh + var(--dh2) + 16px); translate: -50% 0; color: var(--ink2); white-space: nowrap; opacity: 0; transition: opacity .8s var(--out) .3s; }
.c-their { left: calc(50% - var(--dh2) * .4775 / 2 - var(--gap) / 2); } .c-yours { left: calc(50% + var(--dh2) * .4775 / 2 + var(--gap) / 2); }
#tap.split .dev-cap, #tap.split .where, #tap.split .tap-fine { opacity: 1; transform: none; }
.where { position: absolute; left: 50%; top: calc(11vh + var(--dh2) + 64px); translate: -50% 0; display: flex; opacity: 0; transform: translateY(30px); transition: opacity .9s var(--out) .25s, transform 1.1s var(--spring) .25s; }
.w-node { position: relative; width: clamp(150px, 14vw, 210px); padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); display: grid; gap: 4px; }
.w-node + .w-node { margin-left: 34px; }
.w-node + .w-node::before { content: ""; position: absolute; left: -34px; top: 50%; width: 34px; height: 2px; background: linear-gradient(90deg, #7af0ff, #a78bff, #ff86d8, #ffd27a); background-size: 200% 100%; animation: iri 2.4s linear infinite; }
@keyframes iri { to { background-position: -200% 0; } }
.w-node b { font-weight: 700; letter-spacing: -.01em; } .w-node span { font-size: 13px; color: var(--ink2); }
.tap-fine { position: absolute; left: 0; right: 0; bottom: 5vh; text-align: center; opacity: 0; transition: opacity .8s; }
.split-line { display: none; }

/* compound: the ontology */
#compound { height: 820vh; }
.c-copy { left: var(--pad); top: 13vh; max-width: 400px; }
.c-copy h2 { font-size: clamp(36px, 4vw, 62px); }
.c-copy p:not(.kicker) { font-size: 16px; }
.graph .nd .char { scale: 1; }
.graph .nd { opacity: 0; transition: opacity .8s var(--out); }
.graph .nd.on { opacity: 1; }
.graph .nd > g { transform-box: fill-box; transform-origin: center; scale: .4; transition: scale 1s var(--spring); }
.graph .nd.on > g { scale: 1; }
.graph .pill { fill: rgba(20,20,22,.85); stroke: rgba(255,255,255,.2); stroke-width: 1; }
.graph .t-encounter .pill { stroke: rgba(255,210,122,.55); } .graph .t-place .pill { stroke: rgba(141,255,192,.45); }
.graph .t-topic .pill { stroke: rgba(122,240,255,.5); } .graph .t-org .pill { stroke: rgba(167,139,255,.55); } .graph .t-promise .pill { stroke: rgba(255,122,47,.75); fill: rgba(232,89,12,.14); }
.graph .ty { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink3); }
.graph .lb { font: 600 13px var(--sans); fill: var(--ink); letter-spacing: -.01em; }
.graph .pname { font: 500 13px var(--sans); fill: var(--ink2); }
.graph .hy { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--out), stroke .6s, stroke-width .6s; }
.graph .hy.iri { stroke: url(#g-iri); stroke-width: 1.6; }
.graph .ed.on .hy { stroke-dashoffset: 0; }
.graph .rel { font: 500 8.5px var(--mono); letter-spacing: .08em; fill: var(--ink3); opacity: 0; transition: opacity .8s .5s; }
.graph .ed.on .rel { opacity: 1; }
.graph .ed.hl .hy { stroke: var(--orange2); stroke-width: 2.2; } .graph .ed.hl .rel { fill: var(--orange2); }
.graph .spore { fill: #ffd27a; opacity: 0; }
.graph .ed.on .spore { animation: spore 3.2s linear infinite; }
@keyframes spore { 0% { opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { opacity: 0; } }
.graph .hull { fill: rgba(122,240,255,.04); stroke: rgba(122,240,255,.45); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0; transition: opacity 1s; }
.graph .hull.on { opacity: 1; }
.graph .hull-t { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: #7af0ff; opacity: 0; transition: opacity 1s .3s; }
.graph .hull.on + .hull-t { opacity: 1; }
.schema { position: absolute; left: var(--pad); bottom: 7vh; width: 380px; padding: 16px 18px; border-radius: 18px; background: rgba(16,16,18,.7); border: 1px solid var(--hair);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 11px; }
.s-title { display: flex; justify-content: space-between; color: var(--ink2); margin: 0 0 10px; }
.s-title span { color: #8dffc0; } .s-title span::before { content: "● "; }
.s-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.schema ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.schema li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; color: var(--ink2); letter-spacing: .02em; text-transform: none; border-bottom: 1px solid rgba(255,255,255,.04);
  max-height: 0; opacity: 0; overflow: hidden; padding: 0; transition: max-height .6s var(--out), opacity .6s, padding .6s, color 1.2s; }
.schema li.on { max-height: 30px; opacity: 1; padding: 4px 0; }
.schema li.new { color: #ffd27a; }
.schema li .odo { color: var(--ink); }
.schema .hd { color: var(--ink3); max-height: none; opacity: 1; padding: 0 0 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.insights { position: absolute; left: var(--pad); top: 13vh; width: 380px; display: grid; gap: 10px; }
.c-copy { transition: opacity .6s var(--out), transform .8s var(--out); }
#compound.ins-on .c-copy { opacity: 0; transform: translateY(-16px); }
.ins { padding: 14px 16px; border-radius: 18px; background: rgba(24,24,26,.72); border: 1px solid var(--hair); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .7s var(--out), transform .9s var(--spring); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); }
.ins.on { opacity: 1; transform: none; }
.ins > span { display: block; color: var(--orange2); font-size: 10px; margin-bottom: 5px; }
.ins p { margin: 0; font-size: 14.5px; color: var(--ink2); line-height: 1.4; } .ins p b { color: var(--ink); font-weight: 600; }
.insights .notif { position: relative; right: auto; bottom: auto; width: auto; }
.insights .notif.on { opacity: 1; transform: none; }

/* agents */
#agents { height: 380vh; }
.a-copy { left: var(--pad); top: 50%; translate: 0 -50%; max-width: 470px; }
.a-copy h2 { font-size: clamp(38px, 4.2vw, 66px); }
.eps { list-style: none; padding: 0; margin: 26px 0 16px; display: grid; }
.eps li { padding: 10px 0; border-top: 1px solid var(--hair); color: var(--ink3); text-transform: none; letter-spacing: 0; font-size: 13px; opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--out), transform .7s var(--out); }
.eps li.on { opacity: 1; transform: none; }
.eps b { color: var(--ink); font-weight: 500; } .eps i { display: block; font-style: normal; color: var(--orange2); font-size: 11px; margin-top: 3px; }
.code { position: absolute; right: var(--pad); top: 50%; translate: 0 -50%; width: min(560px, 44vw); border-radius: 18px; background: #0c0c0e; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 80px -30px rgba(232,89,12,.3); overflow: hidden; }
.c-bar { display: flex; gap: 7px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--ink3); font-size: 10.5px; }
.c-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2e; } .c-bar span { margin-left: 8px; }
.code pre { margin: 0; padding: 16px 18px; font: 12.5px/1.6 var(--mono); color: var(--ink2); white-space: pre-wrap; }
.c-res { border-top: 1px solid var(--hair); min-height: 360px; color: #cfcfd4; }
.c-com { color: var(--ink3); } .c-k { color: #ff86d8; } .c-f { color: #7af0ff; } .c-s { color: #ffd27a; } .c-n { color: #8dffc0; } .c-key { color: #a78bff; }

/* object: layers + finishes */
.layers { position: absolute; right: var(--pad); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; width: 260px; }
.layers li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--hair); color: #8dffc0; font-size: 10.5px; }
.layers li b { font: 600 16px var(--sans); color: var(--ink); text-transform: none; letter-spacing: -.01em; }
.layers li.concept { color: var(--ink3); } .layers li.concept b { color: var(--ink2); }
.swatches { display: flex; gap: 10px; margin: 18px 0 26px; flex-wrap: wrap; }
.swatches button { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink2); font: 600 14px var(--sans); cursor: pointer; transition: border-color .4s, color .4s, scale .5s var(--spring); }
.swatches button i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.swatches button[aria-checked="true"] { border-color: rgba(255,122,47,.7); color: var(--ink); }
.swatches button:active { scale: .95; }
.sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sizes span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); color: var(--ink2); font-size: 13px; }
.sizes-t { margin-top: 6px !important; }

/* box + faq */
#box { position: relative; padding: 16vh var(--pad) 6vh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); max-width: 1300px; margin: 0 auto; }
.box-card { padding: 28px; border-radius: 28px; background: rgba(255,255,255,.035); border: 1px solid var(--hair); align-self: start; }
.box-items { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 4px; }
.box-items li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.box-items img, .box-items .glyph { grid-row: span 2; width: 64px; height: 64px; object-fit: contain; display: grid; place-items: center; color: var(--ink3); font-size: 15px; letter-spacing: -.1em; border-radius: 14px; background: rgba(255,255,255,.03); }
.box-items b { font-weight: 700; } .box-items span:not(.glyph) { color: var(--ink2); font-size: 14px; }
.faq h2 { font-size: clamp(36px, 4vw, 60px); margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--hair); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--orange2); transition: transform .4s var(--spring); } .faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink2); margin-top: 10px; } .faq a { color: var(--orange2); }

@media (max-width: 760px) {
  .nav .links { gap: 14px; font-size: 13px; margin-right: 10px; }
  .brand span { display: none; }
  .pill { font-size: 0; padding: 8px 12px; } .pill::after { content: "Waitlist"; font-size: 13px; }
  #problem { height: 480vh; }
  .event img { object-position: 40% center; }
  .p-copy { top: 11svh; bottom: auto; }
  .g-copy { top: 50svh; } .g-copy h2 { font-size: 36px; } .g-copy p { font-size: 15px; }
  .decay { top: 50svh !important; }
  .spot:nth-of-type(1) { --sx: 26% !important; --sy: 66% !important; } .spot:nth-of-type(2) { --sx: 56% !important; --sy: 74% !important; } .spot:nth-of-type(3) { --sx: 80% !important; --sy: 60% !important; }
  .p-copy h2 { font-size: 34px; }
  .dock { bottom: 5svh; gap: 6px; width: calc(100vw - 24px); justify-content: space-between; }
  .app .ic { width: 40px; height: 40px; border-radius: 11px; } .app .ic svg { width: 19px; height: 19px; }
  .app span { font-size: 7.5px; letter-spacing: .02em; }
  .fly { font-size: 10px; padding: 5px 8px; }
  .decay { left: 20px; right: 20px; width: auto; top: 11svh; }
  .said { font-size: 15px; }
  #tap { height: 720vh; --dh: 46svh; --cx: 50%; --cy: 49%; --dh2: calc(var(--dh) * .62); --gap: 92px; }
  .t-copy { left: 20px; right: 20px; width: auto; top: auto; bottom: 4svh; translate: none; }
  .t-lines { height: 128px; } .tl h2 { font-size: 30px; margin-bottom: 10px; } .tl p { font-size: 15px; }
  .dev-cap { font-size: 9px; top: calc(11vh + var(--dh2) + 10px); }
  .c-their, .c-yours { max-width: 160px; white-space: normal; text-align: center; }
  .where { flex-direction: column; top: calc(11vh + var(--dh2) + 46px); gap: 8px; left: 20px; right: 20px; translate: none; }
  .w-node { width: auto; padding: 8px 12px; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
  .w-node + .w-node { margin-left: 0; } .w-node + .w-node::before { left: 22px; top: -8px; width: 2px; height: 8px; }
  .w-node span { font-size: 12px; }
  .tap-fine { display: none; }
  #compound { height: 600vh; }
  .c-copy { top: 10svh; bottom: auto; } .c-copy p:not(.kicker) { display: none; } .c-copy h2 { font-size: 28px; margin: 0; } .c-copy .kicker { margin-bottom: 8px !important; }
  #compound:not(.early) .c-copy { opacity: 0; }
  .graph .ed:not(.fresh):not(.hl) .rel { opacity: 0; }
  .schema { font-size: 9.5px; padding: 10px 12px; }
  .s-cols { display: block; } .schema ul { display: flex; flex-wrap: wrap; gap: 4px; } .schema ul + ul { margin-top: 4px; }
  .schema .hd { display: none; }
  .schema li { max-height: none; display: none; border: 1px solid var(--hair); border-radius: 99px; padding: 3px 8px !important; gap: 6px; }
  .schema li.on { display: flex; } .s-edge li { color: var(--ink3); }
  .schema li.on { padding: 3px 0; } .s-title { margin-bottom: 6px; }
  .insights { display: block; height: 0; }
  .insights .ins { position: absolute; left: 0; right: 0; bottom: 0; }
  .ins.on:has(~ .ins.on) { opacity: 0; }
  .graph { width: 100vw; }
  .schema { left: 20px; right: 20px; width: auto; bottom: 4svh; padding: 12px 14px; font-size: 10px; }
  .insights { left: 20px; right: 20px; width: auto; top: auto; bottom: 4svh; }
  #compound.late .schema, #compound.late .c-copy { opacity: 0; transition: opacity .5s; }
  .ins p { font-size: 13.5px; }
  #agents { height: 260vh; }
  .a-copy { top: 11svh; translate: none; bottom: auto; }
  .a-copy h2 { font-size: 32px; } .a-copy > p:not(.kicker):not(.fine) { display: none; }
  .eps { margin: 14px 0 8px; } .eps li { padding: 7px 0; font-size: 11.5px; } .eps i { display: none; }
  .code { left: 20px; right: 20px; width: auto; top: auto; bottom: 4svh; translate: none; }
  .code pre { font-size: 10px; padding: 10px 12px; } .c-res { min-height: 0; max-height: 26svh; overflow: hidden; }
  #agents.late .a-copy .eps { opacity: .0; }
  .layers { left: 20px; right: 20px; width: auto; top: auto; bottom: 5svh; translate: none; }
  .ox .side-copy, .o4 .side-copy { top: 11svh; bottom: auto; }
  .ox .side-copy p:not(.kicker) { display: none; }
  .o4 .side-copy { top: auto; bottom: 5svh; }
  #box { grid-template-columns: 1fr; padding-top: 10vh; }
  #join { padding-top: 34vh; }
}

/* ---------- reduced motion: no WebGL, no smooth scroll, no animation. A rendered still of the ring; states switch instantly. ---------- */
.still { display: none; }
.reduced .still, .nogl .still { display: block; position: absolute; left: 50%; top: 10vh; width: min(40vh, 62vw); height: auto; translate: -50% 0; z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; }
.nogl .tapflare { display: none; }
.reduced #gl, .nogl #gl { display: none; }
.reduced *, .reduced *::before, .reduced *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.reduced [data-in] { opacity: 1; transform: none; filter: none; }
.reduced .grain, .reduced .cursor-light { display: none; }