/*
Theme Name: Maverick Hangar
Theme URI: https://maroun.au
Author: Maroun
Description: Full-screen cinematic personal site with 80s retro arcade / Top Gun aesthetic.
Version: 4.0.0
Text Domain: maverick-hangar
*/

/* === Palette === */
:root {
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2d95;
  --neon-amber: #ffa500;
  --neon-green: #39ff14;
  --bg-dark: #0a0a1a;
  --bg-navy: #0d1117;
  --bg-card: rgba(13, 17, 23, 0.85);
  --glow-cyan: 0 0 10px #00f0ff, 0 0 40px rgba(0, 240, 255, 0.3);
  --glow-pink: 0 0 10px #ff2d95, 0 0 40px rgba(255, 45, 149, 0.3);
  --glow-amber: 0 0 10px #ffa500, 0 0 40px rgba(255, 165, 0, 0.3);
  --glow-green: 0 0 10px #39ff14, 0 0 40px rgba(57, 255, 20, 0.3);
  --border-glow: 1px solid rgba(0, 240, 255, 0.2);
  --glass: rgba(10, 10, 26, 0.6);
  --glass-border: rgba(0, 240, 255, 0.12);
}

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; overflow: hidden; height: 100%; }
html {
  background: #000; overflow: hidden; height: 100%;
  /* CRT screen clipping — clips EVERYTHING including fixed elements */
  clip-path: inset(6px round 40px);
}
body {
  font-family: 'Inter', sans-serif; background: var(--bg-dark);
  color: #e0e0e0; overflow: hidden; line-height: 1.6; height: 100%;
}
@keyframes crtFlicker {
  0% { opacity: 1; } 5% { opacity: 0.98; } 10% { opacity: 1; }
  15% { opacity: 0.97; } 20% { opacity: 1; } 100% { opacity: 1; }
}
.crt-barrel { animation: crtFlicker 4s infinite; }
h1,h2,h3 { font-family: 'Press Start 2P', cursive; text-transform: uppercase; }
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-pixel { font-family: 'Press Start 2P', cursive; }
a { color: var(--neon-cyan); text-decoration: none; transition: all 0.3s; }
a:hover { text-shadow: var(--glow-cyan); }

/* === Full-screen snap container === */
.sections-container {
  height: 100vh; overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.fp-section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
}
.fp-section#hero { align-items: center; } /* Hero stays centered (cinematic intro) */
.section-inner {
  max-width: 1200px; width: 100%; padding: 1rem 2rem;
  padding-top: 2.5rem;
  max-height: 100vh; overflow-y: auto;
  scrollbar-width: none;
}
.section-inner::-webkit-scrollbar { display: none; }

/* === CRT Overlay === */
.crt-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px);
  opacity: 0.35;
}
.vhs-line {
  position: fixed; left: 0; width: 100%; height: 2px; z-index: 9998;
  background: rgba(255,255,255,0.06); animation: vhsScan 8s linear infinite;
  pointer-events: none;
}
@keyframes vhsScan { 0% { top: -3px; } 100% { top: 100vh; } }

/* === Nav bar === */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10, 10, 26, 0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}
.site-nav a {
  font-family: 'Orbitron', sans-serif; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0.7rem; border-radius: 4px; transition: all 0.3s;
}
.site-nav a:hover { background: rgba(0, 240, 255, 0.1); }
.sunset-bar { height: 2px; background: linear-gradient(90deg, #ff2d95, #ffa500, #ff2d95); animation: sunsetShimmer 3s ease infinite; }
@keyframes sunsetShimmer { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* === Section dot nav === */
/* ═══ PIXEL ART NAV ═══ */
.pixel-nav {
  position: fixed; right: 0.5rem; top: 50%; transform: translateY(-50%);
  z-index: 10001; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.pixel-nav.visible { opacity: 1; pointer-events: auto; }

/* Nav buttons — chrome gradient text, pure CSS */
.pixel-nav-btn {
  display: block; position: relative;
  cursor: pointer; background: transparent;
  border: 2px solid transparent;
  padding: 8px 22px; border-radius: 4px;
  transition: all 0.2s ease;
}
.pnb-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem; font-weight: 900;
  letter-spacing: 0.15em;
  background: linear-gradient(180deg, #fff 0%, #e0c878 25%, #d4952a 50%, #c06a1a 75%, #8b4513 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Hover — brighten + border hint */
.pixel-nav-btn:hover {
  border-color: rgba(0,229,255,0.3);
  transform: scale(1.06);
}
.pixel-nav-btn:hover .pnb-text {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) brightness(1.2);
}

/* Press */
.pixel-nav-btn:active { transform: scale(0.95); }

/* Active — neon cyan text + glowing border */
.pixel-nav-btn.active {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0,229,255,0.4), 0 0 24px rgba(0,229,255,0.15);
}
.pixel-nav-btn.active .pnb-text {
  background: linear-gradient(180deg, #fff 0%, #80f0ff 30%, #00e5ff 60%, #00b8d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.6)) drop-shadow(0 0 16px rgba(0,229,255,0.3));
}

/* === Effects === */
.flicker { animation: flicker 3s infinite; }
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;} 20%,24%,55%{opacity:0.6;} }
.blink { animation: blink 1.2s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.glitch { position: relative; }
.section-title {
  text-align: center; color: var(--neon-cyan); text-shadow: var(--glow-cyan);
  margin-bottom: 0.5rem; letter-spacing: 0.15em; font-size: clamp(0.9rem, 2.5vw, 1.6rem);
}
.section-subtitle {
  text-align: center; color: var(--neon-amber); font-size: 0.6rem;
  letter-spacing: 0.2em; margin-bottom: 2rem;
}

/* === Buttons === */
.btn-neon {
  display: inline-block; padding: 0.6rem 1.4rem;
  font-family: 'Orbitron', sans-serif; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 2px solid; border-radius: 4px; transition: all 0.3s; cursor: pointer;
}
.btn-cyan { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.btn-cyan:hover { background: rgba(0,240,255,0.15); box-shadow: var(--glow-cyan); color: var(--neon-cyan); }
.btn-pink { color: var(--neon-pink); border-color: var(--neon-pink); }
.btn-pink:hover { background: rgba(255,45,149,0.15); box-shadow: var(--glow-pink); color: var(--neon-pink); }

/* ================================================================ */
/* PRELOADER — 80s RETRO LOADING BAR                                 */
/* ================================================================ */
.preloader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #0a0a14; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
.preloader.fade-out { opacity: 0; pointer-events: none; }
.preloader.hidden { display: none; }
.preloader-inner {
  text-align: center; width: 90%; max-width: 480px;
}
.preloader-title {
  font-size: clamp(0.8rem, 2.5vw, 1.2rem); color: #39ff14;
  text-shadow: 0 0 10px #39ff14, 0 0 30px rgba(57,255,20,0.4);
  margin-bottom: 0.4rem; letter-spacing: 0.15em;
}
.preloader-ver { color: var(--neon-cyan, #00e5ff); }
.preloader-sub {
  font-size: clamp(0.35rem, 1vw, 0.5rem); color: rgba(57,255,20,0.7);
  letter-spacing: 0.2em; margin-bottom: 1.5rem;
  animation: preloaderBlink 1s step-end infinite;
}
@keyframes preloaderBlink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* Loading bar — chunky pixel style */
.preloader-bar-wrap { padding: 0 0.5rem; }
.preloader-bar-border {
  border: 3px solid #39ff14; padding: 4px; position: relative;
  background: rgba(57,255,20,0.05);
  box-shadow: 0 0 10px rgba(57,255,20,0.2), inset 0 0 10px rgba(57,255,20,0.05);
}
.preloader-bar-fill {
  height: 20px; width: 0%; background: #39ff14;
  box-shadow: 0 0 8px #39ff14, 0 0 20px rgba(57,255,20,0.4);
  transition: width 0.15s steps(8);
  image-rendering: pixelated;
  /* Pixel block pattern */
  background-image: repeating-linear-gradient(
    90deg, #39ff14 0px, #39ff14 14px, #2ad912 14px, #2ad912 16px
  );
}
.preloader-pct {
  font-size: clamp(0.5rem, 1.5vw, 0.7rem); color: #39ff14;
  margin-top: 0.8rem; letter-spacing: 0.3em;
  text-shadow: 0 0 5px #39ff14;
}
.preloader-log {
  font-size: clamp(0.3rem, 0.8vw, 0.4rem); color: rgba(57,255,20,0.5);
  margin-top: 1rem; height: 1.5em; letter-spacing: 0.1em;
  overflow: hidden;
}

/* Mission button locked state */
.btn-mission-locked {
  opacity: 0.3 !important; cursor: not-allowed !important;
  animation: none !important; border-color: #444 !important;
  color: #666 !important; text-shadow: none !important;
  box-shadow: none !important;
}
.btn-mission-locked::before { display: none !important; }

/* Mission ready flash */
@keyframes missionReady {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.15); filter: brightness(2.5); }
  50% { transform: scale(1); filter: brightness(1.5); }
  75% { transform: scale(1.08); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); }
}
.btn-mission-ready {
  animation: missionReady 0.6s ease-out, missionPulse 2s ease-in-out 0.6s infinite !important;
}

/* ================================================================ */
/* HERO                                                              */
/* ================================================================ */
#hero { flex-direction: column; background: #000; }

/* Static intro background for Act 1 */
.hero-intro-bg {
  position: absolute; inset: 0; z-index: 1;
  transition: opacity 1s ease;
}
.hero-intro-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.45) saturate(1.3);
}
.hero-intro-bg.fade-out { opacity: 0; pointer-events: none; }

/* ═══════ GLOBAL CRT OVERLAY ═══════ */
/* SVG filter defs — hidden */
.crt-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.crt-overlay {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
}
.crt-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px
  );
}
.crt-vignette {
  position: absolute; inset: -10px;
  background: radial-gradient(ellipse 50% 46% at 50% 50%, transparent 15%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.8) 68%, rgba(0,0,0,0.95) 80%, #000 92%);
  filter: blur(8px);
}
.crt-glare {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 20% 12% at 72% 80%, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.crt-corners {
  position: absolute; inset: 0;
  box-shadow:
    inset 0 0 150px 60px rgba(0,0,0,0.8),
    inset 0 0 300px 100px rgba(0,0,0,0.4);
}
/* Screen edge highlight — curved reflection like real glass */
.crt-corners::after {
  content: ''; position: absolute;
  top: 12px; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 80%, transparent);
  border-radius: 50%;
  filter: blur(2px);
}

/* CRT barrel — the "screen" */
.crt-barrel {
  overflow: hidden;
  height: 100vh;
}

/* Disable free scrolling — navigation only via buttons/dots */
.sections-container {
  overflow: hidden !important;
}

/* CRT phosphor glow on all bright text */
.hero-name, .hero-badge, .section-title { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor; }

