/* ════════════════════════════════════════════
   Variables
   ════════════════════════════════════════════ */
:root {
  /* Background layers */
  --bg:        #1c1917;
  --bg2:       #242220;
  --bg3:       #2c2927;
  --bg4:       #343130;
  --line:      #3a3632;

  /* Text */
  --hi:        #fafaf9;
  --mid:       #a8a29e;
  --lo:        #57534e;

  /* Accent — violet */
  --vio:       #a855f7;
  --vio-dim:   #7c3aed;
  --vio-glow:  #c084fc;

  /* Accents */
  --amber:     #f59e0b;
  --teal:      #2dd4bf;
  --rose:      #fb7185;

  /* RGB channels for rgba() */
  --vio-rgb:   168, 85, 247;
  --teal-rgb:  45, 212, 191;
  --amber-rgb: 245, 158, 11;
  --rose-rgb:  251, 113, 133;

  /* Typography */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════
   Reset
   ════════════════════════════════════════════ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════
   Overlays (grain + scanlines)
   ════════════════════════════════════════════ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  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.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 0.1875em,
    rgba(0, 0, 0, .05) 0.1875em, rgba(0, 0, 0, .05) 0.25em
  );
  pointer-events: none;
  z-index: 9998;
}

/* ════════════════════════════════════════════
   Scroll reveal
   ════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(0.875em);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.on {
  opacity: 1;
  transform: none;
}
.s1 { transition-delay: .04s; }
.s2 { transition-delay: .11s; }
.s3 { transition-delay: .18s; }
.s4 { transition-delay: .25s; }

/* ════════════════════════════════════════════
   Nav logo
   ════════════════════════════════════════════ */
.nav-logo {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: .2em;
  color: var(--vio);
  text-shadow: 0 0 0.625em rgba(var(--vio-rgb), .6);
  text-transform: uppercase;
}
.nav-logo-name {
  text-transform: none;
  color: var(--lo);
  text-shadow: none;
}

/* ════════════════════════════════════════════
   Nav underline
   ════════════════════════════════════════════ */
.nav-a {
  position: relative;
}
.nav-a::after {
  content: '';
  display: block;
  height: 0.0625em;
  background: var(--vio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.nav-a:hover::after {
  transform: scaleX(1);
}

/* ════════════════════════════════════════════
   Timeline dot
   ════════════════════════════════════════════ */
.tl-dot::before {
  content: '';
  position: absolute;
  left: -1.8125em;
  top: 0.5625em;
  width: 0.625em;
  height: 0.625em;
  border-radius: 50%;
  background: var(--bg);
  border: 0.125em solid var(--vio);
  animation: tl-pulse 2.5s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0.1875em rgba(var(--vio-rgb), .12),
      0 0 0.5em      rgba(var(--vio-rgb), .45);
  }
  50% {
    box-shadow:
      0 0 0 0.3125em rgba(var(--vio-rgb), .2),
      0 0 1.25em     rgba(var(--vio-rgb), .8);
  }
}

/* ════════════════════════════════════════════
   Pills
   ════════════════════════════════════════════ */
.pill {
  display: inline-block;
  padding: 0.1875em 0.6875em;
  font-size: 0.6875em;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  border: 0.0625em solid;
  transition: box-shadow .2s;
}
.pill-v:hover { box-shadow: 0 0 0.75em rgba(var(--vio-rgb),   .5),  inset 0 0 0.5em rgba(var(--vio-rgb),   .1); }
.pill-t:hover { box-shadow: 0 0 0.75em rgba(var(--teal-rgb),  .45), inset 0 0 0.5em rgba(var(--teal-rgb),  .1); }
.pill-a:hover { box-shadow: 0 0 0.75em rgba(var(--amber-rgb), .4),  inset 0 0 0.5em rgba(var(--amber-rgb), .1); }
.pill-r:hover { box-shadow: 0 0 0.75em rgba(var(--rose-rgb),  .4),  inset 0 0 0.5em rgba(var(--rose-rgb),  .1); }

/* ════════════════════════════════════════════
   Card hover
   ════════════════════════════════════════════ */
.card {
  transition: border-color .2s, box-shadow .2s;
}
.card:hover {
  border-color: var(--vio) !important;
  box-shadow:
    0 0 0 0.0625em rgba(var(--vio-rgb), .15),
    0 0 1.75em     rgba(var(--vio-rgb), .07),
    0 0.25em 1.75em rgba(0, 0, 0, .4);
}

/* ════════════════════════════════════════════
   Terminal glow
   ════════════════════════════════════════════ */
.term-glow {
  transition: border-color .2s, box-shadow .2s;
}
.term-glow:hover {
  border-color: var(--vio) !important;
  box-shadow: 0 0 1.5em rgba(var(--vio-rgb), .12);
}

/* ════════════════════════════════════════════
   Progress bar
   ════════════════════════════════════════════ */
.prog {
  height: 0.125em;
  background: var(--line);
  border-radius: 0.0625em;
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vio), var(--vio-glow));
  border-radius: 0.0625em;
  animation: prog-grow .9s ease-out forwards;
}
@keyframes prog-grow {
  from { width: 0; }
}

