/* AXI0M — brutalist DOS terminal stylesheet */
/* Phase 2: Static Site — revised after visual review */

/* ============================================================
   BLOCK 0 — Entry gate (click-to-enter overlay)
   White screen, blue AXI0M title, small [click] hint.
   Dismissed on click; unlocks audio + reveals site.
   ============================================================ */

#entry-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s ease;
}

.gate-content {
  text-align: center;
  user-select: none;
}

.gate-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: var(--color-bg);
  letter-spacing: 0.08em;
  margin: 0;
}

.gate-hint {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #0000AA;
  margin-top: 1rem;
  letter-spacing: 0.1em;
}

/* Lock scroll while gate is visible */
body.gate-locked {
  overflow: hidden;
}

/* Gate dismissed */
#entry-gate.dismissed {
  opacity: 0;
  pointer-events: none;
}

/* Hide scrollbar */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   BLOCK 1 — Self-hosted body/display font (GT America / 'Main')
   ============================================================ */

@font-face {
  font-family: 'Main';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/main.ttf') format('truetype');
}

/* ============================================================
   BLOCK 2 — Self-hosted display font (Monument Extended)
   ============================================================ */

@font-face {
  font-family: 'Monument Extended';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/MonumentExtended-Regular.otf') format('opentype');
}

/* ============================================================
   BLOCK 3 — Custom properties (all palette, spacing, type values)
   No hard-coded values in later rules — reference these only.
   ============================================================ */

:root {
  --color-bg: #0000AA;
  --color-text: #FFFFFF;
  --color-divider: rgba(255, 255, 255, 0.35);
  --color-texture-scanline: rgba(0, 0, 0, 0.15);
  --font-mono: 'Main', 'Helvetica Neue', sans-serif;
  --font-display: 'Monument Extended', 'Main', sans-serif;
  --font-size-body: clamp(1.25rem, 3.5vw, 2rem);
  --font-size-heading: clamp(1.4rem, 4vw, 2.5rem);
  --line-height-body: 1.25;
  --col-prose-max: 62ch;
  --col-overhang: 7ch;
  --pad-right: clamp(1.5rem, 5vw, 5rem);
  --heading-indent: clamp(3rem, 18vw, 14rem);
}

/* ============================================================
   BLOCK 4 — Box model reset
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   BLOCK 5 — html element
   ============================================================ */

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  min-height: 100%;
}

/* ============================================================
   BLOCK 6 — body element (asymmetric padding — left flush, right padded)
   The flush left edge is intentional — part of the brutalist aesthetic.
   ============================================================ */

body {
  padding-top: 3rem;
  padding-right: var(--pad-right);
  padding-bottom: 5rem;
  padding-left: clamp(1rem, 4vw, 3rem);
  min-height: 100vh;
  position: relative;
}


/* ============================================================
   BLOCK 8 — Opening epigraph (header.manifesto-intro)
   ============================================================ */

header.manifesto-intro {
  padding-left: 0;
  margin-bottom: 4rem;
}

p.epigraph {
  max-width: calc(var(--col-overhang) + var(--col-prose-max));
  padding-left: 0;
  opacity: 0.85;
}

/* ============================================================
   BLOCK 9 — Main container (block flow — no 3-column grid)
   Grid was removed per visual review: body paragraphs flush to left
   edge, headings pushed right via margin-left.
   ============================================================ */

main#manifesto {
  display: block;
}

/* ============================================================
   BLOCK 10 — Section (normal block — no display: contents)
   Each section stacks in document order. Children are normal blocks.
   ============================================================ */

section.manifesto-section {
  margin-top: 3rem;
}

section.manifesto-section:first-of-type {
  margin-top: 0;
}

/* ============================================================
   BLOCK 11 — Section marker (roman numerals)
   Sits at the very left edge — visual anchor at column-zero.
   Subordinate: smaller, muted, but present.
   ============================================================ */

span.section-marker {
  display: block;
  font-family: var(--font-display);
  opacity: 0.7;
  font-size: 0.7em;
  margin-bottom: 0.3rem;
}

/* ============================================================
   BLOCK 12 — Section heading
   Monument Extended pushes right — significant left indent creates
   tension against the flush-left body paragraphs below.
   ============================================================ */

h2.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-heading);
  margin-left: var(--heading-indent);
  margin-bottom: 1.4rem;
  line-height: 1.2;
}

