/* ============================================================
   VOLCANOES — v2
   Center-type fixed-width grid (matches FIGMA-SPEC.md)
   ============================================================ */

@import 'colors.css';

:root {
  /* Desktop grid (frame 1440): 12 cols × 64 px, 12 px gutter, 900 px block */
  --cols: 12;
  --col-w: 64px;
  --gutter: 12px;

  --fade-duration: 0.75s;

  /* Text color — default SRM Black; overridden per-step by JS if
     `text_color` is set on the sheet row. */
  --text-color: var(--text-color-default);
}

/* Tablet (frame 768): 8 cols × 54 px, 12 px gutter, 516 px block */
@media (max-width: 1439px) {
  :root {
    --cols: 8;
    --col-w: 54px;
    --gutter: 12px;
  }
}

/* Mobile (frame 390): 4 cols × 75 px, 8 px gutter, 324 px block */
@media (max-width: 767px) {
  :root {
    --cols: 4;
    --col-w: 75px;
    --gutter: 8px;
  }
}

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

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Neuton', Georgia, serif;
  background-color: var(--page-color-default);
  transition: background-color 0.75s ease;
}

/* ── Backdrop ─────────────────────────────────────────────── */

#backdrop {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

#layer-a,
#layer-b {
  position: absolute;
  inset: 0;
  transition: opacity var(--fade-duration) ease-in-out;
}

#layer-a { opacity: 1; z-index: 1; }
#layer-b { opacity: 0; z-index: 2; }

/* Bleed mode (default): image fills the viewport edge to edge, cover-cropped. */
#layer-a img,
#layer-b img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--img-height, 100vh);
  object-fit: cover;
  object-position: var(--img-halign, center) var(--img-valign, center);
  display: block;
}

/* Contain-fit (sheet: image_fit = contain): show the full image within the
   layer, page_color fills the leftover space. Use for portrait paintings
   that shouldn't be cropped at top/bottom. */
#layer-a.contain-fit img,
#layer-b.contain-fit img {
  object-fit: contain;
}

/* Grid-placed mode: image is a grid item, page_color shows in the margins.
   `object-fit: contain` shows the full image (no crop) within the constrained
   frame. Toggled by JS when both image_col_start and image_col_end are set. */
#layer-a.grid-placed,
#layer-b.grid-placed {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  align-items: start;
  padding-top: 5vh;
}

#layer-a.grid-placed img,
#layer-b.grid-placed img {
  position: static;
  grid-column: var(--img-start, 1) / var(--img-end, 13);
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
}

/* ── Steps container ──────────────────────────────────────── */

#steps-container {
  position: relative;
  margin-top: -100vh;
  z-index: 1;
}

/* ── Individual step ──────────────────────────────────────── */

.step {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  align-items: center;
}

/* ── Card ─────────────────────────────────────────────────── */

.card {
  /* column span set via inline CSS custom props (JS translates per breakpoint) */
  grid-column: var(--card-start, 3) / var(--card-end, 11);
  /* Figma: 40pt top, 44pb bottom, 33px sides, 40px gap between text group and caption */
  padding: 40px 33px 44px;
  background: rgba(231, 233, 237, 0.8); /* Midnight100 at 80% */
  color: var(--text-color);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.card.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card text hierarchy (Figma desktop tokens) ──────────── */

.card .kicker {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text-color);
  margin: 0 0 10px;
}

.card .subhead {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 25px;
  color: var(--text-color);
  margin: 0 0 10px;
}

.card .body-text {
  font-family: 'Neuton', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: var(--text-color);
  margin: 0;
}

.card .caption {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-color);
  margin: 40px 0 0;
}

.card .caption:first-child {
  margin-top: 0;
}

/* ── Poem section ────────────────────────────────────────── */

.step-poem {
  align-items: center;
}

.poem-block {
  grid-column: var(--card-start, 1) / var(--card-end, 13);
  color: var(--text-color);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.poem-block.is-active {
  opacity: 1;
  transform: translateY(0);
}

.poem-block .poem-text {
  font-family: 'Neuton', serif;
  font-style: italic;
  font-size: 50px;
  line-height: 1.14;
  margin: 0 0 24px;
}

.poem-block .poem-credit {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 18px;
  text-align: right;
  margin: 0 0 12px;
}

.poem-block .poem-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 18px;
  text-align: right;
  margin: 0;
}

/* ── Question section (sticky + scroll-driven fade in/out) ── */
/* Text fades in at vertical center, holds while user scrolls,
   then fades out before the next section enters. */

.step-question {
  display: block;
  min-height: 200vh;         /* 100vh visible + 100vh scroll runway */
}

.question-content {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  align-items: center;        /* vertically centers the text */
}

.question-kicker {
  grid-column: var(--card-start, 1) / var(--card-end, 13);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--text-color);
  margin: 0 0 16px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.question-text {
  grid-column: var(--card-start, 1) / var(--card-end, 13);
  font-family: 'Neuton', serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1.14;
  text-align: center;
  color: var(--text-color);
  margin: 0;
  opacity: 0;                 /* JS drives opacity based on scroll */
  transition: opacity 0.4s ease;
}

/* ── Graphic section (single sticky container + scroll-driven text) ── */
/* Phase 1: image centered in viewport, text off-screen below.
   Phase 2: as user scrolls, text slides up from bottom → stops at image bottom.
   Phase 3: sticky releases, both exit together as a unit.
   A single .graphic-content container is sticky; JS drives the text position. */

