*/
.sb-light .sb-75{border-color:var(--line)}
.sb-light .sb-val{color:var(--ink)}
.sb-light .sb-lbl,.sb-light .sb-cap,.sb-light .sb-chip{color:var(--mut)}
.sb-light .sb-chip{border-color:var(--line);background:rgba(11,13,16,.03)}
.sb-light .sb-node{color:var(--pos-deep);background:rgba(127,227,187,.14)}
/* ---------- M7 · tier path [data-tier-path] ---------- */
/* Three-beat access explainer. Default (no-JS / reduced motion)
= final frame: everything lit, door open, replay hidden.
JS arms it (.tp-armed = initial state) then plays (.is-play). */
.tier-path{position:relative;margin-top:64px;max-width:840px}
.tier-path .tp-svg{width:100%;height:auto;overflow:visible}
.tp-txt{font-size:14px;font-weight:600;fill:var(--mut);letter-spacing:-.01em}
.tp-txt.on{fill:var(--ink)}
.dark .tp-txt{fill:var(--mut-d)}
.dark .tp-txt.on{fill:#fff}
.tp-replay{
display:none;position:absolute;right:0;top:-6px;
align-items:center;gap:7px;
padding:8px 16px;border-radius:var(--r-pill);
background:transparent;border:1px solid var(--line);cursor:pointer;
font-size:.82rem;font-weight:600;color:var(--mut);
transition:color .2s,border-color .2s;
}
.tp-replay:hover{color:var(--ink);border-color:rgba(11,13,16,.4)}
.dark .tp-replay{border-color:var(--line-d);color:var(--mut-d)}
.dark .tp-replay:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.tp-armed .tp-replay{display:inline-flex}
/* wires draw with stroke-dash (markup must set pathLength="1") */
.tp-wire{stroke-dasharray:1;stroke-dashoffset:0}
/* door panel: open is the resting state */
.tp-panel{transform:rotate(-64deg);transform-box:fill-box;transform-origin:6% 50%}
/* --- armed (initial) state, JS only --- */
.tp-armed:not(.is-play) .tp-b1{opacity:0;transform:translateY(8px)}
.tp-armed:not(.is-play) .tp-wire1{stroke-dashoffset:1}
.tp-armed:not(.is-play) .tp-step{opacity:0;transform:translateY(10px)}
.tp-armed:not(.is-play) .tp-steplight{opacity:0}
.tp-armed:not(.is-play) .tp-wire2{stroke-dashoffset:1}
.tp-armed:not(.is-play) .tp-b3{opacity:0}
.tp-armed:not(.is-play) .tp-panel{transform:rotate(0deg)}
.tp-armed:not(.is-play) .tp-glow{opacity:0}
/* --- play: three beats via transition delays --- */
.tp-armed.is-play .tp-b1{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tp-armed.is-play .tp-wire1{stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease) .4s}
.tp-armed.is-play .tp-step{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tp-armed.is-play .tp-step.s1{transition-delay:.75s}
.tp-armed.is-play .tp-step.s2{transition-delay:1s}
.tp-armed.is-play .tp-step.s3{transition-delay:1.25s}
.tp-armed.is-play .tp-steplight{opacity:1;transition:opacity .45s var(--ease)}
.tp-armed.is-play .tp-step.s1 .tp-steplight,.tp-armed.is-play .tp-steplight.s1{transition-delay:.95s}
.tp-armed.is-play .tp-step.s2 .tp-steplight,.tp-armed.is-play .tp-steplight.s2{transition-delay:1.2s}
.tp-armed.is-play .tp-step.s3 .tp-steplight,.tp-armed.is-play .tp-steplight.s3{transition-delay:1.45s}
.tp-armed.is-play .tp-wire2{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) 1.55s}
.tp-armed.is-play .tp-b3{opacity:1;transition:opacity .5s var(--ease) 1.8s}
.tp-armed.is-play .tp-panel{transform:rotate(-64deg);transition:transform .9s var(--ease) 2.05s}
.tp-armed.is-play .tp-glow{opacity:1;transition:opacity .8s var(--ease) 2.25s}
@media(prefers-reduced-motion:reduce){
/* belt and braces: if JS armed before the media query flipped */
.tp-armed:not(.is-play) .tp-b1,.tp-armed:not(.is-play) .tp-step,
.tp-armed:not(.is-play) .tp-steplight,.tp-armed:not(.is-play) .tp-b3,
.tp-armed:not(.is-play) .tp-glow{opacity:1;transform:none}
.tp-armed:not(.is-play) .tp-wire1,.tp-armed:not(.is-play) .tp-wire2{stroke-dashoffset:0}
.tp-armed:not(.is-play) .tp-panel{transform:rotate(-64deg)}
.tp-replay{display:none !important}
}
/* ---------- M8 · micro-interactions (JS adds classes) ---------- */
/* pointer-tracking sheen + max 3px translate on primary buttons */
.has-sheen{position:relative;overflow:hidden}
.has-sheen::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),rgba(255,255,255,0) 62%);
opacity:0;transition:opacity .3s var(--ease);
}
.btn-white.has-sheen::after{
background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(124,196,255,.3),rgba(124,196,255,0) 62%);
}
.has-sheen:hover::after{opacity:1}
.btn.has-sheen{transform:translate(var(--btx,0px),var(--bty,0px))}
.btn.has-sheen:hover{transform:translate(var(--btx,0px),calc(var(--bty,0px) - 2px))}
.btn.has-sheen:active{transform:translate(var(--btx,0px),var(--bty,0px))}
/* card tilt, max 1.5deg */
.card.tiltable{
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--tty,0px));
transition:transform .18s var(--ease),border-color var(--t-fast) var(--ease);
}
.card.tiltable:hover{
--tty:-2px;
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--tty,0px));
}
@media(prefers-reduced-motion:reduce){
.has-sheen::after{display:none}
.btn.has-sheen,.card.tiltable{transform:none}
}
/* ---------- homepage flow band section ---------- */
.flow-band .seq-cap{color:var(--mut-d)}
.flow-band .flow-stage{margin-top:-4vh}
/* ================================================================
MOTION · ROUND 2 (pairs with motion.js modules 9-15 + megamenu)
================================================================ */
/* ---------- M9 · reveal lines [data-reveal-lines] ---------- */
/* JS wraps rendered lines in .rl-line > .rl-seg, plays once, then
restores the original markup. No-JS / reduced motion never see
these classes: the heading stays static and visible. */
html.js .rl-on .rl-line{display:block;overflow:hidden;padding:.14em 0;margin:-.14em 0}
html.js .rl-on .rl-seg{
display:inline-block;transform:translateY(110%);
transition:transform .85s var(--ease);
}
html.js .rl-on.rl-in .rl-seg{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
html.js .rl-on .rl-seg{transform:none;transition:none}
}
/* ---------- M10 · parallax [data-parallax] ---------- */
[data-parallax]{will-change:transform}
/* the hero wash trades its ambient keyframe for scroll parallax
(one ambient budget slot back); other pages' washes keep it */
html.js .hero-wash[data-parallax]{animation:none}
@media(prefers-reduced-motion:reduce){
[data-parallax]{transform:none !important;will-change:auto}
}
/* ---------- M11 · spotlight [data-spotlight] ---------- */
/* JS feeds --mx/--my per card; halo painted here (WebKit-safe px
radial-gradient). Fine pointers only: JS never mounts on touch. */
.spot-card{position:relative}
.spot-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(124,196,255,.13),rgba(124,196,255,0) 70%);
opacity:0;transition:opacity .35s var(--ease);
}
.dark .spot-card::after{
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),rgba(255,255,255,0) 70%);
}
.spot-on.spot-live .spot-card::after{opacity:1}
@media(prefers-reduced-motion:reduce){.spot-card::after{display:none}}
/* ---------- M12 · block reveal [data-block-reveal] ---------- */
/* Armed by JS only when the block starts below the fold; classes
are removed after the play, so the resting state is the plain
.block. No-JS / reduced motion: never armed. */
html.js .br-armed{
clip-path:inset(4.5% 4% round 52px);
opacity:.35;
transition:clip-path .95s var(--ease),opacity .7s var(--ease);
}
html.js .br-armed.br-in{clip-path:inset(0 0 round var(--r-block));opacity:1}
@media(max-width:640px){
html.js .br-armed{clip-path:inset(4.5% 4% round 34px)}
html.js .br-armed.br-in{clip-path:inset(0 0 round 26px)}
}
@media(prefers-reduced-motion:reduce){
html.js .br-armed{clip-path:none;opacity:1;transition:none}
}
/* ---------- M13 · orbit [data-orbit] ---------- */
.has-orbit{position:relative}
.orbit-svg{
position:absolute;left:50%;top:50%;
height:118%;aspect-ratio:1/1;width:auto;
transform:translate(-50%,-50%);
pointer-events:none;overflow:visible;
}
.orbit-ring{
fill:none;stroke:currentColor;opacity:.13;stroke-width:1;
stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke;
}
.orbit-spin{
transform-box:view-box;transform-origin:50% 50%;
animation:orbit-rot 48s linear infinite;
}
@keyframes orbit-rot{to{transform:rotate(360deg)}}
.orbit-off .orbit-spin,.orbit-hidden .orbit-spin{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.orbit-spin{animation:none}}
/* ---------- M14 · unlock hover [data-unlock-hover] ---------- */
/* Locked rows: redaction (.redact / .lock-veil) lifts ~40% on
hover or keyboard focus; the lock chip nudges. Pages can also
key custom redactions off --unlock (0 idle, 1 engaged). */
.unlockable{--unlock:0}
.unlockable:hover,.unlockable:focus-within,.unlockable:focus-visible{--unlock:1}
.unlockable .redact,.unlockable .lock-veil{transition:opacity .4s var(--ease)}
.unlockable:hover .redact,.unlockable:focus-within .redact,.unlockable:focus-visible .redact,
.unlockable:hover .lock-veil,.unlockable:focus-within .lock-veil,.unlockable:focus-visible .lock-veil{opacity:.6}
.unlockable .lock-chip{transition:transform .3s var(--ease)}
.unlockable:hover .lock-chip,.unlockable:focus-within .lock-chip,.unlockable:focus-visible .lock-chip{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.unlockable .redact,.unlockable .lock-veil,.unlockable .lock-chip{transition:none}
.unlockable .lock-chip{transform:none !important}
}
/* ---------- M15 · underline draw .u-draw (CSS only) ---------- */
/* Applied by motion.js mount() to #main p/li links that are not
buttons or .tlink. Draws left-to-right in, exits to the right. */
.u-draw{position:relative}
.u-draw::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
background:currentColor;opacity:.55;
transform:scaleX(0);transform-origin:100% 50%;
transition:transform .35s var(--ease);
}
.u-draw:hover::after,.u-draw:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
@media(prefers-reduced-motion:reduce){.u-draw::after{transition:none}}
/* ---------- M16 · megamenu motion + nav ring rotation ---------- */
/* Panels: 8px rise + fade, 240ms. Links stagger 40ms, driven by
[aria-expanded] on the toggle (set by site.js). No-JS keeps the
hover fallback (rules below are html.js-gated). */
html.js .mega{
transform:translateX(-50%) translateY(8px);
transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s;
}
html.js .nav-item.open>.mega{
transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s;
}
html.js .mega .mega-link{
opacity:0;transform:translateY(5px);
transition:opacity .28s var(--ease),transform .28s var(--ease),background-color .18s;
}
html.js .mega-toggle[aria-expanded="true"]+.mega .mega-link{opacity:1;transform:none}
html.js .mega .mega-link:nth-child(1){transition:opacity .28s var(--ease) .04s,transform .28s var(--ease) .04s,background-color .18s}
html.js .mega .mega-link:nth-child(2){transition:opacity .28s var(--ease) .08s,transform .28s var(--ease) .08s,background-color .18s}
html.js .mega .mega-link:nth-child(3){transition:opacity .28s var(--ease) .12s,transform .28s var(--ease) .12s,background-color .18s}
html.js .mega .mega-link:nth-child(4){transition:opacity .28s var(--ease) .16s,transform .28s var(--ease) .16s,background-color .18s}
@media(prefers-reduced-motion:reduce){
html.js .mega{transform:translateX(-50%);transition:none}
html.js .mega .mega-link{opacity:1;transform:none;transition:background-color .18s}
}
/* nav ring logomark: very slow continuous rotation (60s) */
@media(prefers-reduced-motion:no-preference){
html.js .nav .brand .mark{animation:brand-rot 60s linear infinite}
}
@keyframes brand-rot{to{transform:rotate(360deg)}}
/* ================================================================
MOTION · ROUND 3 (pairs with motion.js module 17)
================================================================ */
/* ---------- M17 · venture streams [data-streams] ---------- */
/*
cap + counter
4 × -
…
glow + hit ring + mark + labels
…
Venture blocks land one by one, each drawing a stream wire and
a running dash flow into the single ecosystem pool; the counter
ticks (JS) and the pool pulses as streams attach. All visual
motion is CSS keyed to --p (module 2). Default --p:1 = FINAL
frame, so no-JS and reduced motion render every block visible
and every stream drawn. Designed for dark blocks. Mobile:
vertical stack, .st-drop connectors replace the curved svg. */
.streams{
--p:1;
--b1:clamp(0,calc((var(--p) - .06)/.16),1);
--b2:clamp(0,calc((var(--p) - .26)/.16),1);
--b3:clamp(0,calc((var(--p) - .46)/.16),1);
--b4:clamp(0,calc((var(--p) - .66)/.16),1);
--bt:clamp(0,calc((var(--p) - .86)/.14),1);
margin-top:64px;
}
.st-caprow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.st-cap{
font-size:.78rem;color:var(--mut-d);letter-spacing:.02em;
display:flex;align-items:center;gap:7px;
}
.st-cap .tick{width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(154,164,175,.6))}
.st-count{display:flex;align-items:baseline;gap:8px}
.st-count b{
font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1;
color:var(--foam);font-variant-numeric:tabular-nums;
}
.st-count span{font-size:.78rem;color:var(--mut-d);letter-spacing:.02em}
.st-grid{position:relative}
.st-list{display:grid;grid-auto-rows:1fr;width:46%}
.st-item{display:flex;align-items:center;padding:9px 0}
.st-block{
width:100%;
border:1px solid var(--line-d);border-radius:18px;
background:rgba(255,255,255,.045);
padding:18px 22px;
opacity:var(--b,1);transform:translateY(calc((1 - var(--b,1)) * 14px));
}
.st-b1{--b:var(--b1)}
.st-b2{--b:var(--b2)}
.st-b3{--b:var(--b3)}
.st-b4{--b:var(--b4)}
.st-b4 .st-block{opacity:calc(var(--b,1) * .55);border-style:dashed}
.st-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.st-num{font-size:13px;font-weight:600;color:var(--mut-d);font-variant-numeric:tabular-nums}
.st-chip{
padding:4px 11px;border-radius:var(--r-pill);
font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
border:1px solid var(--line-d);background:rgba(255,255,255,.05);color:var(--mut-d);
}
.st-chip.consumer{background:rgba(124,196,255,.12);border-color:rgba(124,196,255,.35);color:#cfe7ff}
.st-chip.affiliate{background:rgba(127,227,187,.12);border-color:rgba(127,227,187,.35);color:#dcf6ea}
.st-chip.news{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#e8edf2}
.st-block b{display:block;font-size:1.06rem;font-weight:600;letter-spacing:-.015em;color:#fff;margin-bottom:4px}
.st-block p{font-size:14px;color:var(--mut-d);line-height:1.55;max-width:44ch}
.st-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.st-wire{
fill:none;stroke:rgba(124,196,255,.26);stroke-width:1.5;
vector-effect:non-scaling-stroke;
stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--w,1));
}
.st-flow{
fill:none;stroke:rgba(127,227,187,.8);stroke-width:1.5;
vector-effect:non-scaling-stroke;
stroke-dasharray:1.5 8;
opacity:calc(clamp(0,calc((var(--w,1) - .7)/.3),1) * .9);
animation:st-dash 2s linear infinite;
}
@keyframes st-dash{to{stroke-dashoffset:-9.5}}
.st-w1,.st-f1{--w:var(--b1)}
.st-w2,.st-f2{--w:var(--b2)}
.st-w3,.st-f3{--w:var(--b3)}
.st-w4,.st-f4{--w:var(--b4)}
.st-drop{display:none;flex:none}
.st-drop .st-wire,.st-drop .st-flow{--w:var(--b,1)}
.st-drop .st-flow{stroke-dasharray:2 7.5}
.st-pool{
position:absolute;right:0;top:50%;
transform:translateY(-50%) scale(calc(.92 + .08 * var(--b1)));
opacity:calc(.35 + .65 * var(--b1));
display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
padding:24px 30px;border-radius:22px;
background:#10151b;border:1px solid rgba(127,227,187,.32);
box-shadow:0 0 44px rgba(127,227,187,.14);
}
.st-pool .mark{width:24px;height:24px;margin-bottom:6px}
.st-pool b{font-size:.98rem;font-weight:600;color:#dcf6ea;letter-spacing:-.01em}
.st-pool span{font-size:.78rem;color:var(--mut-d)}
.st-pool .st-pool-line{font-size:.82rem;font-weight:600;color:var(--foam);margin-top:6px}
.st-pool-glow{
position:absolute;inset:-30px;border-radius:50%;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(127,227,187,.26),rgba(127,227,187,0) 70%);
opacity:calc(.25 + .75 * var(--b4));
animation:sb-pulse 2.8s ease-in-out infinite;
}
.st-pool-hit{
position:absolute;inset:-6px;border-radius:26px;pointer-events:none;
border:1px solid rgba(127,227,187,.55);opacity:0;
}
.st-pool.st-hit .st-pool-hit{animation:st-hitring .65s var(--ease)}
@keyframes st-hitring{0%{opacity:.9;transform:scale(.97)}100%{opacity:0;transform:scale(1.12)}}
.st-beat{
margin-top:48px;text-align:center;
font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;letter-spacing:-.02em;color:#fff;
opacity:var(--bt);transform:translateY(calc((1 - var(--bt)) * 10px));
}
@media(max-width:820px){
.st-svg{display:none}
.st-list{width:100%;grid-auto-rows:auto}
.st-item{flex-direction:column;align-items:stretch;padding:0}
.st-drop{display:block;width:4px;height:40px;margin:2px auto}
.st-pool{
position:relative;right:auto;top:auto;margin:2px auto 0;
transform:scale(calc(.92 + .08 * var(--b1)));
max-width:300px;
}
.st-beat{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){
.st-flow{animation:none}
.st-pool-glow{animation:none}
.st-pool-hit{display:none}
.st-block,.st-beat{transform:none}
}
/* perf:
wrappers must not affect layout (webp swap) */
picture{display:contents}