/* ============================================================
   BLOCK 13 — Body paragraphs
   Anchored to the very left edge — no indent, no margin-left.
   The contrast with the indented heading is the layout.
   ============================================================ */

section.manifesto-section p {
  margin-bottom: 1.2rem;
  max-width: var(--col-prose-max);
}

section.manifesto-section p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   BLOCK 14 — Dividers between sections
   Hidden per visual review — section rhythm carries without them.
   do not modify the HTML; hide via CSS only.
   ============================================================ */

hr.divider {
  display: none;
}

/* ============================================================
   BLOCK 15 — Reading gate: contact reveal
   Hidden in DOM from load. Fades in when body.unlocked is set
   by reader.js once all sections have been read. One-way.
   ============================================================ */

.contact-reveal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
}

.contact-reveal p {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  letter-spacing: 0.05em;
  max-width: none;
  margin-bottom: 0;
  color: #0000AA;
}

body.unlocked .contact-reveal {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 2s ease;
}

body.unlocked > main#manifesto,
body.unlocked > header.manifesto-intro {
  opacity: 0.06;
  transition: opacity 2s ease;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   BLOCK 16 — Mobile breakpoint (single breakpoint, 640px)
   ============================================================ */

@media (max-width: 640px) {
  body {
    padding-left: 0.75rem;
  }

  h2.section-heading {
    margin-left: 1rem;   /* reduce right-offset on narrow screens */
  }
}

/* ============================================================
   BLOCK 17 — Cube geometry (Phase 3)
   Scroll-driven fold effect: three 80vh panels stacked (240vh total)
   inside a fixed 100vh flex container — only the center panel is visible.
   All three panels hold identical cloned content; translateY(-scrollY)
   moves them together so the content scrolls through the cube face.
   No-JS fallback: main#manifesto visible (cube-wrapper hidden by default).
   prefers-reduced-motion fallback: body.cube-active suppressed by media query.
   ============================================================ */

/* 17a — Cube wrapper hidden by default; activated when JS adds body.cube-active */
#cube-wrapper {
  display: none;
}

/* 17b — Cube active state: fixed full-viewport flex container; hides original doc */
body.cube-active #cube-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--color-bg);
}

body.cube-active > main#manifesto,
body.cube-active > header.manifesto-intro {
  display: none;
}

/* 17c — 3D perspective wrapper: stacks the three cube-fold panels */
.wrapper-3d {
  perspective: 20vw;
  position: relative;
  transform-style: preserve-3d;
}

/* 17d — Each fold panel: 80vh tall; three stacked = 240vh total height */
.cube-fold {
  height: 80vh;
  overflow: hidden;
  width: 80vw;
}

.cube-fold-align {
  height: 100%;
  width: 100%;
}

/* 17e — Top fold panel: rotated 90deg up; align pulls content down to match center */
.cube-fold-top {
  transform: rotateX(-90deg);
  transform-origin: bottom center;
}

.cube-fold-top .cube-fold-align {
  transform: translateY(100%);
}

/* 17f — Bottom fold panel: rotated 90deg down; align pulls content up to match center */
.cube-fold-bottom {
  transform: rotateX(90deg);
  transform-origin: top center;
}

.cube-fold-bottom .cube-fold-align {
  transform: translateY(-100%);
}

/* 17g — Fold content: padding-top pushes content to start at the bottom of the
   center fold on load; the remaining padding mirrors body for correct inset */
[data-fold-content] {
  padding-top: calc(80vh - 3rem);
  padding-right: var(--pad-right);
  padding-bottom: 5rem;
  padding-left: clamp(1rem, 4vw, 3rem);
}

/* 17h — Mobile: wider fold angle and full-width panels */
@media (max-width: 640px) {
  .cube-fold {
    width: 96vw;
    height: 85vh;
  }

  .cube-fold-top {
    transform: rotateX(-140deg);
  }

  .cube-fold-bottom {
    transform: rotateX(140deg);
  }

  [data-fold-content] {
    padding-top: calc(85vh - 3rem);
    padding-left: 0.75rem;
  }
}

/* 17i — Reduced motion: suppress cube entirely, show flat document */
@media (prefers-reduced-motion: reduce) {
  body.cube-active #cube-wrapper {
    display: none !important;
  }

  body.cube-active > main#manifesto,
  body.cube-active > header.manifesto-intro {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}