/* ============================================================
   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: 48px;
}

.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: 48px;
}

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

/* 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: 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: 24px; }
  .poem-block .poem-credit { font-size: 18px; }
  .poem-block .poem-name  { font-size: 18px; }

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