/*
  Page-specific stylesheet for the hero section's scramble effect.
  Written to be safe to load alongside an existing site stylesheet:
  - no bare html/body font-family/background/color overrides (those would
    clobber your site's real theme) -- monospace is scoped to .scramble
    only, where it matters so characters don't jitter width mid-decode
  - no .hero / h1 / h2 rules -- your own styling owns your headings
*/

html, body {
  overflow-x: hidden;
}

/* Game of Life canvas, pinned as the full-viewport background. */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fafafa;
}

/*
  Everything else on the page (header, main, footer) is wrapped in this
  class. Required: a plain unpositioned element paints BEHIND a
  position:fixed, z-index:0 element regardless of DOM order, so without
  this your nav/content would end up hidden under the background.
*/
.page-content {
  position: relative;
  z-index: 1;
}

.scramble {
  display: inline-block;
  white-space: pre-wrap;
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/*
  Page entrance sequence: h1 scramble-reveals (see scrambleReveal() in
  index.html) directly in place, no separate loading screen. Once it locks
  in, the subtitle, then the project boxes, then the nav bar reveal in
  turn. Each piece starts hidden here so there's no flash of it before JS
  adds the .is-visible/.is-open class -- see the <noscript> fallback in
  index.html for the no-JS case.
*/
.hero__subtitle {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero__subtitle.is-visible {
  opacity: 1;
}

.project-box {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.project-box.is-visible {
  opacity: 1;
}

.nav-bar {
  transform: translateY(-100%);
  transition: transform 0.5s ease;
}
.nav-bar.is-visible {
  transform: translateY(0);
}