/* ── SKIP NAVIGATION (WCAG 2.4.1) ── */
.skip-nav{
  position:absolute;top:-999px;left:1rem;
  background:var(--orange);color:#000;
  font-family:'Space Mono',monospace;font-size:.85rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem 1.2rem;text-decoration:none;
  z-index:999999;border:2px solid #000;
}
.skip-nav:focus{top:1rem;}

/* ============================================================
   BOOT SCREEN — USCSS / WEYLAND-YUTANI
   ============================================================ */
#boot-screen{
  position:fixed;inset:0;z-index:99999;
  background:#050300;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
  overflow:hidden;
}
#boot-screen.boot-done{opacity:0;visibility:hidden;pointer-events:none;}

.boot-scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.4) 2px,rgba(0,0,0,.4) 3px);
  animation:boot-scan-roll 5s linear infinite;
}
.boot-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%);
}
@keyframes boot-scan-roll{0%{background-position:0 0;}100%{background-position:0 100%;}}

.boot-inner{
  position:relative;z-index:2;
  width:min(820px,90vw);
  padding:3rem 3.5rem;
  border:1px solid rgba(255,120,0,.3);
  background:rgba(10,8,0,.6);
  animation:boot-flicker 9s steps(1) infinite;
}
@keyframes boot-flicker{
  0%,100%{opacity:1;}
  7%{opacity:.5;}8%{opacity:1;}
  33%{opacity:.7;}34%{opacity:1;}
  61%{opacity:.3;}62%{opacity:1.0;}
  88%{opacity:.6;}89%{opacity:1;}
}

.boot-header{margin-bottom:1.8rem;}
.boot-logo-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem;}
.boot-corp{
  font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;
  letter-spacing:.25em;color:rgba(255,160,0,.95);text-transform:uppercase;
}
.boot-tagline{
  font-family:'Space Mono',monospace;font-size:.75rem;
  letter-spacing:.2em;color:rgba(255,120,0,.45);text-transform:uppercase;
}
.boot-divider{height:1px;background:linear-gradient(to right,rgba(255,120,0,.6),rgba(255,120,0,.1),transparent);}

.boot-lines{
  min-height:260px;
  margin-bottom:1.8rem;
  display:flex;flex-direction:column;gap:.18rem;
}
.boot-line{
  font-family:'Space Mono',monospace;font-size:.78rem;
  letter-spacing:.08em;line-height:1.5;
  color:rgba(255,140,0,.75);
  white-space:pre;
  opacity:0;
  animation:boot-line-in .05s forwards;
}
.boot-line.dim{color:rgba(255,130,0,.72);}
.boot-line.bright{color:rgba(255,180,0,.95);}
.boot-line.warn{color:rgba(255,60,0,.9);}
.boot-line.ok{color:rgba(255,165,0,.82);}
@keyframes boot-line-in{to{opacity:1;}}

.boot-progress-wrap{margin-bottom:1.6rem;}
.boot-progress-label{
  display:flex;justify-content:space-between;
  font-family:'Space Mono',monospace;font-size:.78rem;
  letter-spacing:.12em;color:rgba(255,140,0,.7);
  text-transform:uppercase;margin-bottom:.4rem;
}
.boot-progress-track{height:3px;background:rgba(255,120,0,.12);position:relative;overflow:hidden;}
.boot-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(to right,rgba(255,80,0,.9),rgba(255,180,0,.9));
  transition:width .15s steps(1);
  position:relative;
}
.boot-progress-fill::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:8px;
  background:rgba(255,220,100,.9);
  animation:boot-prog-tip .5s steps(1) infinite;
}
@keyframes boot-prog-tip{0%,100%{opacity:1;}50%{opacity:0;}}

.boot-footer{
  border-top:1px solid rgba(255,120,0,.15);
  padding-top:.8rem;
  font-family:'Space Mono',monospace;font-size:.72rem;
  letter-spacing:.1em;color:rgba(255,120,0,.35);
  text-transform:uppercase;text-align:center;
}

/* ── PAGE ENTRANCE ANIMATION ── */
#site-wrapper{opacity:0;transition:opacity .6s ease;}
#site-wrapper.site-visible{opacity:1;}

/* ============================================================
   BOYCANFLY.COM — RYAN DESHLER — SPACE INTERFACE STYLESHEET
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --black:       #060608;
  --dark:        #0a0b0e;
  --dark-panel:  #0f1118;
  --dark-card:   #13161f;
  --grey-dark:   #1a1d28;
  --grey-mid:    #252837;
  --grey:        #3a3f55;
  --grey-light:  #7a8299;
  --white:       #eef0f5;
  --white-dim:   rgba(238,240,245,0.65);
  --white-ghost: rgba(238,240,245,0.08);
  --orange:      #ff5a00;
  --orange-mid:  #ff7a2e;
  --orange-dim:  rgba(255,90,0,0.15);
  --orange-glow: rgba(255,90,0,0.4);
  --blue:        #1055cc;
  --blue-mid:    #3378ff;
  --blue-light:  #5599ff;
  --blue-dim:    rgba(51,120,255,0.15);
  --teal:        #00c8f0;
  --font-display:'Orbitron', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --max-width:     1920px;
  --content-width: 1200px;
  --ease-out:      cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:72px;font-size:16px;}
body{background:var(--black);color:var(--white);font-family:var(--font-body);font-size:1rem;line-height:1.65;overflow-x:hidden;cursor:none;}
.site-wrapper{max-width:var(--max-width);margin:0 auto;position:relative;}
/* Content width limiter - readable content capped at 1200px, backgrounds bleed to 1920px */
.content-wrap{max-width:var(--content-width);margin-left:auto;margin-right:auto;padding-left:2.5rem;padding-right:2.5rem;}
a{cursor:none;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--orange);}

/* CURSOR */
.c-dot{position:fixed;top:0;left:0;width:7px;height:7px;background:var(--orange);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .08s,background .2s,width .2s,height .2s;}
.c-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid rgba(255,90,0,.7);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .3s,opacity .3s;opacity:.8;}
.c-ring.grow{width:60px;height:60px;border-color:var(--orange-mid);opacity:1;}

/* FIXED BG ELEMENTS */
#starfield{position:fixed;inset:0;pointer-events:none;z-index:0;}
.scanlines{position:fixed;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);pointer-events:none;z-index:2;mix-blend-mode:overlay;}
section{position:relative;z-index:10;}

/* TYPOGRAPHY */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;}
.label-tag{font-family:var(--font-mono);font-size:1rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:10px;}
.label-tag::before{content:'';width:28px;height:1px;background:var(--orange);flex-shrink:0;}
.section-heading{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.05;}
.mono-small{font-family:var(--font-mono);font-size:1rem;color:var(--grey-light);letter-spacing:.05em;}

/* HUD CORNERS */
.hud-frame{position:relative;}
.hud-frame::before,.hud-frame::after,.hud-frame .hud-bl,.hud-frame .hud-br{content:'';position:absolute;width:16px;height:16px;pointer-events:none;}
.hud-frame::before{top:0;left:0;border-top:1px solid var(--orange);border-left:1px solid var(--orange);}
.hud-frame::after{top:0;right:0;border-top:1px solid var(--orange);border-right:1px solid var(--orange);}
.hud-frame .hud-bl{bottom:0;left:0;border-bottom:1px solid var(--orange);border-left:1px solid var(--orange);}
.hud-frame .hud-br{bottom:0;right:0;border-bottom:1px solid var(--orange);border-right:1px solid var(--orange);}

/* GLITCH */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;}
.glitch::before{color:var(--orange);left:-2px;clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%);animation:glitch-a 4s infinite;}
.glitch::after{color:var(--blue-light);left:2px;clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);animation:glitch-b 4s infinite;}
@keyframes glitch-a{0%,89%,100%{opacity:0;transform:translateX(0);}90%{opacity:.9;transform:translateX(-3px);}92%{opacity:0;}94%{opacity:.8;transform:translateX(4px);}96%{opacity:0;}}
@keyframes glitch-b{0%,86%,100%{opacity:0;transform:translateX(0);}87%{opacity:.9;transform:translateX(3px);}89%{opacity:0;}91%{opacity:.7;transform:translateX(-4px);}93%{opacity:0;}}

/* ANIMATIONS */
@keyframes pulse-ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.2);opacity:0;}}
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes blink-dot{0%,85%,100%{opacity:1;}90%{opacity:0;}}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes hud-scan{0%{top:-5%;opacity:.8;}100%{top:105%;opacity:0;}}
@keyframes line-in{from{width:0;}to{width:100%;}}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.left{transform:translateX(-40px);}
.reveal.right{transform:translateX(40px);}
.reveal.visible{opacity:1 !important;transform:translate(0) !important;}

