/* ------------------------------------------------------------------ * * Design tokens * ------------------------------------------------------------------ */ :root { --bg: #0b0e12; --text: #e8ebee; --text-dim: #a3acb4; /* secondary prose */ --text-faint: #828b93; /* small labels, meta (kept AA-legible) */ --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); /* Three accents, used sparingly across the page: primary soft electric blue — links, activation, the energy front secondary deep cyan — structure: ids, the flow spine highlight subtle violet — reserved for the rarest moments */ --blue: #6fa8ff; --cyan: #57c3d4; --violet: #9d8cf5; /* Warm gold is spent on one meaning only: Reality, the world being observed. */ --gold: #e6b877; --blue-glow: rgba(111, 168, 255, 0.55); --blue-quiet: rgba(111, 168, 255, 0.40); --cyan-quiet: rgba(87, 195, 212, 0.34); --violet-glow: rgba(157, 140, 245, 0.45); --accent: var(--blue); --accent-quiet: var(--blue-quiet); --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --section-y: clamp(6rem, 15vh, 12rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ------------------------------------------------------------------ * * Reset & base * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; font-family: var(--sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Lock the page while the boot sequence plays (JS adds this on ). */ .booting { overflow: hidden; } /* ------------------------------------------------------------------ * * Accessibility — skip link & focus * ------------------------------------------------------------------ */ .skip-link { position: fixed; left: 1rem; top: -4rem; padding: 0.65rem 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: 3px; z-index: 100; transition: top 0.2s var(--ease); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * Documentation pages * ------------------------------------------------------------------ */ .doc-body { min-height: 100vh; } .doc-header, .doc-main, .doc-footer { width: min(100% - 2rem, 76ch); margin-inline: auto; } .doc-header { padding: 2rem 0 1rem; } .doc-home { color: var(--text); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase; } .doc-main { padding: 2rem 0 5rem; } .doc-content h2, .doc-content h3, .doc-content h4 { color: var(--text); line-height: 1.2; margin: 2.5rem 0 1rem; } .doc-content h2 { font-size: clamp(1.9rem, 1.45rem + 1.8vw, 3rem); } .doc-content h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem); } .doc-content h4 { font-size: 1.05rem; } .doc-content p, .doc-content li { color: var(--text-dim); } .doc-content a { color: var(--blue); } .doc-content code { font-family: var(--mono); color: var(--text); } .doc-content pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); } .doc-footer { padding: 2rem 0; border-top: 1px solid var(--line); color: var(--text-faint); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ------------------------------------------------------------------ * * Shared type helpers * ------------------------------------------------------------------ */ .dim { color: var(--text-dim); } .section-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); font-weight: 400; margin: 0; } .section-label { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); } /* ------------------------------------------------------------------ * * Reveal-on-scroll * Hidden state is scoped to `.anim`, added by forge.js only when motion * is welcome. If the script never runs, nothing is hidden. * ------------------------------------------------------------------ */ .anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; } .anim .reveal.is-visible { opacity: 1; transform: none; } /* ================================================================== * * AMBIENT — background field * Distant stars, faint light shafts and a slow atmospheric fog, fixed * behind all content and ignoring the pointer. * ================================================================== */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } main, .footer { position: relative; z-index: 1; } /* Continuous motion is gated behind `.alive` (forge.js, only when motion is welcome). Under reduced motion the field is still present, just static. `.paused` (set while the tab is hidden) freezes all animation. */ .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; } /* -- Star field -------------------------------------------------------- * forge.js generates hundreds of stars across three depth layers. This CSS fallback draws a static sky when JavaScript is unavailable, and is retired the moment the generated field is built. */ .ambient__stars { position: absolute; inset: -55% -10%; opacity: 0.9; } :root:not(.stars-js) .ambient__stars { background-repeat: repeat; background-image: radial-gradient(1.4px 1.4px at 15% 22%, rgba(238, 246, 255, 0.95), transparent 60%), radial-gradient(1.1px 1.1px at 62% 42%, rgba(206, 224, 255, 0.75), transparent 60%), radial-gradient(1.7px 1.7px at 84% 74%, rgba(234, 244, 255, 0.9), transparent 60%), radial-gradient(1.1px 1.1px at 34% 88%, rgba(200, 220, 255, 0.65), transparent 60%), radial-gradient(1.5px 1.5px at 47% 12%, rgba(238, 246, 255, 0.85), transparent 60%), radial-gradient(1px 1px at 8% 60%, rgba(210, 228, 255, 0.6), transparent 60%); background-size: 300px 300px, 250px 250px, 380px 380px, 320px 320px, 270px 270px, 210px 210px; } /* Generated depth layers; each parallaxes at its own rate (forge.js). */ .ambient__starlayer { position: absolute; inset: -55% -10%; will-change: transform; } .star { position: absolute; border-radius: 50%; opacity: var(--o, 0.6); } .alive .star--tw { animation: star-twinkle var(--d, 10s) ease-in-out var(--delay, 0s) infinite; } .alive .star--dr { animation: star-drift var(--d, 60s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes star-twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.32); } } @keyframes star-drift { to { transform: translate3d(var(--dx, 0), var(--dy, 0), 0); } } /* -- Nebula: diffuse light that slowly evolves ------------------------- * Softness comes from the radial gradients themselves — no `filter: blur`, which is too costly to animate on large surfaces at high DPI. */ .ambient__nebula { position: absolute; inset: 0; will-change: transform; } .ambient__nebula::before, .ambient__nebula::after { content: ""; position: absolute; border-radius: 50%; } .ambient__nebula::before { width: 88vw; height: 74vh; left: -12vw; top: -18vh; background: radial-gradient(closest-side, rgba(56, 102, 178, 0.08), transparent 78%); } .ambient__nebula::after { width: 66vw; height: 58vh; right: -12vw; top: 6vh; background: radial-gradient(closest-side, rgba(138, 120, 232, 0.06), transparent 78%); } .alive .ambient__nebula::before { animation: nebula-a 74s ease-in-out infinite alternate; } .alive .ambient__nebula::after { animation: nebula-b 98s ease-in-out infinite alternate; } @keyframes nebula-a { 0% { transform: translate3d(-2%, -1%, 0); opacity: 0.6; } 100% { transform: translate3d(3%, 2%, 0); opacity: 1; } } @keyframes nebula-b { 0% { transform: translate3d(2%, 1%, 0); opacity: 1; } 100% { transform: translate3d(-3%, -2%, 0); opacity: 0.55; } } /* -- Vertical light shafts ---------------------------------------------- */ .ambient__shafts { position: absolute; inset: 0; will-change: transform; } .ambient__shafts::before, .ambient__shafts::after { content: ""; position: absolute; top: -45%; height: 190%; width: 34vw; opacity: 0.5; } .ambient__shafts::before { left: 14%; background: linear-gradient(90deg, transparent, rgba(111, 168, 255, 0.045) 50%, transparent); transform: skewX(-6deg); } .ambient__shafts::after { right: 10%; background: linear-gradient(90deg, transparent, rgba(157, 140, 245, 0.035) 50%, transparent); transform: skewX(5deg); } .alive .ambient__shafts::before { animation: shaft-breathe 30s ease-in-out infinite; } .alive .ambient__shafts::after { animation: shaft-breathe 42s ease-in-out infinite 7s; } @keyframes shaft-breathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.62; } } /* -- Page-wide breath ---------------------------------------------------- */ .ambient__breath { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 40%, rgba(122, 152, 214, 0.022), transparent 72%); opacity: 0.4; } .alive .ambient__breath { animation: page-breath 27s ease-in-out infinite; } @keyframes page-breath { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* -- Fog: a second, deeper haze drifting on its own clock --------------- * Softness is gradient-native (no blur filter, costly to animate at this size). Sits between the nebula and the stars. */ .ambient__fog { position: absolute; inset: -10%; opacity: 0.5; background: radial-gradient(60% 42% at 22% 30%, rgba(70, 116, 190, 0.05), transparent 70%), radial-gradient(52% 46% at 78% 66%, rgba(96, 150, 205, 0.045), transparent 72%), radial-gradient(48% 40% at 50% 88%, rgba(120, 108, 200, 0.035), transparent 74%); will-change: transform, opacity; } .alive .ambient__fog { animation: fog-drift 120s ease-in-out infinite alternate; } @keyframes fog-drift { 0% { transform: translate3d(-2%, 1%, 0) scale(1.02); opacity: 0.35; } 100% { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 0.62; } } /* -- Constellation links: canvas forge.js draws briefly-lit lines onto -- */ .ambient__links { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; } /* -- Beam: a centred vertical column in three parts — a wide volumetric glow, a fine bright core, and a rising pulse that crosses it now and then. */ .ambient__beam { position: absolute; top: -8%; bottom: -8%; left: 50%; width: clamp(180px, 24vw, 420px); transform: translateX(-50%); will-change: opacity, transform; opacity: 0.9; } .ambient__beam > span { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); display: block; } /* Volumetric body: a soft vertical band, fading out at top and bottom. */ .ambient__beam-glow { width: 100%; background: linear-gradient(to bottom, transparent, rgba(87, 195, 212, 0.85) 34%, rgba(111, 168, 255, 0.85) 62%, transparent), radial-gradient(50% 60% at 50% 50%, rgba(87, 168, 220, 0.10), transparent 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity: 0.16; } /* Fine core: a hairline of concentrated light down the exact centre. */ .ambient__beam-core { width: 2px; background: linear-gradient( to bottom, transparent, rgba(157, 140, 245, 0.35) 12%, rgba(120, 205, 224, 0.85) 42%, rgba(150, 200, 255, 0.9) 60%, rgba(111, 168, 255, 0.5) 82%, transparent ); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); opacity: 0.5; box-shadow: 0 0 12px rgba(111, 168, 255, 0.25); } /* Rising pulse: a soft node of light travelling up the core. */ .ambient__beam-pulse { width: 3px; height: 22%; top: auto; bottom: 0; background: linear-gradient(to top, transparent, rgba(190, 230, 255, 0.9), transparent); border-radius: 2px; opacity: 0; } /* Two independent slow cycles so the beam never looks the same twice. */ .alive .ambient__beam-glow { animation: beam-breath-glow 24s ease-in-out infinite; } .alive .ambient__beam-core { animation: beam-breath-core 31s ease-in-out infinite; } .alive .ambient__beam-pulse { animation: beam-rise 19s ease-in-out infinite; } @keyframes beam-breath-glow { 0%, 100% { opacity: 0.11; } 50% { opacity: 0.22; } } @keyframes beam-breath-core { 0%, 100% { opacity: 0.40; } 50% { opacity: 0.62; } } @keyframes beam-rise { 0% { bottom: 0%; opacity: 0; } 6% { opacity: 0.7; } 40% { opacity: 0.5; } 52% { bottom: 100%; opacity: 0; } 100% { bottom: 100%; opacity: 0; } } /* When the boot sequence reaches "System ready.", the beam brightens then settles. */ .beam-charged .ambient__beam { opacity: 1; transition: opacity 2.4s var(--ease); } .beam-charged .ambient__beam-core { animation: beam-charge 2.6s var(--ease) forwards; } .beam-charged .ambient__beam-glow { animation: beam-charge-glow 2.6s var(--ease) forwards; } @keyframes beam-charge { 0% { opacity: 0.5; } 35% { opacity: 1; box-shadow: 0 0 26px rgba(150, 210, 255, 0.6); } 100% { opacity: 0.6; box-shadow: 0 0 12px rgba(111, 168, 255, 0.25); } } @keyframes beam-charge-glow { 0% { opacity: 0.16; } 35% { opacity: 0.42; } 100% { opacity: 0.18; } } /* -- Motes: microscopic suspended points drifting on their own vectors -- */ .ambient__motes { position: absolute; inset: 0; } .mote { position: absolute; width: var(--m, 2px); height: var(--m, 2px); border-radius: 50%; background: radial-gradient(circle, rgba(198, 224, 255, 0.9), rgba(160, 200, 240, 0.15) 55%, transparent 72%); opacity: 0; will-change: transform, opacity; } .alive .mote { animation: mote-drift var(--md, 60s) linear var(--delay, 0s) infinite, mote-fade var(--mf, 30s) ease-in-out var(--delay, 0s) infinite; } @keyframes mote-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx, 20px), var(--dy, -30px), 0); } } @keyframes mote-fade { 0%, 100% { opacity: 0; } 50% { opacity: var(--mo, 0.5); } } /* -- Energy currents: faint flowing strokes near the bottom of the field -- */ .ambient__currents { position: absolute; left: -5%; right: -5%; bottom: 0; width: 110%; height: min(34vh, 300px); opacity: 0.5; } .current { stroke-width: 1; stroke-dasharray: 3 26; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.5; } .alive .current { animation: current-flow linear infinite; } .alive .current:nth-child(1) { animation-duration: 46s; opacity: 0.55; } .alive .current:nth-child(2) { animation-duration: 62s; opacity: 0.40; } .alive .current:nth-child(3) { animation-duration: 54s; opacity: 0.32; } @keyframes current-flow { to { stroke-dashoffset: -290; } } /* ================================================================== * * SOUND CONTROL * ================================================================== */ .sound { position: fixed; top: clamp(0.9rem, 2.4vw, 1.4rem); right: clamp(0.9rem, 2.4vw, 1.4rem); z-index: 60; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text-faint); background: rgba(11, 14, 18, 0.35); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color 0.5s var(--ease), border-color 0.5s var(--ease), opacity 0.5s var(--ease); } .no-js .sound { display: none; } /* the control does nothing without JS */ .sound:hover, .sound:focus-visible { color: var(--cyan); border-color: var(--cyan-quiet); } .sound__icon { display: block; overflow: visible; } .sound__body { fill: currentColor; stroke: none; } .sound__wave { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: opacity 0.4s var(--ease); } .alive .sound:not(.is-muted) .sound__wave--1 { animation: wave-breath 3.6s ease-in-out infinite; } .alive .sound:not(.is-muted) .sound__wave--2 { animation: wave-breath 3.6s ease-in-out infinite 0.5s; } @keyframes wave-breath { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .sound__slash { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: 0; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 0.35s var(--ease), opacity 0.2s var(--ease); } .sound.is-muted { color: var(--text-faint); opacity: 0.72; } .sound.is-muted .sound__wave { opacity: 0.12; } .sound.is-muted .sound__slash { opacity: 1; stroke-dashoffset: 0; } /* ================================================================== * * HERO * ================================================================== */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8rem 1.5rem 6rem; } .hero__inner { max-width: 46rem; width: 100%; min-width: 0; will-change: transform, opacity; /* settles and fades on scroll (forge.js) */ } .hero__title { position: relative; margin: 0; font-weight: 500; font-size: clamp(2.4rem, 10vw, 6rem); line-height: 1.04; letter-spacing: 0.14em; text-transform: uppercase; text-indent: 0.14em; /* balances the wide tracking's right edge */ overflow-wrap: break-word; color: var(--text); } /* Two layers clipped to the letterforms: a cool vertical gradient reads as an engraved edge; a diagonal highlight band sweeps across once the page awakens. Guarded by @supports so unsupported browsers keep the solid fill. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero__title { background-image: linear-gradient(115deg, transparent 38%, rgba(214, 232, 255, 0.55) 50%, transparent 62%), linear-gradient(180deg, #f5f8fb 0%, #d7dee7 44%, #eef3f8 58%, #c6cfd9 100%); background-size: 240% 100%, 100% 100%; background-position: 150% 0, 0 0; /* highlight parked off to the right */ background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 -1px 0 rgba(180, 205, 255, 0.10)); } .booted .hero__title { animation: hero-sheen 3s var(--ease) 0.5s 1 forwards; } } @keyframes hero-sheen { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } } .hero__subtitle { margin: 1.75rem 0 0; font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-weight: 400; letter-spacing: 0.04em; color: var(--text-dim); } .hero__creed { margin: clamp(3rem, 8vh, 5rem) auto 0; max-width: 34rem; font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.9; } .hero__creed span { display: block; } .hero__creed .dim { margin: 0.35rem 0; } .hero__status { margin: clamp(3rem, 8vh, 5rem) 0 0; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); } .hero__more { margin: 2.75rem 0 0; } .anchor { display: inline-flex; align-items: baseline; gap: 0.6em; color: var(--text); text-decoration: none; font-size: 0.98rem; letter-spacing: 0.02em; padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); transition: color 0.5s var(--ease), border-color 0.5s var(--ease); } .anchor:hover, .anchor:focus-visible { color: var(--accent); border-bottom-color: var(--accent-quiet); } .anchor__mark { font-size: 0.85em; transition: transform 0.6s var(--ease); } .anchor:hover .anchor__mark { transform: translateY(3px); } /* ================================================================== * * ARCHITECTURE STATEMENT * ================================================================== */ .statement { padding: var(--section-y) 1.5rem; display: flex; justify-content: center; } .statement__quote { margin: 0; max-width: 30rem; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 4.6vw, 2.85rem); line-height: 1.4; letter-spacing: 0.005em; color: var(--text); } .statement__quote span { display: block; } .anim .statement__quote.reveal span { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .anim .statement__quote.reveal.is-visible span { opacity: 1; transform: none; } .anim .statement__quote.reveal.is-visible span:nth-child(2) { transition-delay: 0.22s; } .anim .statement__quote.reveal.is-visible span:nth-child(3) { transition-delay: 0.44s; } /* ================================================================== * * ARCHITECTURE FLOW * ================================================================== */ .flow { padding: var(--section-y) 1.5rem; } .flow__list { list-style: none; margin: 0 auto; padding: 0; max-width: 22rem; position: relative; } /* Spine: a hairline the stages hang from, illuminating downward once the flow enters view. */ .flow__list::before { content: ""; position: absolute; left: 50%; top: 0.4rem; bottom: 0.4rem; width: 1px; transform: translateX(-50%) scaleY(0); transform-origin: top; background: linear-gradient( to bottom, var(--cyan-quiet), var(--blue-quiet) 88%, var(--blue) ); transition: transform 2.6s var(--ease); } .anim .flow__list.reveal.is-visible::before, .no-js .flow__list::before, html:not(.anim) .flow__list::before { transform: translateX(-50%) scaleY(1); } /* Energy front: a point of light descending the spine, arriving at each stage as it appears. */ .flow__list::after { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--blue); box-shadow: 0 0 6px 1px rgba(111, 168, 255, 0.40), 0 0 14px 4px rgba(87, 195, 212, 0.12); opacity: 0; } .anim .flow__list.reveal.is-visible::after { animation: flow-beam 2.6s var(--ease) forwards; } @keyframes flow-beam { 0% { top: 0%; opacity: 0; } 6% { opacity: 0.85; } 94% { opacity: 0.85; } 100% { top: 100%; opacity: 0; } } /* Pulses sent down the spine at randomised intervals (forge.js). */ .flow__pulse { position: absolute; left: 50%; top: 0; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--blue); box-shadow: 0 0 6px 1px rgba(111, 168, 255, 0.38), 0 0 13px 3px rgba(87, 195, 212, 0.10); opacity: 0; pointer-events: none; } @keyframes flow-pulse-travel { 0% { top: 0%; opacity: 0; } 12% { opacity: 0.8; } 88% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } } .alive .flow__list.is-visible::before { animation: spine-breath 15s ease-in-out infinite; } @keyframes spine-breath { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } } .flow__stage { position: relative; text-align: center; padding: clamp(1.5rem, 4vh, 2.4rem) 0; } .flow__dot { display: block; width: 7px; height: 7px; margin: 0 auto 0.9rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); } /* First stage (Reality): the one place the warm gold is used. */ .flow__stage:first-of-type .flow__dot { border-color: rgba(230, 184, 119, 0.55); background: var(--gold); box-shadow: 0 0 0 4px rgba(230, 184, 119, 0.06), 0 0 8px 1px rgba(230, 184, 119, 0.30); } .alive .flow__stage:first-of-type .flow__dot { animation: node-breath 13s ease-in-out infinite 1s; } /* Final stage (Readers): the one place violet touches blue. */ .flow__stage:last-of-type .flow__dot { border-color: var(--blue-quiet); background: var(--blue); box-shadow: 0 0 0 4px rgba(111, 168, 255, 0.07), 0 0 8px 1px rgba(157, 140, 245, 0.28); } .alive .flow__stage:last-of-type .flow__dot { animation: node-breath 11s ease-in-out infinite 2s; } @keyframes node-breath { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } .flow__name { display: block; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 500; letter-spacing: 0.02em; color: var(--text); } .flow__note { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-faint); letter-spacing: 0.01em; } /* Stagger each stage into view, timed to the 2.6s energy front. */ .anim .flow__list.reveal .flow__stage { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .anim .flow__list.reveal.is-visible .flow__stage { opacity: 1; transform: none; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(1) { transition-delay: 0.15s; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(2) { transition-delay: 0.58s; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(3) { transition-delay: 1.00s; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(4) { transition-delay: 1.42s; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(5) { transition-delay: 1.84s; } .anim .flow__list.reveal.is-visible .flow__stage:nth-child(6) { transition-delay: 2.24s; } /* ================================================================== * * FOUNDING DOCUMENTS * ================================================================== */ .records { padding: var(--section-y) 1.5rem; } .records__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .record { background: var(--bg); padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; text-align: center; } .record__id { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; color: var(--cyan); opacity: 0.8; } .alive .record__id { animation: accent-breath 15s ease-in-out infinite; } .alive .records__grid .record:nth-child(1) .record__id { animation-duration: 13s; animation-delay: -3s; } .alive .records__grid .record:nth-child(2) .record__id { animation-duration: 17s; animation-delay: -8s; } .alive .records__grid .record:nth-child(3) .record__id { animation-duration: 15s; animation-delay: -12s; } .alive .records__grid .record:nth-child(4) .record__id { animation-duration: 19s; animation-delay: -6s; } @keyframes accent-breath { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.52; } } .record__title { font-size: 1.2rem; font-weight: 500; color: var(--text); letter-spacing: 0.01em; } .record__status { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .record__tick { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); } /* ================================================================== * * FIRST IMPLEMENTATION * ================================================================== */ .impl { padding: var(--section-y) 1.5rem; } .impl__body { max-width: 30rem; margin: 0 auto; text-align: center; } .impl__name { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 500; letter-spacing: 0.01em; } .impl__state { margin: 1rem 0 0; display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .impl__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* An activation channel, not a progress bar: no percentage, just presence. */ .impl__track { position: relative; margin: 2.1rem auto 0; width: min(20rem, 78vw); height: 8px; background: #0d1219; border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.03); overflow: hidden; } .impl__track::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.05) calc(10% - 1px) 10% ); } .impl__fill { position: relative; display: block; height: 100%; width: 42%; background: linear-gradient(90deg, var(--cyan-quiet), var(--blue)); box-shadow: 0 0 6px rgba(111, 168, 255, 0.30); transform-origin: left; } .alive .impl__body.is-visible .impl__fill { animation: channel-breath 9s ease-in-out infinite; } @keyframes channel-breath { 0%, 100% { box-shadow: 0 0 5px rgba(111, 168, 255, 0.22); } 50% { box-shadow: 0 0 11px rgba(111, 168, 255, 0.45); } } .impl__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(205, 226, 255, 0.55), transparent ); transform: translateX(-100%); } .anim .impl__body.is-visible .impl__fill::after { animation: channel-pulse 3.4s var(--ease) infinite; } @keyframes channel-pulse { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(240%); } } .anim .impl__body.reveal .impl__fill { transform: scaleX(0); } .anim .impl__body.reveal.is-visible .impl__fill { transform: scaleX(1); transition: transform 1.9s var(--ease) 0.2s; } .impl__caption { margin: 1.5rem 0 0; font-size: 0.95rem; color: var(--text-dim); } /* Instance identity, hydrated from the runtime identity document. `--instance-accent` arrives from the instance's own theme tokens; the engine's blue is only the fallback. */ .impl__meta { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--text-dim); } .impl__nav { margin: 2.2rem 0 0; } .impl__nav-label { margin: 0 0 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .impl__capabilities { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; } .impl__capability { padding: 0.3em 0.85em; font-size: 0.82rem; color: var(--text-dim); border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.02); } /* ================================================================== * * PHILOSOPHY * ================================================================== */ .philosophy { padding: clamp(8rem, 20vh, 16rem) 1.5rem; display: flex; justify-content: center; } .philosophy__quote { margin: 0; max-width: 34rem; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 5vw, 3rem); line-height: 1.42; color: var(--text); } .philosophy__quote span { display: block; } .philosophy__quote span + span { margin-top: 0.6rem; } /* ================================================================== * * FOOTER * ================================================================== */ .footer { border-top: 1px solid var(--line); padding: clamp(4rem, 10vh, 7rem) 1.5rem clamp(3rem, 8vh, 5rem); text-align: center; } .footer__name { margin: 0; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); } .footer__line { margin: 1.25rem auto 0; max-width: 30rem; font-size: 0.95rem; color: var(--text-faint); line-height: 1.7; } .footer__mark { margin: 2.5rem 0 0; font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.04em; } /* ================================================================== * * INTRODUCTION — overlay shell * ================================================================== */ #boot { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 1; transition: opacity 1.1s var(--ease); } #boot.boot--out { opacity: 0; pointer-events: none; } /* Never shown for no-JS readers or those who asked for stillness — decided before first paint by the inline head script, so it can't flash for either. */ .no-js #boot, .reduce #boot { display: none !important; } #boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.5)); } .intro-organism { position: relative; z-index: 1; width: min(26rem, 90vw); font-family: var(--mono); font-size: clamp(0.78rem, 2.2vw, 0.92rem); line-height: 1.9; letter-spacing: 0.01em; color: var(--text-dim); } /* Each line and row fades in place — no typing, no cursor. Quicker and crisper than the engine's cross-fades: precise, not poetic. */ .intro-organism__line { margin: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.5s var(--ease); } .intro-organism__line.is-visible { opacity: 1; transform: translateY(0); } .intro-organism__line--head { color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; } .intro-organism__line--loading { color: var(--text-faint); margin-bottom: 0.9rem; } .intro-organism__line--name { margin-top: 0.6rem; font-size: clamp(1.3rem, 4vw, 1.8rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); } .intro-organism__line--group { margin-top: 0.9rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; } .intro-organism__line--established { margin-top: 1rem; color: #eef2f8; text-shadow: 0 0 10px var(--cyan-quiet); } .intro-organism__line--enter { color: var(--text-faint); } .intro-organism__rows { margin-top: 0.2rem; } .intro-organism__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.15rem 0; opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .intro-organism__row.is-visible { opacity: 1; transform: translateY(0); } .intro-organism__label { color: var(--text-faint); } .intro-organism__value { color: var(--text); } .intro-organism__row--capability { padding-left: 1rem; } .intro-organism__row--capability .intro-organism__value { color: var(--text-dim); } /* ================================================================== * * SKIP INTRODUCTION — present on every wake-up sequence, engine or * organism. Visible the instant the sequence starts; never delayed, * never faded in. * ================================================================== */ .intro-skip { position: absolute; top: clamp(0.9rem, 2.4vw, 1.4rem); left: clamp(0.9rem, 2.4vw, 1.4rem); z-index: 2; padding: 0.55rem 1rem; font: inherit; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-dim); background: rgba(11, 14, 18, 0.5); border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .intro-skip:hover, .intro-skip:focus-visible { color: var(--text); border-color: var(--accent); } /* ================================================================== * * ABOUT / SETTINGS — reachable after the sequence has already run once, * so "Skip Introduction" is never the only chance to see or replay it. * ================================================================== */ .about-trigger { background: none; border: none; padding: 0; font: inherit; color: var(--text-faint); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .about-trigger:hover, .about-trigger:focus-visible { color: var(--text-dim); } .about-dialog { width: min(30rem, 90vw); padding: 1.75rem; color: var(--text); background: #10141a; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .about-dialog::backdrop { background: rgba(5, 7, 10, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .about-dialog h2 { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 500; } .about-dialog p { margin: 0 0 1rem; color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; } .about-dialog__toggle { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--text); cursor: pointer; } .about-dialog__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; } .about-dialog__actions button { padding: 0.5rem 1rem; font-size: 0.85rem; font-family: var(--sans); border-radius: 3px; cursor: pointer; } .about-dialog__replay { background: none; border: 1px solid var(--line-strong); color: var(--text); } .about-dialog__replay:hover, .about-dialog__replay:focus-visible { border-color: var(--accent); color: var(--accent); } .about-dialog__close { background: var(--accent); border: 1px solid var(--accent); color: #0b0e12; font-weight: 500; } /* ------------------------------------------------------------------ * * Responsive * ------------------------------------------------------------------ */ @media (max-width: 640px) { .records__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 380px) { .records__grid { grid-template-columns: 1fr; } .hero__title { letter-spacing: 0.1em; text-indent: 0.1em; } }