/* ════════════════════════════════════════════
   Blinking cursor
   ════════════════════════════════════════════ */
.cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--vio);
  text-shadow: 0 0 0.5em var(--vio);
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ════════════════════════════════════════════
   Glow helpers
   ════════════════════════════════════════════ */
.glow-v { text-shadow: 0 0 0.75em rgba(var(--vio-rgb),   .85), 0 0 1.875em rgba(var(--vio-rgb),   .4); }
.glow-t { text-shadow: 0 0 0.75em rgba(var(--teal-rgb),  .8),  0 0 1.75em  rgba(var(--teal-rgb),  .35); }
.glow-a { text-shadow: 0 0 0.75em rgba(var(--amber-rgb), .8),  0 0 1.75em  rgba(var(--amber-rgb), .35); }

/* ════════════════════════════════════════════
   Badge pulse
   ════════════════════════════════════════════ */
.badge-live {
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0.3125em rgba(var(--vio-rgb), .45); }
  50%       { box-shadow: 0 0 0.875em rgba(var(--vio-rgb), 1), 0 0 1.75em rgba(var(--vio-rgb), .5); }
}

/* ════════════════════════════════════════════
   Glitch effect
   ════════════════════════════════════════════ */
.hero-title {
  display: inline-block;
}
.hero-title:hover .glitch {
  animation: glitch .35s steps(2) forwards;
}
@keyframes glitch {
  0%   {
    text-shadow: 0.1875em 0 var(--teal), -0.1875em 0 var(--rose);
    clip-path: inset(8% 0 82% 0);
    transform: translate(-0.125em, 0);
  }
  20%  {
    text-shadow: -0.1875em 0 var(--vio), 0.1875em 0 var(--hi);
    clip-path: inset(55% 0 25% 0);
    transform: translate(0.125em, 0);
  }
  40%  {
    text-shadow: 0.125em 0.125em var(--rose), -0.125em -0.125em var(--teal);
    clip-path: inset(28% 0 52% 0);
    transform: translate(-0.0625em, 0.0625em);
  }
  60%  {
    text-shadow: -0.125em 0 var(--amber), 0.125em 0 var(--vio-dim);
    clip-path: inset(75% 0 8% 0);
    transform: translate(0.0625em, -0.0625em);
  }
  80%  {
    text-shadow: 0.0625em 0 var(--teal), -0.0625em 0 var(--vio);
    clip-path: inset(4% 0 88% 0);
    transform: translate(0, 0);
  }
  100% {
    text-shadow: 0 0 0.875em rgba(var(--vio-rgb), .85), 0 0 1.875em rgba(var(--vio-rgb), .4);
    clip-path: none;
    transform: none;
  }
}

/* ════════════════════════════════════════════
   Orb
   ════════════════════════════════════════════ */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(5.625em);
  pointer-events: none;
}
.orb-breathe {
  animation: orb-breathe 6s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: .8; transform: scale(1.1); }
}

/* ════════════════════════════════════════════
   Project file explorer
   ════════════════════════════════════════════ */
.proj-tab.active {
  color: var(--vio);
  background: rgba(var(--vio-rgb), .08);
}
.proj-content.hidden {
  display: none;
}

/* ════════════════════════════════════════════
   Line glow
   ════════════════════════════════════════════ */
.line-v { box-shadow: 0 0 0.5em rgba(var(--vio-rgb),  .65); }
.line-t { box-shadow: 0 0 0.5em rgba(var(--teal-rgb), .55); }

/* ════════════════════════════════════════════
   Writeup card
   ════════════════════════════════════════════ */
.wu-card {
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.wu-card:hover {
  border-color: var(--vio) !important;
  transform: translateY(-0.125em);
  box-shadow:
    0 0 0 0.0625em rgba(var(--vio-rgb), .15),
    0 0.5em 2em    rgba(0, 0, 0, .4);
}
.wu-tag {
  display: inline-block;
  padding: 0.0625em 0.5em;
  font-size: 0.625em;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  border: 0.0625em solid;
}

/* ════════════════════════════════════════════
   Programme side panel
   ════════════════════════════════════════════ */
.prog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 200;
}
.prog-overlay.open {
  display: block;
}
.prog-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(32em, 92vw);
  background: var(--bg2);
  border-left: 0.0625em solid var(--line);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 201;
  overflow-y: auto;
  padding: 2em;
}
.prog-panel.open {
  transform: translateX(0);
}
.prog-panel-content.hidden {
  display: none;
}

/* ════════════════════════════════════════════
   Section divider
   ════════════════════════════════════════════ */
.sec-head {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 3em;
}
.sec-head .num {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--lo);
  letter-spacing: .2em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sec-head .bar {
  flex: 1;
  height: 0.0625em;
  background: var(--line);
}
.sec-head h2 {
  font-family: var(--font-serif);
  font-size: 1.5em;
  font-style: italic;
  flex-shrink: 0;
}