/* BUTTONS */
.btn-hud{font-family:var(--font-mono);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,180,0,.95);background:rgba(255,90,0,.06);border:1px solid rgba(255,120,0,.5);padding:.75rem 2rem;position:relative;cursor:none;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .3s;overflow:hidden;}
.btn-hud::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform .4s var(--ease-out);}
.btn-hud:hover::before{transform:translateX(0);}
.btn-hud:hover{color:var(--black);}
.btn-hud span,.btn-hud i{position:relative;z-index:1;}
.btn-ghost{font-family:var(--font-mono);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,140,0,.65);background:transparent;border:1px solid rgba(255,120,0,.25);padding:.75rem 2rem;cursor:none;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .3s,border-color .3s;}
.btn-ghost:hover{color:rgba(255,180,0,.95);border-color:rgba(255,120,0,.6);}

/* ================================================================ NAVBAR */
#navbar{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:stretch;padding:0 2.5rem;z-index:1000;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;}
.nav-inner{width:100%;max-width:var(--content-width);margin:0 auto;display:flex;align-items:stretch;height:100%;}
#navbar.scrolled{background:rgba(6,6,8,.9);backdrop-filter:blur(24px);border-bottom-color:rgba(255,90,0,.18);}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);flex-shrink:0;}
.nav-links{display:flex;align-items:stretch;list-style:none;gap:0;margin:0;padding:0;margin-left:auto;height:72px;}
.nav-links li{display:flex;align-items:stretch;margin:0;padding:0;height:72px;}
.nav-sigil{width:38px;height:38px;border:1px solid var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-family:var(--font-display);font-size:1rem;font-weight:900;color:var(--orange);overflow:visible;flex-shrink:0;}
.nav-sigil::after{content:'';position:absolute;width:38px;height:38px;border:1px solid var(--orange);border-radius:50%;animation:pulse-ring 2.5s ease-out infinite;}
.nav-name{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.1;}
.nav-name small{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--grey-light);letter-spacing:.18em;font-weight:400;line-height:1.3;}
.nav-links li a{font-family:var(--font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-light);text-decoration:none;padding:0 1.1rem;height:72px;display:flex;align-items:center;transition:color .25s;position:relative;box-sizing:border-box;overflow:hidden;}
.nav-links li a::after{content:'';position:absolute;bottom:0;left:1.1rem;right:1.1rem;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);}

/* RGB split layers via before pseudo */
.nav-links li a::before{
  content:attr(data-text);
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--orange);
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  opacity:0;pointer-events:none;
  transition:opacity .15s;
  letter-spacing:.14em;
  animation:none;
}
.nav-links li a:hover::before{
  opacity:.7;
  animation:nav-rgb-slice 0.4s steps(1) forwards;
}
.nav-links li a:hover{color:var(--white);}
.nav-links li a:hover::after{transform:scaleX(1);}
.nav-links li a.nav-active{color:var(--white);}
.nav-links li a.nav-active::after{transform:scaleX(1);}

/* Glitch shimmer sweep on hover */
.nav-links li a .nav-glitch-bar{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(to right,transparent 0%,rgba(255,90,0,.08) 50%,transparent 100%);
  transform:translateX(-100%);pointer-events:none;
}
.nav-links li a:hover .nav-glitch-bar{
  animation:nav-sweep .35s ease forwards;
}

@keyframes nav-rgb-slice{
  0%  {clip-path:polygon(0 0,100% 0,100% 35%,0 35%);transform:translateY(-50%) translateX(-3px);}
  25% {clip-path:polygon(0 40%,100% 40%,100% 65%,0 65%);transform:translateY(-50%) translateX(2px);}
  50% {clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);transform:translateY(-50%) translateX(-1px);}
  75% {clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%);transform:translateY(-50%) translateX(3px);}
  100%{opacity:0;transform:translateY(-50%) translateX(0);}
}

@keyframes nav-sweep{
  from{transform:translateX(-100%);}
  to{transform:translateX(200%);}
}
.nav-status{display:flex;align-items:center;gap:7px;margin-left:2rem;font-family:var(--font-mono);font-size:1rem;color:var(--grey-light);letter-spacing:.1em;height:100%;padding:0 1.1rem;}
.status-dot{width:6px;height:6px;background:var(--orange);border-radius:50%;box-shadow:0 0 8px rgba(255,90,0,.6);animation:blink-dot 2.5s infinite;}
.nav-hamburger{display:none;background:none;border:1px solid var(--grey);color:var(--white);padding:7px 10px;cursor:none;margin-left:auto;line-height:1;}
.nav-drawer{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(6,6,8,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--orange-dim);z-index:999;padding:1.5rem 2rem;}
.nav-drawer.open{display:block;}
.nav-drawer a{display:block;font-family:var(--font-mono);font-size:1rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey-light);text-decoration:none;padding:.8rem 0;border-bottom:1px solid var(--grey-dark);transition:color .25s;}
.nav-drawer a:hover{color:var(--orange);}

/* ================================================================ HERO */
#hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;max-width:var(--max-width);}
.hero-left{position:relative;overflow:hidden;}
.hero-left-bg{position:absolute;inset:0;background-image:url('../img/james-webb.jpg');background-size:cover;background-position:center 30%;}
.hero-left-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(6,6,8,.1) 0%,rgba(6,6,8,.6) 75%,var(--black) 100%);}

/* ── Hero CRT: scanlines rolling layer ── */
.hero-left-bg::before{
  content:'';position:absolute;inset:-10%;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 1px,

    rgba(0,0,0,.4) 1px, rgba(0,0,0,.4) 2px
  );
  animation:hero-scanroll 10s linear infinite, hero-flicker 0.11s steps(1) infinite;
}

/* ── Hero CRT: RGB drift layer ── */
.hero-crt-rgb{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,0,60,.06) 0px,  rgba(255,0,60,.06) 1px,
    transparent 1px,          transparent 2px,
    rgba(0,180,255,.06) 2px, rgba(0,180,255,.06) 3px,
    transparent 3px,          transparent 5px
  );
  mix-blend-mode:screen;
  animation:hero-rgb-drift 0.07s steps(1) infinite;
}

/* ── Hero CRT: screen damage / tears ── */
.hero-crt-damage{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  animation:hero-damage 3.4s steps(1) infinite;
}

/* ── Hero CRT: vignette pulse ── */
.hero-crt-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.7) 100%);
  animation:hero-vignette-pulse 4s ease-in-out infinite;
}

@keyframes hero-scanroll{
  from{background-position:0 0;}
  to{background-position:0 80px;}
}

@keyframes hero-flicker{
  0%  {opacity:1;}
  5%  {opacity:.78;}
  6%  {opacity:1;}
  18% {opacity:.92;}
  19% {opacity:.65;}
  20% {opacity:1;}
  44% {opacity:.88;}
  45% {opacity:.55;}
  46% {opacity:.95;}
  47% {opacity:.72;}
  48% {opacity:1;}
  74% {opacity:.9;}
  75% {opacity:.48;}
  76% {opacity:1;}
  91% {opacity:.82;}
  92% {opacity:1;}
}

@keyframes hero-rgb-drift{
  0%  {transform:translate(0,0);}
  12% {transform:translate(-3px,1px);}
  25% {transform:translate(2px,-2px);}
  37% {transform:translate(-2px,2px);}
  50% {transform:translate(3px,0);}
  62% {transform:translate(0,-3px);}
  75% {transform:translate(-2px,1px);}
  87% {transform:translate(2px,-1px);}
  100%{transform:translate(0,0);}
}

@keyframes hero-damage{
  0%,100%{box-shadow:none;background:transparent;}
  7%  {box-shadow:inset 0 calc(20% - 1px) 0 2px rgba(255,255,255,.2), inset 0 calc(20%) 0 7px rgba(0,0,0,.6);}
  8%  {box-shadow:none;}
  19% {background:rgba(255,255,255,.07);}
  20% {background:transparent;}
  33% {box-shadow:inset 0 calc(60%) 0 3px rgba(255,90,0,.25), inset 0 calc(60%) 0 9px rgba(0,0,0,.65), inset 0 calc(25%) 0 3px rgba(0,180,255,.12);}
  34% {box-shadow:none;}
  48% {background:rgba(255,0,60,.05);}
  49% {background:rgba(0,180,255,.05);}
  50% {background:transparent;}
  63% {background:rgba(0,0,0,.65);}
  64% {background:transparent;}
  79% {box-shadow:inset 0 calc(15%) 0 2px rgba(255,255,255,.18), inset 0 calc(45%) 0 2px rgba(255,255,255,.12), inset 0 calc(75%) 0 2px rgba(255,255,255,.08);}
  80% {box-shadow:none;}
  92% {background:rgba(255,255,255,.1);}
  93% {background:transparent;}
}

