/* ═════════════════════════════════════════════════════════════════
CHAMBER PRESENCE — PASS 1
Atmosphere layers that make the chamber breathe at you. Film
grain, edge vignette tightening on tension, corner accents,
cursor dot. None of these are decorations — each one is a
channel through which the room signals it's alive and watching.
═════════════════════════════════════════════════════════════════ */
/* ── Film grain ───────────────────────────────────────────────────
A drift of subpixel noise across the entire chamber. The tell
that the room is alive even when nothing's happening. Pure
black at this density would read as an off OLED pixel — with
grain, the black has depth. SVG noise is decoded once and
cached; perf cost is zero after first paint. */
body.in-atrium .atrium-ambient::before {
content: '';
position: absolute;
inset: -3%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.035;
mix-blend-mode: screen;
animation: chamberGrainDrift 9s steps(8) infinite;
will-change: transform;
z-index: 1;
}
@keyframes chamberGrainDrift {
0% { transform: translate(0, 0); }
14% { transform: translate(-6px, 4px); }
28% { transform: translate(5px, -3px); }
42% { transform: translate(-3px, -5px); }
56% { transform: translate(7px, 2px); }
70% { transform: translate(-4px, 6px); }
84% { transform: translate(3px, -4px); }
100% { transform: translate(0, 0); }
}
/* ── Edge vignette + corner accents ───────────────────────────────
The room's periphery responds to chamber-tension. At idle, the
edges fall off into pure black almost invisibly. At attention,
the falloff tightens 40-60px inward AND gains a microscopic
accent-blue cast at the four corners. You don't see it as
color — you feel it as the room narrowing focus. */
body.in-atrium .atrium-ambient::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
/* Amplified so the room tensing is actually felt — not as a
hard outline, but as the chamber narrowing its focus around
Jake. At idle: corners barely tinted. At submitting/thinking:
corners glow noticeably, inset vignette tightens ~120px
inward, the whole periphery gathers in. Subtle is still the
goal — but Jake said he wasn't FEELING it, so the amplitude
needed to go up. */
background:
radial-gradient(circle at 0% 0%,
rgba(122,184,245, calc(0.01 + var(--chamber-tension, 0.2) * 0.075)) 0%,
transparent 32%),
radial-gradient(circle at 100% 0%,
rgba(122,184,245, calc(0.01 + var(--chamber-tension, 0.2) * 0.075)) 0%,
transparent 32%),
radial-gradient(circle at 0% 100%,
rgba(122,184,245, calc(0.01 + var(--chamber-tension, 0.2) * 0.065)) 0%,
transparent 36%),
radial-gradient(circle at 100% 100%,
rgba(122,184,245, calc(0.01 + var(--chamber-tension, 0.2) * 0.065)) 0%,
transparent 36%);
box-shadow:
inset 0 0 calc(160px + var(--chamber-tension, 0.2) * 220px)
calc(var(--chamber-tension, 0.2) * 70px)
rgba(0, 1, 4, 0.95),
inset 0 0 calc(280px + var(--chamber-tension, 0.2) * 80px) 0 rgba(0, 0, 0, 0.65);
transition: box-shadow 1400ms cubic-bezier(0.32, 0.7, 0.32, 1);
}
/* (Custom chamber cursor reverted to OS cursor — Jake's call. The
previous .chamber-cursor / .chamber-cursor-halo / ripple system
was removed. The OS cursor is the cursor.) */
/* ═══════════════════════════════════════════════════════════════════
ORB GAZE TRACKING
The orb has an inner luminous point — her attention. When the
chamber is idle, it drifts in slow loops. When Jake is present
(cursor active), it tracks toward the cursor. When a new surface
arrives, it briefly snaps to the surface center. The eye that
knows where to look.
Implementation: a CSS overlay on .atrium-orb positioned via
--orb-gaze-x/y custom properties (range -1..1, 0,0 = center). JS
updates these from cursor position; CSS interpolates with a soft
lag so the gaze drifts rather than tracks 1:1.
═══════════════════════════════════════════════════════════════════ */
@property --orb-gaze-x {
syntax: '';
inherits: true;
initial-value: -0.18;
}
@property --orb-gaze-y {
syntax: '';
inherits: true;
initial-value: -0.24;
}
.atrium-orb {
--orb-gaze-x: -0.18;
--orb-gaze-y: -0.24;
transition:
--orb-gaze-x 1100ms cubic-bezier(0.32, 0.7, 0.32, 1),
--orb-gaze-y 1100ms cubic-bezier(0.32, 0.7, 0.32, 1),
filter 600ms cubic-bezier(0.32, 0.7, 0.32, 1),
transform 600ms cubic-bezier(0.32, 0.7, 0.32, 1);
}
/* Gaze pinpoint — small bright spot painted on top of the orb at
the position dictated by --orb-gaze-x/y. Mixes with the mist
below so it brightens existing brightness rather than punching
a hard white dot. */
.atrium-orb::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14%;
height: 14%;
margin: -7% 0 0 -7%;
transform: translate(
calc(var(--orb-gaze-x, 0) * 80%),
calc(var(--orb-gaze-y, 0) * 80%)
);
background: radial-gradient(circle,
rgba(255, 255, 255, 0.55) 0%,
rgba(170, 210, 255, 0.3) 38%,
transparent 80%);
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
filter: blur(2.5px);
opacity: calc(0.5 + var(--orb-attention, 0.3) * 0.5);
transition: transform 1100ms cubic-bezier(0.32, 0.7, 0.32, 1),
opacity 600ms ease;
z-index: 2;
}
/* When the orb is "looking" at a specific element (newly arrived
surface), JS toggles .gaze-snapped which speeds the transition
so the snap reads as a deliberate look, not a lazy drift. */
.atrium-orb.gaze-snapped {
transition:
--orb-gaze-x 380ms cubic-bezier(0.16, 1, 0.3, 1),
--orb-gaze-y 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.atrium-orb.gaze-snapped::after {
transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 380ms ease;
opacity: 1;
}
/* ── Orb mood — tone-aware halo tint ─────────────────────────────
The orb's halo color shifts microscopically with the day's tone.
Cool/dim for bleeding sessions, slightly warmer/brighter for
clean wins. Driven by --orb-mood (-1..+1, -1 = bad, +1 = good).
Sub-1% saturation shifts. */
@property --orb-mood {
syntax: '';
inherits: true;
initial-value: 0;
}
/* Orb-mood filter REMOVED — its 2400ms filter transition on the
SVG drop-shadow was repainting the orb every frame for 2.4s
starting at chamber-visible time. The orbMood JS fires
updateMood() on a MutationObserver hooked to body class changes;
when in-atrium was added, the --orb-mood variable changed and
the calc'd HSL drop-shadow transitioned, dragging paint work
across the entire orb assembly cascade. That was the stutter
Jake saw between chamber-visible and the rings forming.
The simple static drop-shadow declared earlier (line ~2881)
takes over — no transition, no per-frame filter recompute. */
/* ═══════════════════════════════════════════════════════════════════
STRATEGY LAYOUTS — Loryn picks a strategy per response and the
renderer paints it. Six strategies, each with responsive rules
that adapt to content count so a 1-evidence response doesn't
look like a half-filled grid.
═══════════════════════════════════════════════════════════════════ */
.strategy {
width: 100%;
display: grid;
gap: 32px;
align-items: center;
justify-items: center;
box-sizing: border-box;
}
/* Base prose — composed from visual-vocab body typography token. */
.strategy-prose {
max-width: 720px;
text-align: center;
font-family: var(--vv-font-display);
font-size: var(--vv-body-size);
line-height: var(--vv-body-leading);
color: var(--vv-text-primary);
font-weight: var(--vv-body-weight);
letter-spacing: var(--vv-body-tracking);
font-feature-settings: "tnum" 1, "kern" 1, "liga" 1;
}
/* ── VOID — pure prose, generous void around ───────────────────── */
.strategy-void {
grid-template-columns: 1fr;
gap: 0;
}
/* ── ANCHOR — prose framing + one dominant element ─────────────── */
.strategy-anchor {
grid-template-columns: 1fr;
grid-template-areas: "prose" "primary";
gap: 36px;
max-width: 900px;
margin: 0 auto;
}
.strategy-anchor .strategy-prose { grid-area: prose; max-width: 600px; }
.strategy-anchor .strategy-primary { grid-area: primary; }
/* ── NARRATIVE — prose primary, evidence rail responsive ───────── */
.strategy-narrative {
max-width: 1300px;
margin: 0 auto;
align-items: center;
justify-items: stretch;
}
/* No evidence → prose alone, centered, narrow */
.strategy-narrative[data-evidence-count="0"] {
grid-template-columns: 1fr;
max-width: 720px;
}
.strategy-narrative[data-evidence-count="0"] .strategy-prose {
text-align: center;
margin: 0 auto;
}
/* 1-2 evidence → asymmetric, prose left, rail right */
.strategy-narrative[data-evidence-count="1"],
.strategy-narrative[data-evidence-count="2"] {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 56px;
}
/* 3-4 evidence → more balanced, more space for rail */
.strategy-narrative[data-evidence-count="3"],
.strategy-narrative[data-evidence-count="4"] {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 60px;
}
.strategy-narrative:not([data-evidence-count="0"]) .strategy-prose {
text-align: left;
max-width: 100%;
padding-right: 8px;
}
.strategy-evidence {
display: flex;
flex-direction: column;
gap: 28px;
padding-left: 28px;
border-left: 1px solid rgba(122, 184, 245, 0.10);
min-width: 0;
}
/* ── TRACE — wide horizontal element, prose above ──────────────── */
.strategy-trace {
grid-template-columns: 1fr;
grid-template-areas: "prose" "trace";
gap: 28px;
max-width: 1400px;
margin: 0 auto;
}
.strategy-trace .strategy-prose { grid-area: prose; max-width: 760px; }
.strategy-trace-element {
grid-area: trace;
width: 82%;
max-width: 1100px;
margin: 0 auto;
}
/* ── SPLIT — N columns side by side, prose top ─────────────────── */
.strategy-split {
grid-template-columns: 1fr;
grid-template-areas: "prose" "items";
max-width: 1300px;
margin: 0 auto;
gap: 36px;
}
.strategy-split .strategy-prose { grid-area: prose; max-width: 720px; margin: 0 auto; }
.strategy-items {
grid-area: items;
display: grid;
gap: 64px;
width: 100%;
align-items: start;
}
/* Two-item splits sit close together so the eye can compare them
in a single glance. At 920px they were sprawled across the
chamber with empty space between — read as two unrelated cards
rather than a comparison. 560px keeps them tight; the gap below
drops to 40px so they're snug but not crowded. Three-item splits
stay wider since they need horizontal room. */
.strategy-split[data-item-count="2"] .strategy-items {
grid-template-columns: 1fr 1fr;
max-width: 560px;
margin: 0 auto;
gap: 40px;
}
.strategy-split[data-item-count="3"] .strategy-items { grid-template-columns: 1fr 1fr 1fr; }
.split-item {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
.split-item-label {
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.7);
border-bottom: 1px solid rgba(122, 184, 245, 0.12);
padding-bottom: 10px;
width: 100%;
text-align: center;
}
/* ── DEEP — multi-zone canvas, hero + evidence + prose + trace ──
Restructured to a single-column vertical stack with the evidence
rail laid out HORIZONTALLY below the hero (auto-fit grid). The
prior side-by-side hero/rail-stacked-vertically layout was the
single biggest source of chamber overflow: 5 stacked stats at
60-70px each ate ~400px just for the rail. Going horizontal uses
the chamber's WIDTH (which is the available real estate) and
saves ~300px of vertical space. The hero gets centered on top
at a slightly tamer size; the rail becomes a tight equal-width
row beneath it; prose flows below. */
.strategy-deep {
grid-template-columns: 1fr;
grid-template-areas:
"hero"
"evidence"
"prose"
"trace";
max-width: 1400px;
margin: 0 auto;
gap: 24px;
align-items: start;
}
.strategy-deep[data-has-hero="0"][data-evidence-count="0"] {
grid-template-columns: 1fr;
grid-template-areas: "prose" "trace";
}
.strategy-deep[data-has-hero="1"][data-evidence-count="0"] {
grid-template-columns: 1fr;
grid-template-areas: "hero" "prose" "trace";
}
.strategy-deep[data-has-hero="0"][data-evidence-count="0"] .strategy-hero { display: none; }
.strategy-deep .strategy-hero {
grid-area: hero;
justify-self: center;
align-self: start;
text-align: center;
}
/* Hero stat in DEEP — tamer than the chamber-wide mega. The hero
is informational, not decorative; 44px reads as commanding
without consuming a fifth of the chamber height. */
.strategy-deep .strategy-hero .strategy-stat.size-mega .strategy-stat-value,
.strategy-deep .strategy-hero .strategy-stat.size-hero .strategy-stat-value {
font-size: 44px;
}
/* Evidence rail horizontal — equal columns auto-fitting whatever
count Loryn emits (up to 5 reads cleanly at chamber width). The
left border / padding-left treatment from the old vertical rail
gets dropped since there's no longer a left "spine" — replaced
with a thin horizontal top border so the rail still reads as a
distinct band beneath the hero. */
.strategy-deep .strategy-evidence-rail {
grid-area: evidence;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 18px 32px;
padding-top: 14px;
border-top: 1px solid rgba(122, 184, 245, 0.10);
min-width: 0;
width: 100%;
}
.strategy-deep .strategy-evidence-rail .strategy-stat {
align-items: center;
text-align: center;
}
.strategy-deep .strategy-prose {
grid-area: prose;
max-width: 920px;
margin: 0 auto;
text-align: left;
}
.strategy-deep .strategy-trace-band {
grid-area: trace;
width: 100%;
}
/* ── Strategy reveal — surfaces drift in gently, staggered ──────
Every element inside a strategy block (stats, sparklines, bar
rows, items, embeds) fades up from opacity:0 + translateY:8px
with a staggered delay so the strategy doesn't slam in all at
once. The reveal is paced to land AFTER her prose settles, so
the user reads her words first, then watches the content drift
into being beneath them. */
/* "Released from the void" — surfaces drift up from below with a
slight blur that clears, opacity climbing linearly. Tightened
from 2200ms → 1600ms (Jake judged 2.2s a touch slow) but still
gentle enough to read as emergence rather than appearance. */
@keyframes strategySurfaceIn {
from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Fade-OUT for surfaces leaving — when a class .leaving is added to
any strategy surface, it reverses the emerge (drift down + blur
up + fade) before being removed from the DOM. The renderer adds
this class, waits the duration, then removes the node. Without
it, surfaces just disappear instantly when a new response lands. */
@keyframes strategySurfaceOut {
from { opacity: 1; transform: translateY(0); filter: blur(0); }
to { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}
.strategy-primary,
.strategy-evidence .strategy-stat,
.strategy-evidence-rail .strategy-stat,
.strategy-hero,
.strategy-trace-element,
.strategy-trace-band,
.strategy-items .split-item,
.strategy-bar-row {
opacity: 0;
animation: strategySurfaceIn 1600ms linear both;
}
/* Defense-in-depth: even if .leaving is ever applied to a message again,
it must NEVER drift up toward the orb (that was the fly-up). Pure fade,
no transform. The clone-layer that used this is removed (see loryn.js). */
.atrium-msg-loryn.leaving {
animation: none;
opacity: 0;
transition: opacity 360ms ease;
}
/* Layer that holds cloned leaving content — positioned absolutely
over the same space so the new content can fade in beneath/over
it without layout shift. Pointer-events off so it can't intercept
clicks meant for the new offers. */
.atrium-leaving-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
padding: 24px 40px 220px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Per-position delays — first surface lands ~600ms after the
strategy mounts, then each successor staggers ~220ms behind. */
.strategy-primary,
.strategy-hero {
animation-delay: 600ms;
}
.strategy-evidence .strategy-stat:nth-child(1),
.strategy-evidence-rail .strategy-stat:nth-child(1) { animation-delay: 750ms; }
.strategy-evidence .strategy-stat:nth-child(2),
.strategy-evidence-rail .strategy-stat:nth-child(2) { animation-delay: 970ms; }
.strategy-evidence .strategy-stat:nth-child(3),
.strategy-evidence-rail .strategy-stat:nth-child(3) { animation-delay: 1190ms; }
.strategy-evidence .strategy-stat:nth-child(4),
.strategy-evidence-rail .strategy-stat:nth-child(4) { animation-delay: 1410ms; }
.strategy-evidence .strategy-stat:nth-child(5),
.strategy-evidence-rail .strategy-stat:nth-child(5) { animation-delay: 1630ms; }
.strategy-trace-element,
.strategy-trace-band {
animation-delay: 900ms;
}
.strategy-items .split-item:nth-child(1) { animation-delay: 750ms; }
.strategy-items .split-item:nth-child(2) { animation-delay: 1020ms; }
.strategy-items .split-item:nth-child(3) { animation-delay: 1290ms; }
/* Bar rows stagger ~160ms apart. */
.strategy-bar-chart .strategy-bar-row:nth-child(1) { animation-delay: 1000ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(2) { animation-delay: 1160ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(3) { animation-delay: 1320ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(4) { animation-delay: 1480ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(5) { animation-delay: 1640ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(6) { animation-delay: 1800ms; }
.strategy-bar-chart .strategy-bar-row:nth-child(7) { animation-delay: 1960ms; }
/* ── Stat element — used across strategies ─────────────────────── */
.strategy-stat {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.strategy-stat-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.55);
}
.strategy-stat-value {
font-size: 22px;
font-weight: 500;
color: rgba(232, 240, 255, 0.96);
font-feature-settings: "tnum" 1;
letter-spacing: 0.002em;
}
.strategy-stat-sub {
font-size: 11px;
color: rgba(150, 170, 200, 0.6);
}
.strategy-stat.tone-good .strategy-stat-value { color: rgba(170, 210, 255, 0.98); }
.strategy-stat.tone-bad .strategy-stat-value { color: rgba(232, 240, 255, 0.88); }
/* Hero-sized stat (anchor primary): much larger */
.strategy-stat.size-hero {
align-items: center;
text-align: center;
gap: 8px;
}
.strategy-stat.size-hero .strategy-stat-value { font-size: 56px; font-weight: 400; letter-spacing: -0.01em; }
.strategy-stat.size-hero .strategy-stat-label { font-size: 11px; }
.strategy-stat.size-hero .strategy-stat-sub { font-size: 12px; margin-top: 2px; }
/* Mega-sized stat (deep hero): even larger */
.strategy-stat.size-mega .strategy-stat-value { font-size: 64px; font-weight: 400; letter-spacing: -0.012em; }
.strategy-stat.size-mega .strategy-stat-label { font-size: 11.5px; }
/* ── Sparkline ─────────────────────────────────────────────────── */
.strategy-sparkline {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.strategy-sparkline-label {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.55);
text-align: center;
}
.strategy-sparkline-value {
font-size: 14px;
color: rgba(232, 240, 255, 0.85);
text-align: center;
font-feature-settings: "tnum" 1;
}
.strategy-sparkline-sub {
font-size: 11px;
color: rgba(150, 170, 200, 0.55);
text-align: center;
}
.strategy-sparkline svg { display: block; }
/* ── Bar chart ─────────────────────────────────────────────────── */
.strategy-bar-chart {
display: flex;
flex-direction: column;
gap: 11px;
width: 100%;
}
.strategy-bar-title {
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.65);
border-bottom: 1px solid rgba(122, 184, 245, 0.10);
padding-bottom: 9px;
margin-bottom: 6px;
text-align: center;
}
.strategy-bar-row {
display: grid;
grid-template-columns: 70px 1fr 100px;
align-items: center;
gap: 14px;
}
.strategy-bar-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.65);
}
.strategy-bar-track {
height: 6px;
background: rgba(122, 184, 245, 0.05);
border-radius: 3px;
overflow: hidden;
}
.strategy-bar-fill {
height: 100%;
background: rgba(122, 184, 245, 0.45);
border-radius: 3px;
}
.strategy-bar-track.tone-good .strategy-bar-fill { background: rgba(170, 210, 255, 0.72); }
.strategy-bar-track.tone-bad .strategy-bar-fill { background: rgba(232, 210, 210, 0.42); }
.strategy-bar-value {
font-size: 12.5px;
color: rgba(232, 240, 255, 0.86);
text-align: right;
font-feature-settings: "tnum" 1;
}
/* ── Embed mount placeholder ───────────────────────────────────── */
.strategy-embed {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.strategy-embed-title {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(150, 170, 200, 0.55);
text-align: center;
}
.strategy-embed-mount { min-height: 80px; }
/* When a strategy block is present, the chamber-workstation below
it has no role — keep it from claiming flex space. */
.atrium-msg-loryn:has(.strategy) ~ .chamber-workstation,
body.in-atrium .atrium-msg-loryn:has(.strategy) ~ .chamber-workstation {
display: none;
}