.step--graphic {
  display: block;
  min-height: 160vh;         /* scroll runway: 100vh visible + 60vh travel */
}

.graphic-content {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;          /* clip text until it scrolls into view */
  opacity: 0;                /* hidden until step is active */
  transition: opacity 0.3s ease;
}

.step--graphic.is-active-step .graphic-content {
  opacity: 1;
}

.graphic-image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 88px;
}

.graphic-image-wrap img {
  display: block;
  max-width: 80%;
  max-height: 50vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Grid-placed variant: constrain image to sheet columns */
.graphic-image-wrap.grid-placed {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  padding-top: 88px;
}

.graphic-image-wrap.grid-placed img {
  grid-column: var(--img-start, 1) / var(--img-end, 13);
  max-width: 100%;
  max-height: none;
  width: 100%;
  height: auto;
  object-fit: contain;
  justify-self: center;
}

/* Text inside the sticky container — absolutely positioned,
   top driven by JS scroll handler. Starts at 100vh (off-screen),
   slides up to image bottom, then exits with the container. */
.step--graphic .nocard-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 100vh;                /* JS overrides; this is the initial fallback */
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  padding-bottom: 48px;
  padding-top: 24px;
  opacity: 1;
  transform: none;
  transition: none;
}

.step--graphic .nocard-text > * {
  grid-column: var(--card-start, 3) / var(--card-end, 11);
  color: var(--text-color);
}

/* ── Graphic nocard text (non-graphic context, legacy) ──── */

.nocard-text {
  grid-column: var(--card-start, 3) / var(--card-end, 11);
  color: var(--text-color);
  align-self: end;
  padding-bottom: 48px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.nocard-text.is-active {
  opacity: 1;
  transform: translateY(0);
}

.nocard-text .kicker {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: var(--text-color);
  margin: 0 0 10px;
}

.nocard-text .subhead {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 25px;
  color: var(--text-color);
  margin: 0 0 10px;
}

.nocard-text .body-text {
  font-family: 'Neuton', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: var(--text-color);
  margin: 0;
}

.nocard-text .caption {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-color);
  margin: 10px 0 0;
}

/* ── GSAP character animation ─────────────────────────────── */
/* Required for translateY to work on inline text spans */
.char       { display: inline-block; }
.char-space { display: inline-block; width: 0.3em; }

/* ── Responsive typography ────────────────────────────────── */
/* Grid column counts switch via :root variables above.
   Card/image spans are translated per-breakpoint in main.js. */

@media (max-width: 1439px) {
  /* Tablet: Figma tokens */
  .card { padding: 30px 31px; }
  .card .kicker   { font-size: 16px; line-height: 17px; }
  .card .subhead   { font-size: 21px; line-height: 25px; }
  .card .body-text { font-size: 16px; line-height: 22px; }
  .card .caption   { font-size: 14px; line-height: 16px; margin-top: 25px; }

  .nocard-text .kicker   { font-size: 16px; line-height: 17px; }
  .nocard-text .body-text { font-size: 16px; line-height: 22px; }
  .nocard-text .caption   { font-size: 14px; line-height: 16px; }

  .poem-block .poem-text  { font-size: 30px; }
  .poem-block .poem-credit { font-size: 18px; }
  .poem-block .poem-name  { font-size: 18px; }

  .question-text { font-size: 32px; line-height: 1.14; }
}

@media (max-width: 767px) {
  /* Mobile: graphic images go full width */
  .graphic-image-wrap img { max-width: 100%; }

  /* Mobile: less space above graphic images */
  .graphic-image-wrap,
  .graphic-image-wrap.grid-placed { padding-top: 56px; }

  /* Mobile: text flows below the image (not absolutely positioned) so the
     sticky container grows to fit image + full text — nothing is ever clipped.
     The "catch" is driven by translateY in updateGraphicScroll (the text
     slides up to rest just below the image), then the whole block scrolls
     away together. Container keeps overflow:hidden from the base rule so the
     text is hidden until it slides into view. */
  .step--graphic .graphic-content {
    height: auto;
    min-height: 100vh;
  }
  .step--graphic .nocard-text {
    position: static;
    top: auto;
  }

  /* Mobile: Figma tokens */
  .card { padding: 24px 31px; }
  .card .kicker   { font-size: 16px; line-height: 17px; }
  .card .subhead   { font-size: 21px; line-height: 25px; }
  .card .body-text { font-size: 16px; line-height: 22px; }
  .card .caption   { font-size: 14px; line-height: 16px; margin-top: 25px; }

  .nocard-text .kicker   { font-size: 16px; line-height: 17px; }
  .nocard-text .body-text { font-size: 16px; line-height: 22px; }
  .nocard-text .caption   { font-size: 14px; line-height: 16px; }

  .poem-block .poem-text  { font-size: 19px; line-height: 1.3; letter-spacing: -0.2px; }
  .poem-block .poem-credit { font-size: 14px; line-height: 16px; }
  .poem-block .poem-name  { font-size: 14px; line-height: 16px; }

  .card .body-text { font-size: 18px; line-height: 22px; }

  .question-text { font-size: 32px; line-height: 1.14; }
}