/* ============================================================
   Scenarios — one strata composition. All four archetypes are
   layered together in a single pinned scene (multilayer
   parallax): the stack is visible at once — each deeper layer
   smaller, dimmer, softer — and scrolling dollies the camera
   inward. The current layer flies apart past the camera while
   every deeper layer swells one step nearer.
   ============================================================ */

.scen-head {
  padding: clamp(40px, 8vh, 90px) var(--s-6, 24px) clamp(20px, 4vh, 40px);
  max-width: 1240px;
  margin: 0 auto;
}
.scen-head .subtitle { max-width: 56ch; }
.scroll-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  color: var(--textDim);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.scroll-hint .tick { width: 34px; height: 1px; background: var(--textDim); }

/* ---------- the strata scene ---------- */
.strata { height: 520vh; position: relative; }
.strata-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paperWhite, #FFFEF9);
}
.strata-glow {
  position: absolute; inset: 0;
  z-index: 45; /* blooms over every layer at each hand-off */
  background: radial-gradient(circle at 62% 46%, rgba(225, 184, 59, 0.5), rgba(211, 150, 62, 0.16) 36%, rgba(16, 20, 8, 0) 64%);
  opacity: var(--glow, 0);
  pointer-events: none;
}
.strata-index {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 46;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 3px;
  color: var(--chart-mid, #6B6852);
}
.strata-rail {
  position: absolute;
  right: max(var(--s-6, 24px), calc((100% - 1240px) / 2 + var(--s-6, 24px)));
  bottom: clamp(36px, 7vh, 72px);
  z-index: 46;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--chart-mid, #6B6852);
}
.strata-rail span { display: flex; align-items: center; gap: 8px; transition: color 0.3s var(--ease-epoch, ease); }
.strata-rail span::before {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  transform: scaleX(0.53); transform-origin: left center;
  transition: transform 0.3s var(--ease-epoch, ease);
}
.strata-rail span.now { color: var(--gold-text, #7E6721); }
.strata-rail span.now::before { transform: scaleX(1); }

/* one layer of the stack — all four exist simultaneously.
   The wrapper carries NO transform/filter (the img must blend against the
   stage's void); motion vars are applied to the img and panel directly. */
.stratum { position: absolute; inset: 0; pointer-events: none; }
.stratum.now { pointer-events: auto; }
.stratum-figure {
  position: absolute;
  top: 0; bottom: 0;
  right: max(var(--s-6, 24px), calc((100% - 1240px) / 2 + var(--s-6, 24px)));
  width: min(56vmin, 540px);
  display: grid;
  place-items: center;
}
.stratum-figure img, .stratum-figure .empty-orb {
  transform: translate3d(var(--fx, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  transform-origin: 50% 42%;
  filter: blur(var(--bl, 0px));
  opacity: var(--o, 1);
  will-change: transform, filter, opacity;
}
.stratum-figure img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.stratum-figure .empty-orb {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(225,184,59,0.30), rgba(35,43,18,0.9) 55%, transparent 72%);
}

.stratum-panel {
  position: absolute;
  left: max(var(--s-6, 24px), calc((100% - 1240px) / 2 + var(--s-6, 24px)));
  top: 50%;
  translate: 0 -50%;
  max-width: 46ch;
  opacity: calc(var(--pv, 0) * var(--o, 1));
  transform: translate3d(var(--px, 0px), calc(var(--y, 0px) * 0.5), 0);
  will-change: transform, opacity;
}
.chamber-arch {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--chart-mid, #6B6852);
}
.stratum-title {
  margin-top: 10px;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink, #131309);
  text-wrap: balance;
}
.stratum-summary {
  margin-top: 14px;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--chart-mid, #6B6852);
}
.stratum-myth {
  margin-top: 14px;
  font-size: 13px; font-style: italic; line-height: 1.7;
  color: var(--chart-mid, #6B6852);
  border-left: none;
  padding-left: 14px;
  position: relative;
}
.stratum-myth::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--mustard, #E1B83B);
}
.chamber-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

/* draft strip after the chambers */
.draft-strip {
  max-width: 1240px;
  /* centered at full width, never closer to the edge than the page gutter */
  margin-block: clamp(48px, 8vh, 90px);
  margin-inline: max(var(--s-6, 24px), calc((100% - 1240px) / 2 + var(--s-6, 24px)));
  padding: clamp(24px, 4vh, 40px) clamp(24px, 4vw, 48px);
}
.draft-strip .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.draft-strip input { flex: 1 1 320px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .strata-rail { display: none; }
  .stratum-myth { display: none; }
  .stratum-figure {
    right: 50%; translate: 50% 0;
    top: 4vh; bottom: auto;
    width: min(54vmin, 320px); height: min(54vmin, 320px);
  }
  .stratum-panel {
    left: var(--gutter, 24px);
    right: var(--gutter, 24px);
    top: auto; bottom: clamp(24px, 5vh, 56px);
    translate: 0 0;
    max-width: none;
    padding-top: 40px;
    background: linear-gradient(transparent, rgba(255, 254, 249, 0.92) 30%);
  }
}

/* ---------- reduced motion: the stack laid out flat ---------- */
@media (prefers-reduced-motion: reduce) {
  .strata { height: auto; }
  .strata-stage { position: static; height: auto; overflow: visible; padding: 40px 0; }
  .stratum {
    position: static;
    pointer-events: auto;
    display: grid;
    grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto 64px;
    padding-inline: var(--gutter, 24px);
  }
  .stratum-figure { position: static; width: min(40vmin, 360px); }
  .stratum-figure img, .stratum-figure .empty-orb { transform: none; filter: none; opacity: 1; }
  .stratum-panel { position: static; translate: none; transform: none; opacity: 1; }
  .strata-glow, .strata-index, .strata-rail { display: none; }
}