@keyframes hero-vignette-pulse{
  0%,100%{opacity:1;}
  38%{opacity:.55;}
  39%{opacity:1;}
  68%{opacity:.7;}
  69%{opacity:1;}
}
.hero-astronaut{position:absolute;bottom:0;left:50%;transform:translateX(-40%);width:95%;max-width:720px;z-index:10;filter:drop-shadow(0 0 50px rgba(255,90,0,.35));}
.hero-slide-nav{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:1.2rem;}
.hero-slide-nav span{font-family:var(--font-mono);font-size:1rem;color:var(--grey-light);letter-spacing:.15em;writing-mode:vertical-rl;cursor:none;transition:color .25s;}
.hero-slide-nav span.active{color:var(--orange);}

.hero-right{
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem 4rem 4rem 3rem;
  position:relative;z-index:10;
  background:#0a0800;
  overflow:hidden;
  animation:exp-screen-flicker 13s steps(1) infinite;
  animation-delay:.5s;
}
/* Scanlines */
.hero-right::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);
}
/* Vignette */
.hero-right::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);
}
.hero-right > *,.hero-right .inner{position:relative;z-index:1;}
.hero-right .inner{max-width:540px;}
.hero-counter{
  font-family:var(--font-mono);font-size:1rem;
  color:rgba(255,130,0,.6);
  letter-spacing:.2em;display:flex;align-items:center;gap:12px;margin-bottom:2rem;
}
.hero-counter-line{width:50px;height:1px;background:linear-gradient(to right,var(--orange),transparent);}
.hero-title{font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,6rem);font-weight:900;line-height:.95;letter-spacing:-.01em;margin-bottom:.3rem;}
.hero-title .line-1{color:rgba(255,180,0,.95);display:block;text-shadow:0 0 30px rgba(255,90,0,.15);}
.hero-title .line-2{display:block;color:transparent;-webkit-text-stroke:1px var(--orange);}
.hero-role{
  font-family:var(--font-mono);font-size:clamp(1rem,1.1vw,1.1rem);
  letter-spacing:.2em;color:rgba(255,145,0,.85);
  text-transform:uppercase;margin:1.5rem 0 .5rem;line-height:1.7;
}
.hero-desc{
  font-family:var(--font-mono);
  font-size:clamp(1rem,1.4vw,1.1rem);
  color:rgba(255,150,0,.75);
  max-width:400px;line-height:1.9;font-weight:400;margin-bottom:2.5rem;
  letter-spacing:.03em;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;}
.hero-telemetry{display:flex;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,120,0,.2);padding-top:1.5rem;}

.telem-item{
  display:flex;align-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,90,0,.15);
  padding:.7rem 1.1rem;
  position:relative;overflow:hidden;
  min-width:90px;flex:1;
  animation:telem-flicker 6s steps(1) infinite;
}
.telem-item:nth-child(2){animation-delay:.8s;}
.telem-item:nth-child(3){animation-delay:1.6s;}
.telem-item:nth-child(4){animation-delay:2.4s;}

.telem-item::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.25) 2px,rgba(0,0,0,.25) 3px);
  z-index:0;opacity:.6;
}
.telem-item::after{
  content:'';position:absolute;top:0;left:0;width:6px;height:6px;
  border-top:1px solid var(--orange);border-left:1px solid var(--orange);
}

.telem-body{display:flex;flex-direction:column;gap:3px;z-index:1;}

.telem-val{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  color:var(--white);line-height:1;
  animation:telem-rgb 4s steps(1) infinite;
}
.telem-val-live{color:var(--orange) !important;font-size:1.5rem !important;letter-spacing:.05em;}
.telem-unit{font-size:.8rem;color:var(--orange);margin-left:2px;vertical-align:super;}

.telem-label{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-light);
}

@keyframes telem-flicker{
  0%,100%{opacity:1;background:rgba(255,255,255,.03);}
  5%{opacity:.6;background:rgba(255,90,0,.06);}
  6%{opacity:1;background:rgba(255,255,255,.03);}
  45%{opacity:.85;}
  46%{opacity:1;}
  80%{opacity:.7;background:rgba(255,90,0,.04);}
  81%{opacity:1;background:rgba(255,255,255,.03);}
}

@keyframes telem-rgb{
  0%,100%{text-shadow:none;}
  12%{text-shadow:-2px 0 rgba(255,0,60,.6), 2px 0 rgba(255,160,0,.6);}
  13%{text-shadow:none;}
  55%{text-shadow:-1px 0 rgba(255,0,60,.4), 1px 0 rgba(255,160,0,.4);}
  56%{text-shadow:none;}
}

@keyframes icon-glitch{
  0%,100%{transform:translate(0,0);opacity:1;}
  15%{transform:translate(-1px,0);opacity:.7;}
  16%{transform:translate(1px,0);opacity:1;}
  60%{transform:translate(0,1px);opacity:.8;}
  61%{transform:translate(0,0);opacity:1;}
}

@keyframes telem-blink{0%,100%{opacity:1;}50%{opacity:.2;}}

@keyframes telem-bar-flicker{
  0%,100%{opacity:1;}
  20%{opacity:.4;}
  21%{opacity:1;}
  70%{opacity:.6;}
  71%{opacity:1;}
}

@keyframes telem-bar-pulse{
  0%,100%{opacity:1;box-shadow:0 0 6px rgba(255,90,0,.5);}
  50%{opacity:.5;box-shadow:none;}
}
.hero-orbit{position:absolute;bottom:-15%;right:-8%;width:380px;height:380px;border:1px solid rgba(255,90,0,.1);border-radius:50%;pointer-events:none;z-index:1;}
.hero-orbit::before{content:'';position:absolute;inset:35px;border:1px solid rgba(51,120,255,.08);border-radius:50%;}
.hero-ticker{position:absolute;bottom:0;left:0;right:0;height:36px;background:rgba(5,3,0,.8);border-top:1px solid rgba(255,120,0,.2);display:flex;align-items:center;overflow:hidden;z-index:20;}
.ticker-track{display:flex;animation:ticker-scroll 30s linear infinite;white-space:nowrap;}
.ticker-track span{font-family:var(--font-mono);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,130,0,.65);padding:0 2.5rem;flex-shrink:0;}
.ticker-track span.accent{color:var(--orange);}

/* ================================================================ ABOUT */
#about{padding:8rem 0;background:var(--dark);overflow:hidden;}
.about-inner{max-width:var(--content-width);margin:0 auto;}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:0;align-items:stretch;max-width:var(--content-width);margin:0 auto;}
.about-visual{position:relative;min-height:580px;overflow:hidden;background:#0a0800;}

/* ── Image wrap with phosphor amber tint overlay ── */
.about-img-wrap{
  position:absolute;inset:0;
  background-image:url('../img/Deep-Sea-Space.jpg');
  background-size:cover;background-position:center;
  overflow:hidden;
}
/* Amber phosphor color grade over the image */
.about-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(10,8,0,.15),rgba(10,8,0,.6) 100%),
    linear-gradient(to bottom,rgba(255,80,0,.08),rgba(255,60,0,.04));
  mix-blend-mode:multiply;
  z-index:1;pointer-events:none;
}

/* ── CRT scanlines rolling over the whole panel ── */
.about-img-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,transparent 2px,
    rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 3px
  );
  animation:about-scanroll 6s linear infinite;
}
@keyframes about-scanroll{
  0%{background-position:0 0;}
  100%{background-position:0 100%;}
}

/* ── Phosphor screen flicker — random brightness drops ── */
.about-visual{
  animation:about-crt-flicker 7s steps(1) infinite;
}
@keyframes about-crt-flicker{
  0%,100%{filter:brightness(1);}
  5%{filter:brightness(.55);}
  6%{filter:brightness(1.12);}
  7%{filter:brightness(1);}
  23%{filter:brightness(.7);}
  24%{filter:brightness(1);}
  41%{filter:brightness(.35);}
  42%{filter:brightness(1.2);}
  43%{filter:brightness(1);}
  68%{filter:brightness(.8);}
  69%{filter:brightness(1);}
  85%{filter:brightness(.5);}
  86%{filter:brightness(1.15);}
  87%{filter:brightness(1);}
}

