/* ============================================================================ SEP-137 Cockpit — default theme: "MISSION CONTROL" (NASA/NORAD ops floor) Ported from cockpit/looks/a/theme.css (Joshua's pick, 2026-06-12) and amplified ("even more techy"). Loads AFTER cockpit.css. Three layers: 1) A COMPLETE [data-theme="mission"] override of the theme-contract custom-property surface (README "Theme contract" list — the spine block never matches because ). 2) Theme-scoped extra rules + same-name @keyframes redefinitions (later definitions win) for the CRT overlay, light-packet pulses, klaxon failure flashing and the SYSTEM DISTRESS alert strip. 3) Mission chrome additions (mc-*): sticky top chrome with the activity ticker as a frozen telemetry tape, CRT boot flicker, telemetry readout line, phosphor-terminal drill panel, oscilloscope health strip, hover shimmer, indexed stage rail. NO cockpit.js changes — JS only flips data-* attributes; CSS owns motion. ========================================================================= */ [data-theme="mission"] { color-scheme: dark; /* ---- colors: surfaces (near-black phosphor CRT) ---- */ --c-bg: #050a08; --c-bg-grad-a: #071109; --c-bg-grad-b: #030605; --c-panel: #07140d; --c-panel-2: #0b2014; --c-node-bg: #06110a; --c-line: #15402b; --c-line-strong: #1f5c3c; --c-node-line: #1d5536; --c-placeholder-line: #11301f; --c-shadow: 0 0 28px rgba(51, 255, 153, 0.08), 0 18px 48px rgba(0, 0, 0, 0.6); /* ---- colors: text (phosphor) ---- */ --c-text: #d6ffe6; --c-muted: #74c897; --c-faint: #3f7a59; /* ---- colors: semantic (green primary, amber/cyan secondary, klaxon red) ---- */ --c-accent: #33ff99; --c-on-accent: #021207; --c-gold: #ffd24d; --c-green: #33ff99; --c-amber: #ffb000; --c-red: #ff3b30; --c-blue: #35e0ff; /* ---- colors: flow / motion (bright light packets on dim buses) ---- */ --c-connector: #1f5c3c; --c-connector-dim: #0e2a1b; --c-pulse: #b8ffd9; --c-glow-amber: rgba(255, 176, 0, 0.6); --c-glow-red: rgba(255, 59, 48, 0.6); --c-glow-accent: rgba(51, 255, 153, 0.55); /* ---- colors: chips / badges ---- */ --c-chip-ok-bg: rgba(51, 255, 153, 0.10); --c-chip-warn-bg: rgba(255, 176, 0, 0.12); --c-chip-bad-bg: rgba(255, 59, 48, 0.14); --c-chip-info-bg: rgba(53, 224, 255, 0.10); --c-chip-neutral-bg: rgba(116, 200, 151, 0.08); --c-distress-bg: rgba(255, 59, 48, 0.16); /* ---- colors: tiers ---- */ --c-tier-hard: #ff3b30; --c-tier-soft: #33ff99; --c-tier-none: #74c897; --c-tier-unknown: #3f7a59; /* ---- durations (slightly hotter tempo than spine - feels "live") ---- */ --d-pulse-cycle: 4.6s; --d-pulse-stagger: calc(var(--d-pulse-cycle) * 0.12); --d-shake: 1.8s; --d-gears: 2.8s; --d-tide: 2.4s; --d-flame: 0.5s; --d-robot: 3.2s; --d-glow: 1.2s; --d-enter: 0.5s; --d-changed: 0.9s; --d-ticker: 48s; --d-distress: 1.1s; --d-chip-pulse: 2s; --d-panel: 0.22s; /* ---- easings ---- */ --e-standard: cubic-bezier(0.4, 0, 0.2, 1); --e-enter: cubic-bezier(0.16, 1, 0.3, 1); --e-pulse: linear; --e-linear: linear; --e-soft: ease-in-out; --e-flame: steps(2, end); /* harder strobe-step flicker */ /* ---- layout (sharp-cornered instrument tiles) ---- */ --chain-w: 232px; --chain-gap: 14px; --group-gap: 30px; --conn-h: 22px; --row-h: 88px; --row-issue-h: 96px; --cell-h: calc(var(--conn-h) + var(--row-h)); --rail-w: 88px; --radius: 0px; --panel-w: min(430px, 92vw); /* ---- typography: system mono stack ---- */ --font: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace; --fs-base: 0.8rem; --fs-small: 0.69rem; --fs-rail: 0.6rem; --placeholder-opacity: 0.34; } /* ===================== CRT chrome: plot grid + scanlines + vignette ====== */ [data-theme="mission"] body { overflow-x: clip; /* the 100vw distress strip must not spawn an h-scrollbar */ background: repeating-linear-gradient(0deg, rgba(51, 255, 153, 0.028) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(51, 255, 153, 0.028) 0 1px, transparent 1px 56px), linear-gradient(180deg, var(--c-bg-grad-a) 0%, var(--c-bg-grad-b) 100%); } /* scanlines (subtle, pure CSS, pointer-transparent, over everything) */ [data-theme="mission"] body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0 1px, transparent 1px 3px); opacity: 0.55; } /* CRT vignette - phosphor-dark edges; floods red under SYSTEM DISTRESS */ [data-theme="mission"] body::after { content: ""; position: fixed; inset: 0; z-index: 91; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(0, 10, 5, 0.55) 100%); } [data-theme="mission"] body[data-distress="1"]::after { background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(70, 4, 2, 0.6) 100%); } /* phosphor selection */ [data-theme="mission"] ::selection { background: var(--c-accent); color: var(--c-on-accent); } /* ===================== CRT boot sequence (body.boot, ~1s) ================ */ /* The inline boot script never adds body.boot under prefers-reduced-motion; the reduced-motion block below kills it again as a belt-and-suspenders. */ [data-theme="mission"] .mc-boot { display: none; } [data-theme="mission"] body.boot .mc-boot { display: block; position: fixed; inset: 0; z-index: 95; /* above scanlines + vignette while booting */ pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(214, 255, 230, 0.92) 0%, rgba(51, 255, 153, 0.4) 45%, transparent 78%); transform-origin: 50% 50%; animation: mc-boot-on 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes mc-boot-on { 0% { transform: scaleY(0.006); opacity: 1; } 30% { transform: scaleY(0.006); opacity: 1; } 62% { transform: scaleY(1); opacity: 0.55; } 100% { transform: scaleY(1); opacity: 0; } } /* phosphor warm-up flicker on the console itself */ [data-theme="mission"] body.boot .app { animation: mc-crt-on 0.95s linear both; } @keyframes mc-crt-on { 0% { opacity: 0; filter: brightness(2.6) saturate(0.4); } 34% { opacity: 0.10; } 46% { opacity: 0.75; filter: brightness(1.9); } 58% { opacity: 0.30; } 72% { opacity: 1; filter: brightness(1.45); } 86% { opacity: 0.88; } 100% { opacity: 1; filter: none; } } /* ===================== sticky mission chrome (topbar + telemetry + tape) = */ /* One sticky container = no fragile per-bar offset math. Pinned above the tree (stage-rail z3) and below the drill panel (z20) / CRT overlays (z90). */ [data-theme="mission"] .mc-chrome { position: sticky; top: 0; z-index: 12; display: flex; flex-direction: column; gap: 0; margin-top: -20px; /* swallow .app's top padding: chrome sits flush */ padding-top: 12px; } /* full-bleed backdrop so scrolled content never peeks through the gutters */ [data-theme="mission"] .mc-chrome::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; background: linear-gradient(180deg, rgba(7, 17, 9, 0.97) 0%, rgba(4, 9, 6, 0.94) 100%); border-bottom: 1px solid var(--c-line-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(51, 255, 153, 0.10); } /* ===================== console chrome ==================================== */ [data-theme="mission"] .brand-title { text-transform: uppercase; letter-spacing: 0.16em; text-shadow: 0 0 8px var(--c-glow-accent); } [data-theme="mission"] .brand-sub { text-transform: uppercase; letter-spacing: 0.08em; } [data-theme="mission"] .brand-mark { color: var(--c-accent); border-radius: 0; box-shadow: 0 0 12px rgba(51, 255, 153, 0.25), inset 0 0 8px rgba(51, 255, 153, 0.12); } [data-theme="mission"] .topbar { border-bottom: 1px solid var(--c-line); padding-bottom: 8px; } [data-theme="mission"] .rail-cell { text-shadow: 0 0 6px rgba(51, 255, 153, 0.25); } /* hard-cornered instrument chrome (base hardcodes pill/round radii) */ [data-theme="mission"] .chip, [data-theme="mission"] .badge, [data-theme="mission"] .tick-kind, [data-theme="mission"] .motif-icon, [data-theme="mission"] .signin-card { border-radius: 0; } /* ===================== telemetry readout line ============================ */ [data-theme="mission"] .mc-telemetry { display: flex; align-items: center; gap: 18px; padding: 4px 2px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; overflow: hidden; } [data-theme="mission"] .mc-tel-item { display: inline-flex; align-items: center; gap: 6px; } [data-theme="mission"] .mc-tel-val { color: var(--c-muted); text-shadow: 0 0 6px rgba(51, 255, 153, 0.2); } [data-theme="mission"] .mc-lamp { width: 7px; height: 7px; background: var(--c-green); box-shadow: 0 0 6px var(--c-green); animation: mc-lamp 2.2s var(--e-standard) infinite; } @keyframes mc-lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } [data-theme="mission"] .mc-tel-cursor { margin-left: auto; color: var(--c-accent); text-shadow: 0 0 6px var(--c-glow-accent); animation: mc-cursor 1.1s steps(1, end) infinite; } @keyframes mc-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* sys status label: text lives in CSS so SYSTEM DISTRESS can swap it (no JS) */ [data-theme="mission"] .mc-sys-label::after { content: "SYS ONLINE"; } /* SYSTEM DISTRESS must be unmissable from the always-pinned chrome: the lamp and label go red (faster blink), the chrome's bottom edge floods red. All signals remain as static color under prefers-reduced-motion. */ [data-theme="mission"] body[data-distress="1"] .mc-sys-label::after { content: "SYS DISTRESS"; } [data-theme="mission"] body[data-distress="1"] .mc-tel-item:first-child { color: var(--c-red); text-shadow: 0 0 8px var(--c-glow-red); } [data-theme="mission"] body[data-distress="1"] .mc-lamp { background: var(--c-red); box-shadow: 0 0 8px var(--c-red); animation-duration: 0.55s; } [data-theme="mission"] body[data-distress="1"] .mc-chrome::before { border-bottom: 2px solid var(--c-red); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 1px 16px rgba(255, 59, 48, 0.45); } /* ===================== ticker = frozen telemetry tape (TOP bar) ========== */ /* The base layer styles .ticker-wrap as a bottom footer (border-top + margin-top:auto). As part of the sticky top chrome it becomes a thin telemetry tape: border-bottom edge, FEED end-cap, ~28px tall. The scroll-loop mechanics (duplicated track, -50% translate, hover pause, JS-computed --d-ticker-computed on #ticker-track) are untouched. */ [data-theme="mission"] .ticker-wrap { margin-top: 0; /* base: auto (footer push) */ border-top: 1px solid var(--c-line); border-bottom: none; /* chrome ::before owns the bottom edge */ display: flex; align-items: stretch; background: rgba(3, 8, 5, 0.6); box-shadow: inset 0 1px 10px rgba(51, 255, 153, 0.04); } [data-theme="mission"] .ticker-track { padding: 6px 0; flex: 0 0 auto; } [data-theme="mission"] .mc-tape-label { position: relative; z-index: 1; /* masks the tape sliding under it */ flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 10px; margin-right: 12px; background: #07140d; border-right: 1px solid var(--c-line-strong); color: var(--c-accent); font-size: 0.6rem; font-weight: 750; letter-spacing: 0.18em; text-shadow: 0 0 6px var(--c-glow-accent); } [data-theme="mission"] .tick-item { font-size: 0.66rem; } /* log tails = phosphor terminal */ [data-theme="mission"] .log-tail { background: #020503; color: #8fe8b4; text-shadow: 0 0 4px rgba(51, 255, 153, 0.25); } /* ===================== instrument tiles (nodes) ========================== */ [data-theme="mission"] .node { box-shadow: inset 0 0 14px rgba(51, 255, 153, 0.05), 0 0 6px rgba(51, 255, 153, 0.10); } [data-theme="mission"] .node:hover { box-shadow: inset 0 0 14px rgba(51, 255, 153, 0.09), 0 0 14px rgba(51, 255, 153, 0.28); } [data-theme="mission"] .node-title { text-shadow: 0 0 6px rgba(51, 255, 153, 0.22); } [data-theme="mission"] .node.placeholder { box-shadow: none; } /* raster shimmer sweeps down a tile on hover (one-shot, decorative) */ [data-theme="mission"] .node:not(.placeholder)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(51, 255, 153, 0.13) 50%, transparent 100%); background-size: 100% 220%; background-position: 0 -120%; background-repeat: no-repeat; opacity: 0; } [data-theme="mission"] .node:not(.placeholder):hover::after { opacity: 1; animation: mc-shimmer 0.7s var(--e-standard) 1; } @keyframes mc-shimmer { from { background-position: 0 -120%; } to { background-position: 0 120%; } } /* issue roots: command-tier strip light along the top edge */ [data-theme="mission"] .issue-node:not(.placeholder) { border-top: 2px solid var(--c-accent); } [data-theme="mission"] .issue-node.untracked { border-top-color: var(--c-faint); } /* ===================== stage rail: indexed console tracks ================ */ [data-theme="mission"] .stage-rail { counter-reset: mc-stage -1; } [data-theme="mission"] .rail-cell { counter-increment: mc-stage; } [data-theme="mission"] .rail-cell::before { content: "0" counter(mc-stage); margin-right: 7px; padding: 1px 4px; border: 1px solid var(--c-line); color: var(--c-faint); font-size: 0.6rem; letter-spacing: 0.06em; line-height: 1.4; } /* ===================== health strip: instrument tiles + oscilloscope ==== */ [data-theme="mission"] .hchip { /* corner brackets (8 hairline gradients) over the panel fill */ background: linear-gradient(var(--c-line-strong), var(--c-line-strong)) top left / 9px 1px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) top left / 1px 9px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) top right / 9px 1px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) top right / 1px 9px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) bottom left / 9px 1px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) bottom left / 1px 9px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) bottom right / 9px 1px no-repeat, linear-gradient(var(--c-line-strong), var(--c-line-strong)) bottom right / 1px 9px no-repeat, var(--c-panel); box-shadow: inset 0 0 10px rgba(51, 255, 153, 0.04); } /* status lamps get a matching glow (instrument indicator bulbs) */ [data-theme="mission"] .hchip[data-status="ok"] .dot { box-shadow: 0 0 6px var(--c-green); } [data-theme="mission"] .hchip[data-status="warn"] .dot { box-shadow: 0 0 6px var(--c-amber); } [data-theme="mission"] .hchip[data-status="bad"] .dot { box-shadow: 0 0 6px var(--c-red); } [data-theme="mission"] .hchip[data-status="info"] .dot { box-shadow: 0 0 6px var(--c-blue); } /* oscilloscope idle sweep behind the chips (chips are positioned -> paint above) */ [data-theme="mission"] .health-strip { position: relative; } [data-theme="mission"] .health-strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(51, 255, 153, 0.07) 38%, rgba(51, 255, 153, 0.18) 50%, rgba(51, 255, 153, 0.07) 62%, transparent 100%); background-size: 220px 100%; background-repeat: no-repeat; background-position: -220px 0; animation: mc-scope 7s var(--e-linear) infinite; } @keyframes mc-scope { from { background-position: -220px 0; } to { background-position: calc(100% + 220px) 0; } } /* ===================== flow: bright light packets with trailing glow ===== */ [data-theme="mission"] .chain[data-active="1"] .cell[data-flow="1"] .connector::after { width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; /* head (bottom, travel direction) white-hot, tail fading up */ background: linear-gradient(180deg, rgba(184, 255, 217, 0) 0%, var(--c-pulse) 60%, #ffffff 100%); box-shadow: 0 0 10px 2px var(--c-glow-accent), 0 0 26px 8px rgba(51, 255, 153, 0.25); } /* same-name redefinition (wins over cockpit.css): end offset matches the 12px-tall packet so the head kisses the node edge, never overshoots */ @keyframes pulse-travel { 0% { top: -6px; opacity: 0; } 2% { opacity: 1; } 11% { top: calc(100% - 12px); opacity: 1; } 13% { top: calc(100% - 12px); opacity: 0; } 100% { top: calc(100% - 12px); opacity: 0; } } /* ===================== stall + failure states ============================ */ /* stalled = alert-amber breathe, hotter than spine */ @keyframes glow-amber { from { box-shadow: 0 0 6px 0 var(--c-glow-amber), inset 0 0 10px rgba(255, 176, 0, 0.08); } to { box-shadow: 0 0 22px 5px var(--c-glow-amber), inset 0 0 14px rgba(255, 176, 0, 0.16); } } @keyframes glow-red { from { box-shadow: 0 0 6px 0 var(--c-glow-red), inset 0 0 10px rgba(255, 59, 48, 0.08); } to { box-shadow: 0 0 22px 5px var(--c-glow-red), inset 0 0 14px rgba(255, 59, 48, 0.16); } } /* motif badges become square warning lamps */ [data-theme="mission"] [data-motif="shaking-lock"] .motif-icon, [data-theme="mission"] [data-motif="flame"] .motif-icon { background: #1c0503; box-shadow: 0 0 10px var(--c-glow-red); } [data-theme="mission"] [data-motif="stalled-gears"] .motif-icon, [data-theme="mission"] [data-motif="sad-robot"] .motif-icon { background: #1f1402; box-shadow: 0 0 10px var(--c-glow-amber); } /* shaking lock: hard high-contrast strobe layered onto the rattle */ @keyframes motif-shake { 0%, 22%, 46%, 100% { transform: none; filter: none; } 24% { transform: translateX(-2px) rotate(-10deg); filter: brightness(2.4); } 28% { transform: translateX(2px) rotate(10deg); filter: brightness(0.7); } 32% { transform: translateX(-2px) rotate(-8deg); filter: brightness(2.4); } 36% { transform: translateX(2px) rotate(8deg); filter: brightness(0.7); } 40% { transform: translateX(-1px) rotate(-4deg); filter: brightness(2); } 44% { transform: none; filter: none; } } /* gate node carrying a LIVE lock gets a klaxon border flash (hard steps) */ [data-theme="mission"] .node[data-motif="shaking-lock"]:not(.placeholder) { border-color: var(--c-red); animation: mission-klaxon var(--d-shake) steps(2, end) infinite; } @keyframes mission-klaxon { 0%, 100% { box-shadow: 0 0 4px 0 var(--c-glow-red); background: var(--c-node-bg); } 50% { box-shadow: 0 0 18px 4px var(--c-glow-red); background: #2a0a06; } } /* mirror the base distress suppression for the theme-added node animation */ [data-theme="mission"] body[data-distress="1"] .node[data-motif] { animation: none !important; } /* flame flicker: brighter, harder steps */ @keyframes motif-flame { 0% { transform: scale(1); filter: brightness(1); } 33% { transform: scale(1.22) rotate(-3deg); filter: brightness(1.8); } 66% { transform: scale(0.88) rotate(3deg); filter: brightness(0.9); } 100% { transform: scale(1); filter: brightness(1); } } /* drift tide: amber hazard chevrons */ [data-theme="mission"] .tide-strip { border-radius: 0; background: repeating-linear-gradient(115deg, var(--c-amber) 0 14px, #271a02 14px 28px); box-shadow: 0 0 12px rgba(255, 176, 0, 0.35); opacity: 0.8; } /* ===================== SYSTEM DISTRESS: full-width alert strip =========== */ [data-theme="mission"] .banner { position: relative; overflow: hidden; } [data-theme="mission"] .banner[data-level="warn"] { text-shadow: 0 0 8px var(--c-glow-amber); } [data-theme="mission"] .banner[data-level="distress"] { /* full-bleed red klaxon strip (escapes the centered .app column) */ width: 100vw; margin-left: calc(50% - 50vw); border-left: none; border-right: none; border-radius: 0; padding: 11px 14px; font-size: 0.86rem; letter-spacing: 0.34em; color: #ffd9d6; text-shadow: 0 0 10px var(--c-glow-red); background: linear-gradient(180deg, rgba(255, 59, 48, 0.24), rgba(110, 7, 4, 0.34)); } /* sweeping searchlight highlight across the strip */ [data-theme="mission"] .banner[data-level="distress"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%); animation: mission-sweep calc(var(--d-distress) * 2) var(--e-linear) infinite; } @keyframes mission-sweep { from { left: -45%; } to { left: 105%; } } /* hard high-contrast coordinated pulse (same-name redefinition) */ @keyframes distress-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-red); filter: brightness(1); } 50% { box-shadow: 0 0 34px 6px var(--c-glow-red); filter: brightness(1.4); } } /* ===================== drill panel = phosphor terminal =================== */ [data-theme="mission"] .drill-panel { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px), linear-gradient(180deg, #07140d 0%, #051009 100%); border-left: 1px solid var(--c-accent); box-shadow: -14px 0 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(51, 255, 153, 0.10); } /* terminal reveal: slide + phosphor flash when the panel un-hides */ [data-theme="mission"] .drill-panel:not([hidden]) { animation: mc-panel-in var(--d-panel) var(--e-standard) 1; } @keyframes mc-panel-in { 0% { transform: translateX(16px); opacity: 0.35; filter: brightness(1.8); } 60% { opacity: 1; } 100% { transform: none; filter: none; } } /* prompt prefix + blinking block cursor on the panel title (pure CSS; content is never re-typed by JS) */ [data-theme="mission"] .panel-title { text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(51, 255, 153, 0.22); } [data-theme="mission"] .panel-title::before { content: "> "; color: var(--c-accent); } [data-theme="mission"] .panel-title::after { content: "\25AE"; margin-left: 7px; color: var(--c-accent); text-shadow: 0 0 6px var(--c-glow-accent); animation: mc-cursor 1.1s steps(1, end) infinite; } /* staggered section readout (subtle "coming up on the terminal" feel) */ [data-theme="mission"] .panel-section { animation: mc-section-in 0.3s var(--e-enter) both; } [data-theme="mission"] .panel-section:nth-child(2) { animation-delay: 0.05s; } [data-theme="mission"] .panel-section:nth-child(3) { animation-delay: 0.10s; } [data-theme="mission"] .panel-section:nth-child(4) { animation-delay: 0.15s; } [data-theme="mission"] .panel-section:nth-child(5) { animation-delay: 0.20s; } [data-theme="mission"] .panel-section:nth-child(n+6) { animation-delay: 0.25s; } @keyframes mc-section-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } [data-theme="mission"] .panel-section h3 { color: var(--c-muted); } /* ===================== phone viewport (~380px): thin sticky chrome ======= */ @media (max-width: 640px) { /* topbar collapses to one row: chips become a horizontal scroller */ [data-theme="mission"] .topbar { flex-wrap: nowrap; } [data-theme="mission"] .topchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 60vw; } [data-theme="mission"] .topchips::-webkit-scrollbar { display: none; } [data-theme="mission"] .brand-sub { display: none; } [data-theme="mission"] .brand-title { font-size: 0.86rem; } [data-theme="mission"] .brand-mark { width: 30px; height: 30px; } /* telemetry slims down; the tape stays ~28px tall */ [data-theme="mission"] .mc-telemetry { gap: 12px; } [data-theme="mission"] .mc-tel-sector { display: none; } [data-theme="mission"] .ticker-track { padding: 5px 0; } [data-theme="mission"] .mc-tape-label { padding: 0 7px; margin-right: 8px; } } /* ===================== accessibility ===================================== */ /* cockpit.css already zeroes every animation under prefers-reduced-motion via !important (duration 0.01ms, single iteration) and the boot script never adds body.boot. Explicitly kill EVERY theme-added loop/strobe/sweep as well: boot overlay + CRT warm-up, telemetry lamp + cursors, panel reveal + section stagger, oscilloscope sweep, hover shimmer, klaxon, distress searchlight, scanlines. */ @media (prefers-reduced-motion: reduce) { [data-theme="mission"] .banner[data-level="distress"]::after { animation: none; display: none; } [data-theme="mission"] .node[data-motif] { animation: none !important; } [data-theme="mission"] body::before { background: none; } [data-theme="mission"] body.boot .mc-boot { display: none; animation: none; } [data-theme="mission"] body.boot .app { animation: none; opacity: 1; filter: none; } [data-theme="mission"] .mc-lamp { animation: none; opacity: 1; } [data-theme="mission"] .mc-tel-cursor, [data-theme="mission"] .panel-title::after { animation: none; opacity: 1; } [data-theme="mission"] .health-strip::before { animation: none; display: none; } [data-theme="mission"] .node:not(.placeholder)::after, [data-theme="mission"] .node:not(.placeholder):hover::after { animation: none; opacity: 0; } [data-theme="mission"] .drill-panel:not([hidden]) { animation: none; } [data-theme="mission"] .panel-section { animation: none; opacity: 1; transform: none; } }