.hero-slideshow {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.slideshow-track { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 2s ease;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.slide.active { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: brightness(0.35) saturate(1.2); }
.slide img[src*="outrun"], .slide img[src*="m5-"], .slide img[src*="m5_"], .slide img[src*="x7-"] { object-position: center 65%; }

/* Hero slideshow nav arrows — glassmorphic */
.hero-nav {
  position: absolute; top: 50%; z-index: 9990;
  transform: translateY(-50%);
  width: 44px; height: 120px;
  background: linear-gradient(180deg, rgba(0,240,255,0.06) 0%, rgba(255,0,128,0.06) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,240,255,0.2);
  color: rgba(0,240,255,0.7);
  font-size: 28px; cursor: pointer;
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
  box-shadow: 0 0 15px rgba(0,240,255,0.1), 0 0 40px rgba(255,0,128,0.05);
  animation: neonPulse 2s ease-in-out infinite;
}
.hero-nav:hover {
  background: linear-gradient(180deg, rgba(0,240,255,0.15) 0%, rgba(255,0,128,0.12) 100%);
  color: #fff;
  border-color: rgba(0,240,255,0.5);
  text-shadow: 0 0 12px rgba(0,240,255,0.8), 0 0 25px rgba(255,0,128,0.4);
  box-shadow: 0 0 20px rgba(0,240,255,0.25), 0 0 50px rgba(255,0,128,0.1);
  animation: none;
}
.hero-nav.hidden { display: none; }
.hero-nav-prev { left: 70px; border-radius: 6px; }
.hero-nav-next { right: 160px; border-radius: 6px; }

/* Frosted glass panel */
.hero-content { position: relative; z-index: 3; text-align: center; width: 100%; padding: 0 1rem; margin-top: -5vh; }
.hero-glass {
  display: inline-block; padding: 2rem 3rem;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

/* ═══ ACT 1: ARCADE TITLE SCREEN ═══ */
.hero-act1 { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-act1.exiting {
  opacity: 0; transform: translateY(-40px) scale(0.95);
  pointer-events: none;
}
.act1-fade { opacity: 0; transform: translateY(12px); animation: act1FadeIn 0.8s ease forwards; animation-delay: var(--delay, 0s); }
@keyframes act1FadeIn { to { opacity: 1; transform: translateY(0); } }
.decode-text { display: inline-block; min-width: 5ch; }

/* Title screen — arcade game title */
.title-screen {
  text-align: center; position: relative; z-index: 4;
  padding: 0 1rem;
  display: flex; flex-direction: column; align-items: center;
}

/* Title art image — Streets of Rage style */
.title-art {
  max-width: 700px; width: 90vw; height: auto;
  filter: drop-shadow(0 0 30px rgba(255,100,0,0.4));
  animation: titleFloat 4s ease-in-out infinite;
  image-rendering: pixelated;
}
@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.title-mission { margin-top: 1.5rem; }

/* PRESS START blink */
.title-blink {
  font-size: 0.55rem; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.6); margin-top: 1.5rem;
  animation: act1FadeIn 0.8s ease forwards, pressStart 1.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s);
}
@keyframes pressStart { 0%,100%{opacity:0.7;} 50%{opacity:0.15;} }

/* BEGIN MISSION — big 80s arcade button */
.hero-mission-btn { margin-top: 2rem; }
.btn-mission-big {
  font-size: 1.4rem; padding: 1rem 3rem; letter-spacing: 0.25em;
  background: transparent; border: 3px solid var(--neon-cyan); color: var(--neon-cyan);
  cursor: pointer; position: relative; overflow: hidden;
  text-shadow: 0 0 20px rgba(0,229,255,0.8), 0 0 40px rgba(0,229,255,0.4), 0 0 80px rgba(0,229,255,0.2);
  box-shadow: 0 0 20px rgba(0,229,255,0.3), inset 0 0 20px rgba(0,229,255,0.05);
  animation: missionPulse 2s ease-in-out infinite;
  transition: all 0.3s;
}
.btn-mission-big:hover {
  background: rgba(0,229,255,0.15);
  box-shadow: 0 0 40px rgba(0,229,255,0.6), 0 0 80px rgba(0,229,255,0.3), inset 0 0 40px rgba(0,229,255,0.1);
  text-shadow: 0 0 30px rgba(0,229,255,1), 0 0 60px rgba(0,229,255,0.6);
  transform: scale(1.05);
}
@keyframes missionPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.3), inset 0 0 20px rgba(0,229,255,0.05); }
  50% { box-shadow: 0 0 35px rgba(0,229,255,0.5), 0 0 70px rgba(0,229,255,0.2), inset 0 0 30px rgba(0,229,255,0.08); }
}
.btn-mission-big::before {
  content: ''; position: absolute; top: -2px; left: -100%; width: 60%; height: calc(100% + 4px);
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent);
  animation: missionSweep 2.5s ease-in-out infinite;
}
@keyframes missionSweep { 0%{left:-60%;} 100%{left:160%;} }

/* ═══ ACT 2: Command Center ═══ */
.hero-act2 { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-act2.hidden { display: none; }
.hero-act2.hidden ~ .squad-sidebar { display: none; }
.comms-bottom.hidden { display: none; }
.hud-overlay.hidden { display: none; }
.hero-act2.entering { animation: act2Enter 0.8s ease forwards; }
@keyframes act2Enter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* ═══ ACT 2: COMMAND CENTER LAYOUT ═══ */

/* Squad Sidebar — left vertical strip */
.squad-sidebar {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 9997; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 6px 6px 8px; background: rgba(0,10,20,0.7);
  border-right: 1px solid rgba(0,229,255,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 0 8px 8px 0;
  overflow: visible;
}
.squad-pip {
  width: 48px; height: 48px; cursor: pointer; position: relative;
  border: 2px solid transparent; border-radius: 4px;
  transition: all 0.2s; overflow: hidden;
}
.squad-pip img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; border-radius: 2px; }
.squad-pip:hover { border-color: rgba(0,229,255,0.5); transform: scale(1.1); z-index: 2; }
.squad-pip.active { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.4); }
.pip-badge { position: absolute; top: -1px; left: -1px; font-size: 6px; background: var(--neon-pink); color: #000; padding: 1px 3px; z-index: 2; border-radius: 0 0 3px 0; }
.pip-name { display: none; }

/* Pilot Card — slides out from sidebar */
.pilot-card-slide {
  position: fixed; left: 75px; top: 50%;
  z-index: 9998; width: 280px;
  background: rgba(10,15,30,0.85); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,229,255,0.25); border-radius: 10px;
  padding: 1.2rem; opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-50%) translateX(-20px);
}
.pilot-card-slide.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.pilot-card-slide.hidden { display: block; }
.card-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: rgba(255,255,255,0.4); font-size: 14px; cursor: pointer; }
.card-close:hover { color: var(--neon-pink); }
.card-avatar { width: 70px; height: 70px; border-radius: 6px; border: 2px solid rgba(0,229,255,0.3); image-rendering: pixelated; object-fit: cover; display: block; margin: 0 auto 0.6rem; }
.card-callsign { text-align: center; font-size: 0.55rem; color: var(--neon-cyan); letter-spacing: 0.15em; margin-bottom: 0.2rem; }
.card-role { text-align: center; font-size: 0.5rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.card-quote { font-size: 0.3rem; color: var(--neon-green); line-height: 1.6; margin-bottom: 0.6rem; text-align: center; font-style: italic; }
.card-stats { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; }
.card-stat-row { display: flex; align-items: center; gap: 6px; }
.card-stat-label { font-family: 'Orbitron'; font-size: 8px; color: rgba(255,255,255,0.4); width: 50px; letter-spacing: 0.05em; }
.card-stat-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.card-stat-fill { height: 100%; border-radius: 2px; transition: width 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.card-tag { font-size: 7px; font-family: 'Orbitron'; padding: 2px 6px; border-radius: 3px; background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.2); color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }

/* Dossier — standalone section */
.about-glass-cmd {
  background: rgba(8,12,25,0.45); backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(0,229,255,0.2); border-radius: 12px;
  padding: 2.2rem 3rem 2.5rem; max-width: 1200px; margin: 0 auto;
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}
/* Scanline overlay on dossier */
.about-glass-cmd::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
  pointer-events: none; z-index: 1;
}
/* Dossier access animation */
.dossier-access-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5,8,18,0.95); z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
.dossier-access-overlay.hidden { opacity: 0; pointer-events: none; }
.dossier-access-text {
  font-family: 'Press Start 2P', monospace; font-size: 0.4rem;
  color: var(--neon-cyan); letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
}

/* Top bar */
.dossier-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0,229,255,0.1); }
.dossier-label { font-size: 0.75rem; color: var(--neon-cyan); letter-spacing: 0.15em; }
.dossier-status { font-size: 14px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }

/* Identity row */
.dossier-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.dossier-avatar {
  width: 200px; height: 200px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--neon-cyan); object-fit: cover;
  image-rendering: pixelated; flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0,229,255,0.3), 0 0 40px rgba(0,229,255,0.1);
  position: relative;
  animation: holoPulse 3s ease-in-out infinite;
}
/* Avatar wrapper for click-me sticker */
.dossier-avatar-wrap {
  position: relative; flex-shrink: 0; cursor: pointer;
}
.avatar-click-me {
  position: absolute; bottom: -6px; right: -6px;
  background: rgba(0,10,20,0.9); color: var(--neon-cyan);
  font-size: 7px; padding: 3px 7px; border-radius: 4px;
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0,229,255,0.4), 0 0 16px rgba(0,229,255,0.15);
  animation: clickMePulse 2s ease-in-out infinite;
  pointer-events: none; z-index: 2;
  letter-spacing: 0.1em;
}
@keyframes clickMePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0,229,255,0.4), 0 0 16px rgba(0,229,255,0.15); }
  50% { opacity: 0.7; box-shadow: 0 0 12px rgba(0,229,255,0.6), 0 0 24px rgba(0,229,255,0.25); }
}
.avatar-click-me.hidden { display: none; }

@keyframes holoPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.3), 0 0 40px rgba(0,229,255,0.1); }
  50% { box-shadow: 0 0 25px rgba(0,229,255,0.5), 0 0 50px rgba(0,229,255,0.2), 0 0 80px rgba(0,229,255,0.05); }
}
.dossier-info { flex: 1; }
.dossier-name { font-size: 1.1rem; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.3rem; }
.dossier-rank { font-size: 17px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.dossier-callsign { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-bottom: 0.3rem; }
.dossier-location { font-size: 15px; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }
.dossier-badge {
  flex-shrink: 0; text-align: center; padding: 0.7rem 1rem;
  border: 1px solid rgba(0,229,255,0.3); border-radius: 8px;
  background: rgba(0,229,255,0.06);
  box-shadow: 0 0 15px rgba(0,229,255,0.08), inset 0 0 15px rgba(0,229,255,0.03);
  animation: badgeGlow 4s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% { border-color: rgba(0,229,255,0.3); }
  50% { border-color: rgba(0,229,255,0.5); box-shadow: 0 0 20px rgba(0,229,255,0.15), inset 0 0 20px rgba(0,229,255,0.05); }
}
.badge-rank { font-size: 0.85rem; color: var(--neon-cyan); text-shadow: 0 0 15px rgba(0,229,255,0.5); }
.badge-label { font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; line-height: 1.3; margin-top: 0.2rem; }

/* Divider */
.dossier-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent); margin-bottom: 0.8rem; }