/* ── CRT screen tear / damage layer ── */
.about-visual .scan-grid{
  position:absolute;inset:0;pointer-events:none;z-index:7;
  background-image:
    linear-gradient(rgba(255,90,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,0,.04) 1px, transparent 1px);
  background-size:28px 28px;
  animation:about-grid-pulse 4s ease-in-out infinite;
}
@keyframes about-grid-pulse{
  0%,100%{opacity:.3;}
  25%{opacity:.8;}
  50%{opacity:.3;}
  75%{opacity:.7;}
}

/* ── RGB channel tear — fires on bad flicker frames ── */
.about-img-wrap .scan-glow{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:transparent;
  animation:about-rgb-tear 7s steps(1) infinite;
}
@keyframes about-rgb-tear{
  0%,100%,7%,24%,43%,69%,87%{box-shadow:none;}
  5%{box-shadow:inset -3px 0 0 rgba(255,0,0,.2), inset 3px 0 0 rgba(0,200,255,.15);}
  6%{box-shadow:inset 4px 0 0 rgba(255,0,0,.25), inset -4px 0 0 rgba(0,200,255,.2);}
  23%{box-shadow:inset -2px 0 0 rgba(255,0,0,.15), inset 2px 0 0 rgba(0,200,255,.1);}
  41%{box-shadow:inset -5px 0 0 rgba(255,0,0,.3), inset 5px 0 0 rgba(0,200,255,.25);}
  42%{box-shadow:inset 3px 0 0 rgba(255,0,0,.2), inset -3px 0 0 rgba(0,200,255,.15);}
  85%{box-shadow:inset -4px 0 0 rgba(255,0,0,.25), inset 4px 0 0 rgba(0,200,255,.2);}
  86%{box-shadow:inset 2px 0 0 rgba(255,0,0,.15), inset -2px 0 0 rgba(0,200,255,.1);}
}

/* ── Horizontal screen tear — random single-line glitch ── */
.about-img-wrap .scan-line{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(to right, transparent, rgba(255,120,0,.9) 20%, rgba(255,200,0,1) 50%, rgba(255,120,0,.9) 80%, transparent);
  box-shadow:0 0 10px 3px rgba(255,90,0,.6), 0 0 25px 6px rgba(255,90,0,.25);
  z-index:9;pointer-events:none;
  animation:planet-scan 4s cubic-bezier(.4,0,.6,1) infinite, about-line-glitch 7s steps(1) infinite;
}
@keyframes about-line-glitch{
  0%,100%{opacity:1;transform:scaleX(1) translateX(0);}
  5%{opacity:0;transform:scaleX(1.05) translateX(-3px);}
  6%{opacity:1;transform:scaleX(1) translateX(0);}
  41%{opacity:.4;transform:scaleX(.95) translateX(4px);}
  42%{opacity:1;transform:scaleX(1) translateX(0);}
  85%{opacity:0;transform:scaleX(1.08) translateX(-5px);}
  86%{opacity:1;transform:scaleX(1) translateX(0);}
}

/* ── Scan HUD data readout ── */
.scan-data{
  position:absolute;top:1.2rem;left:1.2rem;right:1.2rem;z-index:11;
  display:flex;flex-direction:column;gap:6px;pointer-events:none;
}
.scan-label{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,160,0,.9);
  text-shadow:0 0 8px rgba(255,120,0,.5);
  animation:about-label-glitch 9s steps(1) infinite;
}
@keyframes about-label-glitch{
  0%,100%{text-shadow:0 0 8px rgba(255,120,0,.5);letter-spacing:.2em;}
  13%{text-shadow:-2px 0 rgba(255,0,60,.6), 2px 0 rgba(255,200,0,.6);letter-spacing:.22em;}
  14%{text-shadow:0 0 8px rgba(255,120,0,.5);letter-spacing:.2em;}
  57%{text-shadow:2px 0 rgba(255,0,60,.4), -2px 0 rgba(255,200,0,.4);letter-spacing:.18em;}
  58%{text-shadow:0 0 8px rgba(255,120,0,.5);letter-spacing:.2em;}
}
.scan-pct-row{display:flex;align-items:center;gap:10px;}
.scan-pct{
  font-family:var(--font-mono);font-size:1.2rem;font-weight:700;
  color:rgba(255,180,0,.95);letter-spacing:.1em;flex-shrink:0;
  text-shadow:0 0 12px rgba(255,120,0,.7);
  animation:about-pct-glitch 5s steps(1) infinite;
}
@keyframes about-pct-glitch{
  0%,100%{text-shadow:0 0 12px rgba(255,120,0,.7);opacity:1;}
  20%{text-shadow:-3px 0 rgba(255,0,0,.5),3px 0 rgba(255,200,0,.5);opacity:.7;}
  21%{text-shadow:0 0 12px rgba(255,120,0,.7);opacity:1;}
  72%{opacity:.4;}
  73%{opacity:1;}
}
.scan-bar-track{
  flex:1;height:3px;background:rgba(255,120,0,.1);position:relative;overflow:hidden;
}
.scan-bar-fill{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(to right, rgba(255,80,0,.9), rgba(255,180,0,1));
  box-shadow:0 0 8px rgba(255,120,0,.8);
  transition:width .5s linear;
}

/* ── Lifeform alert — phosphor terminal style ── */
.scan-alert{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,3,0,.88);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .6s ease, visibility .6s ease;
}
.scan-alert.visible{opacity:1;pointer-events:auto;visibility:visible;}
.scan-alert-inner{
  border:1px solid rgba(255,120,0,.6);
  background:#0a0800;
  padding:1.8rem 2.2rem;
  max-width:320px;width:90%;
  position:relative;overflow:hidden;
  animation:alert-glitch 4s steps(1) infinite;
}
/* Scanlines inside alert */
.scan-alert-inner::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);
}
/* Moving scan line inside alert */
.scan-alert-inner::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,120,0,.8),transparent);
  animation:alert-scan-line 2s linear infinite;
}
.scan-alert-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:1.2rem;padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,120,0,.2);
  position:relative;z-index:1;
}
.scan-alert-icon{
  font-size:1.2rem;color:rgba(255,160,0,.9);
  animation:alert-icon-blink .6s steps(1) infinite;
}
.scan-alert-title{
  font-family:var(--font-mono);font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,160,0,.95);
  text-shadow:0 0 8px rgba(255,120,0,.5);
}
.scan-alert-body{display:flex;flex-direction:column;gap:.6rem;position:relative;z-index:1;}
.scan-organism-img{
  position:relative;z-index:1;
  margin:.6rem 0;
  border:1px solid rgba(255,120,0,.25);
  overflow:hidden;
  background:#000;
}
.scan-organism-img img{
  display:block;width:100%;max-height:180px;
  object-fit:cover;object-position:center top;
  opacity:.85;
  filter:sepia(20%) contrast(1.1);
  animation:about-crt-flicker 7s steps(1) infinite;
}
/* Scanline overlay on image */
.scan-organism-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 3px);
}
.scan-alert-row{display:flex;gap:.8rem;align-items:baseline;}
.scan-alert-key{
  font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.12em;color:rgba(255,135,0,.78);
  text-transform:uppercase;flex-shrink:0;min-width:88px;
}
.scan-alert-val{
  font-family:var(--font-mono);font-size:.82rem;
  color:rgba(255,160,0,.85);letter-spacing:.05em;
}
.scan-alert-blink{animation:alert-icon-blink .8s steps(1) infinite;color:rgba(255,160,0,.9);}
.scan-rescan-btn{
  margin-top:.8rem;width:100%;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,130,0,.8);background:rgba(255,90,0,.06);
  border:1px solid rgba(255,120,0,.4);padding:.6rem 1rem;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .2s, background .2s, border-color .2s;
  z-index:1;
}
.scan-rescan-btn:hover{background:rgba(255,90,0,.14);color:rgba(255,200,0,.95);border-color:rgba(255,120,0,.7);}
.scan-rescan-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,transparent,rgba(255,120,0,.2),transparent);
  transform:translateX(-100%);transition:transform .35s ease;
}
.scan-rescan-btn:hover::after{transform:translateX(100%);}

