/* ── Container ────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

/* ── Section Padding ──────────────────────── */
.section-pad {
  padding-top: var(--sp);
  padding-bottom: var(--sp);
}

/* ── Fixed navbar offset ── */
/* Hero sections lacking explicit padding-top get minimum nav offset */
body > section:first-of-type:not([class*="hero-"]):not(#hero):not(#hero-msp):not(#hero-cybersec),
.page-hero {
  padding-top: var(--nh);
}

/* Pages with the status bar visible get extra offset via their own rules */

/* ── Dividers ─────────────────────────────── */
.divider-h {
  height: 1px;
  background: var(--bh);
  width: 100%;
}

.divider-v {
  width: 1px;
  background: var(--bh);
  height: 100%;
}

/* ── Grid Overlay ─────────────────────────── */
#grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

#grid-pulse {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* ── Scanline Texture ─────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  pointer-events: none;
  z-index: 9998;
  opacity: var(--scanline-opacity, 0);
}

/* ── Scroll Indicator Line ───────────────────*/
.scroll-indicator-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent) var(--scroll-pct, 0%),
    transparent var(--scroll-pct, 0%)
  );
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.scroll-indicator-line.visible { opacity: 0.35; }

/* ── Reveal Clip System ───────────────────── */
.reveal {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
}

.reveal.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  transition: clip-path var(--dur-base) var(--ease-expo),
              opacity var(--dur-base) var(--ease-expo);
}

/* ── Glow Effects ─────────────────────────── */
.glow-accent {
  box-shadow: 0 0 20px var(--accent-glow);
}

.glow-accent-strong {
  box-shadow: 0 0 40px var(--accent-dim);
}

/* ── Flex Utilities ───────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* ── Positioning ──────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ── Visibility ───────────────────────────── */
.hidden { display: none; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* ── Skip Link (Accessibility) ────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 16px;
  font-family: var(--fm);
  font-size: 12px;
  z-index: 99999;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* ── OVERFLOW GUARD (prevents horizontal scroll on mobile ONLY) ────── */

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  canvas {
    max-width: 100% !important;
  }

  svg:not(.icon-svg):not(.nav-brand-svg) {
    max-width: 100%;
    height: auto;
  }

  .killchain-terminal,
  pre,
  code {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre;
  }
}

@media (max-width: 480px) {
  section {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hero-cybersec,
  #hero-cybersec {
    padding-top: calc(var(--nh, 56px) + env(safe-area-inset-top));
  }
}