/* ═══════════════════════════════════════════════════════════════
   FEATHER FIELD STUDIES
   Moonshot / Duane King
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONTS ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'GeistPixelSquare';
  src: url('/assets/fonts/GeistPixel-Square.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GeistPixelGrid';
  src: url('/assets/fonts/GeistPixel-Grid.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono[wght].woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ─── CUSTOM PROPERTIES ──────────────────────────────────────── */

:root {
  --color-bg:  #FFF5D1;
  --color-ink: #2740B5;

  --font-pixel-square: 'GeistPixelSquare', 'Courier New', monospace;
  --font-pixel-grid:   'GeistPixelGrid',   'Courier New', monospace;
  --font-mono:         'Geist Mono', 'Courier New', monospace;

  /* Grid — matches Figma 1440px canvas */
  --max-width:  1240px;
  --pad-inline: 100px;
  --gap:        40px;
  --section-gap: 140px;

  /* Typography — sized to 1440px canvas */
  --text-hero:  100px;
  --text-title: 100px;
  --text-spec:  100px;
  --text-label: 20px;
  --text-body:  20px;

}


/* ─── RESET ──────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, canvas {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
}


/* ─── LAYOUT ─────────────────────────────────────────────────── */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.section {
  padding-block: var(--section-gap);
  position: relative;
}

/* Fiducial crosshair grid — 1010×510px fixed, centered in image wrap */
.study-image-wrap {
  min-height: 510px;
}

.fiducial {
  position: absolute;
  width: 1010px;
  height: 510px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cline x1='30' y1='25' x2='30' y2='35' stroke='%232740B5' stroke-width='1'/%3E%3Cline x1='25' y1='30' x2='35' y2='30' stroke='%232740B5' stroke-width='1'/%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: calc(1010px / 11) calc(510px / 6);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
}

@media (max-width: 900px) {
  :root {
    --pad-inline: 40px;
    --section-gap: 60px;
  }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }

  /* Contain everything inside the image wrap — clips fiducial and IRL bleed */
  /* min-height: 0 overrides the global min-height: 510px so height: 320px takes effect */
  .study-image-wrap {
    min-height: 0;
    height: 320px;
    overflow: hidden;
  }

  /* Fiducial: explicit px avoids percentage height resolution issues across browsers */
  .fiducial {
    width: 100%;
    height: 320px;
    background-size: 107px 107px;
  }

  /* IRL context photos don't translate well to mobile — hide them */
  .study-irl { display: none; }
}


/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */

.type-hero {
  font-family: var(--font-pixel-square);
  font-size: clamp(48px, 7vw, 100px);
  line-height: clamp(52px, 7vw, 100px);
  font-weight: 400;
  -webkit-font-smoothing: none;
}

.type-hero span { display: block; }

.type-title {
  font-family: var(--font-pixel-square);
  font-size: clamp(48px, 7vw, 100px);
  line-height: clamp(52px, 7vw, 100px);
  font-weight: 400;
  -webkit-font-smoothing: none;
}

.type-spec {
  font-family: var(--font-pixel-grid);
  font-size: clamp(48px, 7vw, 100px);
  line-height: clamp(52px, 7vw, 100px);
  font-weight: 400;
  -webkit-font-smoothing: none;
}

.type-label {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.type-body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
}

.type-body--small {
  font-size: 14px;
  line-height: 1.7;
}


/* ─── BLINKING CURSOR ────────────────────────────────────────── */

.cursor {
  display: inline-block;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ─── FIXED ELEMENTS ─────────────────────────────────────────── */


#feather-fixed {
  position: fixed;
  top: var(--section-gap);
  right: var(--pad-inline);
  width: 387px;
  z-index: 100;
  pointer-events: none;
}

/* Hide raw img until replaced by dithered canvas */
img[data-dither] { visibility: hidden; }


/* ─── SECTION 1: INTRODUCTION ───────────────────────────────── */

.type-hero {
  margin-bottom: var(--section-gap);
}

.intro-text {
  margin-bottom: var(--section-gap);
}

.gerber-row {
  margin-bottom: var(--section-gap);
}

.journey-roadmap {
  align-items: start;
}

.journey-steps p,
.roadmap-steps p {
  margin-bottom: 2px;
}

.journey-col .type-label,
.roadmap-col .type-label {
  margin-bottom: 8px;
}


/* ─── SECTION 2: APOLLO ─────────────────────────────────────── */

.apollo-text {
  align-items: start;
}


/* ─── STUDY SECTIONS ─────────────────────────────────────────── */

.study-header {
  margin-bottom: var(--section-gap);
}

.study-header .type-spec {
  margin-top: 0;
}

.study-image-wrap {
  position: relative;
  height: 510px;
  display: flex;
  align-items: center;
  margin-bottom: var(--section-gap);
}

/* Object in normal flow, top-anchored — co-registers with top-anchored fiducial */
.study-object {
  width: 100%;
  opacity: 0; /* animated by GSAP */
  position: relative;
  z-index: 2;
}

/* IRL — oversized, centered, bleeds beyond grid boundary */
/* max-width: none overrides the global canvas max-width: 100% so aspect ratio
   is not broken when the computed width exceeds the container. */
.study-irl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 160%;
  width: auto;
  max-width: none;
  opacity: 0; /* animated by GSAP */
  z-index: 3;
}

.study-meta {
  align-items: start;
}

/* Each column reveals independently with its stage */
.study-meta > div {
  opacity: 0;
  min-width: 0;
}

.meta-rule {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-block: 6px;
}


/* ─── SECTION 6: RITUAL ─────────────────────────────────────── */

.ritual-text {
  align-items: start;
  margin-bottom: var(--section-gap);
}

.ritual-continues {
  /* "The study continues." sits naturally in col 3 */
}

.moonshot-mark-wrap {
  /* bottom-left, no centering */
}

.moonshot-mark {
  height: 40px;
  width: auto;
}