@keyframes alert-icon-blink{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes alert-glitch{
  0%,93%,100%{transform:translate(0,0);}
  94%{transform:translate(-2px,0);}
  95%{transform:translate(2px,1px);}
  96%{transform:translate(-1px,-1px);}
  97%{transform:translate(0,0);}
}
@keyframes alert-scan-line{0%{top:0;opacity:1;}100%{top:100%;opacity:0;}}
@keyframes planet-scan{0%{top:-2px;}50%{top:calc(100% + 2px);}100%{top:-2px;}}
@keyframes planet-scan-glow{0%{top:-120px;}50%{top:calc(100%);}100%{top:-120px;}}
@keyframes scan-grid-fade{0%,100%{opacity:.4;}25%{opacity:.9;}50%{opacity:.4;}75%{opacity:.9;}}

/* ── HUD coord block ── */
.about-hud-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;}
.about-coord-block{
  font-family:var(--font-mono);font-size:.78rem;
  color:rgba(255,135,0,.78);letter-spacing:.1em;line-height:2;
}
.about-coord-block span{
  color:rgba(255,160,0,.8);
  text-shadow:0 0 6px rgba(255,120,0,.4);
}

/* ── Content right panel — phosphor terminal ── */
.about-content{
  padding:5rem 4rem;
  background:#0a0800;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
  border-left:1px solid rgba(255,120,0,.15);
  animation:exp-screen-flicker 11s steps(1) infinite;
  animation-delay:2s;
}
/* Scanlines */
.about-content::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);
}
/* Vignette */
.about-content::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);
}
.about-content > *{position:relative;z-index:1;}
.about-content .label-tag{
  margin-bottom:1.2rem;
  font-family:var(--font-mono) !important;
  color:rgba(255,145,0,.85) !important;
  letter-spacing:.2em !important;
}
.about-content .section-heading{
  margin-bottom:1.5rem;
  color:rgba(255,180,0,.95) !important;
  text-shadow:0 0 30px rgba(255,90,0,.15);
}
.about-content .section-heading span{color:var(--orange) !important;}

.about-bio{
  font-family:var(--font-mono);
  font-size:1rem;color:rgba(255,150,0,.82);
  line-height:1.9;font-weight:400;margin-bottom:1.2rem;
  letter-spacing:.03em;
}

.about-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem;}
.tag-pill{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,140,0,.82);
  border:1px solid rgba(255,120,0,.2);
  background:rgba(255,90,0,.05);
  padding:.35rem .8rem;
  transition:border-color .2s,color .2s,background .2s;
}
.tag-pill:hover{border-color:rgba(255,120,0,.6);color:rgba(255,180,0,.9);background:rgba(255,90,0,.1);}
.hhg-panel{
  padding:1.4rem 1.8rem;
  border:1px solid rgba(255,90,0,.2);
  border-left:3px solid var(--orange);
  background:rgba(255,90,0,.04);
  position:relative;overflow:hidden;
  margin-top:2rem;
}
.hhg-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.15) 3px,rgba(0,0,0,.15) 4px);
  opacity:.5;
}
.hhg-top{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;
  color:var(--grey-light);opacity:.7;margin-bottom:.9rem;
}
.hhg-main{
  display:flex;align-items:baseline;gap:.6rem;line-height:1;margin-bottom:.8rem;
}
.hhg-dont{
  font-family:var(--font-display);font-size:2.2rem;font-weight:700;
  color:var(--grey-light);letter-spacing:.08em;
  animation:hhg-flicker 7s steps(1) infinite;
}
.hhg-panic{
  font-family:var(--font-display);font-size:2.8rem;font-weight:900;
  color:var(--orange);letter-spacing:.06em;
  animation:hhg-rgb 5s steps(1) infinite;
}
.hhg-bottom{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;
  color:var(--grey-light);opacity:.55;
  animation:hhg-blink-sub 4s steps(1) infinite;
}
@keyframes hhg-flicker{
  0%,100%{opacity:1;}
  18%{opacity:.3;}19%{opacity:1;}
  62%{opacity:.5;}63%{opacity:1;}
}
@keyframes hhg-rgb{
  0%,100%{text-shadow:none;}
  10%{text-shadow:-2px 0 rgba(255,0,60,.7),2px 0 rgba(255,200,0,.7);}
  11%{text-shadow:none;}
  55%{text-shadow:-1px 0 rgba(255,0,60,.4),1px 0 rgba(255,200,0,.4);}
  56%{text-shadow:none;}
}
@keyframes hhg-blink-sub{
  0%,100%{opacity:.55;}
  30%{opacity:.15;}31%{opacity:.55;}
  70%{opacity:.3;}71%{opacity:.55;}
}

/* ================================================================ PARALLAX BANDS */
.parallax-band{position:relative;height:55vh;min-height:340px;overflow:hidden;}
.parallax-band-bg{position:absolute;top:-30%;left:0;right:0;bottom:-30%;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;}
.parallax-band-1 .parallax-band-bg{background-image:url('../img/planet-blue.jpg');}
.parallax-band-2 .parallax-band-bg{background-image:url('../img/big-red.jpg');}
.parallax-overlay{position:absolute;inset:0;background:rgba(6,6,8,.6);display:flex;align-items:center;justify-content:center;overflow:hidden;}

/* ── Heavy scanlines - dense, dark, damaged ── */
.parallax-overlay::before{
  content:'';position:absolute;inset:-10%;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 1px,
      rgba(0,0,0,.45) 1px, rgba(0,0,0,.45) 2px
    );
  animation:crt-scanroll 8s linear infinite, crt-flicker 0.09s steps(1) infinite;
}

/* ── RGB split + static grain ── */
.parallax-overlay::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,0,60,.07) 0px,  rgba(255,0,60,.07) 1px,
      transparent 1px,          transparent 2px,
      rgba(0,180,255,.07) 2px, rgba(0,180,255,.07) 3px,
      transparent 3px,          transparent 5px
    );
  mix-blend-mode:screen;
  animation:crt-rgb-drift 0.06s steps(1) infinite;
}

/* ── Screen-level glitch tears + brightness spikes ── */
.parallax-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
  animation:screen-damage 2.8s steps(1) infinite;
}

/* ── Vignette burn ── */
.parallax-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.75) 100%);
  animation:vignette-pulse 3s ease-in-out infinite;
}

/* Scanlines slowly roll downward like a bad refresh rate */
@keyframes crt-scanroll{
  from{background-position:0 0;}
  to{background-position:0 80px;}
}

/* Rapid brightness flicker — uneven, like failing backlight */
@keyframes crt-flicker{
  0%  {opacity:1;}
  4%  {opacity:.82;}
  5%  {opacity:1;}
  15% {opacity:.95;}
  16% {opacity:.7;}
  17% {opacity:1;}
  42% {opacity:.96;}
  43% {opacity:.6;}
  44% {opacity:.98;}
  45% {opacity:.75;}
  46% {opacity:1;}
  72% {opacity:.9;}
  73% {opacity:.5;}
  74% {opacity:1;}
  88% {opacity:.85;}
  89% {opacity:1;}
  100%{opacity:.97;}
}

/* RGB channels drift and jitter independently */
@keyframes crt-rgb-drift{
  0%  {transform:translate(0,0);}
  10% {transform:translate(-3px, 1px);}
  20% {transform:translate(2px,-1px);}
  30% {transform:translate(-1px, 2px);}
  40% {transform:translate(3px, 0);}
  50% {transform:translate(0, -2px);}
  60% {transform:translate(-2px, 1px);}
  70% {transform:translate(1px,-3px);}
  80% {transform:translate(-3px, 2px);}
  90% {transform:translate(2px, 1px);}
  100%{transform:translate(0,0);}
}

/* Horizontal tear lines, signal loss flashes, full whiteout spikes */
@keyframes screen-damage{
  0%,100%{box-shadow:none; background:transparent;}

  /* tear at 30% height */
  8%  {box-shadow:inset 0 0 0 9999px transparent,
        inset 0 calc(30% - 1px) 0 2px rgba(255,255,255,.25),
        inset 0 calc(30%) 0 8px rgba(0,0,0,.6);}
  9%  {box-shadow:none;}

  /* sudden brightness spike */
  18% {background:rgba(255,255,255,.08);}
  19% {background:transparent;}

  /* double tear */
  31% {box-shadow:
        inset 0 calc(55% - 2px) 0 3px rgba(255,90,0,.3),
        inset 0 calc(55%) 0 10px rgba(0,0,0,.7),
        inset 0 calc(20%) 0 4px rgba(0,180,255,.15);}
  32% {box-shadow:none;}

  /* RGB full desync flash */
  47% {background:rgba(255,0,60,.06);}
  48% {background:rgba(0,180,255,.06);}
  49% {background:transparent;}

  /* near full blackout */
  61% {background:rgba(0,0,0,.7);}
  62% {background:transparent;}

  /* rolling tear across full height */
  78% {box-shadow:
        inset 0 calc(10%) 0 2px rgba(255,255,255,.2),
        inset 0 calc(40%) 0 2px rgba(255,255,255,.15),
        inset 0 calc(70%) 0 2px rgba(255,255,255,.1);}
  79% {box-shadow:none;}

  /* white flash */
  91% {background:rgba(255,255,255,.12);}
  92% {background:transparent;}
}