/* Two-column layout */
.dossier-columns { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; }
.dossier-section-title { font-size: 0.85rem; color: var(--neon-cyan); letter-spacing: 0.15em; margin-bottom: 1rem; opacity: 0.7; }
.about-glass-cmd .dossier-bio { font-size: 10pt; line-height: 1.8; color: rgba(255,255,255,0.78); text-align: left; display: block; }
.about-glass-cmd .dossier-bio p { margin-bottom: 0.8rem; }
.about-glass-cmd .dossier-bio strong { color: var(--neon-cyan); }
.about-glass-cmd .dossier-list { list-style: none; padding: 0; margin: 0.3rem 0 0.5rem; }
.about-glass-cmd .dossier-list li { padding-left: 1.2em; position: relative; margin-bottom: 0.3rem; font-size: 10pt; }
.about-glass-cmd .dossier-list li::before { content: '▸'; position: absolute; left: 0; color: var(--neon-cyan); }
.about-glass-cmd .dossier-cta { color: rgba(255,255,255,0.5); font-style: italic; margin-top: 0.5rem; font-size: 10pt; }
.about-glass-cmd .dossier-cta strong { color: var(--neon-pink); }

/* Stats sidebar */
.dossier-sidebar { border-left: 1px solid rgba(0,229,255,0.1); padding-left: 1rem; }
.dossier-stat-item { margin-bottom: 0.7rem; }
.ds-val { font-size: 0.85rem; color: var(--neon-cyan); display: block; margin-bottom: 5px; text-shadow: 0 0 8px rgba(0,229,255,0.3); }
.ds-bar { display: block; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; margin-bottom: 4px; border: 1px solid rgba(255,255,255,0.05); }
.ds-fill {
  display: block; height: 100%; border-radius: 3px;
  width: 0 !important; transition: none;
  box-shadow: 0 0 8px currentColor;
}
.ds-fill.animate { transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ds-label { font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }

/* Clearance tags */
.about-glass-cmd .dossier-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.about-glass-cmd .dtag {
  font-size: 9px; font-family: 'Orbitron'; padding: 6px 12px;
  border-radius: 4px; letter-spacing: 0.06em;
  transition: all 0.3s ease;
}
.dtag:hover { transform: translateY(-1px); }
.dtag.legendary { background: rgba(255,170,0,0.12); border: 1px solid rgba(255,170,0,0.4); color: #ffaa00; box-shadow: 0 0 10px rgba(255,170,0,0.1); }
.dtag.epic { background: rgba(163,53,238,0.12); border: 1px solid rgba(163,53,238,0.4); color: #a335ee; box-shadow: 0 0 10px rgba(163,53,238,0.1); }
.dtag.rare { background: rgba(0,112,221,0.12); border: 1px solid rgba(0,112,221,0.4); color: #0070dd; box-shadow: 0 0 10px rgba(0,112,221,0.1); }

/* Comms — centered, large on hero, fixed bottom elsewhere */
.comms-bottom {
  position: fixed; bottom: 10vh; left: calc(50% + 20px);
  transform: translateX(-50%);
  width: 60%; max-width: 800px;
  z-index: 9995; height: 55vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 60%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 60%, #000 40%, transparent 85%);
}
.comms-bottom.comms-compact {
  left: calc(50% + 20px); transform: translateX(-50%);
  width: 60%; max-width: 800px;
  height: 130px;
}
.comms-fade-top { display: none; }
.comms-fade-bottom { display: none; }
.comms-header-bar {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 0 1rem 4px; opacity: 0.6;
}
.comms-bottom .comms-ticker {
  padding: 0 2rem; max-height: calc(55vh - 40px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.comms-bottom.comms-compact .comms-ticker {
  max-height: 100px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 100%);
}

/* ═══ OUTRUN HUD — corner overlays ═══ */
.hud-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.hud-overlay > * { pointer-events: auto; }
.hud-content { position: relative; z-index: 3; text-align: center; width: 100%; padding: 0 1rem; }

/* Shared HUD text */
.hud-tag { font-size: 10px; letter-spacing: 0.15em; color: rgba(255,255,255,0.5); text-shadow: 1px 1px 0 rgba(0,0,0,0.8); transition: opacity 0.3s; }
.hud-big-num { font-size: 36px; line-height: 1; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 15px rgba(0,229,255,0.4); transition: opacity 0.3s; }
.hud-bar-fill { transition: width 0.6s ease; }
.hud-big-sub { font-size: 14px; color: rgba(255,255,255,0.5); }

/* HUD bars */
.hud-bar-wrap { display: flex; align-items: center; gap: 2px; }
.hud-bar-bracket { color: rgba(255,255,255,0.3); font-size: 14px; font-family: monospace; }
.hud-bar { width: 120px; height: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(0,229,255,0.4); overflow: hidden; }
.hud-bar-fill { height: 100%; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green)); box-shadow: 0 0 8px rgba(0,229,255,0.5); }
.hud-bar-green { border-color: rgba(0,255,136,0.4); }
.hud-fill-green { background: linear-gradient(90deg, var(--neon-green), #00ff88); box-shadow: 0 0 8px rgba(0,255,136,0.5); }

/* ── Top-left ── */
.hud-tl { position: absolute; top: 20px; left: 25px; }

/* ── Top-right ── */
.hud-tr { position: absolute; top: 20px; right: 25px; text-align: right; }

/* ── Bottom-left ── */
.hud-bl { position: absolute; bottom: 20px; left: 25px; display: flex; align-items: center; gap: 12px; }
.hud-exit-btn {
  font-size: 12px; letter-spacing: 0.15em; color: var(--neon-pink);
  background: rgba(0,0,0,0.4); border: 2px solid rgba(255,107,107,0.4);
  padding: 6px 16px; cursor: pointer; transition: all 0.3s;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
}
.hud-exit-btn:hover {
  border-color: var(--neon-pink); background: rgba(255,107,107,0.15);
  box-shadow: 0 0 20px rgba(255,107,107,0.4); text-shadow: 0 0 10px rgba(255,107,107,0.6);
}
.hud-credit { font-size: 12px; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; text-shadow: 1px 1px 0 rgba(0,0,0,0.8); }
.hud-credit-num { color: var(--neon-green); }
@keyframes creditBlink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* ── Bottom-right: big speedometer ── */
.hud-br { position: absolute; bottom: 20px; right: 25px; text-align: right; }
.hud-speed { line-height: 1; }
.hud-speed-num {
  font-size: 48px; color: var(--neon-green);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 20px rgba(0,255,136,0.4);
}
.hud-speed-unit { font-size: 20px; color: rgba(255,255,255,0.5); }

.hero-glass {
  border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.hero-badge { margin-bottom: 1rem; }
.badge-rank {
  font-family: 'Press Start 2P', cursive; font-size: 0.8rem;
  color: var(--neon-amber); text-shadow: var(--glow-amber); letter-spacing: 0.2em;
}
.badge-title {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 0.5rem;
  color: var(--neon-amber); letter-spacing: 0.3em; margin-top: 0.3rem;
}
.hero-name { margin-bottom: 0.8rem; }
.hero-firstname {
  display: block; font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.5); letter-spacing: 0.15em;
}
.hero-lastname {
  display: block; font-size: clamp(0.7rem, 1.8vw, 1.2rem);
  color: var(--neon-cyan); text-shadow: var(--glow-cyan); letter-spacing: 0.3em; margin-top: 0.4rem;
}
.hero-tagline {
  font-family: 'Press Start 2P', cursive; font-size: clamp(0.55rem, 1.4vw, 0.85rem);
  color: var(--neon-pink); letter-spacing: 0.2em; margin-bottom: 1.2rem;
  text-shadow: 0 0 15px rgba(255,107,107,0.6), 0 0 30px rgba(255,107,107,0.3);
  text-transform: uppercase;
}
.hero-callsign { margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.callsign-label { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; color: rgba(255,255,255,0.5); letter-spacing: 0.2em; }
.callsign-name {
  font-family: 'Press Start 2P', cursive; font-size: clamp(0.9rem, 2.5vw, 1.5rem);
  color: var(--neon-pink); text-shadow: var(--glow-pink); letter-spacing: 0.15em;
}
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }

/* THE SQUAD — Retro card strip */
/* Select Screen */
.select-screen { margin-top: 0.5rem; }
.select-title {
  text-align: center; font-size: 0.4rem; color: var(--neon-amber);
  letter-spacing: 0.3em; margin-bottom: 0.5rem; text-shadow: var(--glow-amber);
}
.select-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem;
  max-width: 540px; margin: 0 auto;
}
.select-tile {
  position: relative; text-align: center; padding: 0.3rem 0.15rem;
  background: rgba(10,10,26,0.7); border: 2px solid rgba(0,240,255,0.15);
  border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.select-tile:hover {
  border-color: var(--neon-cyan); transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(0,229,255,0.25);
}
.select-p1 {
  border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.08);
}
.p1-badge {
  position: absolute; top: -6px; left: -6px; background: var(--neon-pink);
  color: #fff; font-size: 0.28rem; padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.05em; z-index: 2;
  box-shadow: 0 0 8px rgba(255,0,128,0.4);
}
.select-avatar {
  width: 56px; height: 56px; border-radius: 4px;
  image-rendering: pixelated; display: block; margin: 0 auto 0.2rem;
}
.select-name {
  font-size: 0.28rem; color: var(--neon-cyan); letter-spacing: 0.08em;
}
.select-tile.active { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0,229,255,0.3); background: rgba(0,229,255,0.08); }
/* Pilot Dossier */
.pilot-dossier {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
  margin-top: 0; max-width: 540px; margin-left: auto; margin-right: auto;
}
.pilot-dossier.open {
  max-height: 300px; opacity: 1; margin-top: 0.8rem;
}
.dossier-inner {
  display: flex; gap: 1rem; padding: 0.8rem 1rem;
  background: rgba(10,10,26,0.9); border: 1px solid rgba(0,240,255,0.25);
  border-radius: 8px; backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 0 30px rgba(0,229,255,0.03);
}
.dossier-left { text-align: center; flex-shrink: 0; }
.dossier-avatar {
  width: 80px; height: 80px; border-radius: 6px;
  border: 2px solid var(--neon-cyan); image-rendering: pixelated;
  box-shadow: 0 0 15px rgba(0,229,255,0.3);
}
.dossier-callsign { font-size: 0.45rem; color: var(--neon-cyan); margin-top: 0.3rem; letter-spacing: 0.15em; }
.dossier-role { font-size: 0.25rem; color: var(--neon-amber); letter-spacing: 0.1em; text-shadow: var(--glow-amber); }
.dossier-right { flex: 1; min-width: 0; }
.dossier-quote {
  font-size: 0.35rem; color: var(--neon-green); margin-bottom: 0.4rem;
  font-style: italic; text-shadow: 0 0 4px #39ff14;
}
.dossier-quote::before { content: '"'; }
.dossier-quote::after { content: '"'; }
.dossier-stats { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.4rem; }
.stat-row { display: flex; align-items: center; gap: 0.3rem; }
.stat-label { font-size: 0.24rem; color: rgba(255,255,255,0.5); font-family: 'Orbitron',sans-serif; letter-spacing: 0.1em; width: 55px; text-align: right; }
.stat-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.stat-fill {
  height: 100%; width: 0; border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-fill.cyan { background: linear-gradient(90deg, var(--neon-cyan), #00b8d4); box-shadow: 0 0 6px rgba(0,229,255,0.4); }
.stat-fill.pink { background: linear-gradient(90deg, var(--neon-pink), #ff4081); box-shadow: 0 0 6px rgba(255,0,128,0.4); }
.stat-fill.amber { background: linear-gradient(90deg, var(--neon-amber), #ff8f00); box-shadow: 0 0 6px rgba(255,179,0,0.4); }
.stat-fill.green { background: linear-gradient(90deg, var(--neon-green), #00c853); box-shadow: 0 0 6px rgba(57,255,20,0.4); }
.stat-val { font-size: 0.24rem; color: rgba(255,255,255,0.6); font-family: 'Orbitron',sans-serif; width: 20px; }
.dossier-bio { font-size: 0.55rem; color: rgba(255,255,255,0.6); line-height: 1.5; display: flex; flex-direction: column; gap: 0.25rem; }
.dossier-team {
  font-size: 0.22rem; font-family: 'Orbitron',sans-serif; color: var(--neon-amber);
  letter-spacing: 0.15em; text-shadow: var(--glow-amber);
}
.dossier-model { font-size: 0.3rem; color: rgba(255,255,255,0.5); }
.dossier-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.dtag {
  font-size: 0.24rem; padding: 2px 6px; border-radius: 3px;
  background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.2);
  color: var(--neon-cyan); font-family: 'Orbitron',sans-serif; letter-spacing: 0.05em;
}

/* Comms ticker at bottom of hero */
/* Squadron Frequency — inside hero glass, C64 style */
.comms-inline {
  margin-top: 1rem; text-align: left;
  border-top: 1px solid rgba(57,255,20,0.15);
  padding-top: 0.6rem;
}
.comms-header-inline {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
}
.comms-title-sm { font-size: 0.4rem; color: var(--neon-cyan); letter-spacing: 0.15em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot.online { background: var(--neon-green); box-shadow: var(--glow-green); animation: pulse 2s infinite; }
.status-text-sm { font-size: 0.4rem; color: var(--neon-green); letter-spacing: 0.15em; }
.radar-icon {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--neon-cyan);
  position: relative;
}
.radar-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 50%; height: 1.5px; background: var(--neon-cyan);
  transform-origin: left center; animation: radarSpin 2s linear infinite;
}
@keyframes radarSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* C64-style comms feed */
.c64-feed {
  font-family: 'Press Start 2P', monospace; font-size: 0.45rem;
  color: #7b71d5; /* C64 light blue-purple */
  max-height: 180px; overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(123,113,213,0.2);
  border-radius: 6px;
  padding: 0.5rem;
  mask-image: linear-gradient(transparent, black 5%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(transparent, black 5%, black 92%, transparent);
}
.comms-avatar { width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; image-rendering: pixelated; object-fit: cover; flex-shrink: 0; }
.comms-line {
  padding: 0.18rem 0; display: flex; align-items: center; gap: 0.4rem;
  white-space: nowrap; overflow: hidden;
  animation: commsSlideIn 0.3s ease-out forwards;
  opacity: 0;
}
@keyframes commsSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.comms-time { color: rgba(123,113,213,0.35); font-size: 0.44rem; flex-shrink: 0; }
.comms-agent { font-size: 0.51rem; flex-shrink: 0; display: flex; align-items: center; gap: 0.25rem; font-weight: bold; }
.comms-msg { color: #a8a0e0; font-size: 0.49rem; }
.comms-cursor { display: inline-block; width: 5px; height: 9px; background: #7b71d5; animation: blink 0.5s step-end infinite; }

/* Music sticker animation — left of chat */
.music-sticker {
  position: fixed; left: 5vw; bottom: 18vh;
  width: 220px; height: 220px; z-index: 9994;
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(0,229,255,0.3)) drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  animation: stickerBob 3s ease-in-out infinite;
  transition: opacity 0.8s ease;
}
.music-sticker img {
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated;
}
.music-sticker.hidden { opacity: 0; }
@keyframes stickerBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

/* Floating emoji stream (IG Live style) */
.emoji-stream {
  position: fixed; bottom: 15vh; right: 22vw; width: 120px;
  height: 70vh; z-index: 9998; pointer-events: none; overflow: visible;
}
.emoji-float {
  position: absolute; bottom: 0;
  font-size: 1.6rem; line-height: 1;
  animation: emojiRise 4s ease-out forwards;
  filter: saturate(1.3);
  pointer-events: none;
}
@keyframes emojiRise {
  0% { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
  15% { opacity: 1; transform: translateY(-10vh) translateX(10px) scale(1.2); }
  40% { opacity: 0.9; transform: translateY(-28vh) translateX(-15px) scale(1.05); }
  70% { opacity: 0.5; transform: translateY(-48vh) translateX(20px) scale(0.85); }
  100% { opacity: 0; transform: translateY(-65vh) translateX(-10px) scale(0.6); }
}
/* Typing indicator */
.comms-typing { padding: 0.18rem 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.38rem; color: rgba(123,113,213,0.5); }
.comms-typing .typing-dots span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(123,113,213,0.5); margin: 0 1px; animation: typingBounce 1.2s infinite; }
.comms-typing .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.comms-typing .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
/* Agent name colors */
.comms-agent[data-agent="goose"] { color: #00e5ff; }
.comms-agent[data-agent="rooster"] { color: #ff6b6b; }
.comms-agent[data-agent="bob"] { color: #ffd93d; }
.comms-agent[data-agent="merlin"] { color: #c084fc; }
.comms-agent[data-agent="phoenix"] { color: #f97316; }
.comms-agent[data-agent="slider"] { color: #34d399; }
.comms-agent[data-agent="viper"] { color: #60a5fa; }
.comms-agent[data-agent="hondo"] { color: #fb923c; }
.comms-agent[data-agent="jester"] { color: #38bdf8; }
.comms-agent[data-agent="cougar"] { color: #a78bfa; }
.comms-agent[data-agent="wolfman"] { color: #94a3b8; }

.retro-grid {
  position: absolute; bottom: 0; left: -50%; width: 200%; height: 35%;
  background:
    repeating-linear-gradient(90deg, rgba(0,240,255,0.08) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(0,240,255,0.08) 0px, transparent 1px, transparent 60px);
  transform: perspective(500px) rotateX(60deg); transform-origin: center top;
  animation: gridScroll 4s linear infinite; z-index: 1; pointer-events: none;
}
@keyframes gridScroll { 0%{background-position-y:0;} 100%{background-position-y:60px;} }

/* ================================================================ */
/* ABOUT                                                             */
/* ================================================================ */
#about { overflow: hidden; }
.about-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  filter: brightness(0.3) saturate(1.2); z-index: 0;
}
.about-content-wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.about-glass {
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 2rem 2.5rem; max-width: 800px; width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.pilot-duo {
  display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 1.5rem;
}
.pilot-card { text-align: center; }
.pilot-avatar {
  width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0,229,255,0.3); object-fit: cover;
  transition: transform 0.3s, box-shadow 0.3s;
}
.pilot-avatar:hover { transform: scale(1.08); box-shadow: 0 0 30px rgba(0,229,255,0.5); }
.pilot-callsign { font-size: 0.75rem; margin-top: 0.5rem; color: var(--neon-cyan); letter-spacing: 2px; }
.pilot-role { font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.pilot-tagline {
  text-align: center; font-size: 0.55rem; color: var(--neon-cyan);
  letter-spacing: 0.2em; margin-bottom: 1rem; text-shadow: var(--glow-cyan);
}
.about-bio p {
  margin-bottom: 0.7rem; font-size: 0.85rem; color: rgba(255,255,255,0.8); line-height: 1.7;
}
.about-bio strong { color: var(--neon-cyan); }

/* Achievement medals */
.achievements-row {
  display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 1.5rem 0; padding: 1rem 0;
  border-top: 1px solid rgba(0,240,255,0.1);
  border-bottom: 1px solid rgba(0,240,255,0.1);
}
.achievement {
  text-align: center; padding: 0.5rem; min-width: 80px;
  transition: all 0.3s; cursor: default;
}
.achievement:hover { transform: translateY(-4px); }
.ach-icon { font-size: 1.8rem; margin-bottom: 0.3rem; filter: drop-shadow(0 0 8px rgba(255,165,0,0.5)); }
.ach-title {
  font-family: 'Orbitron', sans-serif; font-size: 0.45rem;
  color: var(--neon-amber); letter-spacing: 0.1em; font-weight: 700;
}
.ach-desc {
  font-family: 'Orbitron', sans-serif; font-size: 0.35rem;
  color: rgba(255,255,255,0.4); letter-spacing: 0.1em;
}

.about-quick-stats {
  display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem;
}
.qs { text-align: center; }
.qs-val { display: block; font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--neon-cyan); }
.qs-label { font-family: 'Orbitron', sans-serif; font-size: 0.45rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }

/* ================================================================ */
/* ORIGIN STORY                                                      */
/* ================================================================ */
/* Origin Background */
.origin-has-bg {
  position: relative;
  overflow: hidden;
}
.origin-bg-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.8s ease;
}
.origin-bg-layer.origin-bg-active { opacity: 1; }
.origin-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(8,8,15,1) 0%,
    rgba(8,8,15,0.92) 6%,
    rgba(8,8,15,0.7) 12%,
    rgba(8,8,15,0.3) 22%,
    rgba(8,8,15,0.15) 32%,
    rgba(8,8,15,0.35) 45%,
    rgba(8,8,15,0.65) 55%,
    rgba(8,8,15,0.9) 65%,
    rgba(8,8,15,1) 75%);
  pointer-events: none;
}
.origin-has-bg .section-inner { position: relative; z-index: 2; }
.origin-inner { max-width: 1100px; }
.origin-spacer { height: 50vh; }

/* CRT Scanlines */
.origin-scanlines {
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
}

/* Era Progress Bar */
.era-progress {
  max-width: 500px; margin: 0 auto 2rem; padding: 0 1rem;
}
.era-progress-track {
  position: relative; height: 6px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 3px;
  overflow: visible;
}
.era-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #39ff14 0%, var(--neon-cyan) 33%, #0077ff 66%, var(--neon-pink) 100%);
  box-shadow: 0 0 8px rgba(0,240,255,0.3);
  transition: width 0.6s ease;
}
.era-progress-labels {
  position: absolute; inset: 0; display: flex; justify-content: space-around;
  top: 14px;
}
.era-progress-labels span {
  font-size: 0.3rem; color: rgba(255,255,255,0.25); letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s;
}
.era-progress-labels span.active { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0,240,255,0.4); }
.era-progress-labels span:hover { color: rgba(255,255,255,0.6); }

/* Glitch Era Title */
.glitch-era {
  position: relative; display: inline-block;
}
.glitch-era.glitching {
  animation: eraGlitch 0.4s steps(2) forwards;
}
@keyframes eraGlitch {
  0% { text-shadow: 2px 0 #ff0080, -2px 0 #00e5ff; transform: translate(0); }
  20% { text-shadow: -3px 0 #ff0080, 3px 0 #00e5ff; transform: translate(2px, -1px); }
  40% { text-shadow: 3px 0 #ff0080, -3px 0 #00e5ff; transform: translate(-2px, 1px); }
  60% { text-shadow: -1px 0 #ff0080, 1px 0 #00e5ff; transform: translate(1px, 0); }
  80% { text-shadow: 2px 0 #ff0080, -2px 0 #00e5ff; transform: translate(-1px, -1px); }
  100% { text-shadow: 0 0 12px rgba(255,255,255,0.3); transform: translate(0); }
}

/* Era Info */
.origin-era-info {
  text-align: center; margin-bottom: 1.5rem;
  transition: opacity 0.3s ease;
}
.origin-era-info.fade-out { opacity: 0; }
.era-badge-bar {
  display: flex; justify-content: center; gap: 1rem; align-items: center;
  margin-bottom: 0.6rem;
}
.era-year-display {
  font-size: 0.55rem; color: #39ff14; letter-spacing: 0.2em;
  text-shadow: 0 0 8px rgba(57,255,20,0.5);
}
.era-label-display {
  font-size: 0.7rem; letter-spacing: 0.25em; color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,0.3);
}
.era-description {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.62rem, 1.4vw, 0.82rem);
  color: rgba(255,255,255,0.85); line-height: 2.1;
  max-width: 700px; margin: 0 auto 0.8rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 0.02em;
}
.era-tags {
  display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center;
}
.era-tag {
  font-size: 7px; padding: 3px 8px; border-radius: 2px;
  background: rgba(57,255,20,0.12); border: 1px solid rgba(57,255,20,0.3);
  color: rgba(57,255,20,0.8); letter-spacing: 0.15em;
  transition: all 0.3s ease;
}

/* Origin Side Arrows */
.origin-side-arrow {
  position: absolute; top: 50%; z-index: 5;
  transform: translateY(-50%);
  width: 44px; height: 120px;
  background: linear-gradient(180deg, rgba(0,240,255,0.06) 0%, rgba(255,0,128,0.06) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,240,255,0.2);
  color: rgba(0,240,255,0.7);
  font-size: 28px; cursor: pointer;
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
  box-shadow:
    0 0 15px rgba(0,240,255,0.1),
    0 0 40px rgba(255,0,128,0.05),
    inset 0 0 20px rgba(0,240,255,0.03);
  animation: neonPulse 2s ease-in-out infinite;
}
.origin-side-arrow:hover {
  background: linear-gradient(180deg, rgba(0,240,255,0.15) 0%, rgba(255,0,128,0.12) 100%);
  color: #fff;
  border-color: rgba(0,240,255,0.5);
  text-shadow: 0 0 12px rgba(0,240,255,0.8), 0 0 25px rgba(255,0,128,0.4);
  box-shadow:
    0 0 20px rgba(0,240,255,0.25),
    0 0 50px rgba(255,0,128,0.1),
    0 0 80px rgba(0,240,255,0.05);
  animation: none;
}
.origin-side-arrow:active { transform: translateY(-50%) scale(0.9); }
@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0,240,255,0.1), 0 0 40px rgba(255,0,128,0.05);
    border-color: rgba(0,240,255,0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(0,240,255,0.2), 0 0 60px rgba(255,0,128,0.1);
    border-color: rgba(0,240,255,0.35);
  }
}
.origin-side-left { left: 70px; }
.origin-side-right { right: 160px; }
.origin-nav-dots { display: flex; gap: 0.5rem; justify-content: center; margin: 1rem auto; }
.origin-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.35); font-size: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s ease;
}
.origin-dot.active {
  background: rgba(0,240,255,0.15); border-color: var(--neon-cyan);
  color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,240,255,0.3);
}
.origin-dot:hover { border-color: rgba(0,240,255,0.5); color: rgba(0,240,255,0.7); }

/* Era color themes on section */
.origin-has-bg[data-era="0"] .era-year-display { color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,0.5); }
.origin-has-bg[data-era="0"] .era-tag { background: rgba(57,255,20,0.12); border-color: rgba(57,255,20,0.3); color: rgba(57,255,20,0.8); }
.origin-has-bg[data-era="1"] .era-year-display { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.5); }
.origin-has-bg[data-era="1"] .era-tag { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.3); color: rgba(0,229,255,0.8); }
.origin-has-bg[data-era="2"] .era-year-display { color: #0077ff; text-shadow: 0 0 8px rgba(0,119,255,0.5); }
.origin-has-bg[data-era="2"] .era-tag { background: rgba(0,119,255,0.12); border-color: rgba(0,119,255,0.3); color: rgba(0,119,255,0.8); }
.origin-has-bg[data-era="3"] .era-year-display { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255,0,128,0.5); }
.origin-has-bg[data-era="3"] .era-tag { background: rgba(255,0,128,0.12); border-color: rgba(255,0,128,0.3); color: rgba(255,0,128,0.8); }

/* Manifesto */
.origin-manifesto {
  margin-top: 2rem; text-align: center; padding: 1.5rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.manifesto-line {
  font-size: clamp(0.5rem, 1.2vw, 0.65rem); color: rgba(255,255,255,0.8);
  margin-bottom: 0.4rem; letter-spacing: 0.15em;
}
.manifesto-label {
  color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,0.4);
  margin-right: 0.3rem;
}
.manifesto-cyan { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0,229,255,0.4); }
.manifesto-pink { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255,0,128,0.4); }
.manifesto-final {
  font-size: clamp(0.6rem, 1.5vw, 0.8rem); color: #fff;
  margin-top: 0.8rem; letter-spacing: 0.12em;
  text-shadow: 0 0 15px rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
  .origin-spacer { height: 15vh; }
  .nes-body { gap: 1rem; padding: 0.5rem 0.8rem; }
  .nes-btn { width: 24px; height: 24px; }
  .nes-dpad { grid-template-columns: 24px 24px 24px; grid-template-rows: 24px 24px 24px; }
  .origin-dot { width: 24px; height: 24px; }
}

/* ================================================================ */
/* FLIGHT LOG                                                        */
/* ================================================================ */
#flight-log { background: var(--bg-dark); }
.timeline-scroll {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.8rem;
  position: relative; padding-left: 1.5rem;
}
.timeline-scroll::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink), var(--neon-amber));
}
.timeline-card {
  background: var(--bg-card); border: var(--border-glow);
  border-radius: 10px; overflow: hidden; transition: all 0.3s; cursor: pointer;
  position: relative;
}
.timeline-card::before {
  content: ''; position: absolute; left: -1.85rem; top: 1.2rem;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--neon-cyan); background: var(--bg-dark);
}
.timeline-card:hover { border-color: rgba(0,240,255,0.4); }
/* LinkedIn Wingman CTA */
.linkedin-wingman {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem auto 0; max-width: 420px;
  padding: 0.8rem 1.2rem; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,0,128,0.08), rgba(0,229,255,0.08));
  border: 1px solid rgba(0,119,181,0.4);
  text-decoration: none; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(0,119,181,0.15);
}
.linkedin-wingman:hover {
  border-color: rgba(0,119,181,0.7);
  box-shadow: 0 0 20px rgba(0,119,181,0.3), 0 0 40px rgba(0,119,181,0.1);
  transform: translateY(-2px);
}
.lw-avatar {
  width: 48px; height: 48px; border-radius: 8px;
  border: 2px solid var(--neon-cyan); image-rendering: pixelated;
  object-fit: cover; flex-shrink: 0;
}
.lw-content { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lw-tag { font-size: 7px; color: var(--neon-pink); letter-spacing: 0.15em; text-shadow: 0 0 8px rgba(255,0,128,0.4); }
.lw-cta { font-size: 0.55rem; color: rgba(255,255,255,0.8); letter-spacing: 0.1em; }
.linkedin-wingman:hover .lw-cta { color: #fff; }
.lw-icon { width: 28px; height: 28px; color: #0077b5; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(0,119,181,0.4)); }
.linkedin-wingman:hover .lw-icon { filter: drop-shadow(0 0 10px rgba(0,119,181,0.6)); }

/* Profile badges container */
.profile-badges {
  display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap;
  justify-content: center;
}
.profile-badges .linkedin-wingman,
.profile-badges .github-wingman {
  flex: 0 1 auto; width: auto; max-width: 320px;
}

/* GitHub Wingman badge — matches LinkedIn style */
.github-wingman {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 0.5rem 0.8rem;
  text-decoration: none; transition: all 0.3s;
  cursor: pointer;
}
.github-wingman:hover {
  background: rgba(57,255,20,0.06); border-color: rgba(57,255,20,0.3);
  box-shadow: 0 0 20px rgba(57,255,20,0.1);
}
.gh-pixel-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(57,255,20,0.15); border: 1px solid rgba(57,255,20,0.3);
  display: flex; align-items: center; justify-content: center;
  image-rendering: pixelated; flex-shrink: 0;
}
.gh-octocat { font-size: 12px; color: var(--neon-green); text-shadow: 0 0 6px rgba(57,255,20,0.6); }
.gh-icon { width: 28px; height: 28px; color: #e6edf3; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
.github-wingman:hover .gh-icon { filter: drop-shadow(0 0 10px rgba(57,255,20,0.6)); color: var(--neon-green); }

/* Dossier sidebar social links */
.dossier-social-links {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem;
}
.dossier-social-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.6rem; border-radius: 4px;
  background: rgba(0,119,181,0.15); border: 1px solid rgba(0,119,181,0.4);
  color: #4dabcf; text-decoration: none; font-size: 7px; letter-spacing: 0.1em;
  transition: all 0.3s; cursor: pointer;
}
.dossier-social-btn:hover {
  background: rgba(0,119,181,0.3); box-shadow: 0 0 10px rgba(0,119,181,0.3);
  color: #fff;
}
.dossier-social-btn svg { flex-shrink: 0; }
.dossier-social-gh {
  background: rgba(57,255,20,0.1); border-color: rgba(57,255,20,0.3);
  color: var(--neon-green);
}
.dossier-social-gh:hover {
  background: rgba(57,255,20,0.25); box-shadow: 0 0 10px rgba(57,255,20,0.3);
  color: #fff;
}
.dossier-social-ig {
  background: rgba(225,48,108,0.15); border-color: rgba(225,48,108,0.4);
  color: #e1306c;
}
.dossier-social-ig:hover {
  background: rgba(225,48,108,0.3); box-shadow: 0 0 10px rgba(225,48,108,0.3);
  color: #fff;
}

.timeline-card.active-mission {
  border: 2px solid rgba(255,0,128,0.5);
  background: linear-gradient(135deg, rgba(255,0,128,0.06) 0%, rgba(0,229,255,0.06) 50%, rgba(163,53,238,0.06) 100%);
  box-shadow:
    0 0 15px rgba(255,0,128,0.2),
    0 0 30px rgba(255,0,128,0.08),
    inset 0 0 30px rgba(255,0,128,0.03);
  animation: eightyGlow 3s ease-in-out infinite;
}
@keyframes eightyGlow {
  0%, 100% {
    border-color: rgba(255,0,128,0.5);
    box-shadow: 0 0 15px rgba(255,0,128,0.2), 0 0 30px rgba(255,0,128,0.08), inset 0 0 30px rgba(255,0,128,0.03);
  }
  33% {
    border-color: rgba(0,229,255,0.5);
    box-shadow: 0 0 15px rgba(0,229,255,0.2), 0 0 30px rgba(0,229,255,0.08), inset 0 0 30px rgba(0,229,255,0.03);
  }
  66% {
    border-color: rgba(163,53,238,0.5);
    box-shadow: 0 0 15px rgba(163,53,238,0.2), 0 0 30px rgba(163,53,238,0.08), inset 0 0 30px rgba(163,53,238,0.03);
  }
}
.timeline-card.active-mission::before { border-color: var(--neon-pink); background: var(--neon-pink); box-shadow: 0 0 10px rgba(255,0,128,0.6), 0 0 20px rgba(255,0,128,0.3); }

.card-header { padding: 1rem 1.5rem; position: relative; }
.card-status { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.3); margin-bottom: 0.3rem; }
.card-status.pulse-green { color: var(--neon-pink); text-shadow: 0 0 10px rgba(255,0,128,0.6), 0 0 20px rgba(255,0,128,0.3); animation: pulse 2s infinite; }
.card-org { font-family: 'Orbitron', sans-serif; font-size: 0.55rem; color: var(--neon-cyan); letter-spacing: 0.1em; }
.card-role { font-size: clamp(0.5rem, 1.2vw, 0.75rem); color: #fff; margin: 0.3rem 0; line-height: 1.4; }
.card-date { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; color: var(--neon-amber); letter-spacing: 0.15em; }
.expand-icon {
  position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
  font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: rgba(0,240,255,0.3);
  transition: all 0.3s;
}
.timeline-card.expanded .expand-icon { transform: translateY(-50%) rotate(45deg); color: var(--neon-cyan); }

.card-expand {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.5rem;
}
.timeline-card.expanded .card-expand {
  max-height: 300px; padding: 0 1.5rem 1rem;
}
.card-expand p { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 0.5rem; }
.card-stats { display: flex; gap: 1.5rem; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid rgba(0,240,255,0.1); }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--neon-cyan); font-weight: 700; }
.stat-label { font-family: 'Orbitron', sans-serif; font-size: 0.4rem; color: rgba(255,255,255,0.3); letter-spacing: 0.15em; }

/* ================================================================ */
/* ARSENAL                                                           */
/* ================================================================ */
#weapons-loadout { background: linear-gradient(180deg, var(--bg-navy), var(--bg-dark)); }
.arsenal-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem;
}
.arsenal-category { background: var(--bg-card); border: var(--border-glow); border-radius: 10px; padding: 1.2rem; }
.arsenal-cat-title { font-size: 0.6rem; color: var(--neon-amber); text-shadow: var(--glow-amber); margin-bottom: 1rem; letter-spacing: 0.1em; }
.arsenal-items { display: flex; flex-direction: column; gap: 0.6rem; }
.arsenal-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
  border-radius: 5px; background: rgba(255,255,255,0.02); border-left: 3px solid transparent; transition: all 0.3s;
}
.arsenal-item:hover { background: rgba(255,255,255,0.04); transform: translateX(3px); }
.arsenal-item.legendary { border-left-color: #ffa500; }
.arsenal-item.epic { border-left-color: #a855f7; }
.arsenal-item.rare { border-left-color: #3b82f6; }
.arsenal-item.common { border-left-color: #6b7280; }
.item-icon { font-size: 1rem; }
.item-name { flex: 1; font-size: 0.8rem; }
.item-rarity { font-family: 'Orbitron'; font-size: 0.45rem; letter-spacing: 0.15em; padding: 0.1rem 0.4rem; border-radius: 3px; }
.arsenal-item.legendary .item-rarity { color: #ffa500; background: rgba(255,165,0,0.1); }
.arsenal-item.epic .item-rarity { color: #a855f7; background: rgba(168,85,247,0.1); }
.arsenal-item.rare .item-rarity { color: #3b82f6; background: rgba(59,130,246,0.1); }
.arsenal-item.common .item-rarity { color: #6b7280; background: rgba(107,114,128,0.1); }
.item-bar { width: 70px; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.item-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green)); box-shadow: 0 0 6px rgba(0,240,255,0.5); }

/* ================================================================ */
/* OUTRUN DRIVING SCENE                                              */
/* ================================================================ */
#outrun-drive { background: #000; overflow: hidden; position: relative; }
.outrun-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}

/* HUD elements */
.speed-hud {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 10;
  text-align: right;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.speed-val {
  font-size: clamp(2rem, 5vw, 3.5rem); color: var(--neon-green);
  text-shadow: var(--glow-green), 0 2px 10px rgba(0,0,0,0.8); font-weight: 700;
  animation: speedFlicker 0.1s infinite;
}
@keyframes speedFlicker {
  0%,90%,100% { opacity: 1; } 95% { opacity: 0.85; }
}
.speed-unit { font-size: 0.6rem; color: rgba(57,255,20,0.6); letter-spacing: 0.3em; }

.plate-hud {
  position: absolute; bottom: 2rem; left: 2rem; z-index: 10;
  font-size: clamp(0.8rem, 2vw, 1.4rem); color: var(--neon-green);
  text-shadow: var(--glow-green), 0 2px 10px rgba(0,0,0,0.8);
  letter-spacing: 0.3em;
}

.race-hud {
  position: absolute; top: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 2rem;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  padding: 0.5rem 1.5rem; border-radius: 6px;
  border: 1px solid rgba(57,255,20,0.2);
}
.hud-item { text-align: center; }
.hud-label { display: block; font-size: 0.4rem; color: rgba(57,255,20,0.5); letter-spacing: 0.2em; }
.hud-val { display: block; font-size: 0.7rem; color: var(--neon-green); text-shadow: 0 0 5px #39ff14; letter-spacing: 0.1em; }

/* ================================================================ */
/* PASSIONS                                                          */
/* ================================================================ */
#passions { background: var(--bg-dark); }
.passions-layout { display: flex; flex-direction: column; }
.passion-tabs {
  display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem;
}
.passion-tab {
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem;
  padding: 0.5rem 1.2rem; border: 1px solid rgba(0,240,255,0.2);
  background: transparent; color: rgba(255,255,255,0.5);
  border-radius: 5px; cursor: pointer; transition: all 0.3s; letter-spacing: 0.1em;
}
.passion-tab.active { color: var(--neon-cyan); border-color: var(--neon-cyan); background: rgba(0,240,255,0.08); box-shadow: var(--glow-cyan); }
.passion-tab:hover { color: var(--neon-cyan); border-color: rgba(0,240,255,0.4); }

.passion-panel { display: none; animation: fadeIn 0.5s ease; }
.passion-panel.active { display: block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* Garage */
.garage-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.garage-card {
  background: var(--bg-card); border: var(--border-glow); border-radius: 12px;
  overflow: hidden; transition: all 0.3s;
}
.garage-card:hover { border-color: rgba(0,240,255,0.4); transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
.garage-card-img { width: 100%; display: block; }
.garage-card-info { padding: 1rem; }
.spec-plate {
  display: inline-block; padding: 0.3rem 1rem; background: linear-gradient(135deg, #0a1a0a, #0d1117);
  border: 2px solid var(--neon-green); border-radius: 5px; margin-bottom: 0.8rem;
  box-shadow: 0 0 12px rgba(57,255,20,0.15);
}
.spec-plate-dark { border-color: var(--neon-amber); box-shadow: 0 0 12px rgba(255,165,0,0.15); }
.plate-text { font-size: 1.1rem; color: var(--neon-green); text-shadow: var(--glow-green); letter-spacing: 0.25em; }
.plate-amber { color: var(--neon-amber); text-shadow: var(--glow-amber); }
.spec-row {
  display: flex; gap: 1rem; margin-top: 0.6rem;
  font-family: 'Orbitron', sans-serif; font-size: 0.5rem;
  color: rgba(255,255,255,0.5); letter-spacing: 0.1em;
}
.spec-row.amber { color: rgba(255,165,0,0.6); }

.outrun-strip { border-radius: 8px; overflow: hidden; position: relative; max-height: 200px; }
.outrun-car { width: 100%; display: block; animation: outrunDrive 3s ease-in-out infinite; filter: brightness(1.1) saturate(1.3); }
@keyframes outrunDrive { 0%,100%{transform:translateX(0) scale(1);} 25%{transform:translateX(-6px) scale(1.005);} 50%{transform:translateX(0) scale(1.01);} 75%{transform:translateX(6px) scale(1.005);} }
.road-lines {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 30%;
  background: repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(0,240,255,0.06) 6px, rgba(0,240,255,0.06) 8px);
  animation: roadScroll 0.5s linear infinite; pointer-events: none;
}
@keyframes roadScroll { 0%{background-position-y:0;} 100%{background-position-y:8px;} }

/* Travel */
.travel-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.travel-hero-img { width: 100%; border-radius: 12px; border: 1px solid var(--glass-border); }
.travel-info h3 { margin-bottom: 0.8rem; }
.travel-info p { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 0.6rem; line-height: 1.6; }
.travel-info strong { color: var(--neon-cyan); }
.travel-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.travel-tag {
  font-family: 'Orbitron'; font-size: 0.5rem; padding: 0.3rem 0.6rem;
  border: 1px solid rgba(0,240,255,0.2); border-radius: 4px;
  color: rgba(255,255,255,0.6); letter-spacing: 0.1em;
}

/* Photography — Fallback */
.photo-content { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.photo-placeholder { text-align: center; }
.photo-placeholder p { font-size: 0.85rem; color: rgba(255,255,255,0.6); max-width: 500px; margin: 0.5rem auto; }

/* Photography — Gallery */
.gallery-filter-bar {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.gallery-filter-btn {
  font-family: 'Orbitron', monospace; font-size: 0.5rem;
  padding: 0.4rem 1rem; background: transparent;
  border: 1px solid rgba(0,240,255,0.25); color: rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px;
}
.gallery-filter-btn:hover, .gallery-filter-btn.active {
  border-color: var(--neon-cyan); color: var(--neon-cyan);
  background: rgba(0,240,255,0.08); box-shadow: 0 0 12px rgba(0,240,255,0.15);
}

/* Darkroom background */
#photography {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(180,20,20,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(180,20,20,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(100,10,10,0.04) 0%, transparent 70%);
}
#photography::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  animation: grainShift 0.5s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}

.gallery-grid {
  columns: 3; column-gap: 12px;
  max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 2;
}
@media (max-width: 900px) { .gallery-grid { columns: 2; } }
@media (max-width: 500px) { .gallery-grid { columns: 1; } }

.gallery-card {
  break-inside: avoid; margin-bottom: 12px; position: relative;
  overflow: hidden; border: 1px solid rgba(0,240,255,0.06);
  border-radius: 6px; cursor: pointer; transition: all 0.4s;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 50%, transparent 100%);
}
.gallery-card:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 25px rgba(0,240,255,0.2);
  transform: translateY(-2px);
}
.gallery-card img {
  width: 100%; display: block; transition: transform 0.5s;
}
.gallery-card:hover img { transform: scale(1.03); }

/* Corner markers */
.gallery-card::before {
  content: ''; position: absolute; top: 6px; left: 6px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan);
  z-index: 2; opacity: 0; transition: opacity 0.3s;
}
.gallery-card::after {
  content: ''; position: absolute; bottom: 6px; right: 6px;
  width: 8px; height: 8px;
  border-bottom: 2px solid var(--neon-cyan); border-right: 2px solid var(--neon-cyan);
  z-index: 2; opacity: 0; transition: opacity 0.3s;
}
.gallery-card:hover::before, .gallery-card:hover::after { opacity: 1; }

/* Hover overlay */
.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,26,0.95) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.4s;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem;
}
.gallery-card:hover .gallery-overlay { opacity: 1; }
.gallery-caption { font-size: 0.7rem; color: rgba(255,255,255,0.85); line-height: 1.4; }
.gallery-meta { font-family: 'Orbitron', monospace; font-size: 0.45rem; color: var(--neon-cyan); margin-top: 0.3rem; letter-spacing: 1px; }
.gallery-tags { margin-top: 0.3rem; }
.gallery-tag {
  display: inline-block; font-family: 'Orbitron', monospace; font-size: 0.35rem;
  padding: 0.12rem 0.4rem; border: 1px solid rgba(255,45,149,0.4);
  color: var(--neon-pink); margin-right: 0.3rem; margin-top: 0.2rem;
}

/* Instagram CTA */
.gallery-cta {
  text-align: center; margin-top: 2.5rem; padding: 1.5rem;
  border: 1px solid rgba(0,240,255,0.12); background: rgba(15,15,35,0.6);
}
.gallery-cta a {
  font-family: 'Orbitron', monospace; font-size: 0.55rem;
  color: var(--neon-pink); text-decoration: none; letter-spacing: 2px; transition: all 0.3s;
}
.gallery-cta a:hover { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.gallery-cta-note { font-size: 0.55rem; color: rgba(255,255,255,0.25); margin-top: 0.5rem; }

/* Lightbox */
.gallery-lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(5,5,15,0.96); z-index: 9999;
  justify-content: center; align-items: center; flex-direction: column; cursor: zoom-out;
}
.gallery-lightbox.active { display: flex; }
.gallery-lightbox img {
  max-width: 90vw; max-height: 80vh; object-fit: contain;
  border: 2px solid rgba(0,240,255,0.35);
  box-shadow:
    0 0 15px rgba(0,240,255,0.3),
    0 0 40px rgba(0,240,255,0.15),
    0 0 80px rgba(255,0,128,0.08),
    inset 0 0 30px rgba(0,0,0,0.3);
  mask-image: radial-gradient(ellipse 85% 85% at center, black 55%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, black 55%, transparent 90%);
  transition: transform 0.15s ease-out;
}
.gallery-lightbox .lb-caption {
  font-size: 0.75rem; color: rgba(255,255,255,0.7);
  margin-top: 1rem; text-align: center; max-width: 500px;
}
.gallery-lightbox .lb-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 1.5rem; color: var(--neon-cyan); cursor: pointer; font-family: monospace;
}
.gallery-lightbox .lb-nav {
  position: absolute; top: 50%; font-size: 2rem; color: var(--neon-cyan);
  cursor: pointer; font-family: monospace; transform: translateY(-50%);
  padding: 1rem; transition: all 0.3s;
}
.gallery-lightbox .lb-nav:hover { text-shadow: var(--glow-cyan); }
.gallery-lightbox .lb-prev { left: 1rem; }
.gallery-lightbox .lb-next { right: 1rem; }

/* ================================================================ */
/* SQUADRON + ARCHITECTURE                                           */
/* ================================================================ */
#squadron { background: linear-gradient(180deg, var(--bg-dark), var(--bg-navy)); }

/* Architecture showcase */
.arch-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 900px; margin: 0 auto 1.5rem; align-items: center;
  background: var(--bg-card); border: var(--border-glow);
  border-radius: 12px; padding: 1.2rem;
}
.arch-img { width: 100%; border-radius: 8px; image-rendering: pixelated; }
.arch-info p { font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 0.8rem; }
.arch-info strong { color: var(--neon-cyan); }
.arch-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tech-tag {
  font-family: 'Orbitron'; font-size: 0.45rem; padding: 0.2rem 0.5rem;
  border-radius: 3px; background: rgba(0,240,255,0.08);
  border: 1px solid rgba(0,240,255,0.15); color: var(--neon-cyan); letter-spacing: 0.08em;
}

/* Agent grid - expandable profiles */
.squadron-grid {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem;
}
.squad-profile {
  background: var(--bg-card); border: var(--border-glow); border-radius: 8px;
  overflow: hidden; transition: all 0.3s; cursor: pointer;
}
.squad-profile:hover { border-color: rgba(0,240,255,0.4); }
.squad-profile-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
  position: relative;
}
.squad-lg-avatar { width: 36px; height: 36px; border-radius: 50%; image-rendering: pixelated; }
.squad-header-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.squad-status-led {
  width: 6px; height: 6px; border-radius: 50%;
}
.squad-status-led.online { background: var(--neon-green); box-shadow: 0 0 4px #39ff14; }
.expand-icon-sm {
  font-family: 'Orbitron'; font-size: 0.8rem; color: rgba(0,240,255,0.3);
  transition: all 0.3s; margin-left: auto;
}
.squad-profile.expanded .expand-icon-sm { transform: rotate(45deg); color: var(--neon-cyan); }

.squad-profile-expand {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s;
  padding: 0 0.7rem;
}
.squad-profile.expanded .squad-profile-expand {
  max-height: 200px; padding: 0 0.7rem 0.7rem;
}
.squad-profile-expand p { font-size: 0.7rem; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 0.3rem; }
.squad-skills { font-size: 0.6rem; color: var(--neon-amber); margin-top: 0.3rem; }
.squad-skills strong { color: rgba(255,255,255,0.4); }

/* ================================================================ */
/* CONTACT                                                           */
/* ================================================================ */
#contact { background: var(--bg-dark); }
/* ── COMMS SECTION ── */
.comms-layout { text-align: center; }

/* Comms Background */
.comms-has-bg {
  position: relative;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.comms-layout .comms-morse { margin-top: 28vh; }
.comms-bg-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom,
    rgba(10,10,26,1) 0%,
    rgba(10,10,26,0.95) 8%,
    rgba(10,10,26,0.85) 15%,
    rgba(10,10,26,0.6) 25%,
    rgba(10,10,26,0.35) 33%,
    rgba(10,10,26,0.15) 40%,
    rgba(10,10,26,0.4) 38%,
    rgba(10,10,26,0.75) 48%,
    rgba(10,10,26,0.92) 58%,
    rgba(10,10,26,1) 68%);
  pointer-events: none;
}
.comms-has-bg .section-inner { position: relative; z-index: 1; }

/* (Radar removed — scene is now background) */

/* Morse ticker */
.comms-morse {
  font-size: 0.6rem; color: rgba(0,240,255,0.6); letter-spacing: 0.4em;
  overflow: hidden; white-space: nowrap; margin: 1rem auto; max-width: 1100px;
  text-shadow: 0 0 8px rgba(0,240,255,0.4);
  border-top: 1px solid rgba(0,240,255,0.1); border-bottom: 1px solid rgba(0,240,255,0.1);
  padding: 0.5rem 0;
  position: relative;
}
.comms-morse > span {
  display: inline-block;
  padding-left: 100%;
  animation: morseTicker 25s linear infinite;
  will-change: transform;
}
@keyframes morseTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Frequency Cards */
.comms-frequencies { margin: 2rem auto; max-width: 900px; }
.comms-freq-title { font-size: 0.55rem; color: var(--neon-cyan); letter-spacing: 0.3em; margin-bottom: 1.2rem; }
.comms-freq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 768px) { .comms-freq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .comms-freq-grid { grid-template-columns: 1fr; } }

.comms-freq-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1.2rem 0.8rem; background: rgba(10,10,26,0.6);
  border: 1px solid rgba(0,240,255,0.08); border-radius: 10px;
  transition: all 0.4s; position: relative; overflow: hidden;
  text-decoration: none;
}
.comms-freq-card::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px;
  background: linear-gradient(to right, transparent, var(--neon-cyan), transparent);
  transition: left 0.6s;
}
.comms-freq-card:hover::before { left: 100%; }
.comms-freq-card:hover {
  border-color: rgba(0,240,255,0.4); transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(0,240,255,0.1), inset 0 0 30px rgba(0,240,255,0.03);
}
/* dials removed — using pixel icons */
.comms-freq-band { font-size: 0.4rem; color: rgba(0,240,255,0.4); letter-spacing: 0.2em; }
.comms-freq-pixel-icon {
  color: var(--neon-cyan); transition: all 0.3s;
  filter: drop-shadow(0 0 6px rgba(0,240,255,0.4));
  image-rendering: pixelated;
}
.comms-freq-card:hover .comms-freq-pixel-icon { transform: scale(1.15); }
.comms-freq-card[data-glow="#0077b5"]:hover .comms-freq-pixel-icon { color: #0077b5; filter: drop-shadow(0 0 10px #0077b5); }
.comms-freq-card[data-glow="#2ea44f"]:hover .comms-freq-pixel-icon { color: #2ea44f; filter: drop-shadow(0 0 10px #2ea44f); }
.comms-freq-card[data-glow="#00f0ff"]:hover .comms-freq-pixel-icon { color: #00f0ff; filter: drop-shadow(0 0 10px #00f0ff); }
.comms-freq-card[data-glow="#e1306c"]:hover .comms-freq-pixel-icon { color: #e1306c; filter: drop-shadow(0 0 10px #e1306c); }
.comms-freq-card[data-glow="#0077b5"]:hover { border-color: rgba(0,119,181,0.4); box-shadow: 0 0 30px rgba(0,119,181,0.15), inset 0 0 20px rgba(0,119,181,0.05); }
.comms-freq-card[data-glow="#2ea44f"]:hover { border-color: rgba(46,164,79,0.4); box-shadow: 0 0 30px rgba(46,164,79,0.15), inset 0 0 20px rgba(46,164,79,0.05); }
.comms-freq-card[data-glow="#00f0ff"]:hover { border-color: rgba(0,240,255,0.4); box-shadow: 0 0 30px rgba(0,240,255,0.15), inset 0 0 20px rgba(0,240,255,0.05); }
.comms-freq-card[data-glow="#e1306c"]:hover { border-color: rgba(225,48,108,0.4); box-shadow: 0 0 30px rgba(225,48,108,0.15), inset 0 0 20px rgba(225,48,108,0.05); }
.comms-freq-name { font-family: 'Orbitron'; font-size: 0.55rem; color: var(--neon-cyan); letter-spacing: 0.15em; }
.comms-freq-handle { font-size: 0.4rem; color: rgba(255,255,255,0.4); word-break: break-all; }
.comms-freq-signal { display: flex; gap: 2px; margin-top: 0.4rem; }
.comms-freq-signal span {
  width: 3px; border-radius: 1px; background: rgba(0,240,255,0.3);
}
.comms-freq-signal span:nth-child(1) { height: 6px; }
.comms-freq-signal span:nth-child(2) { height: 10px; }
.comms-freq-signal span:nth-child(3) { height: 14px; }
.comms-freq-signal span:nth-child(4) { height: 18px; }
.comms-freq-card:hover .comms-freq-signal span { background: var(--neon-cyan); animation: signalPulse 0.6s ease-in-out infinite alternate; }
.comms-freq-card:hover .comms-freq-signal span:nth-child(2) { animation-delay: 0.1s; }
.comms-freq-card:hover .comms-freq-signal span:nth-child(3) { animation-delay: 0.2s; }
.comms-freq-card:hover .comms-freq-signal span:nth-child(4) { animation-delay: 0.3s; }
@keyframes signalPulse { from { opacity: 0.4; } to { opacity: 1; } }

/* Sign-off */
.comms-signoff {
  max-width: 600px; margin: 2.5rem auto; padding: 2rem;
  background: rgba(10,10,26,0.5); border: 1px solid rgba(255,45,149,0.1);
  border-radius: 10px; text-align: left; position: relative;
}
.comms-signoff-stamp {
  position: absolute; top: -10px; right: 20px;
  background: rgba(180,20,20,0.8); color: #fff; padding: 0.2rem 0.8rem;
  font-size: 0.45rem; letter-spacing: 0.3em; border-radius: 3px;
  transform: rotate(3deg);
  box-shadow: 0 0 10px rgba(180,20,20,0.4);
}
.comms-signoff-text {
  font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 0.8rem;
}
.comms-signoff-sig {
  font-size: 0.6rem; color: var(--neon-amber); text-shadow: var(--glow-amber);
  margin-top: 1rem; letter-spacing: 0.2em;
}

/* Arcade Credits */
.comms-credits {
  margin: 2.5rem auto; max-width: 500px; height: 200px;
  overflow: hidden; position: relative;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.comms-credits-scroll {
  animation: creditsRoll 25s linear infinite;
}
@keyframes creditsRoll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}
.comms-credit-block { margin-bottom: 1.8rem; text-align: center; }
.comms-credit-label { display: block; font-size: 0.4rem; color: rgba(0,240,255,0.5); letter-spacing: 0.3em; margin-bottom: 0.3rem; }
.comms-credit-name { display: block; font-size: 1rem; color: rgba(255,255,255,0.8); }
.comms-credit-year { margin-top: 2rem; }

.insert-coin { margin-top: 2rem; font-size: 0.6rem; color: var(--neon-amber); text-shadow: var(--glow-amber); cursor: pointer; }
.insert-coin:hover { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }

/* ================================================================ */
/* CASSETTE                                                          */
/* ================================================================ */
.cassette-widget {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem;
  background: rgba(10,10,26,0.92); border: 1px solid rgba(0,240,255,0.15);
  border-radius: 8px; backdrop-filter: blur(10px); max-width: 240px;
}
.cassette-widget:hover { border-color: rgba(0,240,255,0.4); }
.cassette-widget.playing { border-color: rgba(0,240,255,0.5); box-shadow: 0 0 15px rgba(0,240,255,0.15); }
.cassette-widget.playing .cassette-img { animation: spinTape 2s linear infinite; }
@keyframes spinTape { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cassette-img { width: 32px; height: 32px; border-radius: 4px; image-rendering: pixelated; }
.cassette-controls { flex: 1; }
.cassette-label { font-size: 0.35rem; color: var(--neon-cyan); letter-spacing: 0.1em; display: block; margin-bottom: 0.2rem; }
.cassette-buttons { display: flex; gap: 0.3rem; margin-bottom: 0.2rem; }
.cassette-btn {
  background: none; border: 1px solid rgba(0,240,255,0.15); color: var(--neon-cyan);
  padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.6rem; cursor: pointer;
}
.cassette-btn:hover { background: rgba(0,240,255,0.1); }
.cassette-progress { width: 100%; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.cassette-bar { width: 0%; height: 100%; background: var(--neon-cyan); border-radius: 2px; }

/* === FOOTER (hidden in full-screen mode) === */
.site-footer { display: none; }

/* === WP overrides === */
body.page, body.home { background: var(--bg-dark); }
#wpadminbar ~ .sections-container { height: calc(100vh - 32px); }

/* === Responsive === */
/* ═══ THE HANGAR — Interactive Panorama ═══ */
#garage { background: #0a0a14; }
.hangar-inner { max-width: 100%; padding: 0 1rem; }

/* Zone navigation tabs */
.hangar-zone-nav {
  display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hangar-zone-btn {
  padding: 0.4rem 0.8rem; font-size: 0.45rem; letter-spacing: 0.12em;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; color: rgba(255,255,255,0.5); cursor: pointer;
  transition: all 0.3s;
}
.hangar-zone-btn:hover {
  background: rgba(0,229,255,0.08); border-color: rgba(0,229,255,0.3);
  color: var(--neon-cyan);
}
.hangar-zone-btn.active {
  background: rgba(0,229,255,0.12); border-color: var(--neon-cyan);
  color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.2);
  text-shadow: 0 0 5px rgba(0,229,255,0.4);
}

/* Panorama viewport */
.hangar-viewport {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 0; border: none;
  background: #0a0a14; cursor: grab;
  flex: 1; min-height: 0;
}
.hangar-zone::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(to bottom, #0a0a14 0%, #0a0a14 20%, transparent 100%);
  z-index: 2; pointer-events: none;
}
#garage .section-inner { display: flex; flex-direction: column; height: 100%; padding-top: 2.5rem; }
#garage .hangar-scroll-hint { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 5; }
.hangar-viewport:active { cursor: grabbing; }
.hangar-track {
  display: flex; height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hangar-zone {
  position: relative; flex: 0 0 100%; height: 100%;
}
.hangar-zone-img {
  width: 100%; height: 100%; object-fit: cover;
  image-rendering: auto;
  filter: brightness(0.95) contrast(1.05);
}

/* Hotspots */
.hangar-hotspot {
  position: absolute; width: 24px; height: 24px;
  transform: translate(-50%, -50%); cursor: pointer; z-index: 5;
}
.hotspot-ping {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(0,229,255,0.3); border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0,229,255,0.4);
  animation: hotspotPulse 2s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0.4; }
}
.hangar-hotspot:hover .hotspot-ping {
  background: rgba(0,229,255,0.6); transform: scale(1.2);
  animation: none;
}

/* Detail Card Overlay */
.hangar-detail-overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(5,5,15,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: detailFadeIn 0.3s ease;
}
.hangar-detail-overlay.hidden { display: none; }
@keyframes detailFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hangar-detail-card {
  background: rgba(10,15,30,0.95); border: 1px solid var(--neon-cyan);
  border-radius: 8px; padding: 1.2rem 1.5rem; max-width: 480px; width: 90%;
  box-shadow: 0 0 30px rgba(0,229,255,0.15), inset 0 0 30px rgba(0,229,255,0.03);
  position: relative;
}
.hangar-detail-close {
  position: absolute; top: 0.5rem; right: 0.8rem;
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 0.7rem; cursor: pointer; transition: color 0.2s;
}
.hangar-detail-close:hover { color: var(--neon-pink); }
.hangar-detail-header {
  font-size: 0.7rem; color: var(--neon-cyan); letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(0,229,255,0.4);
}
.hangar-detail-specs {
  font-size: 0.4rem; color: var(--neon-green); letter-spacing: 0.12em;
  margin-bottom: 0.8rem; line-height: 1.8;
  text-shadow: 0 0 5px rgba(57,255,20,0.3);
}
.hangar-detail-story {
  font-size: clamp(0.55rem, 1.2vw, 0.7rem); color: rgba(255,255,255,0.7);
  line-height: 1.7; letter-spacing: 0.03em;
}

/* Scroll hint */
.hangar-scroll-hint {
  text-align: center; font-size: 0.4rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.2em; margin-top: 0.6rem;
  animation: hintBlink 2s ease-in-out infinite;
}
@keyframes hintBlink { 0%,100%{opacity:0.3;} 50%{opacity:0.7;} }

/* Mobile */
@media (max-width: 768px) {
  .hangar-zone-nav { gap: 0.2rem; }
  .hangar-zone-btn { padding: 0.3rem 0.5rem; font-size: 0.35rem; }
  .hangar-hotspot { width: 20px; height: 20px; }
}

/* ═══ PROJECTS GRID ═══ */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.5rem; }
.project-card {
  background: rgba(10,15,30,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,229,255,0.15); border-radius: 10px;
  padding: 1.5rem; transition: all 0.3s;
}
.project-card:hover { border-color: rgba(0,229,255,0.4); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,229,255,0.1); }
.project-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.project-title { font-size: 0.5rem; color: var(--neon-cyan); letter-spacing: 0.12em; margin-bottom: 0.5rem; }
.project-desc { font-size: 0.5rem; line-height: 1.6; color: rgba(255,255,255,0.6); margin-bottom: 0.8rem; }
.project-tags { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 768px) {
  .about-layout { grid-template-columns: 1fr; text-align: center; }
  .about-left { flex-direction: row; justify-content: center; }
  .about-portrait { max-width: 200px; }
  .about-goose { max-width: 120px; }
  .garage-dual { grid-template-columns: 1fr; }
  .travel-content { grid-template-columns: 1fr; }
  .goose-spotlight { grid-template-columns: 1fr; text-align: center; }
  .goose-img { margin: 0 auto; }
  .hero-glass { padding: 1.5rem 1.5rem; }
  .pixel-nav { right: 0.3rem; }
  .pixel-nav-btn { padding: 5px 12px; }
  .pnb-text { font-size: 0.55rem; }
  /* mc-mini removed */

  /* Hide squadron sidebar on tablet/mobile */
  .squad-sidebar { display: none; }
  .pilot-card-slide { display: none; }
}