/* ==========================================================================
   Layout primitives + shared components
   ========================================================================== */

/* Lift ALL page content above the fixed backdrop in one place.
   #backdrop-still is position:fixed with z-index:0, which means it paints
   above any non-positioned content. Relying on each section to set its own
   z-index is how the case-study pages ended up invisible. */
main, footer, header {
  position: relative;
  z-index: var(--z-content);
}

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--section-pad);
}

/* The WebGL canvas is fixed and out of flow, so it can never cause CLS. */
#stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease);
}
#stage.is-live { opacity: 1; }

/* Tier 0 backdrop: a pre-rendered still of the real scene, plus a
   paint-once canvas starfield drifted by a compositor-only transform. */
#backdrop-still {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  background-color: var(--void);
  background-image:
    radial-gradient(ellipse 120% 80% at 62% 18%, rgba(107,140,255,.10), transparent 60%),
    radial-gradient(ellipse 90% 70% at 30% 75%, rgba(123,97,255,.08), transparent 62%),
    radial-gradient(ellipse 60% 50% at 78% 62%, rgba(229,180,95,.05), transparent 65%),
    image-set(url('../assets/img/fallback/hero-still.avif') type('image/avif'),
              url('../assets/img/fallback/hero-still.webp') type('image/webp'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Scrim. The backdrop is decoration; copy legibility always wins. Weighted
   to the left, where the headline and lede sit, and closed off top and
   bottom so the nav and telemetry never fight the nebula. */
#backdrop-still::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(8,9,12,.94) 0%,
      rgba(8,9,12,.80) 34%,
      rgba(8,9,12,.52) 62%,
      rgba(8,9,12,.72) 100%),
    linear-gradient(180deg,
      rgba(8,9,12,.72) 0%,
      rgba(8,9,12,.18) 24%,
      rgba(8,9,12,.30) 62%,
      rgba(8,9,12,.92) 100%);
  pointer-events: none;
}

#starfield {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: .9;
}

.section-head { margin-bottom: var(--s-16); }
/* The lede was sitting hard against the heading. */
.section-head h2 { margin-bottom: var(--s-6); }
.section-head .lede { margin-top: 0; }
.section-head .eyebrow { display: block; margin-bottom: var(--s-4); }
.section-head .eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  margin-right: var(--s-3);
  vertical-align: middle;
  background: var(--gold-500);
}

.rule {
  height: 1px;
  border: 0;
  background: var(--hairline-2);
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-8);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}

/* Gold fill ALWAYS takes a near-black label: 10.45:1.
   White on this gold is 1.90:1 and is forbidden. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gold-500);
  color: var(--void);
  font-weight: 600;
}
.btn-primary:hover { background: var(--gold-300); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* A specular sheen sweeping the surface — gold catching light. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 6s var(--ease-inout) infinite;
}
@keyframes sheen {
  0%, 62% { transform: translateX(-120%); }
  86%, 100% { transform: translateX(120%); }
}

.btn-ghost {
  border: 1px solid var(--hairline);
  color: var(--text-1);
}
.btn-ghost:hover { border-color: var(--gold-500); background: rgba(229,180,95,.06); }

/* ---- Cards -------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--s-8);
  background: var(--surface-1);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--hairline); background: var(--surface-2); }

/* Top border draws in on reveal — cheap, precise, expensive-looking. */
.card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.card.is-in::before { transform: scaleX(1); }

/* ---- Below-the-fold sections skip rendering work until near the viewport.
   contain-intrinsic-size must be roughly accurate or anchor jumps and
   find-in-page break. -------------------------------------------------- */
.defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

[id] { scroll-margin-top: 6rem; }