/* ===========================================================================
   neural-ca.css — full-bleed CA background.
   Pairs with neural-ca.js. Uses the site's existing custom properties where
   available (--surface, --rule, --text, --link…) and falls back gracefully.
   =========================================================================== */

/* The live texture, pinned behind all content. This is a 2D canvas sized to the
   viewport; neural-ca.js paints the toroidal CA tile across it as a repeating
   pattern, so it tiles seamlessly at the chosen scale. */
.nca-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;             /* sits behind page content */
  pointer-events: none;    /* never steal clicks/scroll from the page */
  display: block;
}

/* --- site-wide integration: float the page content over the live background --
   One frosted-glass pane wraps the header and body together: a blurred,
   translucent plate over the live CA, no lens/refraction — just frost. */
body { background: transparent; }

.page {
  /* sheen gradient over a thin tint, plus the CA blurred and desaturated
     underneath (raise the tint % to hide more of it). */
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg, #fff) 46%, transparent);
  margin: 7vh auto 6vh;                         /* float lower → more centred, CA shows above */
  padding: 2.6em 2.4em 2.6em;                   /* more breathing room up top */
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);   /* faint top ridge highlight */
  /* feather every edge so the pane is a raised plateau melting into the glass
     surface, not a hard card. corners fade fastest (the two masks intersect).
     ,-------.
   --`       `-- */
  -webkit-mask:
    linear-gradient(to right,  transparent, #000 30px, #000 calc(100% - 30px), transparent),
    linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right,  transparent, #000 30px, #000 calc(100% - 30px), transparent),
    linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-composite: intersect;
}

/* header + body share the one pane now — drop their separate backings.
   The header keeps its bottom rule as the internal divider. */
header.site,
main {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}

/* first element shouldn't shove itself down inside the pane (h2 leads home) */
main > :first-child { margin-top: 0; }