/* ===================================================================== ENCODEX — SERVICES · "THE ASSEMBLY BAY" (v8.0 · MONOLITH) A restrained editorial layer around one live scene: the Sentinel at the bench, the commission taking shape above it (src/services.js). Below the bay, eight stations: doctrine (with FIG-00), disciplines (with drawn instrument figures), programs (with machined glyphs), protocol, bench rules, the register extract, the network, the commission. Shared chrome, tokens and controls remain in site.css. Reveal pre-states are gated behind html.js — the watchdog drops that class if the module controller never comes alive, so no copy is ever trapped behind an unfired reveal. The discipline schematics follow the same rule: no JS → fully drawn, statically. ===================================================================== */ :root { --s-house: cubic-bezier(0.16, 0.6, 0.2, 1); --s-max: 1280px; } body.services-page { padding: 0; overflow-x: hidden; background: #05070b; } body.services-page::after { background-size: 96px 96px; opacity: 0.22; } /* Near-opaque bars over a near-black scene: the 4–10% that shows through is too dark to read a blur on, but the filter re-rasterizes the strip behind each bar every scroll frame (mobile-Safari jank). Dropped to match the other pages, which already ship these bars blur-free. Backgrounds unchanged. */ .services-page .site-bottom { background: rgba(4, 5, 8, 0.96); } .services-page .site-top { background: rgba(4, 5, 8, 0.9); } main.services { width: 100%; max-width: none; margin: 0; padding: 0 0 44px; overflow: clip; } /* anchored sections land clear of the fixed top bar */ main.services section[id] { scroll-margin-top: 74px; } .s-shell { width: min(100%, var(--s-max)); margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); } .s-section-label, .s-eyebrow { margin: 0; font: 500 9.5px var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: #7f8996; } .s-section-label { padding-top: 3px; } .s-eyebrow { display: flex; align-items: center; gap: 13px; color: #aeb6c2; } .s-eyebrow span { color: var(--txt-4); } .s-reveal { transition: opacity 1.15s ease, transform 1.15s var(--s-house), filter 1.15s ease; } html.js .s-reveal { opacity: 0; transform: translateY(24px); filter: blur(9px); } html.js .s-reveal.is-visible { opacity: 1; transform: none; filter: none; } /* ===================================================================== HERO — the live bay ===================================================================== */ .s-hero { position: relative; isolation: isolate; height: clamp(560px, calc(100svh - 144px), 880px); min-height: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: #030406; } .s-hero__media, .s-hero__poster, #services-scene, #services-scene canvas, .s-hero__scrim, .s-hero__grain { position: absolute; inset: 0; width: 100%; height: 100%; } .s-hero__media { z-index: -1; overflow: hidden; background: #000; } .s-hero__poster { object-fit: cover; object-position: 58% 44%; filter: grayscale(1) brightness(0.27) contrast(1.18); transform: scale(1.025); opacity: 0.68; transition: opacity 1.5s ease, transform 3.2s var(--s-house); } #services-scene { pointer-events: none; will-change: transform, opacity; /* scroll parallax writes both */ } #services-scene canvas { display: block; opacity: 0; transform: scale(1.015); transition: opacity 1.6s ease, transform 2.2s var(--s-house); } body.s-scene-ready #services-scene canvas { opacity: 1; transform: none; } body.s-scene-ready .s-hero__poster { opacity: 0; transform: scale(1.06); } .s-hero__scrim { pointer-events: none; background: linear-gradient(to bottom, rgba(2, 3, 5, 0.72) 0%, rgba(2, 3, 5, 0) 18%), linear-gradient(to right, rgba(2, 3, 5, 0.8) 0%, rgba(2, 3, 5, 0.28) 47%, rgba(2, 3, 5, 0.03) 74%), linear-gradient(to top, rgba(2, 3, 5, 0.88) 0%, rgba(2, 3, 5, 0.15) 48%, rgba(2, 3, 5, 0) 72%), var(--lens-vignette, none); /* the composer grade's lens vignette — see site.css */ } .s-hero__grain { pointer-events: none; opacity: 0.035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,"); } .s-hero__copy { position: absolute; z-index: 2; left: clamp(20px, 5vw, 72px); bottom: clamp(72px, 9vh, 108px); width: min(700px, calc(100% - clamp(40px, 10vw, 144px))); } .s-hero__copy > * { transition: opacity 1.5s ease, transform 1.5s var(--s-house), filter 1.5s ease; } html.js .s-hero__copy > * { opacity: 0; transform: translateY(18px); filter: blur(10px); } html.js body.ready .s-hero__copy > * { opacity: 1; transform: none; filter: none; } body.ready .s-hero__copy .s-eyebrow { transition-delay: 0.12s; } body.ready .s-hero__copy h1 { transition-delay: 0.28s; } body.ready .s-hero__copy .s-hero__lead { transition-delay: 0.52s; } body.ready .s-hero__copy .s-hero__actions { transition-delay: 0.74s; } .s-hero h1 { max-width: 16ch; margin: 24px 0 23px; font-family: var(--f-disp); font-size: clamp(34px, 4.35vw, 62px); font-weight: 400; line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; color: var(--txt); text-shadow: 0 12px 42px rgba(0, 0, 0, 0.62); } .s-hero__lead { max-width: 55ch; margin: 0; font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.7; letter-spacing: 0.035em; color: #a5aeba; text-shadow: 0 8px 24px #000; } .s-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .s-hero__telemetry { position: absolute; z-index: 2; top: 88px; right: clamp(20px, 5vw, 72px); display: flex; align-items: center; gap: 12px; font: 400 8px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4); transition: opacity 1.2s ease 0.9s; } html.js .s-hero__telemetry { opacity: 0; } html.js body.ready .s-hero__telemetry { opacity: 1; } .s-hero__telemetry-line { width: 38px; height: 1px; background: var(--txt-4); } .s-hero__cue { position: absolute; z-index: 3; right: clamp(20px, 5vw, 72px); bottom: 70px; display: flex; align-items: center; gap: 13px; font: 400 8px var(--f-mono); letter-spacing: 0.24em; color: var(--txt-3); } .s-hero__cue i { position: relative; display: block; width: 46px; height: 1px; overflow: hidden; background: var(--txt-4); } .s-hero__cue i::after { content: ''; position: absolute; inset: 0; background: var(--txt); transform: translateX(-100%); animation: sCue 2.8s var(--s-house) infinite; } @keyframes sCue { 0%, 18% { transform: translateX(-100%); } 72%, 100% { transform: translateX(100%); } } /* ===================================================================== SHARED — section headings ===================================================================== */ .s-doctrine h2, .s-section-head h2, .s-protocol h2, .s-commission h2 { margin: 0; font-family: var(--f-disp); font-weight: 400; letter-spacing: 0.02em; line-height: 1.18; text-transform: uppercase; text-wrap: balance; color: var(--txt); } .s-section-head { display: grid; grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.55fr); gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(62px, 8vw, 104px); } .s-section-head h2 { font-size: clamp(28px, 4vw, 52px); } .s-section-head > div > p { max-width: 48ch; margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: var(--txt-2); } /* ===================================================================== 01 · THE DOCTRINE ===================================================================== */ .s-doctrine { padding-top: 76px; padding-bottom: clamp(92px, 12vw, 150px); } .s-doctrine__grid { display: grid; grid-template-columns: minmax(130px, 0.58fr) minmax(320px, 1.35fr) minmax(260px, 0.85fr); gap: clamp(28px, 5vw, 78px); align-items: start; } .s-doctrine h2 { max-width: 18ch; font-size: clamp(28px, 4vw, 52px); } .s-doctrine__body { padding-top: 4px; } .s-doctrine__body p { margin: 0; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.75; color: var(--txt-2); } .s-doctrine__body p + p { margin-top: 22px; color: #7f8996; } /* ===================================================================== 02 · THE DISCIPLINES — the bench mega-system, then six bays in alternating lab-style rows (text column beside a large system plate) ===================================================================== */ .s-disciplines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #07090d; } .s-disciplines .s-shell { padding-top: clamp(94px, 11vw, 150px); padding-bottom: clamp(94px, 11vw, 150px); } .s-disc-list { border-bottom: 1px solid var(--line); } .s-disc { position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(26px, 4.5vw, 72px); align-items: center; padding: clamp(38px, 5vw, 60px) 0; border-top: 1px solid var(--line); } /* white hairline sweeps the top rule on approach */ .s-disc::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--txt); transition: width 0.85s var(--s-house); } .s-disc:hover::before, .s-disc:focus-within::before { width: 100%; } /* even rows flip: the plate leads, the text follows */ .s-disc--flip .s-disc__plate { order: -1; } .s-disc__col { min-width: 0; } .s-disc__col .s-disc__body { margin-top: 30px; } .s-disc__code { display: block; font: 400 9px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-4); } .s-disc__id h3 { margin: 22px 0 0; font-family: var(--f-disp); font-size: clamp(18px, 2vw, 27px); font-weight: 400; line-height: 1.25; letter-spacing: 0.02em; color: var(--txt); } .s-disc__id > p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: #7f8996; } .s-disc__body > p:first-child { max-width: 58ch; margin: 0; font-size: 15px; line-height: 1.72; color: var(--txt-2); } .s-disc__body ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; } .s-disc__body li { position: relative; padding-left: 12px; font: 400 9px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #7f8996; } .s-disc__body li::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 1px; background: var(--txt-3); } .s-disc__out { display: flex; align-items: baseline; gap: 14px; max-width: 58ch; margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: 0.02em; color: #aeb6c2; transition: border-color 0.6s ease; } .s-disc__out span { font: 500 8px var(--f-mono); letter-spacing: 0.2em; white-space: nowrap; color: var(--txt-4); transition: color 0.6s ease; } .s-disc:hover .s-disc__out { border-top-color: #2c3542; } .s-disc:hover .s-disc__out span { color: #7f8996; } /* ===================================================================== 03 · THE PROTOCOL — five stations, each with a hard exit ===================================================================== */ .s-protocol { padding-top: clamp(94px, 11vw, 150px); padding-bottom: clamp(94px, 11vw, 150px); } .s-protocol__head { display: grid; grid-template-columns: minmax(160px, 0.55fr) minmax(320px, 1fr) minmax(260px, 0.8fr); gap: clamp(28px, 5vw, 74px); align-items: start; } .s-protocol h2 { font-size: clamp(28px, 3.5vw, 48px); } .s-protocol__head > p:last-child { margin: 4px 0 0; font-size: 15px; line-height: 1.72; color: var(--txt-2); } .s-protocol__line { margin-top: clamp(66px, 8vw, 100px); } /* the rail: a hairline the pulse travels — work moving down the line */ .s-protocol__rail { position: relative; height: 1px; overflow: hidden; background: var(--line); } .s-protocol__rail i { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; background: linear-gradient(90deg, transparent, rgba(207, 214, 221, 0.9) 50%, transparent); transform: translateX(-110%); animation: sRail 9s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite; } @keyframes sRail { 0%, 8% { transform: translateX(-110%); } 92%, 100% { transform: translateX(560%); } } .s-protocol__stations { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); } .s-protocol__stations li { display: flex; flex-direction: column; min-height: 280px; padding: 26px clamp(16px, 2vw, 28px) 26px; border-left: 1px solid var(--line); } .s-protocol__stations li:first-child { border-left: 0; padding-left: 0; } .s-st__code { font: 400 9px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-4); } .s-protocol__stations h3 { margin: 42px 0 14px; font-family: var(--f-disp); font-size: 15.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt); } .s-protocol__stations li > p:not(.s-st__exit) { max-width: 30ch; margin: 0 0 24px; font-size: 13px; line-height: 1.68; color: var(--txt-2); } .s-st__exit { display: flex; gap: 10px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 400 9px var(--f-mono); letter-spacing: 0.12em; line-height: 1.7; text-transform: uppercase; color: #97a1af; } .s-st__exit span { letter-spacing: 0.2em; color: var(--txt-4); } /* the last station never exits — hold it a shade brighter */ .s-protocol__stations li:last-child .s-st__exit { border-top-color: #3a4553; color: var(--txt); } /* ===================================================================== 04 · THE BENCH RULES ===================================================================== */ .s-rules { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #090c11; } .s-rules .s-shell { padding-top: clamp(94px, 11vw, 150px); padding-bottom: clamp(94px, 11vw, 150px); } .s-rules__ledger { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); } .s-rules__ledger li { position: relative; display: grid; grid-template-columns: 110px minmax(220px, 0.85fr) minmax(300px, 1.15fr); gap: clamp(22px, 4vw, 60px); align-items: start; padding: clamp(30px, 3.6vw, 44px) 0; border-top: 1px solid var(--line); } .s-rules__ledger li::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--txt); transition: width 0.85s var(--s-house); } .s-rules__ledger li:hover::before { width: 100%; } .s-rule__no { font-family: var(--f-disp); font-size: clamp(28px, 3vw, 40px); line-height: 1; color: #232b36; transition: color 0.6s ease; } .s-rules__ledger li:hover .s-rule__no { color: #3a4553; } .s-rules__ledger h3 { margin: 4px 0 0; font-family: var(--f-disp); font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; letter-spacing: 0.03em; color: var(--txt); } .s-rules__ledger p { max-width: 52ch; margin: 7px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--txt-2); } /* ---- equipment manifest strip ------------------------------------ */ .s-manifest { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 56px; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 500 9px var(--f-mono); letter-spacing: 0.18em; } .s-manifest__label { color: var(--txt-4); } .s-manifest__items { color: #7f8996; } .s-manifest__items i { font-style: normal; color: var(--txt-4); padding: 0 4px; } .s-manifest__link { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--txt); transition: color 0.3s ease; } .s-manifest__link b { font-weight: 400; transition: transform 0.5s var(--s-house); } .s-manifest__link:hover { color: var(--hi); } .s-manifest__link:hover b { transform: translateX(5px); } /* ===================================================================== 05 · ON RECORD — the register extract ===================================================================== */ .s-record { padding-top: clamp(104px, 13vw, 175px); padding-bottom: clamp(104px, 13vw, 175px); } .s-record__list { border-bottom: 1px solid var(--line); } .s-record__row { display: grid; grid-template-columns: 80px minmax(170px, 0.95fr) minmax(190px, 1.05fr) 76px; align-items: center; gap: clamp(14px, 2.5vw, 26px); min-height: 92px; padding: 20px 0; border-top: 1px solid var(--line); transition: padding 0.6s var(--s-house), border-color 0.4s ease; } a.s-record__row:hover, a.s-record__row:focus-visible { padding-inline: 16px; border-color: #566170; outline: none; } .s-record__ref { font: 400 9px var(--f-mono); letter-spacing: 0.16em; color: var(--txt-4); } .s-record__name { font-family: var(--f-disp); font-size: clamp(13px, 1.5vw, 19px); letter-spacing: 0.04em; color: var(--txt); } .s-record__desc { font: 400 10px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #7f8996; } .s-record__go { justify-self: end; font: 400 15px var(--f-mono); font-style: normal; color: var(--txt-3); transition: color 0.4s ease, transform 0.6s var(--s-house); } a.s-record__row:hover .s-record__go, a.s-record__row:focus-visible .s-record__go { color: var(--txt); transform: translateX(6px); } /* sealed rows — redaction bars, a notched seal, no invitation */ .s-record__row.is-sealed { opacity: 0.82; } .s-record__seal { justify-self: end; padding: 5px 8px 4px; border: 1px solid #232b36; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); font: 500 7.5px var(--f-mono); font-style: normal; letter-spacing: 0.22em; color: var(--txt-3); } .s-record__row .bar { display: block; width: min(170px, 90%); height: 12px; position: relative; overflow: hidden; background: #1d242e; } .s-record__row .bar--s { width: min(210px, 95%); height: 9px; opacity: 0.75; } /* light passes over the seals, slowly */ .s-record__row .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(151, 161, 175, 0.16) 50%, transparent 70%); transform: translateX(-100%); animation: sSheen 7s ease-in-out infinite; } @keyframes sSheen { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } } .s-record__action { display: flex; justify-content: flex-end; margin-top: 34px; } .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; } /* ===================================================================== 06 · THE NETWORK — Milan / Paris / Austin ===================================================================== */ .s-network { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #06080d; } .s-network .s-shell { padding-top: clamp(94px, 11vw, 150px); padding-bottom: clamp(94px, 11vw, 150px); } .s-network__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .s-station { position: relative; padding: 30px 28px 26px; background: #0a0d12; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; } .s-station:hover { border-color: #3a4553; background: #0c1016; transform: translateY(-3px); } .s-station__code { display: flex; align-items: center; justify-content: space-between; font: 400 8.5px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4); } .s-station__code i { width: 4px; height: 4px; background: var(--hi); box-shadow: 0 0 6px rgba(237, 241, 245, 0.8); animation: pulse 3.6s ease-in-out infinite; } .s-station h3 { margin: 22px 0 0; font-family: var(--f-disp); font-size: clamp(19px, 2vw, 24px); font-weight: 400; letter-spacing: 0.1em; color: var(--txt); } .s-station__role { min-height: 42px; margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--txt-2); } .s-station__coord { margin: 18px 0 0; font: 400 9px var(--f-mono); letter-spacing: 0.14em; color: var(--txt-3); } .s-station__clock { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); } .s-station__clock time { font: 400 24px var(--f-mono); letter-spacing: 0.06em; color: var(--txt); font-variant-numeric: tabular-nums; } .s-station__clock span { font: 500 8px var(--f-mono); letter-spacing: 0.22em; color: var(--txt-4); } .s-network__note { margin: 42px 0 0; text-align: center; font: 500 9px var(--f-mono); letter-spacing: 0.2em; color: #7f8996; } .s-network__note span { padding: 0 8px; color: var(--txt-4); } /* ===================================================================== 08 · THE FOUNDER — one name on the work ===================================================================== */ .s-founder { padding-top: clamp(104px, 13vw, 175px); padding-bottom: clamp(104px, 13vw, 175px); border-top: 1px solid var(--line); } .s-founder__body { max-width: 760px; margin-left: auto; } .s-founder__body p { margin: 0; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.75; color: var(--txt-2); } .s-founder__sig { margin-top: 30px !important; font: 500 10px var(--f-mono); letter-spacing: 0.22em; color: var(--txt-3); } /* ===================================================================== 07 · THE COMMISSION ===================================================================== */ .s-commission { position: relative; min-height: clamp(560px, 80svh, 800px); display: grid; place-items: center; padding: 100px clamp(20px, 5vw, 72px) 130px; text-align: center; border-top: 1px solid var(--line); background: #040609; } .s-commission::before, .s-commission::after { content: ''; position: absolute; pointer-events: none; background: var(--line); } .s-commission::before { top: 0; bottom: 0; left: 50%; width: 1px; opacity: 0.4; } .s-commission::after { top: 50%; left: 0; right: 0; height: 1px; opacity: 0.4; } .s-commission__inner { position: relative; z-index: 1; width: min(860px, 100%); padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px); background: #040609; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .s-commission h2 { margin-top: 24px; font-size: clamp(30px, 4.6vw, 60px); } .s-commission__inner > p:not(.s-section-label) { max-width: 58ch; margin: 26px auto 0; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.75; color: var(--txt-2); } .s-commission__status { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; margin: 38px auto 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .s-commission__status span { display: flex; flex-direction: column; gap: 9px; padding: 16px 26px 18px; border-left: 1px solid var(--line); font: 400 10px var(--f-mono); letter-spacing: 0.14em; color: var(--txt); } .s-commission__status span:first-child { border-left: 0; } .s-commission__status b { font-weight: 500; font-size: 8px; letter-spacing: 0.22em; color: var(--txt-4); } .s-commission__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; } .s-commission__clocks { position: absolute; z-index: 2; bottom: 78px; left: 50%; transform: translateX(-50%); justify-content: center; white-space: nowrap; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 980px) { .s-doctrine__grid, .s-protocol__head { grid-template-columns: 150px minmax(0, 1fr); } .s-doctrine__body, .s-protocol__head > p:last-child { grid-column: 2; } /* discipline rows stack: text column, then the full-width plate */ .s-disc { grid-template-columns: 1fr; gap: 30px; } .s-disc--flip .s-disc__plate { order: 0; } .s-rules__ledger li { grid-template-columns: 76px minmax(200px, 0.85fr) minmax(240px, 1.15fr); } .s-record__row { grid-template-columns: 70px minmax(150px, 1fr) minmax(160px, 1fr) 70px; } } @media (max-width: 860px) { /* protocol goes vertical: the rail becomes the left spine */ .s-protocol__rail { display: none; } .s-protocol__stations { grid-template-columns: 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .s-protocol__stations li { min-height: 0; padding: 26px 0 30px; border-left: 0; border-top: 1px solid var(--line); } .s-protocol__stations li:first-child { border-top: 0; } .s-protocol__stations h3 { margin-top: 18px; } .s-protocol__stations li > p:not(.s-st__exit) { max-width: 58ch; } .s-st__exit { max-width: 480px; } .s-network__grid { grid-template-columns: 1fr; } .s-station__role { min-height: 0; } } @media (max-width: 760px) { .s-hero { height: clamp(500px, calc(100svh - 150px), 760px); } .s-hero__poster { object-position: 58% 36%; } .s-hero__scrim { background: linear-gradient(to bottom, rgba(2, 3, 5, 0.66) 0%, rgba(2, 3, 5, 0) 16%), linear-gradient(to top, rgba(2, 3, 5, 0.96) 0%, rgba(2, 3, 5, 0.68) 42%, rgba(2, 3, 5, 0) 70%); } .s-hero__copy { bottom: 54px; width: calc(100% - 40px); } .s-hero h1 { max-width: 14ch; margin-block: 18px; font-size: clamp(29px, 9vw, 44px); line-height: 1.13; } .s-hero__lead { max-width: 48ch; font-size: 13.5px; line-height: 1.6; } .s-hero__actions { margin-top: 24px; } .s-hero__telemetry, .s-hero__cue { display: none; } .s-doctrine { padding-top: 56px; } .s-doctrine__grid, .s-protocol__head, .s-section-head { grid-template-columns: 1fr; gap: 28px; } .s-doctrine__body, .s-protocol__head > p:last-child { grid-column: auto; } .s-section-head { margin-bottom: 52px; } .s-disc { gap: 24px; padding-block: 38px; } .s-disc__col .s-disc__body { margin-top: 24px; } .s-rules__ledger li { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; } .s-rules__ledger li p { grid-column: 2; margin-top: 0; } .s-rule__no { font-size: 24px; padding-top: 3px; } .s-manifest { flex-direction: column; align-items: flex-start; gap: 12px; } .s-manifest__link { margin-left: 0; } .s-record__row { grid-template-columns: minmax(0, 1fr) 70px; gap: 7px 16px; min-height: 100px; align-items: start; padding-block: 22px; } .s-record__ref { grid-column: 1; font-size: 8px; } .s-record__name, .s-record__desc { grid-column: 1; } .s-record__go, .s-record__seal { grid-column: 2; grid-row: 1 / 4; align-self: center; } .s-commission__status { grid-template-columns: repeat(2, minmax(0, auto)); } .s-commission__status span { padding: 14px 18px 16px; } .s-commission__status span:nth-child(odd) { border-left: 0; } .s-commission__status span:nth-child(n + 3) { border-top: 1px solid var(--line); } } @media (max-width: 520px) { .s-hero__copy { left: 20px; } .s-hero__actions { gap: 9px; } .s-hero__actions .btn { padding-inline: 15px; font-size: 9px; } .s-eyebrow { font-size: 8px; letter-spacing: 0.18em; } .s-commission__clocks .cdot { display: none; } .s-commission__clocks { gap: 10px; } .s-commission__clocks .clk { gap: 4px; } .s-commission__clocks .clk b { font-size: 8px; } .s-commission__clocks .clk time { font-size: 10px; } } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce) { html.js .s-reveal, html.js .s-hero__copy > *, html.js .s-hero__telemetry { opacity: 1; transform: none; filter: none; transition: none; } #services-scene canvas { transform: none; transition: none; } .s-hero__poster { transform: none; transition: none; } .s-hero__cue i::after { animation: none; } /* all perpetual chrome motion stops */ .s-station__code i, .s-protocol__rail i, .s-record__row .bar::after { animation: none; } } /* ===================================================================== ===== v8 ============================================================ MONOLITH — 03 · THE PROGRAMS (three engagement cards) and the cyber note line. (FIG-00, the discipline figures and the old program glyphs were replaced by the v8.1 living-system plates further down; the program cards now carry FIG-P1/P2/P3 and THE SPINE.) ===================================================================== */ /* ---- 02 · the cyber note line -------------------------------------- */ .s-disc__note { max-width: 58ch; margin: 14px 0 0; font-size: 12.5px; letter-spacing: 0.02em; color: #7f8996; } /* ---- 03 · THE PROGRAMS — three ways to engage ---------------------- */ .s-programs { padding-top: clamp(94px, 11vw, 150px); padding-bottom: clamp(94px, 11vw, 150px); } .s-programs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .s-prg { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; background: #0a0d12; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; } .s-prg:hover { border-color: #3a4553; background: #0c1016; transform: translateY(-3px); } .s-prg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .s-prg__code { display: block; font: 400 8.5px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4); } .s-prg__id h3 { margin: 22px 0 0; font-family: var(--f-disp); font-size: clamp(18px, 1.9vw, 23px); font-weight: 400; letter-spacing: 0.08em; color: var(--txt); } .s-prg__tag { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #7f8996; } .s-prg__body { max-width: 44ch; margin: 24px 0 28px; font-size: 13.5px; line-height: 1.68; color: var(--txt-2); } .s-prg__spec { margin: auto 0 0; border-top: 1px solid var(--line); } .s-prg__spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); } .s-prg__spec dt { font: 500 8px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4); } .s-prg__spec dd { margin: 0; font: 400 9.5px var(--f-mono); letter-spacing: 0.14em; text-align: right; color: #aeb6c2; } .s-programs__note { margin: 44px 0 0; text-align: center; font: 500 9px var(--f-mono); letter-spacing: 0.2em; color: #7f8996; } /* ---- v8 responsive -------------------------------------------------- */ @media (max-width: 980px) { .s-programs__grid { grid-template-columns: 1fr; gap: 12px; } .s-prg__body { max-width: 58ch; } /* THE SPINE is a desktop instrument — below 980 the cards stack and the connector would lie about the geometry */ .s-spine { display: none; } } @media (max-width: 760px) { .s-prg { padding: 26px 22px 22px; } .s-programs__note { font-size: 8px; letter-spacing: 0.16em; } } /* ===================================================================== ===== v8.1 ========================================================== LIVING SYSTEMS — the lab-plate grammar brought to services: FIG-00 · THE OUTCOME ENGINE (oe-) 16 s FIG-BENCH · ONE COMMISSION, SIX HANDS (bh-) 18 s FIG-01 · CONVERGENCE (cv-) 15 s FIG-02 · CONSTRUCTION (ct-) 16 s FIG-03 · THE SHIPYARD (sy-) 15 s FIG-04 · THE PERIMETER (pm-) 17 s FIG-05 · THE CREW (cw-) 16 s FIG-06 · SIM TO REAL (st-) 18 s FIG-P1 · THE BUILD LINE (bl-) 14 s FIG-P2 · THE STANDING WATCH (wt-) 15 s FIG-P3 · THE JOINT ENGINE (je-) 16 s THE SPINE · programs connector (sp-) 18 s All motion CSS-only. Structural linework (.sd/.sd2/.sd3) inks in on reveal, texts and dressing (.sf) fade after it; loop transients ride shared travel/flash keyframes phase-placed per element with --ad and dash length --p; state-holding elements carry bespoke keyframes that reset inside the first seconds of each loop. Everything idles until the row's .s-reveal gains .is-visible. Reduced-motion freezes live at the very END of this file, after every animation rule. ===================================================================== */ /* ---- the plate — shared frame, lab grammar ------------------------- */ .s-plate { position: relative; margin: 0; border: 1px solid var(--line); background-color: #080b10; background-image: linear-gradient(rgba(27, 33, 43, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 33, 43, 0.5) 1px, transparent 1px); background-size: 28px 28px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); padding: 22px 20px 46px; } .s-plate svg { display: block; width: 100%; height: auto; overflow: visible; } .s-plate figcaption { position: absolute; left: 20px; bottom: 15px; font: 500 8.5px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-4); } .s-plate__ref { position: absolute; top: 12px; right: 18px; font: 400 9px var(--f-mono); letter-spacing: 0.12em; color: var(--txt-4); } /* linework vocabulary — strict monochrome, hairline strokes. :where() keeps this at (0,1,0) so the per-figure single-class rules declared below it can re-colour their own strokes by order alone. No non-scaling-stroke here: Chromium computes dashes in screen space under it, which breaks every pathLength-normalised draw and travel the moment a plate renders at any scale other than 1:1 (the lab reference plates use plain scaled strokes for the same reason). */ .s-plate :where(path, circle, rect, line, polyline, polygon) { fill: none; stroke: #59636f; stroke-width: 1; } .s-plate svg .ghost { stroke: #232b37; } .s-plate svg .hi { stroke: #dfe5ec; } .s-plate svg .dash { stroke-dasharray: 2.5 6; } .s-plate svg .dot { fill: #59636f; stroke: none; } .s-plate svg .dot-hi { fill: #edf1f5; stroke: none; } .s-plate svg text { font: 500 9px var(--f-mono); letter-spacing: 0.16em; fill: #545f6d; stroke: none; } .s-plate svg text.rd { fill: #7f8996; } /* small lit dots breathe — the only always-on life */ .s-plate :is(.oe-live, .oe-benchdot) { animation: pulse 4.8s ease-in-out infinite; } /* ---- reveal: structure inks in, dressing fades after --------------- */ html.js .s-plate :is(.sd, .sd2, .sd3) { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--s-house) 0.2s; } html.js .s-plate .sd2 { transition-delay: 0.6s; } html.js .s-plate .sd3 { transition-delay: 1s; } html.js .s-plate .sf { opacity: 0; transition: opacity 1.4s ease 1.3s; } html.js .s-reveal.is-visible :is(.sd, .sd2, .sd3) { stroke-dashoffset: 0; } html.js .s-reveal.is-visible .sf { opacity: 1; } /* loops idle until the plate's reveal arrives (the .p-anim covenant) */ html.js .s-plate.s-reveal:not(.is-visible) svg *, html.js .s-reveal:not(.is-visible) .s-plate svg * { animation-play-state: paused; } /* ---- shared motion machinery --------------------------------------- .pp — a travelling pulse (dash of length --p on a pathLength=100 track); .pk — a packet, same track, thick square dash; .fl — a transient flash. Each element places its window in the master loop with --ad (animation-delay); transients are invisible at both ends of their cycle, so phase offsets never leak across the loop seam. */ .s-plate .pp, .s-plate .pk { stroke: #dfe5ec; stroke-width: 1.2; stroke-linecap: butt; stroke-dasharray: var(--p, 10) 100; stroke-dashoffset: var(--p, 10); opacity: 0; } .s-plate .pk { stroke-width: 5; } .s-plate .fl { opacity: 0; } @keyframes sTravel { 0% { stroke-dashoffset: var(--p, 10); opacity: 0; } 1% { opacity: 0.92; } 7% { stroke-dashoffset: -100; opacity: 0.92; } 8.5%, 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes sTravelSlow { 0% { stroke-dashoffset: var(--p, 3); opacity: 0; } 4% { opacity: 0.8; } 82% { stroke-dashoffset: -100; opacity: 0.8; } 84%, 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes sBlink { 0% { opacity: 0; } 1.2% { opacity: 1; } 3.4% { opacity: 0.85; } 6%, 100% { opacity: 0; } } @keyframes sMarch { to { stroke-dashoffset: -100; } } @keyframes sShimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } } /* ===================================================================== FIG-00 · THE OUTCOME ENGINE — 16 s: STEADY (0–6 s) users flow and telemetry drifts · FAULT (6–10 s) a node flares, the wire races to the bench, the answer races back, the seal closes · GROWTH (10–16 s) an upgrade packet docks as the eighth node, REV/WK steps up, the cluster breathes once. The new node is absorbed as the next loop opens. ===================================================================== */ .s-fig-engine { margin-top: clamp(58px, 7vw, 88px); } .s-fig-engine .pp, .s-fig-engine .pk { animation: sTravel 16s linear var(--ad, 0s) infinite; } /* telemetry drift — slow continuous pulses, product → lab */ .oe-drift { stroke: #8e99a7; stroke-dasharray: 5 45; opacity: 0.5; animation: sMarch 9s linear infinite; } /* users lane: dots thread the mesh, ticks file out as SERVED */ .oe-user { animation: sTravelSlow 6.4s linear var(--ad, 0s) infinite; } .oe-tick { animation: sBlink 6.4s linear var(--ad, 0s) infinite; } /* the heartbeat strip — subtle; THE WATCH owns this motif */ .oe-hb { stroke: #aeb6c2; stroke-dasharray: 10 90; opacity: 0.45; animation: sMarch 11s linear infinite; } .oe-spike { opacity: 0; animation: oeSpike 16s linear infinite; } @keyframes oeSpike { 0%, 39% { opacity: 0; } 41% { opacity: 0.9; } 48% { opacity: 0.35; } 52%, 100% { opacity: 0; } } /* the fault: node 5 flares and holds hot until the seal closes */ .oe-n5 { animation: oeFault 16s linear infinite; } @keyframes oeFault { 0%, 37% { stroke: #59636f; } 38.5% { stroke: #edf1f5; } 41% { stroke: #8e99a7; } 55% { stroke: #8e99a7; } 62%, 100% { stroke: #59636f; } } .oe-bang { fill: #edf1f5; font-size: 11px; opacity: 0; animation: oeBang 16s linear infinite; } @keyframes oeBang { 0%, 37.5% { opacity: 0; } 39% { opacity: 1; } 42% { opacity: 0.65; } 44% { opacity: 1; } 55% { opacity: 0.9; } 58%, 100% { opacity: 0; } } /* the bench lights while it works the fault */ .oe-benchlit { opacity: 0; animation: oeBench 16s linear infinite; } @keyframes oeBench { 0%, 43% { opacity: 0; } 45% { opacity: 0.9; } 54% { opacity: 0.9; } 58%, 100% { opacity: 0; } } /* the seal ring closes around the answered node, and holds */ .oe-seal { stroke: #edf1f5; stroke-dasharray: 100 100; stroke-dashoffset: 100; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: oeSeal 16s linear infinite; } @keyframes oeSeal { 0% { stroke-dashoffset: 0; opacity: 1; } 4% { stroke-dashoffset: 0; opacity: 0; } 5% { stroke-dashoffset: 100; opacity: 0; } 55% { stroke-dashoffset: 100; opacity: 0; } 56% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } .oe-answered { opacity: 0; animation: oeAns 16s linear infinite; } @keyframes oeAns { 0%, 53% { opacity: 0; } 55% { opacity: 1; } 57% { opacity: 0.4; } 59% { opacity: 1; } 66% { opacity: 1; } 70%, 100% { opacity: 0; } } /* growth: the eighth node docks, its edges draw, the bar steps up */ .oe-n8 { stroke: #8e99a7; animation: oeN8 16s linear infinite; } @keyframes oeN8 { 0% { opacity: 1; } 6% { opacity: 0; } 73% { opacity: 0; } 74.5% { opacity: 1; } 100% { opacity: 1; } } .oe-grow { stroke: #232b37; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: oeGrow 16s linear infinite; } @keyframes oeGrow { 0% { stroke-dashoffset: 0; opacity: 1; } 6% { stroke-dashoffset: 0; opacity: 0; } 7% { stroke-dashoffset: 1; opacity: 1; } 75% { stroke-dashoffset: 1; opacity: 1; } 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } .oe-rev rect { fill: rgba(237, 241, 245, 0.06); stroke: #59636f; } .oe-rev8 { fill: rgba(237, 241, 245, 0.12); stroke: #aeb6c2; animation: oeRev8 16s linear infinite; } @keyframes oeRev8 { 0% { opacity: 1; } 6% { opacity: 0.12; } 86% { opacity: 0.12; } 89% { opacity: 1; } 100% { opacity: 1; } } /* the cluster breathes once as growth lands */ .oe-cluster { transform-box: fill-box; transform-origin: center; animation: oeBreathe 16s var(--s-house) infinite; } @keyframes oeBreathe { 0%, 88% { transform: scale(1); } 93% { transform: scale(1.012); } 98%, 100% { transform: scale(1); } } /* ===================================================================== FIG-BENCH — 18 s: the brief enters, five stations fire their pulses into the rim (CYBER attacks it from outside instead — the rim holds, a seal tick files), ROBOTICS honestly idles as FORMING while the core lights the final segment itself; the product block exits, the seal stamps, and one pulse rides THE WATCH rail home. ===================================================================== */ .s-fig-bench { margin: 0 0 clamp(62px, 8vw, 104px); } .s-fig-bench .pp, .s-fig-bench .pk { animation: sTravel 18s linear var(--ad, 0s) infinite; } /* engineering fires a three-pulse train */ .bh-train { stroke-dasharray: 4 4 4 4 4 80; } /* the rim — twelve segments of progress, group by discipline */ .bh-seg { stroke: #dfe5ec; stroke-width: 1.6; opacity: 0.14; } .bh-sgA { animation: bhSgA 18s linear infinite; } .bh-sgB { animation: bhSgB 18s linear infinite; } .bh-sgC { animation: bhSgC 18s linear infinite; } .bh-sgD { animation: bhSgD 18s linear infinite; } .bh-sgE { animation: bhSgE 18s linear infinite; } .bh-sgF { animation: bhSgF 18s linear infinite; } @keyframes bhSgA { 0% { opacity: 1; } 4% { opacity: 0.14; } 17.5% { opacity: 0.14; } 19% { opacity: 1; } 100% { opacity: 1; } } @keyframes bhSgB { 0% { opacity: 1; } 4% { opacity: 0.14; } 29.5% { opacity: 0.14; } 31% { opacity: 1; } 100% { opacity: 1; } } @keyframes bhSgC { 0% { opacity: 1; } 4% { opacity: 0.14; } 41.5% { opacity: 0.14; } 43% { opacity: 1; } 100% { opacity: 1; } } @keyframes bhSgD { 0% { opacity: 1; } 4% { opacity: 0.14; } 60.5% { opacity: 0.14; } 62% { opacity: 1; } 100% { opacity: 1; } } @keyframes bhSgE { 0% { opacity: 1; } 4% { opacity: 0.14; } 73.5% { opacity: 0.14; } 75% { opacity: 1; } 100% { opacity: 1; } } @keyframes bhSgF { 0% { opacity: 1; } 4% { opacity: 0.14; } 79% { opacity: 0.14; } 80.5% { opacity: 1; } 100% { opacity: 1; } } /* the attack lands: rim flashes twice, holds, a seal tick files */ .bh-rimflash { opacity: 0; animation: bhRim 18s linear infinite; } @keyframes bhRim { 0%, 53.5% { opacity: 0; } 55% { opacity: 0.9; } 56.5% { opacity: 0.15; } 58% { opacity: 0.75; } 61%, 100% { opacity: 0; } } .bh-sealtick { animation: bhTick 18s linear infinite; } @keyframes bhTick { 0% { opacity: 1; } 4% { opacity: 0; } 60% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 1; } } /* the twelfth segment is lit from the core itself */ .bh-emit { stroke: #dfe5ec; stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; animation: bhEmit 18s linear infinite; } @keyframes bhEmit { 0%, 75.5% { stroke-dashoffset: 1; opacity: 0; } 76% { opacity: 0.9; } 78.5% { stroke-dashoffset: 0; opacity: 0.9; } 81% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } } /* one breath as the build completes */ .bh-core { transform-box: fill-box; transform-origin: center; animation: bhBreathe 18s var(--s-house) infinite; } @keyframes bhBreathe { 0%, 81% { transform: scale(1); } 84% { transform: scale(1.02); } 87%, 100% { transform: scale(1); } } /* the seal stamp zone — ghosted until the product passes the gate */ .bh-stamp * { stroke: #dfe5ec; } .bh-stamp { opacity: 0.18; animation: bhStamp 18s linear infinite; } @keyframes bhStamp { 0% { opacity: 1; } 4% { opacity: 0.18; } 92% { opacity: 0.18; } 93.5% { opacity: 1; } 100% { opacity: 1; } } /* robotics idles, honestly */ .bh-form { animation: sShimmer 4.5s ease-in-out infinite; } /* freeze-frame prop: the product held at the gate (reduced motion) */ .bh-prodfreeze { fill: rgba(237, 241, 245, 0.14); stroke: #aeb6c2; opacity: 0; } /* ===================================================================== FIG-01 · CONVERGENCE — 15 s: fourteen assumptions drift right; eleven die at MAP (staggered), one at MODEL, one at REDUCE; the survivor brightens, gains its ring, parks at THE BET. The ledger counts down 14 → 03 → 02 → 01; BOARD-DEFENSIBLE stamps. ===================================================================== */ .cv-dot { opacity: 0; } .cv-a1 { animation: cvA1 15s linear infinite; } .cv-a2 { animation: cvA2 15s linear infinite; } .cv-a3 { animation: cvA3 15s linear infinite; } .cv-b { animation: cvB 15s linear infinite; } .cv-c { animation: cvC 15s linear infinite; } .cv-d { animation: cvD 15s linear infinite; } @keyframes cvA1 { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 0.55; } 26% { transform: translateX(var(--g1)); opacity: 0.55; } 27.5%, 100% { transform: translateX(var(--g1)); opacity: 0; } } @keyframes cvA2 { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 0.55; } 31% { transform: translateX(var(--g1)); opacity: 0.55; } 32.5%, 100% { transform: translateX(var(--g1)); opacity: 0; } } @keyframes cvA3 { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 0.55; } 36% { transform: translateX(var(--g1)); opacity: 0.55; } 37.5%, 100% { transform: translateX(var(--g1)); opacity: 0; } } @keyframes cvB { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 0.55; } 28% { transform: translateX(var(--g1)); } 46% { transform: translateX(var(--g2)); opacity: 0.55; } 47.5%, 100% { transform: translateX(var(--g2)); opacity: 0; } } @keyframes cvC { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 0.55; } 28% { transform: translateX(var(--g1)); } 46% { transform: translateX(var(--g2)); } 62% { transform: translateX(var(--g3)); opacity: 0.55; } 63.5%, 100% { transform: translateX(var(--g3)); opacity: 0; } } @keyframes cvD { 0% { transform: translateX(0); opacity: 0; fill: #59636f; } 5% { opacity: 0.55; } 28% { transform: translateX(var(--g1)); } 46% { transform: translateX(var(--g2)); } 62% { transform: translateX(var(--g3)); fill: #59636f; opacity: 0.55; } 65% { fill: #edf1f5; opacity: 1; } 74% { transform: translateX(var(--g4)); } 94% { transform: translateX(var(--g4)); fill: #edf1f5; opacity: 1; } 97%, 100% { transform: translateX(var(--g4)); opacity: 0; } } .cv-ring { opacity: 0; animation: cvRing 15s linear infinite; } @keyframes cvRing { 0%, 72% { opacity: 0; } 75% { opacity: 1; } 94% { opacity: 1; } 97%, 100% { opacity: 0; } } /* freeze-frame prop: the bet, parked (reduced motion) */ .cv-freeze { opacity: 0; } .cv-x { stroke-width: 1.2; opacity: 0; } .cv-xa1 { animation: cvXa1 15s linear infinite; } .cv-xa2 { animation: cvXa2 15s linear infinite; } .cv-xa3 { animation: cvXa3 15s linear infinite; } .cv-xb { animation: cvXb 15s linear infinite; } .cv-xc { animation: cvXc 15s linear infinite; } @keyframes cvXa1 { 0%, 25.5% { opacity: 0; } 26.5% { opacity: 0.95; } 29.5%, 100% { opacity: 0; } } @keyframes cvXa2 { 0%, 30.5% { opacity: 0; } 31.5% { opacity: 0.95; } 34.5%, 100% { opacity: 0; } } @keyframes cvXa3 { 0%, 35.5% { opacity: 0; } 36.5% { opacity: 0.95; } 39.5%, 100% { opacity: 0; } } @keyframes cvXb { 0%, 45.5% { opacity: 0; } 46.5% { opacity: 0.95; } 49.5%, 100% { opacity: 0; } } @keyframes cvXc { 0%, 61.5% { opacity: 0; } 62.5% { opacity: 0.95; } 65.5%, 100% { opacity: 0; } } /* the countdown */ .cv-c14, .cv-c03, .cv-c02, .cv-c01 { opacity: 0; } .cv-c14 { animation: cvC14 15s linear infinite; } .cv-c03 { animation: cvC03 15s linear infinite; } .cv-c02 { animation: cvC02 15s linear infinite; } .cv-c01 { animation: cvC01 15s linear infinite; } @keyframes cvC14 { 0% { opacity: 0; } 2% { opacity: 1; } 37% { opacity: 1; } 39%, 100% { opacity: 0; } } @keyframes cvC03 { 0%, 37% { opacity: 0; } 39% { opacity: 1; } 46% { opacity: 1; } 48%, 100% { opacity: 0; } } @keyframes cvC02 { 0%, 46% { opacity: 0; } 48% { opacity: 1; } 62% { opacity: 1; } 64%, 100% { opacity: 0; } } @keyframes cvC01 { 0% { opacity: 1; } 1.5% { opacity: 0; } 62% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 1; } } /* the verdict — shared stamp dress for cv/ct */ .cv-stamp path, .ct-stamp path { fill: rgba(237, 241, 245, 0.03); stroke: #3a4553; } .cv-stamp text, .ct-stamp text { font-size: 8.5px; letter-spacing: 0.14em; fill: #aeb6c2; } .cv-stamp { opacity: 0; animation: cvStamp 15s var(--s-house) infinite; } @keyframes cvStamp { 0% { opacity: 1; } 3% { opacity: 0; } 79% { opacity: 0; } 82% { opacity: 1; } 100% { opacity: 1; } } /* ===================================================================== FIG-02 · CONSTRUCTION — 16 s: the drafting grid rises, four construction passes machine the mark, the mark inks in bright, then echoes into desktop / tablet / phone at scale while the motion meter sweeps. UNMISTAKABLE stamps. ===================================================================== */ .ct-grid { opacity: 0; animation: ctGrid 16s linear infinite; } @keyframes ctGrid { 0% { opacity: 0; } 5% { opacity: 0.9; } 94% { opacity: 0.9; } 99%, 100% { opacity: 0; } } .ct-c { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .ct-c1 { animation: ctC1 16s linear infinite; } .ct-c2 { animation: ctC2 16s linear infinite; } .ct-c3 { animation: ctC3 16s linear infinite; } .ct-c4 { animation: ctC4 16s linear infinite; } @keyframes ctC1 { 0%, 6% { stroke-dashoffset: 1; opacity: 0; } 7% { opacity: 0.55; } 18% { stroke-dashoffset: 0; opacity: 0.55; } 46% { opacity: 0.55; } 52% { opacity: 0.2; } 95% { stroke-dashoffset: 0; opacity: 0.2; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes ctC2 { 0%, 12% { stroke-dashoffset: 1; opacity: 0; } 13% { opacity: 0.55; } 24% { stroke-dashoffset: 0; opacity: 0.55; } 46% { opacity: 0.55; } 52% { opacity: 0.2; } 95% { stroke-dashoffset: 0; opacity: 0.2; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes ctC3 { 0%, 18% { stroke-dashoffset: 1; opacity: 0; } 19% { opacity: 0.55; } 28% { stroke-dashoffset: 0; opacity: 0.55; } 46% { opacity: 0.55; } 52% { opacity: 0.2; } 95% { stroke-dashoffset: 0; opacity: 0.2; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes ctC4 { 0%, 24% { stroke-dashoffset: 1; opacity: 0; } 25% { opacity: 0.55; } 34% { stroke-dashoffset: 0; opacity: 0.55; } 46% { opacity: 0.55; } 52% { opacity: 0.2; } 95% { stroke-dashoffset: 0; opacity: 0.2; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } } .ct-mark { stroke-width: 1.4; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; animation: ctMark 16s linear infinite; } @keyframes ctMark { 0%, 35% { stroke-dashoffset: 1; opacity: 0; } 36% { opacity: 0.95; } 46% { stroke-dashoffset: 0; opacity: 0.95; } 95% { stroke-dashoffset: 0; opacity: 0.95; } 98% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } } /* the echo: each screen pops lit, the mark landing at scale */ .ct-dev { opacity: 0; transform-box: fill-box; transform-origin: center; } .ct-devA { animation: ctDevA 16s var(--s-house) infinite; } .ct-devB { animation: ctDevB 16s var(--s-house) infinite; } .ct-devC { animation: ctDevC 16s var(--s-house) infinite; } @keyframes ctDevA { 0%, 50% { opacity: 0; transform: scale(1.15); } 53.5% { opacity: 1; transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1.15); } } @keyframes ctDevB { 0%, 58% { opacity: 0; transform: scale(1.15); } 61.5% { opacity: 1; transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1.15); } } @keyframes ctDevC { 0%, 66% { opacity: 0; transform: scale(1.15); } 69.5% { opacity: 1; transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1.15); } } /* the motion meter never stops sweeping */ .ct-sweep { stroke: #aeb6c2; stroke-dasharray: 10 90; opacity: 0.55; animation: sMarch 3s linear infinite; } .ct-stamp { opacity: 0; animation: ctStamp 16s var(--s-house) infinite; } @keyframes ctStamp { 0% { opacity: 1; } 3% { opacity: 0; } 74% { opacity: 0; } 77% { opacity: 1; } 100% { opacity: 1; } } /* ===================================================================== FIG-03 · THE SHIPYARD — 15 s: a train of commits crosses the stack (layers ripple), holds at TESTS; the first passes with a tick, the second is rejected with an × and rides the rework lane back before passing, the third waits its turn; deploys ride the rail to PROD, whose instances distribute micro-traffic continuously. ===================================================================== */ .s-fig-yard .pp { animation: sTravel 15s linear var(--ad, 0s) infinite; } .s-fig-yard .fl { animation: sBlink 15s linear var(--ad, 0s) infinite; } /* instance micro-traffic rides its own short cycle */ .s-fig-yard .sy-micro { stroke: #8e99a7; stroke-width: 1; animation: sTravel 3.6s linear var(--ad, 0s) infinite; } .sy-glow { fill: #dfe5ec; stroke: none; opacity: 0; animation: syGlow 15s linear var(--ad, 0s) infinite; } @keyframes syGlow { 0%, 3% { opacity: 0; } 6% { opacity: 0.1; } 11% { opacity: 0; } 55% { opacity: 0; } 58% { opacity: 0.08; } 62%, 100% { opacity: 0; } } /* the third commit waits at the gate for its beat */ .sy-hold { opacity: 0; animation: syHold 15s linear infinite; } @keyframes syHold { 0%, 18% { opacity: 0; } 20% { opacity: 0.6; } 82% { opacity: 0.6; } 84%, 100% { opacity: 0; } } /* ===================================================================== FIG-04 · THE PERIMETER, TONIGHT — 17 s: five tracers volley in and are absorbed at the outer ring; one penetrates to the middle ring, the detector arc sweeps and catches it, a seal segment closes over the breach; the counter ticks; the core fires its own SELF-TEST. ===================================================================== */ .s-fig-perim .pp { animation: sTravel 17s linear var(--ad, 0s) infinite; } .s-fig-perim .fl { animation: sBlink 17s linear var(--ad, 0s) infinite; } .pm-att { stroke: #aeb6c2; } /* the detector arc sweeps to the breach, catches, releases */ .pm-sweep { stroke-width: 1.6; opacity: 0; transform-box: view-box; transform-origin: 218px 148px; animation: pmSweep 17s var(--s-house) infinite; } @keyframes pmSweep { 0%, 54% { transform: rotate(-150deg); opacity: 0; } 56% { opacity: 0.9; } 62% { transform: rotate(0deg); opacity: 0.9; } 67% { transform: rotate(0deg); opacity: 0.9; } 71%, 100% { transform: rotate(0deg); opacity: 0; } } /* the seal segment closes over the breach, and holds */ .pm-seal { stroke: #edf1f5; stroke-width: 2; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: pmSeal 17s linear infinite; } @keyframes pmSeal { 0% { stroke-dashoffset: 0; opacity: 1; } 4% { stroke-dashoffset: 0; opacity: 0; } 5% { stroke-dashoffset: 100; opacity: 1; } 64% { stroke-dashoffset: 100; opacity: 1; } 69% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* the ledger line ticks as the volley is absorbed */ .pm-cntA { animation: pmCntA 17s linear infinite; } .pm-cntB { opacity: 0; animation: pmCntB 17s linear infinite; } @keyframes pmCntA { 0% { opacity: 1; } 53% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes pmCntB { 0%, 53% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 1; } } /* ===================================================================== FIG-05 · THE CREW — 16 s: the queue drains through the agents; each task travels, the agent pulses while working, the DONE ledger gains a bar and an audit tick; the flagged task detours up to HUMAN for its approve flash. Tools/memory rails march continuously. ===================================================================== */ .s-fig-crew .fl { animation: sBlink 16s linear var(--ad, 0s) infinite; } .cw-bar { fill: rgba(237, 241, 245, 0.14); stroke: none; } .cw-q1 { animation: cwQ1 16s linear infinite; } .cw-q2 { animation: cwQ2 16s linear infinite; } .cw-q3 { animation: cwQ3 16s linear infinite; } @keyframes cwQ1 { 0% { opacity: 1; } 7% { opacity: 1; } 9% { opacity: 0; } 60% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } } @keyframes cwQ2 { 0%, 29% { opacity: 1; } 31% { opacity: 0; } 80% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 1; } } @keyframes cwQ3 { 0%, 51% { opacity: 1; } 53% { opacity: 0; } 92% { opacity: 0; } 97% { opacity: 1; } 100% { opacity: 1; } } .cw-rail { stroke: #333b47; stroke-dasharray: 2 4; animation: sMarch 30s linear infinite; } .cw-task { fill: #dfe5ec; stroke: none; opacity: 0; } .cw-t3 { fill: #edf1f5; } .cw-t1 { animation: cwT1 16s linear infinite; } .cw-t2 { animation: cwT2 16s linear infinite; } .cw-t3 { animation: cwT3 16s linear infinite; } @keyframes cwT1 { 0%, 7% { transform: translate(0, 0); opacity: 0; } 8.5% { opacity: 0.9; } 15% { transform: translate(124px, 2px); } 26% { transform: translate(124px, 2px); } 32% { transform: translate(350px, 8px); opacity: 0.9; } 33.5%, 100% { transform: translate(350px, 8px); opacity: 0; } } @keyframes cwT2 { 0%, 28% { transform: translate(0, 0); opacity: 0; } 29.5% { opacity: 0.9; } 37% { transform: translate(124px, 106px); } 50% { transform: translate(124px, 106px); } 56% { transform: translate(350px, 8px); opacity: 0.9; } 57.5%, 100% { transform: translate(350px, 8px); opacity: 0; } } @keyframes cwT3 { 0%, 52% { transform: translate(0, 0); opacity: 0; } 53.5% { opacity: 1; } 60% { transform: translate(150px, 30px); } 66% { transform: translate(150px, 30px); } 72% { transform: translate(270px, -62px); } 78% { transform: translate(270px, -62px); } 84% { transform: translate(350px, 8px); opacity: 1; } 85.5%, 100% { transform: translate(350px, 8px); opacity: 0; } } /* the agent halo pulses while it works */ .cw-work { opacity: 0; animation: cwWork 16s linear var(--ad, 0s) infinite; } @keyframes cwWork { 0% { opacity: 0; } 1% { opacity: 0.85; } 4% { opacity: 0.3; } 7% { opacity: 0.85; } 11% { opacity: 0.85; } 13%, 100% { opacity: 0; } } /* the DONE ledger accumulates, audit ticks included */ .cw-d1, .cw-d2, .cw-d3 { opacity: 0; } .cw-d1 { animation: cwD1 16s linear infinite; } .cw-d2 { animation: cwD2 16s linear infinite; } .cw-d3 { animation: cwD3 16s linear infinite; } @keyframes cwD1 { 0% { opacity: 1; } 4% { opacity: 0; } 32% { opacity: 0; } 34% { opacity: 1; } 100% { opacity: 1; } } @keyframes cwD2 { 0% { opacity: 1; } 4% { opacity: 0; } 55% { opacity: 0; } 57% { opacity: 1; } 100% { opacity: 1; } } @keyframes cwD3 { 0% { opacity: 1; } 4% { opacity: 0; } 84% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 1; } } /* ===================================================================== FIG-06 · ASSEMBLY LINE 01 — 18 s: the billet rides in (0–9 %), the press forms the chassis (9–17 %), the unit docks at STN-B where two arms hang six legs, far side first (31–55 %), the scanner calibrates at STN-C (61–74 %), then the finished hexapod walks off the line on an alternating tripod gait (74–94 %). The belt never stops. Every transient is invisible across the loop seam; the seam itself lands while the unit is off-canvas. ===================================================================== */ /* the unit rides the belt: dock A → dock B → dock C → walk-off */ .s-fig-asm .ax-unit { transform-box: view-box; transform: translateX(-96px); animation: axLine 18s linear infinite; } @keyframes axLine { 0% { transform: translateX(-96px); animation-timing-function: var(--s-house); } 9% { transform: translateX(105px); } 24% { transform: translateX(105px); animation-timing-function: var(--s-house); } 31% { transform: translateX(225px); } 55% { transform: translateX(225px); animation-timing-function: var(--s-house); } 61% { transform: translateX(345px); } 74% { transform: translateX(345px); animation-timing-function: linear; } 94%, 100% { transform: translateX(565px); } } /* limb linework: near legs mid-tone, far legs graphite */ .s-fig-asm .ax-seg { fill: none; stroke: #59636f; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .s-fig-asm .ax-far { stroke: #232b37; } .s-fig-asm .ax-jt { fill: #59636f; stroke: none; } .s-fig-asm .ax-ft { fill: #dfe5ec; stroke: none; } /* the raw billet — consumed by the press */ .s-fig-asm .ax-billet { opacity: 0; animation: axBillet 18s linear infinite; } @keyframes axBillet { 0% { opacity: 0.9; } 11% { opacity: 0.9; } 14%, 100% { opacity: 0; } } /* STN-A — the press descends once, firmly */ .s-fig-asm .ax-ram { transform-box: view-box; animation: axRam 18s var(--s-house) infinite; } @keyframes axRam { 0%, 8% { transform: translateY(0); } 11% { transform: translateY(76px); } 13.5% { transform: translateY(76px); } 17%, 100% { transform: translateY(0); } } /* the chassis inks in under the press; instruments follow */ .s-fig-asm .ax-dr { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } .s-fig-asm .ax-ch { animation: axCh 18s var(--s-house) infinite; } .s-fig-asm .ax-ch2 { animation: axCh2 18s var(--s-house) infinite; } @keyframes axCh { 0%, 10.5% { stroke-dashoffset: 1; opacity: 0; } 11.5% { opacity: 1; } 16% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axCh2 { 0%, 15% { stroke-dashoffset: 1; opacity: 0; } 16.5% { opacity: 1; } 19.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* STN-B — the fitting arms swing in from parked, nudge twice, return */ .s-fig-asm .ax-arm { transform-box: view-box; } .s-fig-asm .ax-armL { transform-origin: 213px 80px; animation: axArmL 18s var(--s-house) infinite; } .s-fig-asm .ax-armR { transform-origin: 237px 80px; animation: axArmR 18s var(--s-house) infinite; } @keyframes axArmL { 0%, 29% { transform: rotate(-16deg); } 33% { transform: rotate(0deg); } 36% { transform: rotate(3deg); } 39% { transform: rotate(0deg); } 44% { transform: rotate(3deg); } 47% { transform: rotate(0deg); } 53%, 100% { transform: rotate(-16deg); } } @keyframes axArmR { 0%, 31% { transform: rotate(16deg); } 35% { transform: rotate(0deg); } 38% { transform: rotate(-3deg); } 41% { transform: rotate(0deg); } 46% { transform: rotate(-3deg); } 49% { transform: rotate(0deg); } 55%, 100% { transform: rotate(16deg); } } /* six legs hang in sequence — far triple, then near triple */ .s-fig-asm :is(.ax-lf1, .ax-lf2, .ax-lf3, .ax-ln1, .ax-ln2, .ax-ln3) { opacity: 0; } .s-fig-asm .ax-lf1 { animation: axLf1 18s var(--s-house) infinite; } .s-fig-asm .ax-lf2 { animation: axLf2 18s var(--s-house) infinite; } .s-fig-asm .ax-lf3 { animation: axLf3 18s var(--s-house) infinite; } .s-fig-asm .ax-ln1 { animation: axLn1 18s var(--s-house) infinite; } .s-fig-asm .ax-ln2 { animation: axLn2 18s var(--s-house) infinite; } .s-fig-asm .ax-ln3 { animation: axLn3 18s var(--s-house) infinite; } @keyframes axLf1 { 0%, 33% { stroke-dashoffset: 1; opacity: 0; } 34% { opacity: 1; } 37.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axLf2 { 0%, 36% { stroke-dashoffset: 1; opacity: 0; } 37% { opacity: 1; } 40.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axLf3 { 0%, 39% { stroke-dashoffset: 1; opacity: 0; } 40% { opacity: 1; } 43.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axLn1 { 0%, 43% { stroke-dashoffset: 1; opacity: 0; } 44% { opacity: 1; } 47.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axLn2 { 0%, 46% { stroke-dashoffset: 1; opacity: 0; } 47% { opacity: 1; } 50.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes axLn3 { 0%, 49% { stroke-dashoffset: 1; opacity: 0; } 50% { opacity: 1; } 52.5% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* the walk-off gait — two tripods alternate about their hips */ .s-fig-asm .ax-leg { transform-box: fill-box; } .s-fig-asm .ax-gA { animation: axGaitA 18s var(--s-house) infinite; } .s-fig-asm .ax-gB { animation: axGaitB 18s var(--s-house) infinite; } @keyframes axGaitA { 0%, 74% { transform: rotate(0deg); } 76.5% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 79% { transform: rotate(0deg); } 81.5% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 84% { transform: rotate(0deg); } 86.5% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 89% { transform: rotate(0deg); } 91.5% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 94%, 100% { transform: rotate(0deg); } } @keyframes axGaitB { 0%, 76.5% { transform: rotate(0deg); } 79% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 81.5% { transform: rotate(0deg); } 84% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 86.5% { transform: rotate(0deg); } 89% { transform: rotate(calc(var(--dir, 1) * 7deg)); } 91.5% { transform: rotate(0deg); } 94%, 100% { transform: rotate(0deg); } } /* the body rides the gait — a light suspension bob */ .s-fig-asm .ax-chgrp { transform-box: fill-box; animation: axBob 18s ease-in-out infinite; } @keyframes axBob { 0%, 74% { transform: translateY(0); } 76.5% { transform: translateY(-1.6px); } 79% { transform: translateY(0); } 81.5% { transform: translateY(-1.6px); } 84% { transform: translateY(0); } 86.5% { transform: translateY(-1.6px); } 89% { transform: translateY(0); } 91.5% { transform: translateY(-1.6px); } 94%, 100% { transform: translateY(0); } } /* STN-C — the scan sweeps, the ring closes, the eyes light */ .s-fig-asm .ax-scan { stroke: #dfe5ec; stroke-width: 1; opacity: 0; transform-box: view-box; animation: axScan 18s ease-in-out infinite; } @keyframes axScan { 0%, 62% { transform: translateX(-46px); opacity: 0; } 63.5% { opacity: 0.55; } 68.5% { transform: translateX(46px); opacity: 0.55; } 70%, 100% { transform: translateX(46px); opacity: 0; } } .s-fig-asm .ax-ring { stroke: #dfe5ec; stroke-width: 1; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; animation: axRing 18s linear infinite; } @keyframes axRing { 0%, 66% { stroke-dashoffset: 100; opacity: 0; } 67% { opacity: 0.9; } 71% { stroke-dashoffset: 0; opacity: 0.9; } 74%, 100% { stroke-dashoffset: 0; opacity: 0; } } .s-fig-asm .ax-cal { opacity: 0; animation: axCal 18s linear infinite; } @keyframes axCal { 0%, 68% { opacity: 0; } 69.5% { opacity: 1; } 74% { opacity: 1; } 76%, 100% { opacity: 0; } } .s-fig-asm .ax-eye { opacity: 0; animation: axEye 18s linear infinite; } @keyframes axEye { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } } .s-fig-asm .ax-tag { opacity: 0; animation: axTag 18s linear infinite; } @keyframes axTag { 0%, 68% { opacity: 0; } 70%, 100% { opacity: 0.9; } } /* stage readout, completion ticks, contact sparks, chip, belt drive */ .s-fig-asm .ax-st { opacity: 0; } .s-fig-asm .ax-st1 { animation: axSt1 18s linear infinite; } .s-fig-asm .ax-st2 { animation: axSt2 18s linear infinite; } .s-fig-asm .ax-st3 { animation: axSt3 18s linear infinite; } .s-fig-asm .ax-st4 { animation: axSt4 18s linear infinite; } @keyframes axSt1 { 0%, 7% { opacity: 0; } 9% { opacity: 1; } 27% { opacity: 1; } 29%, 100% { opacity: 0; } } @keyframes axSt2 { 0%, 29% { opacity: 0; } 31% { opacity: 1; } 53% { opacity: 1; } 55%, 100% { opacity: 0; } } @keyframes axSt3 { 0%, 55% { opacity: 0; } 57% { opacity: 1; } 71% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes axSt4 { 0%, 73% { opacity: 0; } 75% { opacity: 1; } 96% { opacity: 1; } 98%, 100% { opacity: 0; } } .s-fig-asm .ax-tk { opacity: 0; stroke-width: 1.2; } .s-fig-asm .ax-tk1 { animation: axTk1 18s linear infinite; } .s-fig-asm .ax-tk2 { animation: axTk2 18s linear infinite; } .s-fig-asm .ax-tk3 { animation: axTk3 18s linear infinite; } @keyframes axTk1 { 0%, 19% { opacity: 0; } 21% { opacity: 1; } 95% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes axTk2 { 0%, 51% { opacity: 0; } 53% { opacity: 1; } 95% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes axTk3 { 0%, 71% { opacity: 0; } 73% { opacity: 1; } 95% { opacity: 1; } 97%, 100% { opacity: 0; } } .s-fig-asm .ax-spark { stroke: #dfe5ec; animation: sBlink 18s linear var(--ad, 0s) infinite; } .s-fig-asm .ax-chip { animation: sShimmer 5s ease-in-out infinite; } .s-fig-asm svg .ax-belt { stroke-dasharray: 2.5 5.5; animation: axBelt 7s linear infinite; } @keyframes axBelt { to { stroke-dashoffset: -96; } } /* ===================================================================== THE PROGRAM PLATES — mid-size systems in the three engagement cards, above each body. Same grammar as the discipline plates, scaled to the card column. ===================================================================== */ .s-prg__plate { margin: 26px 0 0; padding: 14px 12px 36px; } .s-prg__plate figcaption { left: 12px; bottom: 12px; } .s-prg__plate .s-plate__ref { top: 10px; right: 12px; } /* ===================================================================== FIG-P1 · THE BUILD LINE — 14 s: six weekly pulses leave the rail through the manifold; the block gains a segment as each one lands; at W06 the seal draws around it and the finished block slides right through the PRODUCTION gate. The berth stays; the product ships. ===================================================================== */ .s-fig-line .pp { animation: sTravel 14s linear var(--ad, 0s) infinite; } .s-fig-line .fl { animation: sBlink 14s linear var(--ad, 0s) infinite; } /* the six segments — lit in build order, bottom row first */ .bl-s { fill: rgba(237, 241, 245, 0.06); stroke: #aeb6c2; opacity: 0; } .bl-s1 { animation: blC1 14s linear infinite; } .bl-s2 { animation: blC2 14s linear infinite; } .bl-s3 { animation: blC3 14s linear infinite; } .bl-s4 { animation: blC4 14s linear infinite; } .bl-s5 { animation: blC5 14s linear infinite; } .bl-s6 { animation: blC6 14s linear infinite; } @keyframes blC1 { 0%, 9% { opacity: 0; } 10.3% { opacity: 1; } 12.7% { opacity: 0.78; } 100% { opacity: 0.78; } } @keyframes blC2 { 0%, 20.4% { opacity: 0; } 21.7% { opacity: 1; } 24.1% { opacity: 0.78; } 100% { opacity: 0.78; } } @keyframes blC3 { 0%, 31.9% { opacity: 0; } 33.2% { opacity: 1; } 35.6% { opacity: 0.78; } 100% { opacity: 0.78; } } @keyframes blC4 { 0%, 43.3% { opacity: 0; } 44.6% { opacity: 1; } 47% { opacity: 0.78; } 100% { opacity: 0.78; } } @keyframes blC5 { 0%, 54.7% { opacity: 0; } 56% { opacity: 1; } 58.4% { opacity: 0.78; } 100% { opacity: 0.78; } } @keyframes blC6 { 0%, 66.1% { opacity: 0; } 67.4% { opacity: 1; } 69.8% { opacity: 0.78; } 100% { opacity: 0.78; } } /* the seal closes around the finished block */ .bl-seal { stroke-width: 1.2; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; animation: blSeal 14s linear infinite; } @keyframes blSeal { 0%, 68% { stroke-dashoffset: 100; opacity: 0; } 69.5% { opacity: 1; } 76% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* the sealed product slides through the gate; the berth stays */ .bl-ship { animation: blShip 14s var(--s-house) infinite; } @keyframes blShip { 0%, 78% { transform: translateX(0); opacity: 1; } 86% { transform: translateX(46px); opacity: 1; } 89%, 100% { transform: translateX(46px); opacity: 0; } } /* the readout files as the block crosses */ .bl-shipped { opacity: 0; animation: blShipped 14s linear infinite; } @keyframes blShipped { 0%, 83% { opacity: 0; } 84.5% { opacity: 1; } 86% { opacity: 0.4; } 87.5% { opacity: 1; } 95% { opacity: 1; } 98%, 100% { opacity: 0; } } /* ===================================================================== FIG-P2 · THE STANDING WATCH — 15 s: the site's one true heartbeat. The trace scrolls as the carrier hum; at 6 s an incident spike rises, the catch bracket snaps shut, the seal dot lands, MTTR files, the spike eases back down. The SLO dial holds at 99.9 and re-verifies once a loop; the console pings — the line stays open. ===================================================================== */ .s-fig-watch .fl { animation: sBlink 15s linear var(--ad, 0s) infinite; } /* the trace — one 132-unit period, scrolled by transform only */ .wt-wave { animation: wtScroll 5.5s linear infinite; } @keyframes wtScroll { to { transform: translateX(-132px); } } .wt-ecg { stroke: #8e99a7; opacity: 0.6; } /* the SLO dial — a near-closed gauge, notch at twelve */ .wt-arc { stroke-dasharray: 99.7 0.3; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; } /* the incident: rise, catch, seal, recover */ .wt-spike { transform-box: fill-box; transform-origin: 50% 100%; animation: wtSpike 15s var(--s-house) infinite; } @keyframes wtSpike { 0%, 39% { transform: scaleY(0.03); opacity: 0; } 40.5% { transform: scaleY(0.12); opacity: 0.9; } 43% { transform: scaleY(1); opacity: 1; } 83% { transform: scaleY(1); opacity: 1; } 88% { transform: scaleY(0.08); opacity: 0.35; } 90%, 100% { transform: scaleY(0.03); opacity: 0; } } .wt-br { animation: wtBr 15s var(--s-house) infinite; } @keyframes wtBr { 0%, 45% { transform: translateX(var(--bx)); opacity: 0; } 46.5% { opacity: 0.95; } 48.5% { transform: translateX(0); opacity: 0.95; } 84% { transform: translateX(0); opacity: 0.95; } 88%, 100% { transform: translateX(0); opacity: 0; } } .wt-sdot { animation: wtSdot 15s linear infinite; } @keyframes wtSdot { 0%, 51% { opacity: 0; } 52.5% { opacity: 1; } 86% { opacity: 1; } 89%, 100% { opacity: 0; } } .wt-mttr { opacity: 0; animation: wtMttr 15s linear infinite; } @keyframes wtMttr { 0%, 54% { opacity: 0; } 55.5% { opacity: 1; } 57% { opacity: 0.35; } 58.5% { opacity: 1; } 92% { opacity: 1; } 95%, 100% { opacity: 0; } } /* the console pings twice a loop — the founder's line, open */ .wt-pdot { animation: pulse 4.8s ease-in-out infinite; } .wt-ping { stroke: #8e99a7; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wtPing 7.5s ease-out infinite; } @keyframes wtPing { 0% { transform: scale(0.25); opacity: 0; } 5% { opacity: 0.45; } 42%, 100% { transform: scale(1.7); opacity: 0; } } /* ===================================================================== FIG-P3 · THE JOINT ENGINE — 16 s: three waves of pulses ride both rails into the core; each wave ignites it and a ring draws on; the split meter fills from both ends and meets in the middle; then the returns ride back out — both directions, both parties. ===================================================================== */ .s-fig-joint .pp { animation: sTravel 16s linear var(--ad, 0s) infinite; } .s-fig-joint .fl { animation: sBlink 16s linear var(--ad, 0s) infinite; } .je-core { animation: pulse 4.8s ease-in-out infinite; } .je-ign { animation: jeIgn 16s linear infinite; } @keyframes jeIgn { 0%, 15% { opacity: 0; } 16% { opacity: 0.9; } 19% { opacity: 0; } 45% { opacity: 0; } 46% { opacity: 0.9; } 49% { opacity: 0; } 75% { opacity: 0; } 76% { opacity: 0.9; } 79%, 100% { opacity: 0; } } /* the rings — drawn on, held, absorbed at the loop seam */ .je-r1, .je-r2, .je-r3 { stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; } .je-r1 { animation: jeR1 16s linear infinite; } .je-r2 { animation: jeR2 16s linear infinite; } .je-r3 { animation: jeR3 16s linear infinite; } @keyframes jeR1 { 0%, 17% { stroke-dashoffset: 100; opacity: 0; } 18.5% { opacity: 0.9; } 24% { stroke-dashoffset: 0; opacity: 0.9; } 96% { stroke-dashoffset: 0; opacity: 0.9; } 99.5%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes jeR2 { 0%, 47% { stroke-dashoffset: 100; opacity: 0; } 48.5% { opacity: 0.7; } 54% { stroke-dashoffset: 0; opacity: 0.7; } 96% { stroke-dashoffset: 0; opacity: 0.7; } 99.5%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes jeR3 { 0%, 77% { stroke-dashoffset: 100; opacity: 0; } 78.5% { opacity: 0.5; } 83% { stroke-dashoffset: 0; opacity: 0.5; } 96% { stroke-dashoffset: 0; opacity: 0.5; } 99.5%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* the split meter — stepped from both ends, meets in the middle */ .je-mL, .je-mR { stroke-width: 3; transform-box: fill-box; } .je-mL { transform-origin: 0 50%; animation: jeML 16s var(--s-house) infinite; } .je-mR { transform-origin: 100% 50%; animation: jeML 16s var(--s-house) infinite; } @keyframes jeML { 0%, 20% { transform: scaleX(0); opacity: 1; } 27% { transform: scaleX(0.34); } 50% { transform: scaleX(0.34); } 57% { transform: scaleX(0.67); } 80% { transform: scaleX(0.67); } 85.5% { transform: scaleX(1); opacity: 1; } 96.5% { transform: scaleX(1); opacity: 1; } 99%, 100% { transform: scaleX(1); opacity: 0; } } .je-verdict { opacity: 0; animation: jeVerdict 16s linear infinite; } @keyframes jeVerdict { 0%, 86% { opacity: 0; } 88% { opacity: 1; } 96.5% { opacity: 1; } 99%, 100% { opacity: 0; } } /* ===================================================================== THE SPINE — the quiet hairline beneath the three programs, desktop only. Every commission goes live into THE WATCH (GO-LIVE); a dashed branch rises toward VENTURE (THE RARE CASE). 18 s; it connects, it does not shout. ===================================================================== */ .s-spine { margin: 10px 0 0; } .s-spine svg { display: block; width: 100%; height: auto; overflow: visible; } .s-spine :where(path, circle) { fill: none; stroke: #59636f; stroke-width: 1; } .s-spine svg .ghost { stroke: #232b37; } .s-spine svg .dash { stroke-dasharray: 2.5 6; } .s-spine svg .dot-hi { fill: #edf1f5; stroke: none; } .s-spine svg text { font: 500 10px var(--f-mono); letter-spacing: 0.16em; fill: #545f6d; stroke: none; } /* spine reveal — same ink-in machinery as the plates */ html.js .s-spine :is(.sd, .sd2) { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--s-house) 0.2s; } html.js .s-spine .sd2 { transition-delay: 0.6s; } html.js .s-spine .sf { opacity: 0; transition: opacity 1.4s ease 1.3s; } html.js .s-spine.s-reveal:not(.is-visible) svg * { animation-play-state: paused; } /* the two travellers — slow comets, never urgent */ .s-spine .pp { stroke: #8e99a7; stroke-width: 1.2; stroke-linecap: butt; stroke-dasharray: var(--p, 12) 100; stroke-dashoffset: var(--p, 12); opacity: 0; animation: spTravel 18s linear var(--ad, 0s) infinite; } .s-spine .sp-rare { stroke: #77808d; } @keyframes spTravel { 0% { stroke-dashoffset: var(--p, 12); opacity: 0; } 2% { opacity: 0.55; } 38% { stroke-dashoffset: -100; opacity: 0.55; } 41%, 100% { stroke-dashoffset: -100; opacity: 0; } } .s-spine .fl { opacity: 0; animation: sBlink 18s linear var(--ad, 0s) infinite; } /* ---- v8.1 responsive ------------------------------------------------ */ @media (max-width: 760px) { .s-plate { padding: 16px 12px 40px; } .s-plate figcaption { left: 12px; bottom: 13px; } .s-plate__ref { display: none; } .s-fig-engine { margin-top: 48px; } .s-fig-bench { margin-bottom: 56px; } .s-prg__plate { margin-top: 20px; } } /* ===================================================================== ===== v8.1 REDUCED MOTION =========================================== Kept at the very END of the file so these statics cascade after every animation rule above. Each plate freezes at its FINAL, most legible state: systems lit, packets hidden, counters at their final value, seals closed. ===================================================================== */ @media (prefers-reduced-motion: reduce) { /* structure arrives fully drawn; dressing fully faded in */ html.js .s-plate :is(.sd, .sd2, .sd3) { transition: none; stroke-dashoffset: 0; } html.js .s-plate .sf { transition: none; opacity: 1; } /* every plate loop stops dead */ .s-plate svg * { animation: none !important; } /* travelling pulses, packets and transient flashes vanish */ .s-plate :is(.pp, .pk, .fl), .oe-drift, .oe-hb, .oe-user, .oe-spike, .oe-benchlit, .oe-bang, .oe-answered, .bh-rimflash, .cv-x, .ct-sweep, .sy-glow, .sy-hold, .cw-task, .cw-work, .pm-sweep { opacity: 0; } /* FIG-00 — eight nodes lit, seal closed, REV bar full */ .oe-tick { opacity: 0.6; } .oe-n8 { opacity: 1; } .oe-grow { stroke-dashoffset: 0; opacity: 1; } .oe-seal { stroke-dashoffset: 0; opacity: 1; } .oe-rev8 { opacity: 1; } /* FIG-BENCH — all twelve segments lit, product at gate, seal stamped */ .bh-seg { opacity: 1; } .bh-emit { stroke-dashoffset: 0; opacity: 0.5; } .bh-sealtick { opacity: 1; } .bh-stamp { opacity: 1; } .bh-form { opacity: 0.55; } .bh-prodfreeze { opacity: 1; } /* FIG-01 — the bet parked and ringed, count at 01, verdict stamped */ .cv-dot { opacity: 0; } .cv-freeze { opacity: 1; } .cv-ring { opacity: 1; } .cv-c14, .cv-c03, .cv-c02 { opacity: 0; } .cv-c01 { opacity: 1; } .cv-stamp { opacity: 1; } /* FIG-02 — mark machined, screens lit, verdict held */ .ct-grid { opacity: 0.9; } .ct-c { stroke-dashoffset: 0; opacity: 0.2; } .ct-mark { stroke-dashoffset: 0; opacity: 0.95; } .ct-dev { opacity: 1; transform: none; } .ct-stamp { opacity: 1; } /* FIG-04 — breach sealed, ledger at its final count */ .pm-seal { stroke-dashoffset: 0; opacity: 1; } .pm-cntA { opacity: 0; } .pm-cntB { opacity: 1; } /* FIG-05 — queue steady, ledger full, rails parked */ .cw-q1, .cw-q2, .cw-q3 { opacity: 1; } .cw-d1, .cw-d2, .cw-d3 { opacity: 1; } .cw-rail { stroke-dashoffset: 0; } /* FIG-06 — line at rest: unit calibrated at STN-C, ticks filed, READY shown, transients hidden */ .s-fig-asm .ax-unit { transform: translateX(345px); } .s-fig-asm :is(.ax-ram, .ax-arm, .ax-leg, .ax-chgrp) { transform: none; } .s-fig-asm :is(.ax-seg, .ax-dr) { stroke-dashoffset: 0; opacity: 1; } .s-fig-asm :is(.ax-lf1, .ax-lf2, .ax-lf3, .ax-ln1, .ax-ln2, .ax-ln3) { opacity: 1; } .s-fig-asm :is(.ax-eye, .ax-tag) { opacity: 1; } .s-fig-asm :is(.ax-billet, .ax-scan, .ax-ring, .ax-cal, .ax-spark) { opacity: 0; } .s-fig-asm .ax-tk { opacity: 1; } .s-fig-asm :is(.ax-st1, .ax-st2, .ax-st3) { opacity: 0; } .s-fig-asm .ax-st4 { opacity: 1; } .s-fig-asm .ax-chip { opacity: 0.55; } /* FIG-P1 — six segments lit, seal closed, block at the berth, readout filed */ .bl-s { opacity: 0.78; } .bl-seal { stroke-dashoffset: 0; opacity: 1; } .bl-ship { transform: none; opacity: 1; } .bl-shipped { opacity: 1; } /* FIG-P2 — the incident answered: spike risen, bracket closed, seal landed, MTTR filed, dial lit, trace parked */ .wt-ping { opacity: 0; } .wt-wave { transform: none; } .wt-spike { transform: none; opacity: 1; } .wt-br { transform: none; opacity: 0.95; } .wt-sdot { opacity: 1; } .wt-mttr { opacity: 1; } /* FIG-P3 — three rings grown, meter met, verdict held */ .je-ign { opacity: 0; } .je-r1 { stroke-dashoffset: 0; opacity: 0.9; } .je-r2 { stroke-dashoffset: 0; opacity: 0.7; } .je-r3 { stroke-dashoffset: 0; opacity: 0.5; } .je-mL, .je-mR { transform: scaleX(1); opacity: 1; } .je-verdict { opacity: 1; } /* THE SPINE — line drawn, labels on, travellers hidden */ .s-spine svg * { animation: none !important; } .s-spine :is(.pp, .fl) { opacity: 0; } html.js .s-spine :is(.sd, .sd2) { transition: none; stroke-dashoffset: 0; } html.js .s-spine .sf { transition: none; opacity: 1; } }