:root {
  --bg-base: #060709;
  --text-main: #a8b9c4;
  --text-bright: #f2f6f8;
  --accent-primary: #7fc2dd;
  --accent-subtle: #2a3944;
  --grid-line: rgba(255, 255, 255, 0.035);
}

body, html {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background-color: var(--bg-base);
  font-family: 'Inter', -apple-system, sans-serif;
  overflow: hidden;
  color: var(--text-main);
}

/* ===========================================================
   PARTICLE CANVAS -- home section only
   Absolutely positioned inside #section-home, so it slides away
   with that section and is never visible elsewhere. Not a
   persistent site-wide background.
=========================================================== */
#webgl-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center center;
}

/* Home text content -- plain flow, unpositioned, so it paints above
   both the vignette (-1) and the canvas (-2) by default. */
.home-content {
  display: flex; flex-direction: column; align-items: center;
}

/* ===========================================================
   FIXED CHROME
   Brand mark, corner reticles and the side-nav all sit in a
   layer above the sections and never scroll/translate.
=========================================================== */
.chrome-layer {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20;
  pointer-events: none;
}

.reticle {
  position: absolute; width: 15px; height: 15px;
  border: 1px solid var(--accent-primary);
  pointer-events: none; opacity: 0.5;
}
.reticle-tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.reticle-tr { top: 30px; right: 30px; border-left: none; border-bottom: none; }
.reticle-bl { bottom: 30px; left: 30px; border-right: none; border-top: none; }
.reticle-br { bottom: 30px; right: 30px; border-left: none; border-top: none; }

.brand {
  position: absolute; top: 40px; left: 60px;
  display: flex; align-items: flex-end; gap: 15px;
  pointer-events: auto;
}
.brand button {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-bright); letter-spacing: 2px; font-weight: 500;
  background: none; border: none; padding: 0; cursor: pointer;
}

/* Side nav: fixed vertical stack of section-switch boxes.
   Styled after the original .btn-access "Project Demos" box. */
.side-nav {
  position: absolute; top: 50%; left: 60px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: auto;
}
.nav-box {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-bright); text-decoration: none; text-transform: uppercase;
  letter-spacing: 2px; padding: 14px 24px; border: 1px solid var(--accent-subtle);
  background: rgba(6, 7, 9, 0.6); backdrop-filter: blur(8px);
  transition: all 0.3s ease; display: flex; align-items: center; gap: 12px;
  width: 222px; box-sizing: border-box; cursor: pointer;
  box-shadow: 0 4px 20px rgba(6, 7, 9, 0.6);
}
.nav-box::before { content: '>'; color: var(--accent-primary); }
.nav-box:hover { border-color: var(--accent-primary); background: rgba(69, 98, 112, 0.05); }
.nav-box.active { border-color: var(--accent-primary); background: rgba(127, 194, 221, 0.1); }
.nav-box.disabled {
  opacity: 0.35; cursor: not-allowed;
  color: var(--text-main);
}
.nav-box.disabled::before { content: none; }
.nav-box.disabled:hover { border-color: var(--accent-subtle); background: rgba(6, 7, 9, 0.6); }

/* ===========================================================
   SECTION TRACK
   All page sections stacked vertically in one tall track.
   JS moves it with translateY -- there is no native scrolling.
=========================================================== */
.sections-track {
  position: relative; z-index: 2; width: 100%;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.page-section {
  width: 100%; height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 60px; position: relative;
  pointer-events: none;
}
.page-section > * { pointer-events: auto; }

.telemetry-label { display: none; }

.page-section h1 {
  font-size: 58px;
  margin: 0 0 8px 0;
  color: #f2f6f8;
}
.page-section h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; font-weight: 500; letter-spacing: 1px;
  color: #f2f6f8; margin: 0 0 8px 0;
}
.section-subline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: #5c6b74;
  letter-spacing: 0.2px;
  margin-bottom: 29px;
}
.page-section p {
  font-size: 16px;
  max-width: 624px;
  color: #c9d8e0;
  text-shadow: 0 0 14px rgba(6, 7, 9, 1), 0 2px 8px rgba(6, 7, 9, 1);
}

/* Vignette behind the text block of every section, matching the
   original hero treatment, so copy stays legible over the particles. */
.page-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 1000px; height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(6, 7, 9, 0.88) 0%,
    rgba(6, 7, 9, 0.65) 45%,
    rgba(6, 7, 9, 0.15) 75%,
    rgba(6, 7, 9, 0) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.telemetry-bar { display: none; }

