/* ============================================================
   Grow A Classroom — The Journey + Impact

   Naming note: everything here for the homepage story is prefixed
   gac-journey / gac-stage / gac-plate / gac-copy / gac-spine /
   gac-chapter, deliberately NOT gac-story — that name is used by
   the splash screen's stylesheet, and sharing it once painted the
   splash's text container cream. Keep the two vocabularies apart.

   Which presentation runs is decided live in assets/js/story.js and
   reflected as one class on the section root:
     .gac-journey               → stacked chapters (default; works
                                  with JavaScript off, and for anyone
                                  who prefers reduced motion)
     .gac-journey.is-cinematic  → the pinned split-screen instead
   ============================================================ */

.gac-journey { background: var(--paper); }

.gac-journey-desktop { display: none; }
.gac-journey-mobile  { display: block; }
.gac-journey.is-cinematic .gac-journey-desktop { display: block; }
.gac-journey.is-cinematic .gac-journey-mobile  { display: none; }

/* =========================================================
   PINNED SPLIT-SCREEN
   ========================================================= */
.gac-journey-track {
  position: relative;
  height: 800vh; /* 8 scenes × 100vh — story.js recalculates from the real scene count */
}
.gac-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}

/* the two halves; they slide across each other to swap sides */
.gac-plate,
.gac-copy {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
}
.gac-plate { left: 0;   z-index: 1; background: var(--ink); }
.gac-copy  { left: 50%; z-index: 2; background: var(--canopy); overflow: hidden; }

/* transitions only switch on after the first paint, so a reload
   mid-story doesn't animate the halves into place */
.gac-stage.is-ready .gac-plate,
.gac-stage.is-ready .gac-copy { transition: transform 1s cubic-bezier(.65,0,.35,1); }
.gac-stage.is-flipped .gac-plate { transform: translateX(100%); }
.gac-stage.is-flipped .gac-copy  { transform: translateX(-100%); }

/* ---------- the photo plate: a framed picture with blueprint corner marks ---------- */
.gac-plate-frame {
  position: absolute;
  inset: clamp(2rem, 4vw, 4rem);
}
.gac-plate-frame::before,
.gac-plate-frame::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--sprout);
  z-index: 2;
  pointer-events: none;
}
.gac-plate-frame::before { top: -12px; left: -12px; border-right: none; border-bottom: none; }
.gac-plate-frame::after  { bottom: -12px; right: -12px; border-left: none; border-top: none; }

.gac-plate-scenes { position: absolute; inset: 0; overflow: hidden; }
.gac-scene { position: absolute; inset: 0; opacity: 0; }
.gac-scene img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, var(--canopy), var(--bark)); /* while loading, or if the file is missing */
}
/* the problem reads starker; colour returns once the solution begins */
.gac-scene.is-problem img { filter: grayscale(35%) contrast(1.08) brightness(.92); }

/* ---------- the text panel ---------- */
.gac-copy-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(241,242,234,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,242,234,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 15%, transparent 85%);
          mask-image: radial-gradient(circle at 50% 50%, black 15%, transparent 85%);
}
.gac-copy-item {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(3.5rem, 6vw, 6rem);
  pointer-events: none;
}

/* a giant, barely-there chapter numeral, cropped by the panel edge */
.gac-bignum {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: -2.5rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(12rem, 24vw, 22rem);
  line-height: 1;
  color: rgba(241,242,234,.06);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .4s ease, transform .4s ease;
}

/* headline: each word rises out of its own mask */
.gac-copy-title {
  position: relative;
  font-size: clamp(2rem, 3.3vw, 3.75rem);
  line-height: 1.08;
  color: var(--paper);
}
.gac-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.gac-w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}

.gac-copy-body {
  position: relative;
  margin-top: 1.5rem;
  max-width: 34rem;
  color: rgba(241,242,234,.78);
  font-size: clamp(.95rem, 1.1vw, 1.125rem);
  line-height: 1.7;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.gac-copy-rule {
  display: block;
  margin-top: 2rem;
  height: 2px; width: 0;
  background: var(--sprout);
  transition: width .3s ease;
}

/* the active chapter's entrance — only once the stage is actually on screen */
.gac-stage.is-live .gac-copy-item.is-active .gac-bignum {
  opacity: 1; transform: none;
  transition: opacity 1s ease .4s, transform 1.3s cubic-bezier(.22,.61,.36,1) .4s;
}
.gac-stage.is-live .gac-copy-item.is-active .gac-w > span {
  transform: none;
  transition: transform .9s cubic-bezier(.22,.61,.36,1) calc(.55s + var(--i, 0) * .06s);
}
.gac-stage.is-live .gac-copy-item.is-active .gac-copy-body {
  opacity: 1; transform: none;
  transition: opacity .8s ease 1.05s, transform .9s cubic-bezier(.22,.61,.36,1) 1.05s;
}
.gac-stage.is-live .gac-copy-item.is-active .gac-copy-rule {
  width: 4.5rem;
  transition: width .9s cubic-bezier(.65,0,.35,1) 1.3s;
}

/* ---------- the spine: scroll progress + chapter navigation, always on the seam ---------- */
.gac-spine {
  position: absolute;
  left: 50%;
  top: 11%; bottom: 11%;
  width: 0;
  z-index: 3;
}
.gac-spine-line {
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(241,242,234,.22);
}
.gac-spine-fill {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--sprout);
  transform-origin: top;
  transform: scaleY(0);
}
.gac-spine-node {
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%);
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid rgba(241,242,234,.45);
  color: rgba(241,242,234,.7);
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .85rem;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.gac-spine-node:hover { border-color: var(--sprout); color: var(--paper); }
.gac-spine-node:focus-visible { outline: 2px solid var(--sprout); outline-offset: 3px; }
.gac-spine-node.is-past { border-color: var(--sprout); color: var(--paper); }
.gac-spine-node.is-active {
  background: var(--sprout);
  border-color: var(--sprout);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.15);
}

