/* =========================================================
   PAGES.CSS — homepage scene layouts
========================================================= */

/* ---------------------------------------------------------
   Scene 1 — Hero
--------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.55) contrast(1.05);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--void) 2%, transparent 46%),
    linear-gradient(180deg, rgba(5,7,11,0.55) 0%, transparent 34%),
    linear-gradient(90deg, rgba(5,7,11,0.82) 0%, rgba(5,7,11,0.55) 45%, rgba(5,7,11,0.15) 72%, transparent 92%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(6.5rem, 16vh, 8.5rem) var(--edge) clamp(3rem, 8vh, 5rem);
  max-width: 1100px;
}
.hero__eyebrow { animation-delay: .1s; margin-bottom: 1.25rem; }
.hero__title {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1.16;
}
.hero__tw-line { display: block; white-space: nowrap; }
.hero__tw-line em { color: var(--sky); font-style: italic; }
.hero__cursor {
  display: inline-block;
  width: 0.05em;
  height: 0.8em;
  margin-left: 0.08em;
  background: var(--sky);
  vertical-align: -0.08em;
  animation: cursor-blink 1s step-end infinite;
}

.hero__lede { margin-top: 1.25rem; animation-delay: 2.1s; font-size: 1.05rem; max-width: 36ch; }
.hero__cta-row {
  margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  animation-delay: 2.4s;
}
.hero__dates {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist);
  letter-spacing: 0.03em;
}
.hero__dates strong { color: var(--sky-bright); font-weight: 500; }
.hero__dates-link { color: var(--sky); border-bottom: 1px solid var(--sky-deep); padding-bottom: 1px; }

.hero__scroll-cue {
  position: absolute;
  right: var(--edge);
  bottom: clamp(2rem, 5vh, 3rem);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--mist);
}
@media (min-width: 720px) { .hero__scroll-cue { display: flex; } }
.hero__scroll-cue span {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__scroll-cue-line { width: 1px; height: 46px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero__scroll-cue-line::after {
  content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--sky);
  animation: cue-drop 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-drop { to { top: 100%; } }

/* ---------------------------------------------------------
   Scene 2 — The Challenge
--------------------------------------------------------- */
.challenge {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .challenge { grid-template-columns: 0.9fr 1.1fr; } }
.challenge__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-img);
}
.challenge__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.challenge__statement {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.42;
  color: var(--bone);
  max-width: 34ch;
}
.challenge__statement em { color: var(--sky); }
.challenge__body { margin-top: 2rem; }
.challenge__cta { margin-top: 1.75rem; }

/* ---------------------------------------------------------
   Scene 3 — stats
--------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
@media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------
   Scene 4 — Mission
--------------------------------------------------------- */
.mission {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) { .mission { grid-template-columns: 0.6fr 1fr; } }
.mission__label { align-self: start; }
.mission__copy p { margin-bottom: 1.5rem; }
.mission__copy p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   Scene 11 — Final invitation
--------------------------------------------------------- */
.finale {
  position: relative;
  min-height: 88vh;
  padding-block: clamp(3rem, 8vh, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.finale__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.5) brightness(0.4);
}
.finale__scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(5,7,11,0.35), rgba(5,7,11,0.94)); }
.finale__content { position: relative; z-index: 1; max-width: 46rem; padding-inline: var(--edge); }
.finale__title { margin-top: 1.25rem; }
.finale__lede { margin: 1.75rem auto 0; }
.finale__cta { margin-top: 2.5rem; }

/* section separators using the knight-move motif, echoing brand chess imagery */
.knight-rule {
  width: 100%;
  height: 22px;
  margin-block: 0;
}