/* Vignette breathes — screen struggling to stay on */
@keyframes vignette-pulse{
  0%,100%{opacity:1;}
  40%{opacity:.6;}
  41%{opacity:1;}
  70%{opacity:.75;}
  71%{opacity:1;}
}

/* ── Intense RGB text shift ── */
@keyframes crt-rgb-shift{
  0%  {text-shadow: -2px 0 rgba(255,0,60,.8),  2px 0 rgba(0,180,255,.8),  0 0 rgba(238,240,245,1);}
  10% {text-shadow:  3px 0 rgba(255,0,60,.6), -3px 0 rgba(0,180,255,.6),  0 0 rgba(238,240,245,1);}
  20% {text-shadow: -4px 0 rgba(255,0,60,.9),  4px 0 rgba(0,180,255,.9),  0 1px rgba(238,240,245,1);}
  30% {text-shadow:  0   0 rgba(238,240,245,1);}
  40% {text-shadow:  2px 2px rgba(255,0,60,.7), -2px -2px rgba(0,180,255,.7);}
  50% {text-shadow: -5px 0 rgba(255,0,60,.5),   5px 0 rgba(0,180,255,.5),  0 0 rgba(238,240,245,.9);}
  60% {text-shadow:  0   0 rgba(238,240,245,1);}
  70% {text-shadow:  1px 0 rgba(255,0,60,.9),  -1px 0 rgba(0,180,255,.9);}
  80% {text-shadow: -3px 1px rgba(255,0,60,.6),  3px -1px rgba(0,180,255,.6);}
  90% {text-shadow:  0   0 rgba(238,240,245,1);}
  100%{text-shadow: -2px 0 rgba(255,0,60,.8),   2px 0 rgba(0,180,255,.8);}
}

.parallax-quote{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.5vw,2.5rem);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  color:rgba(238,240,245,.9);padding:0 2rem;max-width:900px;line-height:1.6;
  position:relative;z-index:5;
  animation:crt-rgb-shift 1.8s steps(1) infinite;
}
.parallax-quote em{font-style:normal;color:var(--orange);}

/* Typewriter cursor */
.parallax-quote .tw-cursor{
  display:inline-block;width:2px;height:1em;
  background:var(--orange);margin-left:4px;vertical-align:middle;
  animation:tw-blink .5s steps(1) infinite;
}
@keyframes tw-blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* Hide text until typewriter fires */
.parallax-quote[data-typewriter]{animation:none;}
.parallax-quote[data-typewriter] .tw-output{color:rgba(238,240,245,.9);}
.parallax-quote[data-typewriter].tw-done{animation:crt-rgb-shift 1.8s steps(1) infinite;}

/* ================================================================ EXPERIENCE */
#experience{padding:8rem 0;background:var(--black);}
.exp-layout{
  display:grid;grid-template-columns:320px 1fr;gap:0;
  border:1px solid rgba(255,120,0,.25);
  position:relative;
  animation:exp-screen-flicker 8s steps(1) infinite;
}
/* rolling scanline sweep */
.exp-layout::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:10;
  background:linear-gradient(to bottom,transparent 50%,rgba(255,100,0,.03) 50%);
  background-size:100% 4px;
  animation:exp-scanroll 6s linear infinite;
}
/* RGB fringe on flicker */
.exp-layout::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:11;
  animation:exp-rgb-flash 7s steps(1) infinite;
  mix-blend-mode:screen;
}
@keyframes exp-scanroll{
  0%{background-position:0 0;}
  100%{background-position:0 100%;}
}
@keyframes exp-screen-flicker{
  0%,100%{opacity:1;filter:brightness(1);}
  4%{opacity:.92;filter:brightness(1.08);}
  5%{opacity:1;filter:brightness(1);}
  18%{opacity:.6;filter:brightness(.7);}
  19%{opacity:1;filter:brightness(1.1);}
  20%{opacity:1;filter:brightness(1);}
  47%{opacity:.85;filter:brightness(.85);}
  48%{opacity:1;filter:brightness(1);}
  73%{opacity:.4;filter:brightness(.5);}
  74%{opacity:1;filter:brightness(1.15);}
  75%{opacity:1;filter:brightness(1);}
  91%{opacity:.8;filter:brightness(.8);}
  92%{opacity:1;filter:brightness(1);}
}
@keyframes exp-rgb-flash{
  0%,100%{box-shadow:none;}
  18%{box-shadow:inset -3px 0 0 rgba(255,0,0,.15), inset 3px 0 0 rgba(255,180,0,.15);}
  19%{box-shadow:none;}
  73%{box-shadow:inset -2px 0 0 rgba(255,0,0,.1), inset 2px 0 0 rgba(255,180,0,.1);}
  74%{box-shadow:none;}
}
.exp-nav-panel{
  background:#0a0800;
  border-right:1px solid rgba(255,120,0,.25);
  padding:0;
  position:relative;
  overflow:hidden;
}
/* phosphor scanline overlay */
.exp-nav-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.35) 2px,rgba(0,0,0,.35) 3px);
}
/* subtle vignette */
.exp-nav-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%);
}

/* boot header */
.exp-nav-header{padding:1.4rem 1.6rem 0;position:relative;z-index:1;}
.diag-boot{border-bottom:1px solid rgba(255,120,0,.2);padding-bottom:1rem;margin-bottom:.2rem;}
.diag-boot-line{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  color:rgba(255,130,0,.85);text-transform:uppercase;line-height:1.8;
}
.diag-boot-sep{height:1px;background:rgba(255,120,0,.2);margin:.4rem 0;}
.diag-dim{color:rgba(255,140,0,.75);}

/* prompt line */
.diag-prompt-line{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1.6rem .4rem;
  font-family:var(--font-mono);font-size:.8rem;
  position:relative;z-index:1;
}
.diag-arrow{color:rgba(255,130,0,.6);}
.diag-prompt-text{
  color:rgba(255,130,0,.9);letter-spacing:.08em;
  animation:diag-cursor-blink .7s steps(1) infinite;
}
@keyframes diag-cursor-blink{
  0%,49%{border-right:2px solid rgba(255,130,0,.9);}
  50%,100%{border-right:2px solid transparent;}
}

/* tabs */
.exp-tab{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:1rem 1.6rem;cursor:none;
  border-left:2px solid transparent;
  border-top:1px solid rgba(255,120,0,.08);
  transition:background .2s,border-color .2s;
  position:relative;z-index:1;
}
.exp-tab:hover{background:rgba(255,120,0,.07);}
.exp-tab.active{background:rgba(255,90,0,.12);border-left-color:var(--orange);}
.exp-tab-year{
  font-family:var(--font-mono);font-size:.78rem;color:rgba(255,140,0,.78);
  letter-spacing:.08em;white-space:nowrap;padding-top:3px;flex-shrink:0;
}
.exp-tab.active .exp-tab-year{color:rgba(255,130,0,.8);}
.exp-tab-info{flex:1;min-width:0;}
.exp-tab-company{
  font-family:var(--font-mono);font-size:.9rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,165,0,.82);
  transition:color .2s;
}
.exp-tab.active .exp-tab-company{color:var(--orange);}
.exp-tab-title{
  font-family:var(--font-mono);font-size:.75rem;
  color:rgba(255,130,0,.4);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.05em;
}
.exp-tab.active .exp-tab-title{color:rgba(255,145,0,.88);}

/* diag footer */
.diag-footer{
  display:flex;align-items:center;gap:.6rem;
  padding:1rem 1.6rem;border-top:1px solid rgba(255,120,0,.15);
  position:relative;z-index:1;margin-top:auto;
}
.diag-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--orange);flex-shrink:0;
  animation:diag-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes diag-dot-pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.diag-footer-text{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:rgba(255,130,0,.35);text-transform:uppercase;
}

/* ── EDUCATION TERMINAL ── */
.edu-terminal{
  background:#0a0800;
  border:1px solid rgba(255,120,0,.25);
  position:relative;overflow:hidden;
  animation:exp-screen-flicker 11s steps(1) infinite;
  animation-delay:3s;
}
.edu-terminal::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);
}
.edu-terminal::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}
.edu-terminal-header{
  padding:1.2rem 1.6rem 1rem;
  border-bottom:1px solid rgba(255,120,0,.2);
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;z-index:1;
}
.edu-terminal-body{
  padding:2.5rem 3.5rem;
  position:relative;z-index:1;
}