/* ---------- scroll cue: only relevant at the very start ---------- */
.gac-scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: rgba(241,242,234,.7);
  font-size: .8125rem;
}
.gac-scroll-cue svg { animation: gac-bob 1.6s ease-in-out infinite; }
@keyframes gac-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* =========================================================
   STACKED CHAPTERS — tablet / mobile / reduced motion / no JS.
   Photo beside text from 768px up; alternating sides.
   ========================================================= */
.gac-chapter {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
.gac-chapter:last-child { padding-bottom: 6rem; }
@media (min-width: 768px) {
  .gac-chapter { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding-bottom: 6.5rem; }
  .gac-chapter:nth-child(even) .gac-chapter-media { order: 2; }
}

.gac-chapter-media { position: relative; }
.gac-chapter-media::before,
.gac-chapter-media::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--sprout);
  z-index: 1;
  pointer-events: none;
}
.gac-chapter-media::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.gac-chapter-media::after  { bottom: -10px; right: -10px; border-left: none; border-top: none; }

.gac-chapter-grid { display: grid; gap: .75rem; overflow: hidden; }
.gac-chapter-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, var(--canopy), var(--bark));
}
.gac-chapter-grid--single { aspect-ratio: 4 / 3; }
.gac-chapter-grid--duo    { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.gac-chapter-grid--trio   { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.gac-chapter-grid--trio img:first-child { grid-row: 1 / 3; }

.gac-chapter-num {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--sprout);
  margin-bottom: .4rem;
}

/* entrance — scoped to .gac-js (added by story.js) so with JavaScript
   off the chapters are simply visible, never stuck hidden */
.gac-js .gac-chapter-grid {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.65,0,.35,1);
}
.gac-js .gac-chapter.is-visible .gac-chapter-grid { clip-path: inset(0 0 0 0); }
.gac-js .gac-chapter-media::before,
.gac-js .gac-chapter-media::after { opacity: 0; transition: opacity .6s ease .9s; }
.gac-js .gac-chapter.is-visible .gac-chapter-media::before,
.gac-js .gac-chapter.is-visible .gac-chapter-media::after { opacity: 1; }
.gac-js .gac-chapter-text > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.gac-js .gac-chapter.is-visible .gac-chapter-text > * { opacity: 1; transform: none; }
.gac-js .gac-chapter.is-visible .gac-chapter-text > :nth-child(1) { transition-delay: .35s; }
.gac-js .gac-chapter.is-visible .gac-chapter-text > :nth-child(2) { transition-delay: .5s; }
.gac-js .gac-chapter.is-visible .gac-chapter-text > :nth-child(3) { transition-delay: .65s; }

/* =========================================================
   IMPACT — editorial list, not cards
   ========================================================= */
.gac-impact-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(13,102,56,.15);
}
.gac-impact-row--last { border-bottom: 1px solid rgba(13,102,56,.15); }
.gac-impact-num { font-size: 1.75rem; line-height: 1; color: rgba(13,102,56,.35); }
@media (min-width: 640px) {
  .gac-impact-row { grid-template-columns: 4.5rem 1fr; padding: 2.5rem 0; }
  .gac-impact-num { font-size: 2.25rem; }
}
/* stable digit width while the scale numbers count up */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* =========================================================
   REDUCED MOTION — same content, opacity only
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .gac-js .gac-chapter-grid { clip-path: none; opacity: 0; transition: opacity .4s ease; }
  .gac-js .gac-chapter.is-visible .gac-chapter-grid { opacity: 1; }
  .gac-js .gac-chapter-text > * { transform: none; transition: opacity .4s ease; }
  .gac-js .gac-chapter.is-visible .gac-chapter-text > * { transition-delay: 0s; }
  .gac-scroll-cue svg { animation: none; }
}