/* ============================================================
   PAGE.CSS — shared layout for the normal-flow subpages
   (/about/, /work/). The homepage is a fixed parallax scene;
   subpages are simpler: a fixed full-screen animated hero canvas,
   a 100vh scroll runway (the future overlay-object stage), and
   the shared footer in normal flow after it.

   Load order matters: this comes AFTER footer.css so the footer
   overrides below win the cascade (same specificity, later file).
   ============================================================ */

html, body { margin:0; padding:0; }
body {
  background:#000;
  font-family:"ibm-plex-mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   HERO — fixed, full viewport, behind everything. The canvas is
   the moving background; .hero-scanlines / .hero-vignette are
   cheap CSS overlays that give the CRT "dev-cyber" finish without
   costing canvas fill-rate.
   ============================================================ */
.page-hero {
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:#07060f;          /* paints before the canvas boots */
}
.page-hero canvas {
  display:block;
  width:100%;
  height:100%;
}
/* CRT scanlines — 3px repeat so it survives fractional dpr scaling */
.hero-scanlines {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,0)    2px,
    rgba(0,0,0,.18)  3px
  );
}
/* corner falloff pulls the eye to center where overlay objects land */
.hero-vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 90% 80% at 50% 45%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* ============================================================
   STAGE — the content layer scrolling over the fixed hero. Holds
   the page intro + project card rows (projects.css). Height comes
   from the content. pointer-events stays on: the hero's mouse
   effects listen on window/document, so events over the stage
   still bubble to them.
   ============================================================ */
.page-stage {
  position:relative;
  z-index:2;
}

/* ============================================================
   FOOTER OVERRIDES — footer.css was written for the parallax
   homepage where par.js fades it in over scene 3 and a 6000px
   .wrapper pushes it down. Neither exists here.
   ============================================================ */
.site-footer {
  opacity:1;                        /* homepage: 0, faded in by par.js */
  --height-footer-expander:0px;     /* no parallax gap to bridge */
}