.exp-content-panel{padding:3rem 3.5rem;display:none;background:#0a0800;position:relative;overflow:hidden;}
.exp-content-panel::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);}
.exp-content-panel::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);}
.exp-content-panel.active{display:block;}
.exp-content-panel > *{position:relative;z-index:1;}
.exp-header-row{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,120,0,.2);}
.exp-number{font-family:var(--font-mono);font-size:3.5rem;font-weight:700;color:rgba(255,120,0,.15);line-height:1;flex-shrink:0;letter-spacing:.05em;}
.exp-header-text{flex:1;}
.exp-role-title{font-family:var(--font-mono);font-size:clamp(1rem,2vw,1.3rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,160,0,.95);margin-bottom:.5rem;}
.exp-company-tag{font-family:var(--font-mono);font-size:.85rem;color:rgba(255,145,0,.88);letter-spacing:.2em;text-transform:uppercase;}
.exp-date-tag{font-family:var(--font-mono);font-size:.8rem;color:rgba(255,140,0,.75);letter-spacing:.12em;margin-top:4px;}
.exp-description{font-family:var(--font-mono);font-size:1rem;color:rgba(255,150,0,.7);line-height:1.9;margin-bottom:1.5rem;letter-spacing:.03em;}
.exp-skills{display:flex;flex-wrap:wrap;gap:.5rem;}
.skill-chip{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,130,0,.8);border:1px solid rgba(255,120,0,.3);background:rgba(255,90,0,.08);padding:.3rem .75rem;}

/* ================================================================ SKILLS */
#skills{padding:8rem 0;background:var(--dark);}
.skills-intro{margin-bottom:4rem;}
/* ── SKILLS TERMINAL ── */
.skills-terminal{
  background:#0a0800;
  border:1px solid rgba(255,120,0,.25);
  border-bottom:none;
  position:relative;overflow:hidden;
}
.skills-terminal::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);
  z-index:0;
}
.skills-terminal-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 1.4rem;
  border-bottom:1px solid rgba(255,120,0,.15);
  position:relative;z-index:1;
}
.skills-bar-left{display:flex;align-items:center;gap:.6rem;}
.skills-bar-label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:rgba(255,140,0,.78);text-transform:uppercase;}
.skills-bar-clock{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.15em;color:rgba(255,145,0,.88);}
.skills-notify-bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1.4rem;
  position:relative;z-index:1;
  min-height:2rem;
}
.skills-notify-arrow{font-family:var(--font-mono);font-size:.8rem;color:var(--orange);flex-shrink:0;}
.skills-notify-text{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.1em;
  color:rgba(255,160,0,.9);text-transform:uppercase;
  animation:notify-cursor-blink .6s steps(1) infinite;
}
@keyframes notify-cursor-blink{
  0%,49%{border-right:2px solid rgba(255,160,0,.9);}
  50%,100%{border-right:2px solid transparent;}
}

.skills-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,120,0,.15);
  border:1px solid rgba(255,120,0,.25);
  border-top:none;
  list-style:none;
  margin:0;padding:0;
  animation:exp-screen-flicker 13s steps(1) infinite;
  animation-delay:1.5s;
  position:relative;
}
/* rolling scanline over grid */
.skills-grid::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:10;
  background:linear-gradient(to bottom,transparent 50%,rgba(255,100,0,.025) 50%);
  background-size:100% 4px;
  animation:exp-scanroll 8s linear infinite;
}
.skills-grid li{list-style:none;margin:0;padding:0;display:contents;}
.skill-card{
  background:#0a0800;
  padding:2rem 1.8rem;
  position:relative;overflow:hidden;
}
.skill-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.25) 2px,rgba(0,0,0,.25) 3px);
  z-index:0;
}
.skill-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,120,0,.0);
  transition:background .3s;
  z-index:1;
}
.skill-card:hover::after{background:var(--orange);}
.skill-card:hover{background:#0e0a00;}
.skill-card > *{position:relative;z-index:1;}
.skill-card-icon{font-size:1.4rem;color:rgba(255,130,0,.6);margin-bottom:1rem;display:block;}
.skill-card-title{font-family:var(--font-mono);font-size:.85rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,160,0,.95);margin-bottom:.7rem;}
.skill-card-desc{font-family:var(--font-mono);font-size:.875rem;color:rgba(255,140,0,.82);line-height:1.8;letter-spacing:.03em;margin-bottom:1rem;}
.skill-bars{margin-top:1.5rem;}
.skill-bar-item{margin-bottom:.9rem;}
.skill-bar-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:1rem;letter-spacing:.1em;color:var(--grey-light);margin-bottom:5px;}
.skill-bar-label .skill-pct{transition:color .15s steps(1);}
.skill-bar-track{height:4px;background:var(--grey-dark);position:relative;overflow:hidden;}
.skill-bar-fill{position:absolute;top:0;left:0;bottom:0;width:0;transition:width 0.12s steps(1);}
.skill-bar-fill.bar-orange{background:linear-gradient(to right,#ff5a00,#ff9500);}
.skill-bar-fill.bar-yellow{background:linear-gradient(to right,#e6b800,#ffe033);}
.skill-bar-fill.bar-green{background:linear-gradient(to right,#3a9e1a,#7be83c);}
.skill-bar-fill.bar-blue{background:linear-gradient(to right,#1a5cff,#00c8ff);}
.skill-bar-fill.bar-red{background:linear-gradient(to right,#cc1a1a,#ff4444);}

/* ================================================================ CONTACT */
#contact{
  padding:8rem 0;background:#0a0800;overflow:hidden;position:relative;
  animation:exp-screen-flicker 14s steps(1) infinite;animation-delay:4s;
}
#contact::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);}
#contact::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);}
#contact .content-wrap{position:relative;z-index:1;}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;max-width:var(--content-width);margin:0 auto;}
.contact-headline{font-family:var(--font-display);font-size:clamp(2.4rem,4.5vw,4.8rem);font-weight:900;line-height:1;letter-spacing:-.01em;margin:1.2rem 0;}
.contact-headline .outline{color:transparent;-webkit-text-stroke:1px rgba(255,160,0,.8);}
.contact-headline .solid{color:rgba(255,180,0,.95);}
.contact-sub{font-family:var(--font-mono);font-size:1rem;color:rgba(255,150,0,.75);line-height:1.9;max-width:420px;margin-bottom:2.5rem;letter-spacing:.03em;}
.contact-links{display:flex;flex-direction:column;gap:0;margin-bottom:3rem;}
.contact-link-row{display:flex;align-items:center;gap:1.2rem;padding:1.1rem 0;border-bottom:1px solid rgba(255,120,0,.15);text-decoration:none;color:rgba(255,150,0,.78);transition:color .25s,padding-left .3s;cursor:none;font-family:var(--font-mono);}
.contact-link-row:hover{color:rgba(255,180,0,.95);padding-left:.5rem;}
.contact-link-row i{font-size:1.1rem;color:rgba(255,130,0,.7);flex-shrink:0;}
.contact-link-label{font-family:var(--font-mono);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;flex:1;color:rgba(255,145,0,.85);}
.contact-link-val{font-family:var(--font-mono);font-size:1rem;color:rgba(255,130,0,.6);letter-spacing:.06em;}
.contact-hud-panel{
  position:relative;padding:3rem;background:#0a0800;
  border:1px solid rgba(255,120,0,.25);overflow:hidden;
  animation:exp-screen-flicker 9s steps(1) infinite;animation-delay:1s;
}
.contact-hud-panel::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);}
.contact-hud-panel > *:not(.hud-br-corner):not(.hud-bl-corner){position:relative;z-index:1;}
.hud-readout{margin-bottom:1.8rem;}
.hud-readout-title{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,130,0,.6);margin-bottom:.4rem;}
.hud-readout-val{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:rgba(255,165,0,.92);letter-spacing:.06em;}
.hud-divider{height:1px;background:rgba(255,120,0,.15);margin:1.5rem 0;}
.hud-scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,120,0,.6),transparent);opacity:0;animation:hud-scan 4s linear infinite;z-index:2;}

/* ================================================================ FOOTER */
#footer{
  background:#0a0800;border-top:1px solid rgba(255,120,0,.2);
  padding:2.5rem 0;position:relative;z-index:10;overflow:hidden;
}
#footer::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);}
#footer .content-wrap{position:relative;z-index:1;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;max-width:var(--content-width);margin:0 auto;}
.footer-brand{font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,145,0,.85);}
.footer-copy{font-family:var(--font-mono);font-size:1rem;color:rgba(255,120,0,.5);letter-spacing:.08em;}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{font-size:1.1rem;color:rgba(255,130,0,.6);text-decoration:none;transition:color .25s;}
.footer-links a:hover{color:rgba(255,180,0,.95);}

/* ================================================================ RESPONSIVE */
@media(max-width:1100px){
  .exp-layout{grid-template-columns:300px 1fr;}
  .skills-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  #hero{grid-template-columns:1fr;}
  .hero-left{height:52vh;}
  .hero-right{padding:3rem 2rem 6rem;}
  .hero-astronaut{width:65%;max-width:400px;left:50%;transform:translateX(-50%);}
  .about-grid{grid-template-columns:1fr;}
  .about-visual{min-height:280px;}
  .about-content{padding:3rem 2rem;}
  .exp-layout{grid-template-columns:1fr;border:none;}
  .exp-nav-panel{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid rgba(255,120,0,.2);padding:0;}
  .exp-tab{min-width:160px;border-left:none;border-bottom:2px solid transparent;flex-direction:column;}
  .exp-tab.active{border-bottom-color:var(--orange);border-left-color:transparent;}
  .exp-content-panel{padding:2.5rem 2rem;border:1px solid rgba(255,120,0,.2);}
  .contact-grid{grid-template-columns:1fr;gap:3rem;}
  .nav-links,.nav-status{display:none;}
  .nav-hamburger{display:block;}
}
@media(max-width:600px){
  /* Raise root from 12.8px to 14px — prevents body copy dropping below 12px */
  html { font-size: 14px; }
  /* Restore h1 and h2 to full size */
  h1, .hero-title { font-size: clamp(2.6rem, 10vw, 4rem) !important; }
  h2, .section-heading { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
  .contact-headline { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; }
  .hero-title{font-size:clamp(2.6rem,10vw,4rem) !important;}
  .hero-right{padding:2.5rem 1.5rem 5rem;}
  .skills-grid{grid-template-columns:1fr;}
  .hero-telemetry{gap:.6rem;}
  /* Body copy — ensure minimum 16px equivalent at new root */
  .about-bio{font-size:1rem !important;}
  .exp-description{font-size:1rem !important;}
  .skill-card-desc{font-size:.95rem !important;}
  .hero-cta{flex-direction:column;}
  .exp-content-panel{padding:2rem 1.5rem;}
  .contact-hud-panel{padding:2rem 1.5rem;}
  #navbar{padding:0 1.5rem !important;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
  .contact-grid{gap:2rem;}
  .parallax-band{height:40vh;}
}

/* Mobile tab bar hidden by default — shown via mobile.css */
.mobile-tab-bar { display: none !important; }
@media (max-width: 768px) { .mobile-tab-bar { display: flex !important; } }

/* ================================================================
   PREFERS REDUCED MOTION — WCAG 2.3.3 / 2.3.1
   Stops all animations and transitions for users who have set
   their OS accessibility preference to reduce motion.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
  .ticker-track             { animation: none !important; }

  .parallax-band-bg         { transform: none !important; }
  .skill-bar-fill           { transition: none !important; }
  #boot-screen              { transition: none !important; }
  .reveal                   { transition: none !important; opacity: 1 !important; transform: none !important; }
  .scan-line, .scan-glow    { animation: none !important; }
  .about-visual,
  .exp-layout,
  .skills-grid,
  .about-content,
  .edu-terminal             { animation: none !important; filter: none !important; }
}

/* ================================================================
   GALLERY — PLANET SELECTION MODULE
   ================================================================ */
#gallery{padding:8rem 0;background:#0a0800;overflow:hidden;position:relative;animation:exp-screen-flicker 12s steps(1) infinite;animation-delay:3s;}
#gallery::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.28) 2px,rgba(0,0,0,.28) 3px);}
#gallery::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);}
#gallery .content-wrap{position:relative;z-index:1;}

/* Terminal header bar */
.gallery-terminal{background:#0a0800;border:1px solid rgba(255,120,0,.25);border-bottom:none;position:relative;}
.gallery-terminal::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);}
.gallery-terminal-bar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.4rem;position:relative;z-index:1;}
.gallery-bar-left{display:flex;align-items:center;gap:.6rem;}
.gallery-bar-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:rgba(255,130,0,.5);text-transform:uppercase;}
.gallery-bar-count{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:rgba(255,130,0,.7);text-transform:uppercase;}

