/* ───────────────────────────────────────────────────────────── hud.css — Salian Defense cursor HUD. Self-contained. Everything is scoped under .hud-root except the single global body rule that hides the native cursor. ───────────────────────────────────────────────────────────── */ /* Sole global side-effect — hud.jsx adds .hud-active to on mount */ body.hud-active { cursor: none; } body.hud-active * { cursor: none; } /* Live page (index.html): the AR reticle replaces the native + scene.js custom cursor on desktop. Hide the scene.js cursor dot/ring while the HUD owns the pointer, but keep REAL cursors on form controls so inputs stay usable. */ body.hud-active #cursor-dot, body.hud-active #cursor-ring { display: none !important; } body.hud-active input, body.hud-active textarea, body.hud-active select { cursor: text !important; } body.hud-active a, body.hud-active button, body.hud-active label, body.hud-active .intent-btn, body.hud-active .nav-dot { cursor: pointer !important; } /* World-dim layer owned exclusively by hud-live.js (never touches scene.js's #scan-dim). Sits above the world + page chrome but below .hud-root, so a locked target's brackets/panel stay bright while everything else recedes. */ #hud-lock-dim { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 42%, rgba(2, 4, 8, 0.30) 0%, rgba(2, 4, 8, 0.82) 100%); transition: opacity 0.32s ease; } .hud-root { position: fixed; inset: 0; pointer-events: none; z-index: 90; font-family: 'JetBrains Mono', ui-monospace, monospace; color: #e8dfd0; -webkit-font-smoothing: antialiased; --bone: #e8dfd0; --bone-dim: rgba(232, 223, 208, 0.55); --bone-soft: rgba(232, 223, 208, 0.78); --void: #0a0612; /* Theme accents — switch via data-theme */ --hud-primary: #00e5ff; --hud-primary-rgb: 0, 229, 255; --hud-secondary: #d4a04a; --hud-secondary-rgb: 212, 160, 74; --hud-warn: #ff1830; } .hud-root[data-theme="magenta"] { --hud-primary: #ff2a8a; --hud-primary-rgb: 255, 42, 138; } .hud-root[data-theme="crimson"] { --hud-primary: #ff3548; --hud-primary-rgb: 255, 53, 72; --hud-secondary: #e8dfd0; --hud-secondary-rgb: 232, 223, 208; } .hud-root[data-theme="mono"] { --hud-primary: #e8dfd0; --hud-primary-rgb: 232, 223, 208; --hud-secondary: #c9bfa9; --hud-secondary-rgb: 201, 191, 169; } /* ──────── Visor (Roman helmet framing) ──────── */ /* A subtle "looking through a helmet" frame: dark cheek-guard fades on each side that taper inward toward the chin, a soft chin shadow, a thin gold brow band with a centred crest-mount ornament + rivets, and a near-invisible nose-guard line. Sits above the CRT scan but below all HUD chrome so the data layer reads as "projected onto the visor's inside surface." */ .hud-root .visor { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; --visor-amount: 1; } .hud-root .visor-cheek { position: absolute; top: 0; bottom: 0; width: 22vw; pointer-events: none; } .hud-root .visor-cheek-l { left: 0; background: linear-gradient(95deg, rgba(6, 4, 10, calc(0.65 * var(--visor-amount))) 0%, rgba(6, 4, 10, 0) 100%); /* widens slightly as it descends toward the chin */ clip-path: polygon(0 0, 38% 0, 62% 100%, 0 100%); } .hud-root .visor-cheek-r { right: 0; background: linear-gradient(265deg, rgba(6, 4, 10, calc(0.65 * var(--visor-amount))) 0%, rgba(6, 4, 10, 0) 100%); clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); } .hud-root .visor-chin { position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; background: linear-gradient(to top, rgba(6, 4, 10, calc(0.55 * var(--visor-amount))) 0%, rgba(6, 4, 10, 0) 75%); -webkit-mask: radial-gradient(ellipse 72% 110% at 50% 110%, transparent 0%, transparent 32%, #000 64%); mask: radial-gradient(ellipse 72% 110% at 50% 110%, transparent 0%, transparent 32%, #000 64%); } .hud-root .visor-brow { position: absolute; left: 0; right: 0; top: 0; height: 38px; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 4, 10, calc(0.4 * var(--visor-amount))), rgba(6, 4, 10, 0)); } .hud-root .visor-brow-line { position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(212, 160, 74, calc(0.18 * var(--visor-amount))) 12%, rgba(212, 160, 74, calc(0.32 * var(--visor-amount))) 50%, rgba(212, 160, 74, calc(0.18 * var(--visor-amount))) 88%, transparent 100%); } .hud-root .visor-crest { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 240px; height: 32px; color: rgba(212, 160, 74, calc(0.65 * var(--visor-amount))); filter: drop-shadow(0 0 4px rgba(212, 160, 74, calc(0.18 * var(--visor-amount)))); } .hud-root .visor-noseguard { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 1px; height: 92px; background: linear-gradient(180deg, rgba(212, 160, 74, calc(0.35 * var(--visor-amount))) 0%, rgba(212, 160, 74, calc(0.10 * var(--visor-amount))) 60%, rgba(212, 160, 74, 0) 100%); } .hud-root .visor-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 92% at 50% 52%, transparent 0%, transparent 58%, rgba(6, 4, 10, calc(0.18 * var(--visor-amount))) 80%, rgba(6, 4, 10, calc(0.42 * var(--visor-amount))) 100%); } /* T-mask "eye slit" hint — extremely subtle horizontal line at brow level and another at chin level, suggesting the visor's eye-opening geometry. */ .hud-root .visor-slit-top, .hud-root .visor-slit-bot { position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 223, 208, calc(0.06 * var(--visor-amount))), transparent); pointer-events: none; } .hud-root .visor-slit-top { top: 36px; } .hud-root .visor-slit-bot { bottom: 18vh; } /* ──────── CRT atmosphere (scoped to HUD so removing the HUD removes it) ──────── */ .hud-root .crt-scan { position: fixed; inset: 0; pointer-events: none; z-index: 6; background: repeating-linear-gradient( 0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.15) 3px, rgba(0,0,0,0) 4px); mix-blend-mode: multiply; } .hud-root .crt-flicker { position: fixed; inset: 0; pointer-events: none; z-index: 7; background: rgba(var(--hud-primary-rgb), 0.014); animation: hud-flicker 5.5s infinite steps(2); } @keyframes hud-flicker { 0%, 100% { opacity: 0; } 10% { opacity: 0.7; } 10.5% { opacity: 0; } 60% { opacity: 0; } 60.5% { opacity: 0.5; } 61% { opacity: 0; } } /* ──────── Ambient corner chrome ──────── */ .hud-root .amb { position: fixed; z-index: 35; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: var(--bone-dim); text-transform: uppercase; text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8); padding: 16px 20px; pointer-events: none; transition: opacity 0.3s; } .hud-root .amb-tl { top: 0; left: 0; } .hud-root .amb-tr { top: 0; right: 0; text-align: right; } .hud-root .amb-bl { bottom: 0; left: 0; } .hud-root .amb-br { bottom: 0; right: 0; text-align: right; } .hud-root .amb-row { display: flex; gap: 10px; align-items: baseline; line-height: 1.7; } .hud-root .amb-tr .amb-row, .hud-root .amb-br .amb-row { justify-content: flex-end; } .hud-root .amb-k { opacity: 0.55; } .hud-root .amb-v { color: var(--bone-soft); } .hud-root .amb-v.accent { color: var(--hud-primary); } .hud-root .amb-v.gold { color: var(--hud-secondary); } .hud-root .amb-brand { font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 0.34em; color: var(--bone); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .hud-root .amb-brand .dot { width: 6px; height: 6px; background: var(--hud-primary); box-shadow: 0 0 6px var(--hud-primary); border-radius: 50%; animation: hud-dot 2.2s infinite ease-in-out; } @keyframes hud-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } .hud-root .amb-bracket { position: absolute; width: 14px; height: 14px; border: 1px solid var(--hud-primary); opacity: 0.55; } .hud-root .amb-tl .amb-bracket { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .hud-root .amb-tr .amb-bracket { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .hud-root .amb-bl .amb-bracket { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .hud-root .amb-br .amb-bracket { bottom: 6px; right: 6px; border-left: 0; border-top: 0; } /* ──────── Reticle ──────── */ .hud-root .reticle { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 95; pointer-events: none; will-change: transform; mix-blend-mode: screen; } /* Center pip — small bright core, the "you are here" dot. */ .hud-root .reticle-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--hud-primary); border-radius: 50%; box-shadow: 0 0 8px var(--hud-primary), 0 0 16px rgba(var(--hud-primary-rgb), 0.55); } /* Rotating diamond — the iconic AR reticle. Always spinning (slow), speeds up + gold-shifts when locked on a target. 36px is big enough to read as a proper crosshair element rather than a decorative dot. */ .hud-root .reticle-diamond { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border: 1.5px solid var(--hud-primary); transform: rotate(45deg); opacity: 0.85; animation: hud-spin 10s linear infinite; filter: drop-shadow(0 0 4px rgba(var(--hud-primary-rgb), 0.5)); transition: width 0.18s, height 0.18s, left 0.18s, top 0.18s, border-color 0.18s, opacity 0.18s; } .hud-root .reticle[data-hot="1"] .reticle-diamond { left: -22px; top: -22px; width: 44px; height: 44px; border-color: var(--hud-secondary); border-width: 2px; opacity: 1; animation: hud-spin 4s linear infinite; filter: drop-shadow(0 0 8px rgba(var(--hud-secondary-rgb), 0.7)); } @keyframes hud-spin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } } /* Crosshair ticks — four short marks at N/S/E/W of the cursor, always on. */ .hud-root .reticle-cross::before, .hud-root .reticle-cross::after, .hud-root .reticle-cross .v1, .hud-root .reticle-cross .v2 { content: ''; position: absolute; background: var(--hud-primary); opacity: 0.85; box-shadow: 0 0 4px rgba(var(--hud-primary-rgb), 0.55); } .hud-root .reticle-cross::before { left: -28px; top: -0.5px; width: 12px; height: 1.5px; } .hud-root .reticle-cross::after { right: -28px; top: -0.5px; width: 12px; height: 1.5px; } .hud-root .reticle-cross .v1 { left: -0.5px; top: -28px; width: 1.5px; height: 12px; } .hud-root .reticle-cross .v2 { left: -0.5px; bottom: -28px; width: 1.5px; height: 12px; } /* On lock-on, ticks brighten + extend outward */ .hud-root .reticle[data-hot="1"] .reticle-cross::before { left: -34px; width: 16px; background: var(--hud-secondary); } .hud-root .reticle[data-hot="1"] .reticle-cross::after { right: -34px; width: 16px; background: var(--hud-secondary); } .hud-root .reticle[data-hot="1"] .reticle-cross .v1 { top: -34px; height: 16px; background: var(--hud-secondary); } .hud-root .reticle[data-hot="1"] .reticle-cross .v2 { bottom: -34px; height: 16px; background: var(--hud-secondary); } .hud-root .reticle-aperture { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hud-primary); opacity: 0.5; animation: hud-spin 9s linear infinite; } .hud-root .reticle-aperture::before, .hud-root .reticle-aperture::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(var(--hud-primary-rgb), 0.55); border-radius: 50%; clip-path: polygon(50% 50%, 100% 30%, 100% 0, 60% 0); } .hud-root .reticle-aperture::after { transform: rotate(180deg); } .hud-root .reticle-ring { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border: 1px solid var(--hud-secondary); border-radius: 50%; opacity: 0; transform: scale(0.7); transition: opacity 0.25s, transform 0.25s; } .hud-root .reticle-ring::before { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(var(--hud-secondary-rgb), 0.4); border-radius: 50%; } .hud-root .reticle[data-hot="1"] .reticle-ring { opacity: 0.85; transform: scale(1); } .hud-root .reticle-readout { position: absolute; left: 24px; top: -4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--hud-primary); white-space: nowrap; text-shadow: 0 0 6px rgba(0,0,0,0.95); opacity: 0.9; mix-blend-mode: normal; } /* ──────── Waypoints (visible activation points) ──────── */ .hud-root .hotspot { position: fixed; pointer-events: none; /* waypoints are passive AR markers now — the right nav rail is the only click target. No hover/click analysis pop-ups. */ } /* Waypoint diamonds + lock brackets retired — the 3D holographic objects are the navigation targets now (hover to lock on, click to fly). */ .hud-root .waypoint, .hud-root .locks { display: none !important; } .hud-root .waypoint { position: absolute; left: 50%; top: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: 0.85; transition: opacity 0.3s; } .hud-root .hotspot.is-active .waypoint { opacity: 0; } .hud-root .waypoint-diamond { width: 32px; height: 32px; border: 1.5px solid var(--hud-primary); transform: rotate(45deg); position: relative; background: rgba(8, 6, 14, 0.45); box-shadow: 0 0 14px rgba(var(--hud-primary-rgb), 0.55), inset 0 0 8px rgba(var(--hud-primary-rgb), 0.35); animation: hud-waypointPulse 2.6s ease-in-out infinite; } /* Inner filled diamond — softer ambient fill */ .hud-root .waypoint-diamond::before { content: ''; position: absolute; inset: 6px; background: rgba(var(--hud-primary-rgb), 0.22); border: 1px solid rgba(var(--hud-primary-rgb), 0.7); } /* Bright central focal point — the obvious "click here" target */ .hud-root .waypoint-diamond::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--hud-primary); border-radius: 50%; box-shadow: 0 0 8px var(--hud-primary), 0 0 16px rgba(var(--hud-primary-rgb), 0.6); transform: rotate(-45deg); /* counter-rotate so the dot stays a circle inside the rotated diamond */ } @keyframes hud-waypointPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hud-primary-rgb), 0.35), 0 0 8px rgba(var(--hud-primary-rgb), 0.5); } 50% { box-shadow: 0 0 0 10px rgba(var(--hud-primary-rgb), 0), 0 0 12px rgba(var(--hud-primary-rgb), 0.75); } } .hud-root .waypoint-label { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.22em; color: var(--hud-secondary); text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 6px rgba(var(--hud-secondary-rgb), 0.35); white-space: nowrap; text-transform: uppercase; } .hud-root .waypoint-label::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 6px; background: rgba(var(--hud-secondary-rgb), 0.7); } .hud-root .waypoint-label .code { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 400; letter-spacing: 0.28em; color: var(--bone-dim); margin-top: 2px; } /* Debug overlay to visualize hit zones (toggle data-debug="1" on .hud-root) */ .hud-root .hotspot::after { content: ''; position: absolute; inset: 0; border: 1px dashed rgba(var(--hud-primary-rgb), 0); pointer-events: none; transition: border-color 0.3s; } .hud-root[data-debug="1"] .hotspot::after { border-color: rgba(var(--hud-primary-rgb), 0.35); } /* ──────── Lock-on brackets ────────────────────────────────────────────── Three states: .is-dim — always-on, faint outline. "This is clickable." .is-active — cursor over the hotspot. Full brightness + label visible. .is-locked — analysis complete. Brackets shift to gold, label confirms. */ .hud-root .locks { position: fixed; pointer-events: none; z-index: 50; transition: opacity 0.2s; opacity: 0; } /* Dim mode: subtle bracket outline, no label. Visible but quiet. */ .hud-root .locks.is-dim { opacity: 0.32; } .hud-root .locks.is-dim .lock-corner { width: 10px; height: 10px; border-width: 1px; box-shadow: 0 0 3px rgba(var(--hud-primary-rgb), 0.25); } .hud-root .locks.is-dim .locks-tag { display: none; } /* Active mode: brackets snap to full opacity + size up + sweep starts */ .hud-root .locks.is-active { opacity: 1; } .hud-root .locks.is-locked .lock-corner { border-color: var(--hud-secondary); box-shadow: 0 0 6px rgba(var(--hud-secondary-rgb), 0.55); } .hud-root .lock-corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--hud-primary); box-shadow: 0 0 5px rgba(var(--hud-primary-rgb), 0.4); transition: border-color 0.18s, width 0.18s, height 0.18s, border-width 0.18s, box-shadow 0.18s; } .hud-root .lock-corner.tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; } .hud-root .lock-corner.tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; } .hud-root .lock-corner.bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; } .hud-root .lock-corner.br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; } .hud-root .locks.is-active .lock-corner.tl { animation: hud-lockTL 0.4s ease forwards; } .hud-root .locks.is-active .lock-corner.tr { animation: hud-lockTR 0.4s ease forwards; } .hud-root .locks.is-active .lock-corner.bl { animation: hud-lockBL 0.4s ease forwards; } .hud-root .locks.is-active .lock-corner.br { animation: hud-lockBR 0.4s ease forwards; } @keyframes hud-lockTL { from { transform: translate(-7px,-7px); opacity: 0.4; } to { transform: none; opacity: 1; } } @keyframes hud-lockTR { from { transform: translate(7px,-7px); opacity: 0.4; } to { transform: none; opacity: 1; } } @keyframes hud-lockBL { from { transform: translate(-7px,7px); opacity: 0.4; } to { transform: none; opacity: 1; } } @keyframes hud-lockBR { from { transform: translate(7px,7px); opacity: 0.4; } to { transform: none; opacity: 1; } } .hud-root .locks-tag { position: absolute; top: -22px; left: -3px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.28em; color: var(--hud-primary); text-shadow: 0 0 4px rgba(0,0,0,0.95); white-space: nowrap; text-transform: uppercase; opacity: 0; transition: opacity 0.18s; } .hud-root .locks.is-active .locks-tag { opacity: 1; } .hud-root .locks.is-locked .locks-tag { color: var(--hud-secondary); } .hud-root .locks-tag .dot { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; margin-right: 6px; vertical-align: 1px; animation: hud-dot 1.2s ease-in-out infinite; } .hud-root .locks-sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hud-root .locks-sweep::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hud-primary), transparent); box-shadow: 0 0 8px var(--hud-primary); animation: hud-sweep 1.8s linear infinite; } @keyframes hud-sweep { 0% { top: 0%; } 100% { top: 100%; } } /* ──────── Leader line ──────── */ .hud-root .leader { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100%; height: 100%; } .hud-root .leader path { fill: none; stroke: var(--hud-primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; filter: drop-shadow(0 0 2px rgba(var(--hud-primary-rgb), 0.7)); animation: hud-march 1s linear infinite; } @keyframes hud-march { to { stroke-dashoffset: -12; } } /* ──────── Info panel ──────── */ .hud-root .panel { position: fixed; z-index: 65; width: 380px; pointer-events: auto; background: linear-gradient(160deg, rgba(8, 6, 14, 0.92) 0%, rgba(5, 4, 10, 0.90) 100%); border: 1px solid rgba(var(--hud-primary-rgb), 0.32); box-shadow: 0 18px 48px -10px rgba(0,0,0, 0.85), inset 0 0 0 1px rgba(var(--hud-primary-rgb), 0.04); font-family: 'JetBrains Mono', monospace; color: var(--bone); transition: width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1); } .hud-root .panel.is-spawn { animation: hud-panelSpawn 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes hud-panelSpawn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } } .hud-root .panel::before, .hud-root .panel::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--hud-primary); opacity: 0.7; pointer-events: none; } .hud-root .panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .hud-root .panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .hud-root .panel-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(var(--hud-primary-rgb), 0.18); background: rgba(var(--hud-primary-rgb), 0.05); font-size: 9px; letter-spacing: 0.26em; color: var(--hud-primary); text-transform: uppercase; position: relative; overflow: hidden; } /* a thin scanning bar that sweeps the head while a panel is live */ .hud-root .panel-head::after { content: ''; position: absolute; bottom: 0; left: -20%; width: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--hud-primary), transparent); animation: hud-headSweep 2.6s linear infinite; } @keyframes hud-headSweep { to { left: 120%; } } .hud-root .ph-seq { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.18em; color: var(--bone-dim); } .hud-root .ph-seq .accent { color: var(--hud-primary); } .hud-root .panel-head .ph-dot { width: 6px; height: 6px; background: var(--hud-primary); border-radius: 50%; box-shadow: 0 0 6px var(--hud-primary); animation: hud-dot 1.1s infinite ease-in-out; } .hud-root .panel-head .ph-code { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-root .panel-head .ph-conf { display: flex; align-items: center; gap: 6px; color: var(--hud-secondary); font-size: 8.5px; letter-spacing: 0.2em; } .hud-root .panel-head .ph-bar { width: 32px; height: 2px; background: rgba(var(--hud-secondary-rgb), 0.18); position: relative; overflow: hidden; } .hud-root .panel-head .ph-bar > i { position: absolute; inset: 0; background: var(--hud-secondary); box-shadow: 0 0 4px var(--hud-secondary); transform-origin: left; animation: hud-conf 0.7s ease-out both; } @keyframes hud-conf { from { transform: scaleX(0); } } .hud-root .panel-body { padding: 14px 14px 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; align-items: start; } .hud-root .panel-num { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 38px; line-height: 0.85; color: var(--hud-secondary); letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(var(--hud-secondary-rgb), 0.25); grid-row: 1 / span 2; align-self: start; margin-top: 2px; } /* Title — moved from Cinzel (editorial serif) to a chunky display-mono. Reads as decoded text on glass, not as a printed heading. */ .hud-root .panel-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); line-height: 1.0; min-height: 1.0em; /* Faint glow — enough to read as "projected on glass" but not neon. */ text-shadow: 0 0 3px rgba(var(--hud-primary-rgb), 0.18); } .hud-root .panel-title .scramble { color: var(--hud-primary); text-shadow: 0 0 4px rgba(var(--hud-primary-rgb), 0.45); font-family: 'JetBrains Mono', monospace; font-style: normal; font-weight: 600; font-size: 1em; } /* Latin — now reads as a small-caps subtitle code, not a book caption. */ .hud-root .panel-latin { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-style: normal; font-size: 9.5px; letter-spacing: 0.22em; color: var(--hud-secondary); text-transform: uppercase; margin-top: 5px; opacity: 0.78; } .hud-root .panel-latin::before { content: '/ '; color: rgba(var(--hud-secondary-rgb), 0.45); } .hud-root .panel-class { font-size: 8.5px; letter-spacing: 0.28em; color: var(--hud-primary); margin-top: 6px; display: flex; gap: 8px; align-items: baseline; text-transform: uppercase; } .hud-root .panel-class .pcl-sep { color: var(--bone-dim); } /* Live telemetry strip — sits between identity block and SUBJECT text. 4 cells: ENV / RANGE / BEAR / ALT. Mono everywhere, label dim, value cyan or gold, unit even dimmer. Updates every frame via rAF in JS. */ .hud-root .panel-telemetry { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 0; margin-top: 10px; padding: 6px 0; border-top: 1px solid rgba(var(--hud-primary-rgb), 0.18); border-bottom: 1px solid rgba(var(--hud-primary-rgb), 0.18); background: linear-gradient(180deg, rgba(var(--hud-primary-rgb), 0.04) 0%, rgba(var(--hud-primary-rgb), 0.01) 100%); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .hud-root .panel-telemetry .tel-cell { display: flex; align-items: baseline; gap: 6px; padding: 0 10px; border-right: 1px solid rgba(var(--hud-primary-rgb), 0.14); } .hud-root .panel-telemetry .tel-cell:last-child { border-right: 0; } .hud-root .panel-telemetry .tel-k { font-size: 8.5px; letter-spacing: 0.28em; color: rgba(232, 223, 208, 0.45); text-transform: uppercase; } .hud-root .panel-telemetry .tel-v { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--hud-primary); text-shadow: 0 0 6px rgba(var(--hud-primary-rgb), 0.45); font-variant-numeric: tabular-nums; } .hud-root .panel-telemetry .tel-u { font-size: 8.5px; letter-spacing: 0.18em; color: rgba(232, 223, 208, 0.42); margin-left: -2px; } /* ENV status cell — pulses gold when tracking off-screen, locks cyan when in view */ .hud-root .panel-telemetry .tel-env { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; padding: 2px 7px; border: 1px solid currentColor; } .hud-root .panel-telemetry .tel-env.is-track { color: var(--hud-secondary); animation: hud-env-pulse 1.4s ease-in-out infinite; } .hud-root .panel-telemetry .tel-env.is-lock { color: var(--hud-primary); background: rgba(var(--hud-primary-rgb), 0.14); text-shadow: 0 0 6px rgba(var(--hud-primary-rgb), 0.6); } @keyframes hud-env-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* On phones, telemetry collapses to two rows of two cells */ @media (hover: none), (pointer: coarse) { .hud-root .panel-telemetry { grid-template-columns: 1fr 1fr; border: 1px solid rgba(var(--hud-primary-rgb), 0.18); } .hud-root .panel-telemetry .tel-cell { padding: 4px 8px; } .hud-root .panel-telemetry .tel-cell:nth-child(2n) { border-right: 0; } } /* Body text: decoded transmission. Left rule + small label above to read as a single field in a data envelope, not a free paragraph. */ .hud-root .panel-text { grid-column: 1 / -1; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.6; color: var(--bone-soft); letter-spacing: 0.015em; margin-top: 10px; padding: 8px 10px 8px 14px; min-height: 4.2em; white-space: pre-wrap; border-left: 2px solid rgba(var(--hud-primary-rgb), 0.45); background: linear-gradient(90deg, rgba(var(--hud-primary-rgb), 0.06) 0%, rgba(var(--hud-primary-rgb), 0.0) 14%); position: relative; } .hud-root .panel-text::before { content: 'SUBJECT'; position: absolute; top: -8px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 500; letter-spacing: 0.32em; color: rgba(var(--hud-primary-rgb), 0.85); background: rgba(8, 6, 14, 0.95); padding: 0 6px; text-transform: uppercase; } .hud-root .panel-text .cursor { display: inline-block; width: 7px; height: 12px; background: var(--hud-primary); margin-left: 2px; vertical-align: -2px; animation: hud-caret 0.7s steps(2) infinite; box-shadow: 0 0 4px var(--hud-primary); } @keyframes hud-caret { 50% { opacity: 0; } } .hud-root .panel-text .scramble { color: var(--hud-primary); text-shadow: 0 0 3px rgba(var(--hud-primary-rgb), 0.4); opacity: 0.95; } .hud-root .panel-stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding-top: 10px; margin-top: 4px; border-top: 1px dashed rgba(var(--hud-primary-rgb), 0.2); } .hud-root .panel-stat { display: flex; flex-direction: column; font-size: 9px; letter-spacing: 0.2em; opacity: 0; animation: hud-statReveal 0.32s ease forwards; } @keyframes hud-statReveal { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: none; } } .hud-root .panel-stat .k { color: var(--bone-dim); text-transform: uppercase; } .hud-root .panel-stat .v { color: var(--bone); font-size: 11px; margin-top: 2px; letter-spacing: 0.14em; min-height: 1.1em; } .hud-root .panel-stat .v .scramble { color: var(--hud-primary); text-shadow: 0 0 6px rgba(var(--hud-primary-rgb), 0.55); } .hud-root .panel-stat .v.accent { color: var(--hud-primary); } .hud-root .panel-stat .v.gold { color: var(--hud-secondary); } .hud-root .panel-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; } .hud-root .panel-btn { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; padding: 8px 10px; background: transparent; border: 1px solid rgba(var(--hud-primary-rgb), 0.4); color: var(--bone-soft); transition: background 0.15s, color 0.15s, border-color 0.15s; } .hud-root .panel-btn:hover { background: rgba(var(--hud-primary-rgb), 0.08); border-color: var(--hud-primary); color: var(--hud-primary); } .hud-root .panel-btn.is-primary { border-color: rgba(var(--hud-secondary-rgb), 0.55); color: var(--hud-secondary); } .hud-root .panel-btn.is-primary:hover { background: rgba(var(--hud-secondary-rgb), 0.12); border-color: var(--hud-secondary); color: var(--hud-secondary); } /* Desktop: tall panels (the Praesidium / Porta Avium 2×2 grids) scroll inside themselves instead of overflowing the viewport. Scoped to fine-pointer so it never collides with the mobile bottom-sheet rules below. */ @media (hover: hover) and (pointer: fine) { .hud-root .panel { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; } .hud-root .panel::-webkit-scrollbar { width: 6px; } .hud-root .panel::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); } .hud-root .panel::-webkit-scrollbar-thumb { background: rgba(var(--hud-primary-rgb), 0.35); border-radius: 3px; } } /* Expanded mode */ .hud-root .panel.is-expanded { width: 480px; } .hud-root .panel.is-expanded .panel-body { padding: 18px 18px 16px; row-gap: 10px; } .hud-root .panel.is-expanded .panel-num { font-size: 56px; } .hud-root .panel.is-expanded .panel-title { font-size: 23px; } .hud-root .panel.is-expanded .panel-latin { font-size: 12.5px; } .hud-root .panel.is-expanded .panel-text { font-size: 12px; line-height: 1.65; min-height: 0; } .hud-root .panel-detail { grid-column: 1 / -1; margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(var(--hud-primary-rgb), 0.2); font-size: 11px; line-height: 1.6; color: var(--bone-soft); } .hud-root .panel-detail h4 { font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hud-primary); margin: 14px 0 6px; font-weight: 600; } .hud-root .panel-detail p { margin: 0 0 4px; color: var(--bone-soft); } .hud-root .panel-detail ul { list-style: none; padding: 0; margin: 0; } .hud-root .panel-detail li { padding: 4px 0 4px 16px; position: relative; font-size: 11px; letter-spacing: 0.04em; } .hud-root .panel-detail li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--hud-primary); } .hud-root .panel-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: transparent; border: 1px solid rgba(232, 223, 208, 0.4); color: var(--bone-soft); font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; } .hud-root .panel.is-expanded .panel-close { display: flex; } .hud-root .panel-close:hover { color: var(--hud-warn); border-color: var(--hud-warn); } .hud-root .panel-meter { grid-column: 1 / -1; margin-top: 8px; } .hud-root .panel-meter .lbl { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.24em; color: var(--bone-dim); margin-bottom: 4px; text-transform: uppercase; } .hud-root .panel-meter .lbl .v { color: var(--hud-secondary); } .hud-root .panel-meter .bar { height: 4px; background: rgba(var(--hud-primary-rgb), 0.1); position: relative; overflow: hidden; } .hud-root .panel-meter .bar > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hud-primary), var(--hud-secondary)); box-shadow: 0 0 6px rgba(var(--hud-primary-rgb), 0.5); transform-origin: left; animation: hud-conf 0.9s ease-out both; } /* ──────── Telemetry stream (expanded panel only) ──────── */ .hud-root .panel-stream { grid-column: 1 / -1; margin-top: 12px; padding: 8px 10px; background: rgba(0,0,0,0.45); border: 1px solid rgba(var(--hud-primary-rgb), 0.18); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; line-height: 1.5; color: var(--bone-dim); height: 78px; overflow: hidden; position: relative; letter-spacing: 0.02em; } .hud-root .panel-stream::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent); pointer-events: none; } .hud-root .panel-stream-line { display: flex; gap: 8px; white-space: nowrap; } .hud-root .panel-stream-line .t { color: rgba(var(--hud-primary-rgb), 0.75); } .hud-root .panel-stream-line .lvl { color: var(--hud-secondary); } .hud-root .panel-stream-line .lvl.warn { color: var(--hud-warn); } .hud-root .panel-stream-line .msg { color: var(--bone-soft); } /* ──────── Dock (minimized scans) ──────── */ .hud-root .dock { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 38; display: flex; gap: 8px; pointer-events: auto; } .hud-root .dock-chip { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; background: rgba(8, 6, 14, 0.85); border: 1px solid rgba(var(--hud-primary-rgb), 0.32); color: var(--bone-soft); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.18s, border-color 0.18s, color 0.18s; animation: hud-dockIn 0.3s ease both; } @keyframes hud-dockIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hud-root .dock-chip:hover { background: rgba(var(--hud-primary-rgb), 0.1); border-color: var(--hud-primary); color: var(--bone); } .hud-root .dock-chip .num { font-family: 'Rajdhani', sans-serif; font-size: 12px; color: var(--hud-secondary); letter-spacing: 0.06em; line-height: 1; } .hud-root .dock-chip .x { font-size: 11px; opacity: 0.45; margin-left: 2px; } .hud-root .dock-chip .x:hover { color: var(--hud-warn); opacity: 1; } /* ──────── Onboarding nudge ──────── */ .hud-root .nudge { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 36; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.36em; color: var(--bone-dim); text-transform: uppercase; pointer-events: none; text-shadow: 0 0 8px rgba(0,0,0,0.95); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: hud-nudge 8s ease-out forwards 5s; } .hud-root .nudge .accent { color: var(--hud-primary); } @keyframes hud-nudge { to { opacity: 0; } } /* ──────── Panel screens grid (Praesidium 2×2 instrument cards) ──────── */ .hud-root .panel-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; } /* The screens grid pushes total panel content past 380px — widen the panel when it contains a screens grid. */ .hud-root .panel:has(.panel-screens) { width: 560px; } .hud-root .panel.is-expanded:has(.panel-screens) { width: 640px; } .hud-root .screen-card { background: linear-gradient(160deg, rgba(0, 229, 255, 0.06) 0%, rgba(8, 6, 14, 0.55) 70%); border: 1px solid rgba(var(--hud-primary-rgb), 0.32); border-left: 2px solid var(--hud-primary); padding: 9px 11px 10px; position: relative; opacity: 0; animation: hud-screenIn 0.35s ease-out forwards; } @keyframes hud-screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hud-root .screen-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .hud-root .sc-code { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.20em; color: rgba(var(--hud-primary-rgb), 0.95); } .hud-root .sc-state { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.22em; padding: 1px 6px; border: 1px solid rgba(var(--hud-primary-rgb), 0.5); color: rgba(var(--hud-primary-rgb), 0.95); text-transform: uppercase; } .hud-root .sc-state.gold { color: var(--hud-secondary); border-color: rgba(var(--hud-secondary-rgb), 0.6); } .hud-root .sc-state.accent { background: rgba(var(--hud-primary-rgb), 0.16); } .hud-root .sc-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--bone); line-height: 1.1; } .hud-root .sc-class { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.22em; color: var(--bone-dim); margin: 2px 0 6px; text-transform: uppercase; } .hud-root .sc-summary { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.45; color: var(--bone-soft); margin-bottom: 6px; } .hud-root .sc-bullets { list-style: none; padding: 0; margin: 0; } .hud-root .sc-bullets li { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.5; color: var(--bone-soft); padding-left: 12px; position: relative; } .hud-root .sc-bullets li::before { content: '›'; position: absolute; left: 0; color: rgba(var(--hud-primary-rgb), 0.85); font-weight: 700; } /* Screen-card CTA button — appears when a screen has a cta:{label,href}. Used to wire working features (Vates, Hawks external links). */ .hud-root .sc-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; background: rgba(var(--hud-primary-rgb), 0.14); border: 1px solid rgba(var(--hud-primary-rgb), 0.55); color: var(--hud-primary); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s; } .hud-root .sc-cta:hover { background: rgba(var(--hud-primary-rgb), 0.28); border-color: var(--hud-primary); color: #ffffff; transform: translateY(-1px); } .hud-root .sc-cta:active { transform: translateY(0) scale(0.98); } .hud-root .sc-cta-arrow { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1; color: var(--hud-secondary); } /* Artifact-level CTA — distinct from screen-card CTAs. Used by the Horizon (Arch) card to surface the NDA-gated investor portal. */ .hud-root .panel-cta-row { margin: 12px 14px 8px; display: flex; justify-content: flex-start; } .hud-root .panel-cta { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(var(--hud-secondary-rgb), 0.12); border: 1px solid rgba(var(--hud-secondary-rgb), 0.55); color: var(--hud-secondary); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; text-decoration: none; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s; } .hud-root .panel-cta:hover { background: rgba(var(--hud-secondary-rgb), 0.26); border-color: var(--hud-secondary); color: #ffd87a; transform: translateY(-1px); } .hud-root .panel-cta:active { transform: translateY(0) scale(0.98); } .hud-root .panel-cta-arrow { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1; color: var(--hud-primary); } /* On phones, collapse 2×2 → single column */ @media (hover: none), (pointer: coarse) { .hud-root .panel-screens { grid-template-columns: 1fr; gap: 6px; } .hud-root .panel:has(.panel-screens) { width: auto; } } /* ──────── HUD compass / mini-radar (bottom-left) ──────── Circular dial showing camera bearing + a dot per waypoint. The dial ring rotates with the camera; the center arrow stays pointing up ("you are here, looking that way"). Dots show waypoint bearing relative to where you're looking, with distance encoded radially. */ .hud-compass { position: fixed; bottom: 22px; left: 22px; z-index: 36; width: 124px; height: 124px; pointer-events: none; user-select: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)); } .hud-compass-svg { width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.06) 0%, rgba(8, 6, 14, 0.78) 60%, rgba(8, 6, 14, 0.88) 100%); border-radius: 50%; border: 1px solid rgba(var(--hud-primary-rgb), 0.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hud-compass .ring-outer, .hud-compass .ring-inner { fill: none; stroke: rgba(var(--hud-primary-rgb), 0.22); stroke-width: 0.4; } .hud-compass .ring-inner { stroke-dasharray: 1.2 1.6; } .hud-compass .tick { stroke: rgba(var(--hud-primary-rgb), 0.55); stroke-width: 0.6; } .hud-compass .tick.tick-n { stroke: var(--hud-secondary); stroke-width: 1.2; } .hud-compass .dir { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.12em; font-weight: 600; fill: rgba(232, 223, 208, 0.55); text-anchor: middle; dominant-baseline: middle; } .hud-compass .dir.north { fill: var(--hud-secondary); font-weight: 700; } .hud-compass .cam-arrow { fill: var(--hud-primary); filter: drop-shadow(0 0 3px rgba(var(--hud-primary-rgb), 0.6)); } .hud-compass .cam-dot { fill: var(--hud-primary); } .hud-compass .wp-dot { fill: var(--hud-secondary); filter: drop-shadow(0 0 2px rgba(var(--hud-secondary-rgb), 0.7)); transition: opacity 0.18s, fill 0.18s; } /* Heading readout chip below the dial */ .hud-compass-readout { position: absolute; bottom: -6px; left: 50%; transform: translate(-50%, 100%); display: flex; gap: 8px; align-items: baseline; padding: 4px 10px; background: rgba(8, 6, 14, 0.82); border: 1px solid rgba(var(--hud-primary-rgb), 0.28); font-family: 'JetBrains Mono', monospace; } .hud-compass-readout .cmp-k { font-size: 7.5px; letter-spacing: 0.28em; color: var(--bone-dim); text-transform: uppercase; } .hud-compass-readout .cmp-v { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--hud-primary); font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(var(--hud-primary-rgb), 0.45); } /* On phones, shrink the compass + move it tighter into the corner */ @media (hover: none), (pointer: coarse) { .hud-compass { width: 88px; height: 88px; bottom: 14px; left: 14px; } .hud-compass-readout { padding: 3px 8px; } .hud-compass-readout .cmp-k { font-size: 6.5px; } .hud-compass-readout .cmp-v { font-size: 10px; } } /* ──────── HUD footer (bottom-center status bar) ──────── */ .hud-footer { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 38; display: flex; align-items: center; gap: 22px; padding: 7px 18px; background: linear-gradient(180deg, rgba(8, 6, 14, 0.55) 0%, rgba(5, 4, 10, 0.65) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(0, 229, 255, 0.22); border-radius: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 223, 208, 0.72); pointer-events: auto; white-space: nowrap; max-width: calc(100vw - 36px); overflow: hidden; } .hud-footer::before, .hud-footer::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid rgba(0, 229, 255, 0.55); pointer-events: none; } .hud-footer::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .hud-footer::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .hud-footer-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00e5ff; margin-right: 6px; box-shadow: 0 0 6px rgba(0, 229, 255, 0.8); animation: hud-footer-pulse 2.4s ease-in-out infinite; } @keyframes hud-footer-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .hud-footer-left { color: rgba(0, 229, 255, 0.9); font-weight: 500; } .hud-footer-mid { color: rgba(232, 223, 208, 0.78); } .hud-footer-right a { color: rgba(212, 160, 74, 0.95); text-decoration: none; border-bottom: 1px dotted rgba(212, 160, 74, 0.5); transition: color 0.2s, border-color 0.2s; } .hud-footer-right a:hover { color: #ffd87a; border-bottom-color: #ffd87a; } /* Phones — stack vertically, smaller text */ @media (hover: none), (pointer: coarse) { .hud-footer { left: 6px; right: 6px; bottom: 6px; transform: none; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 10px; font-size: 9px; letter-spacing: 0.14em; } } /* ──────── Helmet-don intro (Roman helmet put-on sequence) ──────── Sits above EVERYTHING (z-index 9999) for ~2.8s on first tab load, then fades. Visual language matches the in-scene .visor in geometry so the user feels the cheek-guards & brow they already see. */ .helmet-don { position: fixed; inset: 0; z-index: 9999; background: #02010a; pointer-events: auto; cursor: pointer; overflow: hidden; /* fade the whole overlay just before the end */ animation: helmet-overlay-fade 2.8s ease-out forwards; } .helmet-don.is-dismissed { animation: helmet-overlay-skip 0.45s ease-out forwards !important; } @keyframes helmet-overlay-fade { 0%, 78% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } @keyframes helmet-overlay-skip { to { opacity: 0; pointer-events: none; } } /* Cheek guards — opaque bronze-edged panels that swing in from the sides. Trapezoidal silhouette (clip-path) so they read as Roman galea cheeks. */ .helmet-cheek { position: absolute; top: 0; bottom: 0; width: 42vw; background: linear-gradient(180deg, rgba(40, 28, 20, 0.98) 0%, rgba(20, 14, 10, 1.0) 65%, rgba(8, 5, 4, 1.0) 100%); border: 2px solid rgba(212, 160, 74, 0.55); box-shadow: inset 0 0 80px rgba(0,0,0,0.85), 0 0 60px rgba(0,0,0,0.95); } .helmet-cheek-l { left: 0; /* trapezoid: wide at top, tapering inward toward chin */ clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%); transform: translateX(-110%); animation: helmet-cheek-l-in 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.15s forwards; } .helmet-cheek-r { right: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 18% 100%); transform: translateX(110%); animation: helmet-cheek-r-in 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.15s forwards; } @keyframes helmet-cheek-l-in { to { transform: translateX(0); } } @keyframes helmet-cheek-r-in { to { transform: translateX(0); } } /* Brow band — drops in from above. Gold/bronze horizontal beam with rivets at the ends and a centered crest mount. */ .helmet-brow { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: min(94vw, 1280px); height: 56px; background: linear-gradient(180deg, rgba(212, 160, 74, 0.42) 0%, rgba(140, 100, 40, 0.6) 55%, rgba(40, 28, 14, 1.0) 100%); border-bottom: 1.5px solid rgba(212, 160, 74, 0.95); box-shadow: 0 4px 18px rgba(0,0,0,0.6), inset 0 -8px 14px rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: space-between; padding: 0 64px; animation: helmet-brow-drop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s forwards; } @keyframes helmet-brow-drop { to { transform: translate(-50%, 0); } } .helmet-brow-rivet { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd07a 0%, #d4a04a 40%, #6b4818 100%); box-shadow: 0 0 6px rgba(212, 160, 74, 0.7); } .helmet-brow-crest { width: 36px; height: 56px; background: linear-gradient(180deg, rgba(180, 30, 30, 0.95) 0%, rgba(120, 16, 16, 1.0) 60%, rgba(60, 6, 6, 1.0) 100%); border-left: 2px solid rgba(212, 160, 74, 0.5); border-right: 2px solid rgba(212, 160, 74, 0.5); transform: translateY(-22px); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); } /* Center vertical nose-guard line — fades in last */ .helmet-noseguard { position: absolute; left: 50%; top: 56px; width: 6px; height: 28vh; background: linear-gradient(180deg, rgba(212, 160, 74, 0.8) 0%, rgba(140, 100, 40, 0.4) 70%, transparent 100%); transform: translateX(-50%) scaleY(0); transform-origin: top center; animation: helmet-nose-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s forwards; } @keyframes helmet-nose-grow { to { transform: translateX(-50%) scaleY(1); } } /* Decode text — the "HUD coming alive" moment */ .helmet-decode { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.32em; color: rgba(232, 223, 208, 0.95); text-transform: uppercase; user-select: none; } .helmet-decode-l1, .helmet-decode-l2, .helmet-decode-l3 { opacity: 0; font-size: 13px; margin: 6px 0; } .helmet-decode-l1 { color: var(--bone-dim); animation: helmet-line-in 0.45s ease-out 1.5s forwards; } .helmet-decode-l2 { color: rgba(0, 229, 255, 0.95); font-size: 18px; letter-spacing: 0.38em; text-shadow: 0 0 12px rgba(0, 229, 255, 0.6); animation: helmet-line-in 0.5s ease-out 1.85s forwards; } .helmet-decode-l3 { color: var(--hud-secondary); font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.45em; font-size: 15px; animation: helmet-line-in 0.5s ease-out 2.3s forwards; } @keyframes helmet-line-in { from { opacity: 0; transform: translateY(6px); letter-spacing: 0.5em; } to { opacity: 1; transform: translateY(0); } } .helmet-decode-skip { position: absolute; left: 50%; top: calc(100% + 28px); transform: translateX(-50%); font-size: 9px; letter-spacing: 0.45em; color: var(--bone-dim); opacity: 0; animation: helmet-line-in 0.6s ease-out 1.0s forwards; } /* Reduced-motion: just fade in/out, no swinging */ @media (prefers-reduced-motion: reduce) { .helmet-cheek-l, .helmet-cheek-r { transform: none; animation: none; } .helmet-brow { transform: translate(-50%, 0); animation: none; } .helmet-noseguard { transform: translateX(-50%) scaleY(1); animation: none; } .helmet-decode-l1, .helmet-decode-l2, .helmet-decode-l3, .helmet-decode-skip { opacity: 1; animation: none; } .helmet-don { animation-duration: 1.2s; } } /* ──────── Section rail (right-side jump nav) ──────── */ /* Right-edge waypoint list — pure HUD chrome, no big opaque panel. Tiny smoke-tone backplate, hairline frame, Cinzel numerals, bone text. Reads as part of the visor, not a separate UI element. */ .section-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; background: linear-gradient(180deg, rgba(8, 6, 14, 0.42) 0%, rgba(5, 4, 10, 0.38) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-left: 1px solid rgba(0, 229, 255, 0.35); border-right: 0; border-top: 1px solid rgba(0, 229, 255, 0.12); border-bottom: 1px solid rgba(0, 229, 255, 0.12); pointer-events: auto; font-family: 'Rajdhani', sans-serif; user-select: none; } /* Decorative bracket corners (matches .panel decoration) */ .section-rail::before, .section-rail::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid rgba(0, 229, 255, 0.6); pointer-events: none; } .section-rail::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .section-rail::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .section-rail-btn { appearance: none; background: transparent; border: 1px solid transparent; border-left: 2px solid rgba(0, 229, 255, 0.25); color: rgba(232, 223, 208, 0.62); padding: 6px 12px 6px 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 124px; transition: background 0.16s, color 0.16s, border-color 0.16s; } .section-rail-btn:hover { background: rgba(0, 229, 255, 0.08); color: #e8dfd0; border-left-color: rgba(0, 229, 255, 0.95); } .section-rail-btn:active { background: rgba(0, 229, 255, 0.16); } .section-rail-roman { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.10em; color: #00e5ff; min-width: 26px; text-align: right; text-shadow: 0 0 6px rgba(0, 229, 255, 0.4); } .section-rail-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; } /* On phones — collapse to a horizontal strip at the bottom (numerals only) */ @media (hover: none), (pointer: coarse) { .section-rail { right: 8px; left: 8px; top: auto; bottom: 76px; transform: none; flex-direction: row; justify-content: space-around; padding: 6px 4px; border: 1px solid rgba(0, 229, 255, 0.25); } .section-rail-btn { min-width: 0; flex: 1; border-left: 0; border-bottom: 2px solid rgba(0, 229, 255, 0.25); padding: 4px 2px; flex-direction: column; gap: 0; } .section-rail-btn:hover { border-left-color: transparent; border-bottom-color: rgba(0, 229, 255, 0.95); } .section-rail-label { display: none; } } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ MOBILE PASS — consolidated overrides for touch / coarse-pointer. ║ ║ Layered last so it wins specificity. Pairs with the pointer-event ║ ║ guards in hud.jsx that already filter mouseEnter to mouse only. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ @media (hover: none), (pointer: coarse) { /* ── Cursor primitives off ── */ /* On touch there's no cursor, so the reticle + leader line are noise. */ .hud-root .reticle, .hud-root .leader { display: none !important; } /* The "Move the cursor over the avenue" nudge isn't applicable. */ .hud-root .nudge { display: none !important; } /* The horizontal scan-sweep inside lock brackets is visual noise on touch. */ .hud-root .locks-sweep { display: none !important; } /* ── Bigger tap targets ── */ /* Waypoint diamonds get a minimum 44px tap zone (Apple HIG / WCAG). The .hotspot wrapper already takes the bbox; the visible diamond itself stays decorative — clicking anywhere in the hotspot pins. */ .hud-root .hotspot { min-width: 44px; min-height: 44px; } .hud-root .waypoint-diamond { width: 40px; height: 40px; } .hud-root .waypoint-diamond::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; } /* Dim brackets need to stay visible on phones too — bump opacity */ .hud-root .locks.is-dim { opacity: 0.5; } .hud-root .locks.is-dim .lock-corner { width: 12px; height: 12px; border-width: 1.5px; } /* ── Panel becomes a bottom sheet ── */ /* Override the desktop center-float positioning the JSX writes inline. Full-width sheet anchored to the bottom, scroll-overflow inside. */ .hud-root .panel { left: 8px !important; right: 8px !important; top: auto !important; bottom: 12px !important; width: auto !important; max-width: none !important; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 2px; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75); } /* Larger close affordance on the pinned panel */ .hud-root .panel-close { width: 40px; height: 40px; font-size: 20px; } /* Larger CTA buttons */ .hud-root .sc-cta, .hud-root .panel-cta { padding: 10px 14px; font-size: 12px; } /* Panel actions row: stack vertically on narrow screens */ .hud-root .panel-actions { flex-direction: column; } .hud-root .panel-btn { padding: 12px; font-size: 11px; } /* ── Visor + ambient chrome ── */ /* The visor cheek-guards crowd the small viewport. Soften further. */ body.hud-preview .visor { opacity: 0.4; } /* Ambient corner brackets stay but smaller — already partially scaled */ body.hud-preview .amb { transform: scale(0.7); } /* ── HUD-active body cursor ── */ /* The cursor-none rule should not apply on touch since there's no cursor. */ body.hud-active, body.hud-active * { cursor: auto !important; } } /* Very-narrow phones (≤380px) — drop the compass entirely so the bottom-left doesn't fight the section rail. The mini-map is a "nice to have", not load-bearing. */ @media (max-width: 380px) { .hud-compass { display: none; } }