/* ===========================================================
   PROJECT DEMO section content
   Horizontal-only carousel of tall "column" tiles. Scrolling is
   native overflow-x; wheel input is remapped to horizontal inside
   this element only (see script), so it doesn't fight the page's
   section-to-section navigation.
=========================================================== */
.demo-carousel {
  display: flex; gap: 20px;
  justify-content: center; justify-content: safe center;
  width: calc(100% + 90px); margin: 0 -60px 0 0; padding: 0 60px 0 320px;
  height: min(85vh, 900px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.demo-carousel::-webkit-scrollbar { display: none; }

.demo-column {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  width: clamp(360px, 30vw, 660px); height: 100%;
  scroll-snap-align: start;
  border: 1px solid rgba(168, 185, 196, 0.25);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.3s ease;
}
.demo-column:hover { border-color: var(--accent-primary); }

/* Card art: an optional real image/GIF (--card-img, set inline per card)
   layered under the same gradient treatment used for cards with no art
   yet, so a card looks intentional whether or not an image is set. */
.demo-column-art {
  position: absolute; inset: 0;
  --card-img: none;
  background-image:
    var(--card-img),
    radial-gradient(ellipse at 30% 20%, rgba(127, 194, 221, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.2) 0%, rgba(6, 7, 9, 0.85) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px);
  background-size: cover, cover, cover, auto;
  background-position: center, center, center, center;
  background-color: #0b0f12;
  transition: transform 0.5s ease;
}
.demo-column:hover .demo-column-art { transform: scale(1.04); }

.demo-column-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 22px 26px;
  text-align: left;
}
.demo-column-label .demo-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--accent-primary); letter-spacing: 2px; display: block; margin-bottom: 10px;
}
.demo-column-label h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 18px;
  color: var(--text-bright); margin: 0; font-weight: 500;
}

/* In-production card: real project, real art, just not finished --
   not a link, art is blurred, tag reads as a status rather than a
   category. */
.demo-column.wip { cursor: default; }
.demo-column.wip .demo-column-art { filter: blur(10px) brightness(0.7); transform: scale(1.08); }
.demo-column.wip:hover { border-color: var(--accent-subtle); }
.demo-column.wip:hover .demo-column-art { transform: scale(1.08); }
.demo-column.wip .demo-tag { color: #d9a441; }

.demo-nav {
  display: none; gap: 12px; margin-top: 18px;
}
.demo-nav.visible { display: flex; }
.demo-nav-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-bright); background: rgba(6, 7, 9, 0.6);
  border: 1px solid var(--accent-subtle); width: 40px; height: 40px;
  cursor: pointer; transition: all 0.3s ease;
}
.demo-nav-btn:hover { border-color: var(--accent-primary); background: rgba(127, 194, 221, 0.08); }

/* ===========================================================
   ABOUT / CONTACT section content
=========================================================== */
.about-contact-grid {
  display: flex; gap: 60px; max-width: 700px; text-align: left;
}
.about-block, .contact-block { flex: 1; }
.about-contact-grid h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-primary); margin: 0 0 12px 0; font-weight: 500;
}
.about-block p { max-width: none; margin: 0; text-align: left; }

.contact-list {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.contact-list a {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-bright); text-decoration: none; letter-spacing: 1px;
  border-bottom: 1px solid var(--accent-subtle);
  padding-bottom: 2px;
}
.contact-list a:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ===========================================================
   BLOG section content
=========================================================== */
.blog-list {
  display: flex; flex-direction: column; gap: 20px; max-width: 640px; width: 100%;
}
.blog-entry {
  text-align: left; padding: 24px 28px; box-sizing: border-box;
  border: 1px dashed var(--accent-subtle);
  background: rgba(6, 7, 9, 0.6); backdrop-filter: blur(8px);
  opacity: 0.6;
}
.blog-entry .blog-date {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--accent-primary); letter-spacing: 2px; display: block; margin-bottom: 8px;
}
.blog-entry h3 {
  font-family: 'JetBrains Mono', monospace; font-size: 16px;
  color: var(--text-bright); margin: 0 0 8px 0; font-weight: 500;
}
.blog-entry p {
  font-size: 13px; color: var(--text-main); max-width: none;
  text-shadow: none; margin: 0;
}

/* Responsive: collapse side-nav to a bottom bar on narrow viewports */
@media (max-width: 720px) {
  .brand { top: 24px; left: 24px; }
  .side-nav {
    top: auto; bottom: 24px; left: 50%; transform: translateX(-50%);
    flex-direction: row; gap: 8px;
  }
  .nav-box { width: auto; padding: 10px 14px; font-size: 9px; }
  .page-section { padding: 0 24px; }
  .page-section h1 { font-size: 38px; }
  .demo-carousel { width: calc(100% + 48px); margin: 0 -24px; padding: 0 24px; height: 50vh; }
  .demo-column { width: 68vw; }
  .about-contact-grid { flex-direction: column; gap: 32px; max-width: 320px; }
}