/* 3x3 grid */
.gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:1px;
  background:rgba(255,120,0,.15);
  border:1px solid rgba(255,120,0,.25);
  border-top:none;
  list-style:none;
  padding:0;
  margin:0;
}

/* Each item */
.gallery-item{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  background:#0a0800;
}
/* 4:3 aspect ratio */
.gallery-thumb{
  position:relative;
  padding-top:75%;
  overflow:hidden;
}
.gallery-img-wrap{
  position:absolute;inset:0;
  overflow:hidden;
  background:#050300;
}
.gallery-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transition:transform .4s ease,filter .4s ease;
  filter:brightness(.8) sepia(10%);
}
.gallery-item:hover .gallery-img-wrap img{
  transform:scale(1.06);
  filter:brightness(1) sepia(0%);
}

/* Scanline per thumb */
.gallery-scanline{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.3) 2px,rgba(0,0,0,.3) 3px);
}

/* HUD overlay bottom bar */
.gallery-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  padding:.35rem .6rem;
  background:rgba(5,3,0,.75);
  border-top:1px solid rgba(255,120,0,.2);
  transition:background .3s;
}
.gallery-item:hover .gallery-overlay{background:rgba(255,90,0,.12);}
.gallery-sector{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;color:rgba(255,130,0,.8);text-transform:uppercase;}
.gallery-status{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;color:rgba(255,120,0,.45);text-transform:uppercase;}

/* Corner accent on hover */
.gallery-item::before{
  content:'';position:absolute;top:6px;left:6px;width:10px;height:10px;
  border-top:1px solid var(--orange);border-left:1px solid var(--orange);
  opacity:0;transition:opacity .3s;z-index:4;
}
.gallery-item::after{
  content:'';position:absolute;bottom:28px;right:6px;width:10px;height:10px;
  border-bottom:1px solid var(--orange);border-right:1px solid var(--orange);
  opacity:0;transition:opacity .3s;z-index:4;
}
.gallery-item:hover::before,.gallery-item:hover::after{opacity:1;}

/* ── LIGHTBOX ── */
.gallery-lightbox{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s ease;
}
.gallery-lightbox.open{opacity:1;visibility:visible;pointer-events:auto;}
.gallery-lightbox-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(5,3,0,.94);cursor:pointer;
}
.gallery-lightbox-inner{
  position:relative;z-index:1;
  width:min(1200px,90vw);
  max-height:85vh;
  overflow:hidden;
  background:#0a0800;
  border:1px solid rgba(255,120,0,.3);
}
.gallery-lightbox-terminal-bar{
  display:flex;align-items:center;gap:1rem;
  padding:.65rem 1.2rem;
  border-bottom:1px solid rgba(255,120,0,.2);
  background:rgba(5,3,0,.6);
}
.gallery-lightbox-sector{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--orange);text-transform:uppercase;}
.gallery-lightbox-status{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;color:rgba(255,120,0,.45);text-transform:uppercase;flex:1;}
.gallery-lightbox-close{
  font-family:var(--font-mono);font-size:.85rem;
  color:rgba(255,130,0,.6);background:transparent;
  border:1px solid rgba(255,120,0,.3);
  padding:.2rem .55rem;cursor:pointer;
  transition:color .2s,border-color .2s;
  line-height:1;
}
.gallery-lightbox-close:hover{color:var(--orange);border-color:rgba(255,120,0,.7);}
.gallery-lightbox-img-wrap{position:relative;width:100%;background:#050300;}
.gallery-lightbox-img-wrap img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;}
.gallery-lightbox-scanline{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.25) 2px,rgba(0,0,0,.25) 3px);}
.gallery-lightbox-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.2rem;
  border-top:1px solid rgba(255,120,0,.2);
}
.gallery-lightbox-btn{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,130,0,.7);background:transparent;
  border:1px solid rgba(255,120,0,.25);padding:.4rem .9rem;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.gallery-lightbox-btn:hover{color:rgba(255,180,0,.95);border-color:rgba(255,120,0,.6);background:rgba(255,90,0,.08);}
.gallery-lightbox-counter{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;color:rgba(255,120,0,.5);}