"; inherits: false; initial-value: 0deg; }
/* The panel bleeds full width, but its height is capped. Content is authored in
cqw, so on a wide screen a width-driven cqw would keep growing while the
height stayed pinned - icons would outgrow their cards. The stage fixes that:
it takes the capped height and derives its own width from the design ratio,
so it is the container all cqw resolve against and the whole cluster scales
as one picture, centred, while the tunnel behind it still bleeds edge to edge. */
.hg__stage {
position: absolute; inset: 0; margin: auto;
height: 100%; aspect-ratio: 1200 / 620;
container-type: inline-size;
}
/* the WebGL tunnel sits behind everything (light-tunnel.js) */
.hg__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hg__bg canvas { display: block; width: 100%; height: 100%; }
/* the cables are busiest exactly where the cards sit, so damp that side down */
.hg__bg::after {
content: ""; position: absolute; inset: 0; z-index: 2; /* stays above the ascii layer below */
background:
linear-gradient(to right, rgba(6,9,16,.42) 0%, rgba(6,9,16,.24) 30%, rgba(6,9,16,.06) 55%, transparent 72%),
radial-gradient(70% 100% at 50% 50%, transparent 60%, rgba(6,9,16,.42) 100%);
}
/* "beam" background: an indigo field lit from a ring just above the top edge —
a bright arc, soft rays fanning down, film grain. Pure CSS, no canvas. */
.hg__bg--beam {
background:
radial-gradient(64% 64% at 50% -36%, transparent 56%, rgba(190,235,255,1) 61%, rgba(150,200,255,.75) 66%, rgba(100,120,255,.28) 76%, transparent 90%),
radial-gradient(70% 55% at 50% 10%, rgba(16,8,110,.6) 0%, rgba(16,8,110,.28) 45%, transparent 72%),
linear-gradient(180deg, #2A1FCB 0%, #3426DA 45%, #3B2FE6 100%);
}
/* rays: two offset conic fans, blurred, clipped to below the arc */
.hg__bg--beam::before {
content: ""; position: absolute; inset: -40px;
background:
repeating-conic-gradient(from 152deg at 50% -36%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 3deg, rgba(255,255,255,0) 7deg, rgba(255,255,255,.04) 12deg, rgba(255,255,255,0) 17.5deg),
repeating-conic-gradient(from 157deg at 50% -36%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.06) 1.2deg, rgba(255,255,255,0) 2.8deg, rgba(255,255,255,0) 11deg);
filter: blur(7px);
-webkit-mask-image: radial-gradient(80% 120% at 50% -30%, transparent 54%, #000 66%, #000 100%);
mask-image: radial-gradient(80% 120% at 50% -30%, transparent 54%, #000 66%, #000 100%);
}
.hg__bg--beam::after { /* grain + a gentle vignette instead of the cable-damping wash */
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(80% 90% at 50% 40%, transparent 55%, rgba(10,6,70,.45) 100%);
background-size: 220px 220px, auto;
mix-blend-mode: overlay; opacity: .7;
}
.hg__bg--beam canvas { display: none; }
/* WebGL light bloom (light-bloom.js): indigo light rising from the bottom,
with drifting shafts. The canvas paints everything, so the shared .hg__bg
wash is switched off here. */
.hg__bg--bloom { background: radial-gradient(120% 90% at 50% 120%, #EAF1FF 0%, #4867FF 22%, #060C24 70%, #000 100%); }
.hg__bg--bloom { overflow: hidden; }
.hg__bg--bloom .bloom { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ASCII blended into the bloom. ascii-fire.js inserts the as the host's
first child, so it would paint under the WebGL canvas — z-index lifts it over.
.hg__bg is a stacking context (position + z-index), so the blend resolves
against the canvas and never reaches the page behind it. Soft-light keeps the
glyphs as a texture in the light rather than a second subject competing with
the wires; the ramp is blues so it reads as light, not soot. */
.hg__bg--bloom .fire {
z-index: 1;
mix-blend-mode: soft-light;
opacity: .75;
--fire-0: #6E86FF; --fire-1: #7E94FF; --fire-2: #8FA3FF; --fire-3: #A3B4FF;
--fire-4: #B9C6FF; --fire-5: #D2DBFF; --fire-6: #EAF0FF; --fire-spark: #FFFFFF;
}
.hg__bg--bloom::after { background: none; }
/* video background: the same horizon loop as the "Connect once" stage */
.hg__bg--video video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
filter: brightness(.72) saturate(1.15); /* the glass cards carry white text — the raw frame is too bright for it */
}
/* scrim: heaviest at the top, where the planet's bright rim runs behind the card row */
.hg__bg--video::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(5,10,38,.62) 0%, rgba(5,10,38,.34) 30%, rgba(5,10,38,.18) 55%, rgba(5,10,38,.34) 100%);
}
.hg__bg--video::after { /* grain over the compression, plus a vignette so the glass cards keep their edge */
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(85% 95% at 50% 45%, transparent 50%, rgba(6,16,60,.45) 100%);
background-size: 220px 220px, auto;
mix-blend-mode: overlay; opacity: .6;
}
/* wires (drawn by hero-graph.js) */
.hg__wires {
position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible;
filter: drop-shadow(0 0.07cqw 0.28cqw rgba(6,16,50,.45));
}
.hg__wire { fill: none; stroke: rgba(226,235,255,.92); stroke-width: 0.182cqw; stroke-linecap: round; transition: stroke .25s; }
.hg__wire-glow { fill: none; stroke: var(--accent); stroke-width: 0.63cqw; stroke-linecap: round; opacity: .18; }
.hg__wire-pulse{ fill: none; stroke: var(--accent); stroke-width: 0.21cqw; stroke-linecap: round; }
.hg__wire-glow, .hg__wire-pulse { stroke-dasharray: 90 1000; stroke-dashoffset: 90; }
.hg--live .hg__wire-glow, .hg--live .hg__wire-pulse { animation: hg-pulse 4.4s cubic-bezier(.4,0,.35,1) infinite; animation-delay: var(--delay, 0s); }
@keyframes hg-pulse { 0% { stroke-dashoffset: 90; } 48%, 100% { stroke-dashoffset: -1000; } }
/* draw-in on load */
.hg--in .hg__wire { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: hg-draw 1.1s cubic-bezier(.3,0,.2,1) forwards; animation-delay: calc(.25s + var(--delay, 0s) * .35); }
@keyframes hg-draw { to { stroke-dashoffset: 0; } }
/* hover: light the wire that belongs to the hovered card */
.hg:has(.hg__card:nth-child(1):hover) .hg__wire[data-i="0"],
.hg:has(.hg__card:nth-child(2):hover) .hg__wire[data-i="1"],
.hg:has(.hg__card:nth-child(3):hover) .hg__wire[data-i="2"] { stroke: var(--accent); }
/* ports: little hollow nodes where a wire meets a surface */
.hg__port {
position: absolute; width: 0.735cqw; height: 0.735cqw; border-radius: 50%;
background: #EAF0FF; border: 0.154cqw solid #6D8CFF;
/* glow only - a dark ring here read as a smudge against the fluid */
box-shadow: 0 0 0.65cqw rgba(160,190,255,.95), 0 0 1.8cqw rgba(72,103,255,.5);
z-index: 2;
}
/* hub: the mark alone, on the right */
.hg__hub {
position: absolute; z-index: 2; left: 50%; right: auto; top: auto; bottom: 6.4cqw; translate: -50% 0;
width: 15cqw; height: 15cqw; border-radius: 50%;
background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(233,240,255,.90));
border: 1px solid rgba(255,255,255,.55);
box-shadow:
0 0.5cqw 1.6cqw rgba(6,16,50,.24),
0 0 3.2cqw rgba(120,155,255,.22),
inset 0 0.084cqw 0 rgba(255,255,255,.95);
backdrop-filter: blur(0.7cqw); -webkit-backdrop-filter: blur(0.7cqw);
display: grid; place-items: center;
}
.hg__mark { width: 5.6cqw; height: auto; }
/* hub ports sit on the rim: --a is measured from the 3 o'clock point, so the
left-facing ports that meet the cards live around 180deg. */
.hg__hub .hg__port { left: 50%; top: 50%; margin: -0.3675cqw; transform: rotate(var(--a)) translateX(7.5cqw) rotate(calc(-1 * var(--a))); }
/* cards */
.hg__cards {
position: absolute; z-index: 2; left: 5cqw; right: 5cqw; top: 6.4cqw; bottom: auto;
height: auto; /* the card's own padding sets the height, so all four sides match */
display: flex; flex-direction: row; justify-content: space-between; gap: 1.6cqw;
}
.hg__card {
position: relative; flex: 1 1 0; min-height: 0; min-width: 0;
display: flex; align-items: center; gap: 0.95cqw;
padding: 1.15cqw;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.06) 60%, rgba(255,255,255,.10));
backdrop-filter: blur(1.12cqw) saturate(150%);
-webkit-backdrop-filter: blur(1.12cqw) saturate(150%);
border: 1px solid rgba(255,255,255,.16);
box-shadow:
0 0.35cqw 1.05cqw rgba(6,16,50,.20),
inset 0 0.077cqw 0 rgba(255,255,255,.28);
color: var(--fg);
transition: translate .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s;
cursor: default;
}
.hg__card:hover {
translate: 0 -0.6cqw;
background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.10) 60%, rgba(255,255,255,.14));
box-shadow: 0 0.6cqw 1.6cqw rgba(6,16,50,.26), inset 0 0.077cqw 0 rgba(255,255,255,.4);
}
/* white light running around the rim: a conic sweep clipped to a 1px ring by
masking the content box out of the padding box */
.hg__card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
padding: 0.154cqw; pointer-events: none;
background: conic-gradient(from var(--beam),
transparent 0deg, transparent 188deg,
rgba(255,255,255,.16) 234deg,
rgba(255,255,255,.92) 270deg,
#FFFFFF 280deg,
rgba(255,255,255,.92) 290deg,
rgba(255,255,255,.16) 326deg,
transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
filter: drop-shadow(0 0 0.21cqw rgba(235,244,255,.7));
}
.hg__card .hg__port { left: 50%; right: auto; top: auto; bottom: 0; translate: -50% 50%; }
.hg__icon {
flex: none; width: 5.8cqw; height: 5.8cqw; border-radius: 50%;
background: var(--tile, #111); display: grid; place-items: center;
}
.hg__icon svg { width: 62%; height: 62%; display: block; }
.hg__text { display: grid; gap: 0.5cqw; justify-items: start; min-width: 0; }
.hg__name { font-size: 1.9cqw; font-weight: 600; letter-spacing: -.015em; line-height: 1; }
.hg__badge {
font-size: 0.76cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: 0.3cqw 0.52cqw; border-radius: 0.4cqw;
color: var(--accent-text); background: rgba(255,255,255,.13);
border: 1px solid rgba(255,255,255,.10);
line-height: 1;
}
.hg__chev { margin-inline-start: auto; width: 1.3cqw; height: 1.3cqw; color: var(--muted); }
/* entrance + float.
`translate`, `scale` and `transform` are independent properties that compose,
so each effect gets its own channel: entrance animates opacity+scale, the
float animates transform, and the hover nudge keeps `translate` to itself.
(Animating translate in the entrance would win the cascade over :hover.) */
.hg--in .hg__hub {
animation: hg-pop .8s cubic-bezier(.2,.8,.2,1) both, hg-drift 11s ease-in-out infinite;
animation-delay: 0s, -2s;
}
.hg--in .hg__card {
animation: hg-rise .7s cubic-bezier(.2,.8,.2,1) both, hg-float 7s ease-in-out infinite;
animation-delay: calc(.35s + var(--i, 0) * .09s), calc(var(--i, 0) * -2.3s);
}
.hg--in .hg__card::before { animation: hg-beam 5.5s linear infinite; animation-delay: calc(var(--i, 0) * -1.75s); }
@keyframes hg-pop { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes hg-rise { from { opacity: 0; scale: .965; } to { opacity: 1; scale: 1; } }
@keyframes hg-float { 0%, 100% { transform: translateY(0.385cqw); } 50% { transform: translateY(-0.665cqw); } }
@keyframes hg-drift { 0%, 100% { transform: translateY(-0.35cqw); } 50% { transform: translateY(0.35cqw); } }
@keyframes hg-beam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) {
.hg--in .hg__hub, .hg--in .hg__card, .hg--in .hg__card::before,
.hg--in .hg__wire, .hg--live .hg__wire-glow, .hg--live .hg__wire-pulse { animation: none; }
.hg__card::before { opacity: .5; }
.hg--in .hg__wire { stroke-dashoffset: 0; }
.hg__wire-glow, .hg__wire-pulse { display: none; }
}
/* ---------- ASK: prompts fly into the chat on scroll (genie.js) ----------
Layout is plain flow: a viewport-tall headline row, then the chat window.
The prompt cards live in an absolute field over the headline row; genie.js
moves them (transform only) from their rest spot to the chat's user bubble
as the section scrolls, so nothing here ever changes layout. */
.genie { position: relative; overflow: clip; }
.genie__hero {
position: relative;
min-height: clamp(480px, 76svh, 720px);
display: grid; place-items: center;
padding: calc(var(--pad-y) * 1.5) var(--pad-x) var(--pad-y);
}
.genie__hero .stack { position: relative; z-index: 4; } /* text over cards, cards over chat */
.genie__hero h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); font-weight: 700; letter-spacing: -0.025em; }
.genie__field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.genie__chat {
position: relative; z-index: 1;
padding: clamp(24px, 6vh, 64px) var(--pad-x) var(--pad-y);
display: grid; justify-items: center;
}
/* prompt card — a message about to be sent */
.pcard {
position: absolute; left: var(--x); top: var(--y);
translate: -50% -50%;
width: clamp(168px, 22vw, 232px);
will-change: transform, opacity;
transform-origin: 50% 50%;
}
.pcard__in {
display: grid; gap: 8px;
padding: 10px 12px 10px;
background: var(--card); border: 1px solid var(--line-frame); border-radius: 14px;
box-shadow: 0 1px 2px rgba(20,30,40,.05), 0 18px 40px -22px rgba(20,30,40,.25);
animation: pcard-float 7s ease-in-out infinite alternate;
animation-delay: var(--fd, 0s);
}
.pcard--far .pcard__in { filter: blur(1.1px); }
.pcard__who { display: flex; align-items: center; gap: 7px; font-size: .6875rem; color: var(--muted); font-weight: 500; }
.pcard__mark {
width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center;
background: #D97757; color: #fff; /* claude */
}
.pcard__mark svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.pcard__mark[data-client="chatgpt"] { background: var(--card); color: var(--fg); border: 1px solid var(--line-frame); }
.pcard__mark[data-client="claudecode"] { background: var(--card); color: #D97757; border: 1px solid var(--line-frame); }
.pcard__mark[data-client="claudecode"] svg { width: 13px; height: 13px; }
.pcard p { color: var(--fg); font-size: .8125rem; line-height: 1.4; }
.pcard__send {
justify-self: end; width: 20px; height: 20px; border-radius: 50%;
background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; line-height: 1;
}
@keyframes pcard-float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pcard__in { animation: none; } }
@media (max-width: 719px) { .pcard--x { display: none; } .pcard { width: clamp(150px, 42vw, 190px); } }
/* the receiving chat window */
.gchat {
width: min(100%, 560px);
display: grid; grid-template-rows: auto 1fr auto;
border: 1px solid var(--line-frame); border-radius: var(--radius);
background: var(--surface); color: var(--fg);
position: relative; min-height: 400px; /* no overflow clip: the neon glow lives just outside the box */
opacity: 0; transform: translateY(36px); /* genie.js drives these */
}
.gchat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.gchat__head b { color: var(--fg); font-weight: 600; }
.gchat__dots { display: inline-flex; gap: 5px; margin-inline-end: 4px; }
.gchat__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-frame); }
.gchat__on { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-text); margin-inline-start: auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-text) 20%, transparent); }
.gchat__log { padding: 18px 16px 8px; display: grid; gap: 14px; align-content: start; }
.gchat__user {
justify-self: end; max-width: 86%;
padding: 10px 14px; border-radius: 16px 16px 4px 16px;
background: var(--accent); color: #fff; font-size: .9375rem; line-height: 1.5;
opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s ease, transform .3s ease;
}
.gchat__user.is-on { opacity: 1; transform: none; }
.gchat__steps { display: grid; gap: 10px; }
.gchat .tool { animation: none; }
.gchat__steps > * { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.gchat__steps > .is-on { opacity: 1; transform: none; }
.gchat__input { margin: 8px 12px 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--line-frame); border-radius: 999px; background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .875rem; color: var(--muted); }
.gchat__input b { width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--surface); display: grid; place-items: center; font-size: 13px; }
/* ---------- ASCII FIRE (ascii-fire.js) — glyph flames behind the clients card ----------
Heat → --fire-0 (coolest) … --fire-6 (hottest), in the brand blue by default;
hovering a tool card re-tints the whole fire in that tool's colour (below). */
.fire {
position: absolute; inset: auto 0 0; margin: 0; overflow: hidden; z-index: 0; /* bottom-anchored: whole rows only, so the fuel row meets the edge */
pointer-events: none; user-select: none;
font: 10px/1.05 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-variant-ligatures: none; white-space: pre; text-rendering: optimizeSpeed;
}
/* fire palette: registered so a hover can fade from one colour to the next */
@property --fire-0 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-1 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-2 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-3 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-4 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-5 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-6 { syntax: ""; inherits: true; initial-value: #000; }
@property --fire-spark { syntax: ""; inherits: true; initial-value: #000; }
.fire { transition: --fire-0 .5s ease, --fire-1 .5s ease, --fire-2 .5s ease, --fire-3 .5s ease, --fire-4 .5s ease, --fire-5 .5s ease, --fire-6 .5s ease, --fire-spark .5s ease; }
/* Neutral by default — grey on light, muted white on dark — shared with the
separation strips, which sit on the same --band ground. Hovering a tool card
tints the whole fire in that tool's colour (the :has rules below outrank this). */
.sec--gap .fire, .clients-wrap .fire {
/* coolest stop tracks --band: it must sit just *inside* the strip's ground,
never lighter than it, or the faintest glyphs read as light speckle */
--fire-0: light-dark(#EEEFF1, #1D2126);
--fire-1: light-dark(#ECEDEF, #1E2226);
--fire-2: light-dark(#DFE1E4, #2A2F34);
--fire-3: light-dark(#CDD1D5, #3B4248);
--fire-4: light-dark(#B4BAC1, #545D66);
--fire-5: light-dark(#98A0A9, #7E8892);
--fire-6: light-dark(#7A828C, #AEB7C0);
--fire-spark: light-dark(#6B7280, #C6CDD4);
}
.clients-wrap:has(.clients__item[data-client="claude"]:hover) .fire {
--fire-0: light-dark(#FCF4F2, #301A13);
--fire-1: light-dark(#F7E4DD, #573023);
--fire-2: light-dark(#F1CEC3, #874A36);
--fire-3: light-dark(#EAB4A3, #B8654A);
--fire-4: light-dark(#E1957C, #D97757);
--fire-5: light-dark(#D97757, #EAB4A3);
--fire-6: light-dark(#A95D44, #F8E7E1);
--fire-spark: light-dark(#C36B4E, #E6A792);
}
.clients-wrap:has(.clients__item[data-client="chatgpt"]:hover) .fire {
--fire-0: light-dark(#F3F4F5, #18191C);
--fire-1: light-dark(#E1E3E6, #2B2E33);
--fire-2: light-dark(#CACCD1, #42474F);
--fire-3: light-dark(#AEB1B9, #5B616D);
--fire-4: light-dark(#8C919C, #6B7280);
--fire-5: light-dark(#6B7280, #AEB1B9);
--fire-6: light-dark(#535964, #E4E6E8);
--fire-spark: light-dark(#606773, #9FA3AC);
}
.clients-wrap:has(.clients__item[data-client="codex"]:hover) .fire {
--fire-0: light-dark(#F3F6FF, #171F38);
--fire-1: light-dark(#E1E8FF, #2A3866);
--fire-2: light-dark(#C9D6FF, #42579E);
--fire-3: light-dark(#ADC0FF, #5A77D9);
--fire-4: light-dark(#8BA5FF, #6A8CFF);
--fire-5: light-dark(#6A8CFF, #ADC0FF);
--fire-6: light-dark(#536DC7, #E4EAFF);
--fire-spark: light-dark(#5F7EE6, #9EB4FF);
}
.clients-wrap:has(.clients__item[data-client="claudecode"]:hover) .fire {
--fire-0: light-dark(#FCF4F2, #301A13);
--fire-1: light-dark(#F7E4DD, #573023);
--fire-2: light-dark(#F1CEC3, #874A36);
--fire-3: light-dark(#EAB4A3, #B8654A);
--fire-4: light-dark(#E1957C, #D97757);
--fire-5: light-dark(#D97757, #EAB4A3);
--fire-6: light-dark(#A95D44, #F8E7E1);
--fire-spark: light-dark(#C36B4E, #E6A792);
}
/* gap strips: the same ASCII flames, slow (12 fps, gentle wind). Palette comes
from the shared neutral ramp above. Swap the markup back to