/* ═══════════════════════════════════════════════════════════════ VERIDOM — motion system The motion language is the product's own: establishment, refusal, propagation, sealing. Nothing here decorates; every transition expresses a state change. All of it stops under reduced-motion. ═══════════════════════════════════════════════════════════════ */ /* ── preloader ────────────────────────────────────────────────── */ .boot { position: fixed; inset: 0; z-index: 4000; background: var(--vault); display: grid; place-items: center; } .boot-in { display: flex; flex-direction: column; align-items: center; gap: 30px; } .boot svg { width: 46px; height: 51px; overflow: visible; } .boot .hx { stroke: var(--gold); stroke-width: 3; fill: none; stroke-dasharray: 230; stroke-dashoffset: 230; } .boot .hv { stroke: var(--gold); stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 76; stroke-dashoffset: 76; } .boot .hb { stroke: var(--gold); stroke-width: 2.6; opacity: 0; } .boot .hd { fill: var(--gold); opacity: 0; } .boot-line { display: flex; gap: 22px; align-items: baseline; font-family: var(--mono); font-size: 9.5px; letter-spacing: .38em; text-transform: uppercase; color: var(--label); } .boot-n { color: var(--gold); min-width: 3ch; text-align: right; letter-spacing: .14em; } .boot-bar { width: 190px; height: 1px; background: var(--border); position: relative; overflow: hidden; } .boot-bar i { position: absolute; inset: 0 100% 0 0; background: var(--gold); } html.booting, html.booting body { overflow: hidden; } /* ── custom cursor ────────────────────────────────────────────── */ .cur, .cur-d { position: fixed; top: 0; left: 0; z-index: 3500; pointer-events: none; will-change: transform; } .cur { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold-lt); mix-blend-mode: normal; } .cur-d { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(184,137,42,.5); transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .3s; } .cur-d.is-hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--gold); background: rgba(184,137,42,.09); } .cur-d.is-hidden, .cur.is-hidden { opacity: 0; } @media (hover: none), (pointer: coarse) { .cur, .cur-d { display: none; } } /* ── hero field canvas ────────────────────────────────────────── */ .field-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); } .field-canvas.is-on { opacity: 1; } .hero, .alex-hero { position: relative; } .hero > .wrap, .alex-hero > .wrap { position: relative; z-index: 1; } /* ── masked line reveal ───────────────────────────────────────── */ .ln { display: block; overflow: hidden; } .ln > span { display: block; will-change: transform; } /* JS sets .anim on once GSAP is driving. Without it everything is visible by default, so the page is never blank if a script fails. */ html.anim .ln > span { transform: translateY(105%); } html.anim .fx { opacity: 0; } html.anim .fx-up { opacity: 0; transform: translateY(26px); } /* ── scroll progress rail ─────────────────────────────────────── */ .rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1100; background: transparent; pointer-events: none; } .rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold-lt)); } /* ── movement indicator (five movements) ──────────────────────── */ .moves { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 1050; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } .moves.is-on { opacity: 1; visibility: visible; } .moves button { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: transparent; transition: color .3s var(--ease); } .moves button i { width: 20px; height: 1px; background: var(--rail); display: block; transition: width .4s var(--ease), background .4s var(--ease); } .moves button:hover { color: var(--label); } .moves button:hover i { width: 30px; } .moves button[aria-current="true"] { color: var(--gold); } .moves button[aria-current="true"] i { width: 38px; background: var(--gold); } @media (max-width: 1180px) { .moves { display: none; } } /* ── magnetic buttons ─────────────────────────────────────────── */ .btn { position: relative; overflow: hidden; will-change: transform; } .btn > * { position: relative; z-index: 1; } .btn--primary::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-120%); } .btn--ghost::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .42s var(--ease); } .btn--ghost:hover { color: var(--vault); border-color: var(--gold); } .btn--ghost:hover::before { transform: scaleY(1); } /* ── link underline sweep ─────────────────────────────────────── */ .tlink { position: relative; border-bottom-color: transparent; } .tlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .42s var(--ease); } .tlink::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-dim); } .tlink:hover::after { transform: scaleX(1); } /* ── card hover: a governed edge lights ───────────────────────── */ .cardx, .failcard, .door, .surface-cell, .gate { position: relative; } .cardx::after, .failcard::after, .door::after, .surface-cell::after, .gate::after { content: ''; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .cardx:hover::after, .failcard:hover::after, .door:hover::after, .surface-cell:hover::after, .gate:hover::after { transform: scaleX(1); } /* ── signal strip ─────────────────────────────────────────────── */ .signal-cell { position: relative; overflow: hidden; } .signal-cell strong { display: block; } /* ── theatre motion ───────────────────────────────────────────── */ .stage-btn { overflow: hidden; } .stage-btn .prog { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; opacity: .5; } .trace li, .known li { will-change: transform, opacity; } .case-live::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .chip { transition: transform .3s var(--ease), border-color .3s, color .3s; } /* refusal stamp */ .record { position: relative; overflow: hidden; } .record::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: currentColor; opacity: 0; } /* ── counters ─────────────────────────────────────────────────── */ .gate-n { font-variant-numeric: tabular-nums; } /* ── section entrance for headings ────────────────────────────── */ .eyebrow { overflow: hidden; } .eyebrow::after { transform-origin: left; } /* ── reduced motion: everything settles ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html.anim .ln > span, html.anim .fx, html.anim .fx-up { transform: none !important; opacity: 1 !important; } .boot { display: none !important; } .cur, .cur-d, .field-canvas { display: none !important; } .moves { display: none !important; } .btn--primary::after { display: none; } } /* ── hero field host ──────────────────────────────────────────── */ .field-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .field-host::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 22%, var(--vault) 78%); } .hero { overflow: hidden; } /* ── Lenis: required, and it must win over native smooth scroll ── Without this the browser's own scroll-behavior:smooth fights Lenis on every frame and the result reads as stutter. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ── scroll cue ───────────────────────────────────────────────── */ .cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--label); } .cue i { display: block; width: 1px; height: 44px; background: linear-gradient(180deg, var(--gold), transparent); } @media (max-width: 760px) { .cue { display: none; } } /* ── aging counter (section 01) ───────────────────────────────── */ .aging { display: flex; align-items: baseline; gap: 18px; margin-top: 30px; } .aging-n { font-family: var(--serif); font-size: clamp(3.4rem, 9vw, 7rem); line-height: .9; color: var(--blocked); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .aging-k { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--label); max-width: 20ch; line-height: 1.7; } .aging-bar { height: 1px; background: var(--border); margin-top: 22px; position: relative; overflow: hidden; } .aging-bar i { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--gold-dim), var(--blocked)); } /* ── theatre: pinned scroll-scrub ─────────────────────────────── */ .theatre-pin { position: relative; } .stage-btn { position: relative; } .stage-btn .sprog { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; } .scrub-hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); display: flex; align-items: center; gap: 10px; margin-top: 18px; } .scrub-hint i { width: 26px; height: 1px; background: var(--gold-dim); display: block; } /* ── compounding bars (section 07) ────────────────────────────── */ .bars { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; } .bar-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; } .bar-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); } .bar-t { height: 30px; background: rgba(38,44,58,.5); position: relative; overflow: hidden; } .bar-t i { position: absolute; inset: 0 100% 0 0; display: block; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } .bar-t.is-two i { background: linear-gradient(90deg, var(--established-deep), var(--established)); } .bar-t span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--parchment); z-index: 1; } .bars-note { font-size: 13px; color: var(--label); margin-top: 16px; max-width: 52ch; line-height: 1.6; } /* ── superseded line demo (section 04) ────────────────────────── */ .supersede { border: 1px solid var(--border); background: var(--card); padding: 22px; margin-top: 30px; } .sup-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 12px 0; font-size: 14px; color: var(--silver); border-bottom: 1px solid rgba(38,44,58,.6); } .sup-row:last-child { border-bottom: 0; } .sup-row .doc { position: relative; } .sup-row .doc::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: var(--blocked); transform: scaleX(0); transform-origin: left; } .sup-row.is-dead { color: var(--label); } .sup-row.is-live { color: var(--parchment); } /* ── live dot ─────────────────────────────────────────────────── */ .livedot { display: inline-flex; align-items: center; gap: 9px; } .livedot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--established); box-shadow: 0 0 0 0 rgba(61,158,106,.5); } /* ── clip-wipe reveal ─────────────────────────────────────────── */ html.anim [data-wipe] { clip-path: inset(0 100% 0 0); } @media (prefers-reduced-motion: reduce) { html.anim [data-wipe] { clip-path: none !important; } .cue { display: none; } } /* superseded line is struck through once the section is read */ .supersede.is-struck .sup-row.is-dead .doc::after { transform: scaleX(1); transition: transform .7s cubic-bezier(.22,1,.36,1); } /* ═══ NARRATIVE COMPONENTS (build/ flow, Veridom identity) ═══════ */ /* ── the four contrasts ───────────────────────────────────────── */ .contrasts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .contrast { background: var(--surface); padding: clamp(28px,3.2vw,44px); display: flex; flex-direction: column; gap: 14px; transition: background .45s var(--ease); } .contrast:hover { background: var(--card); } .contrast h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem,2.3vw,1.95rem); line-height: 1.18; color: var(--parchment); } .contrast h3 .neg { color: var(--label); position: relative; display: inline-block; white-space: nowrap; } .contrast h3 .neg::after { content: ''; position: absolute; left: -.04em; right: -.04em; top: 55%; height: 1px; background: var(--blocked); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .contrast.is-on h3 .neg::after { transform: scaleX(1); } .contrast .lead { font-size: 15px; color: var(--cream); line-height: 1.6; } .contrast p { font-size: 14px; color: var(--silver); line-height: 1.62; } @media (max-width: 800px) { .contrasts { grid-template-columns: 1fr; } } /* ── the compounding chain ────────────────────────────────────── */ .chain { position: relative; margin-top: clamp(34px,4vw,54px); } .chain-track { position: absolute; left: 0; right: 0; top: 42px; height: 1px; background: var(--border); } .chain-track i { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } .chain-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; position: relative; } .chain-node { padding: 0 14px 0 0; } .chain-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--vault); border: 1px solid var(--rail); margin: 37px 0 20px; position: relative; z-index: 1; transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); } .chain-node.is-on .chain-dot { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(184,137,42,.14); } .chain-k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); } .chain-v { font-family: var(--sans); font-size: 14.5px; color: var(--parchment); line-height: 1.35; margin-top: 8px; } @media (max-width: 900px) { .chain-row { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .chain-track { display: none; } .chain-dot { margin-top: 0; } } @media (max-width: 520px) { .chain-row { grid-template-columns: 1fr; } } /* ── five responsibilities: compact strip ─────────────────────── */ .resp { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .resp-cell { background: var(--deep); padding: 24px 20px; } .resp-cell .n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--gold); } .resp-cell h4 { font-family: var(--sans); font-weight: 400; font-size: 16px; color: var(--parchment); margin: 12px 0 8px; } .resp-cell p { font-size: 13px; color: var(--silver); line-height: 1.55; } @media (max-width: 900px) { .resp { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .resp { grid-template-columns: 1fr; } } /* ── outcomes ─────────────────────────────────────────────────── */ .outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .outcome { background: var(--card); padding: clamp(26px,3vw,40px); } .outcome .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .outcome h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem,2vw,1.6rem); line-height: 1.22; color: var(--parchment); margin: 18px 0 12px; max-width: 22ch; } .outcome p { font-size: 14.5px; color: var(--silver); line-height: 1.62; } @media (max-width: 800px) { .outcomes { grid-template-columns: 1fr; } } /* ── deliverables list ────────────────────────────────────────── */ .deliver { list-style: none; margin-top: 26px; } .deliver li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--silver); line-height: 1.5; } .deliver li::before { content: '\2192'; font-family: var(--mono); font-size: 11px; color: var(--gold); } /* ── pinned theatre must fit the viewport ───────────────────────── Unpinned the panel is 938px tall. Pinned in a 900px viewport that leaves a third of the case off-screen for the whole scrub, so the pinned state trims its own vertical padding to fit. */ .theatre.is-pinned .case { min-height: 0; } .theatre.is-pinned .case-head { padding: 15px 22px 12px; } .theatre.is-pinned .case-head h3 { font-size: clamp(1.05rem,1.6vw,1.32rem); } .theatre.is-pinned .case-head p { margin-top: 7px; font-size: 13px; } .theatre.is-pinned .case-meta > div { padding: 10px 20px; } .theatre.is-pinned .case-body { padding: 14px 22px; gap: 22px; } .theatre.is-pinned .case-col h4 { margin-bottom: 9px; } .theatre.is-pinned .trace li { padding: 4px 0; } .theatre.is-pinned .known li { padding: 5px 0; } .theatre.is-pinned .ask { padding: 12px 22px 14px; } .theatre.is-pinned .ask-k { margin-bottom: 9px; } .theatre.is-pinned .ask-a { margin-top: 10px; padding: 11px 16px; font-size: 13.5px; } .theatre.is-pinned .stage-btn { padding: 14px 22px; }