/* ============================================================
   Harz Forest Dieback — Narrative Acts  ·  acts-shared.css

   LIGHT MODE — acts 1–3 use a warm parchment palette.
   The forest animation above stays dark; the bridge section
   carries a CSS gradient that transitions dark → parchment,
   with a JS scroll listener (act1-correlation.js:initBridge)
   that interpolates the bridge stat text colour from white
   to the dark forest primary text colour as you scroll through.

   Acts 3's .act3-closing panel deliberately reverts to dark
   (background set in act3-recovery.css) as an intentional
   closing movement — dark / light / dark bookend.
   ============================================================ */

/* ── Colour palette — light mode ─────────────────────────────── */
:root {
  /* Health-state / data colours — darkened for parchment contrast */
  --colour-healthy:     #2D6A1B;    /* was #5A9E3A (~4:1), now ~10:1  */
  --colour-stressed:    #8A5500;    /* was #E8C547 (~1.4:1), now ~8:1 */
  --colour-critical:    #B83010;    /* was #D47A1E (~2.8:1), now ~7:1 */
  --colour-dead:        #6B1A00;

  /* Data visualisation — high-contrast on parchment bg */
  --colour-data-line:   #2D6A1B;    /* dark forest green          */
  --colour-data-band:   rgba(45, 106, 27, 0.12);
  --colour-annotation:  rgba(26, 40, 16, 0.58);
  --colour-grid:        rgba(26, 40, 16, 0.07);
  --colour-axis:        rgba(26, 40, 16, 0.26);

  /* Acts chrome — LIGHT MODE */
  --act-bg:             #F4EFE6;    /* warm parchment             */
  --act-text-primary:   #1A2810;    /* dark forest, near-black    */
  --act-text-body:      #3C4A30;    /* readable forest green-grey */
  --act-text-muted:     rgba(26, 40, 16, 0.46);
  --act-font-mono:      'Courier New', Courier, monospace;

  /* Type scale — unchanged */
  --act-number-size:    clamp(5.5rem, 14vw, 11rem);
  --act-title-size:     clamp(1.7rem, 3.8vw, 2.8rem);
  --act-subtitle-size:  clamp(0.95rem, 1.9vw, 1.3rem);
  --act-prose-size:     clamp(0.92rem, 1.35vw, 1.08rem);
  --act-label-size:     clamp(0.66rem, 1vw, 0.8rem);

  /* Layout — unchanged */
  --act-gutter:         clamp(1.5rem, 5vw, 5rem);
  --act-section-pad-v:  clamp(3rem, 8vw, 7rem);
  --act-col-prose-max:  65ch;

  /* Entrance animation */
  --entrance-dur:       600ms;
  --entrance-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --entrance-dist:      36px;
}

/* ── Base reset ───────────────────────────────────────────────── */
.act,
.act-bridge {
  box-sizing: border-box;
}

.act *,
.act-bridge * {
  box-sizing: inherit;
}

/* ── Shared act section ───────────────────────────────────────── */
.act {
  position:   relative;
  background: var(--act-bg);
  color:      var(--act-text-body);
  font-family: var(--font-family);
  overflow:   hidden;
}

/* ── Act header ───────────────────────────────────────────────── */
.act-header {
  position:   relative;
  padding:    var(--act-section-pad-v) var(--act-gutter) 0;
  max-width:  1400px;
  margin:     0 auto;
}

/* Ghost number watermark */
.act-number {
  position:     absolute;
  top:          calc(var(--act-section-pad-v) * 0.35);
  left:         calc(var(--act-gutter) * 0.9);
  font-size:    var(--act-number-size);
  font-weight:  400;
  letter-spacing: -0.04em;
  line-height:  1;
  color:        rgba(26, 40, 16, 0.07);  /* dark ghost on light bg */
  font-variant-numeric: tabular-nums;
  user-select:  none;
  pointer-events: none;
  z-index:      0;
}

.act-eyebrow {
  position:     relative;
  z-index:      1;
  font-family:  var(--act-font-mono);
  font-size:    var(--act-label-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:        var(--act-text-muted);
  margin:       0 0 0.6em;
}

.act-title {
  position:     relative;
  z-index:      1;
  font-size:    var(--act-title-size);
  font-weight:  400;
  letter-spacing: -0.015em;
  line-height:  1.15;
  color:        var(--act-text-primary);
  margin:       0 0 0.3em;
  max-width:    22ch;
}

.act-subtitle {
  position:     relative;
  z-index:      1;
  font-size:    var(--act-subtitle-size);
  font-style:   italic;
  font-weight:  400;
  color:        var(--act-text-muted);
  margin:       0 0 2.5rem;
}

/* ── Two-column body ──────────────────────────────────────────── */
.act-body {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        var(--act-gutter);
  padding:    2.5rem var(--act-gutter) var(--act-section-pad-v);
  max-width:  1400px;
  margin:     0 auto;
  align-items: start;
}

/* ── Prose column ─────────────────────────────────────────────── */
/* z-index keeps prose tooltips above the sticky viz column, whose
   position:sticky forms a stacking context that would otherwise
   cover tooltips that overflow into the viz column's horizontal band. */
.act-prose {
  max-width:  var(--act-col-prose-max);
  position:   relative;
  z-index:    2;
}

.act-prose p {
  font-size:  var(--act-prose-size);
  line-height: 1.74;
  color:      var(--act-text-body);
  margin:     0 0 1.35em;
}

.act-prose p.is-lead,
.act-prose p:first-of-type {
  font-size:  calc(var(--act-prose-size) * 1.16);
  color:      var(--act-text-primary);
  line-height: 1.62;
}

.act-prose strong {
  color:      var(--act-text-primary);
  font-weight: 600;
}

.act-prose em {
  font-style: italic;
  color:      inherit;
}

/* ── Viz column — sticky on desktop ──────────────────────────── */
.act-viz {
  position:   sticky;
  top:        2.5rem;
  display:    flex;
  flex-direction: column;
  gap:        1.75rem;
  align-self: start;
  z-index:    1;   /* below .act-prose so prose tooltips overlay it */
}

/* ── Entrance animation ───────────────────────────────────────── */
.act-enter {
  opacity:   0;
  transform: translateY(var(--entrance-dist));
  transition:
    opacity   var(--entrance-dur) var(--entrance-ease),
    transform var(--entrance-dur) var(--entrance-ease);
}

.act-enter.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger delays */
.act-stagger > .act-enter:nth-child(1) { transition-delay:   0ms; }
.act-stagger > .act-enter:nth-child(2) { transition-delay:  80ms; }
.act-stagger > .act-enter:nth-child(3) { transition-delay: 160ms; }
.act-stagger > .act-enter:nth-child(4) { transition-delay: 240ms; }
.act-stagger > .act-enter:nth-child(5) { transition-delay: 320ms; }
.act-stagger > .act-enter:nth-child(6) { transition-delay: 400ms; }

/* ── Horizontal rule ──────────────────────────────────────────── */
.act-rule {
  height:   1px;
  border:   none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(26, 40, 16, 0.20) 12%,
    rgba(26, 40, 16, 0.20) 88%,
    transparent
  );
  margin:   2.5rem var(--act-gutter) 0;
}

/* ── Viz panel chrome ─────────────────────────────────────────── */
.act-viz-panel {
  background:    rgba(26, 40, 16, 0.04);
  border:        1px solid rgba(26, 40, 16, 0.09);
  border-radius: 8px;
  padding:       1.1rem 1.25rem;
}

.act-viz-panel-header {
  display:       flex;
  justify-content: space-between;
  align-items:   baseline;
  flex-wrap:     wrap;
  gap:           0.5rem;
  margin-bottom: 0.8rem;
}

.act-viz-title {
  font-family:   var(--act-font-mono);
  font-size:     var(--act-label-size);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color:         rgba(26, 40, 16, 0.60);
}

.act-viz-unit {
  font-family:   var(--act-font-mono);
  font-size:     calc(var(--act-label-size) * 0.9);
  color:         rgba(26, 40, 16, 0.38);
}

/* ── Exit bridge ──────────────────────────────────────────────── */
/*
   The exit zone is a breathing pause before the next act. It has
   a very subtle background vignette so it feels slightly set apart
   from the body content above, and the italic text is slightly more
   legible than the original 0.42 muted value.
*/
.act-exit {
  padding:    4.5rem var(--act-gutter) 6rem;
  text-align: center;
  position:   relative;   /* contains the ::before vignette */
}

/* Faint oval wash behind the exit sentence */
.act-exit::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    to bottom,
    transparent            0%,
    rgba(26,40,16,0.030)  30%,
    rgba(26,40,16,0.030)  70%,
    transparent          100%
  );
  pointer-events: none;
}

.act-exit__text {
  font-size:  clamp(1.05rem, 2.2vw, 1.5rem);
  font-style: italic;
  color:      rgba(26, 40, 16, 0.56);
  max-width:  48ch;
  margin:     0 auto;
  line-height: 1.58;
  position:   relative;   /* sits above ::before vignette */
}

/* ── Act entry gradient ───────────────────────────────────────── */
/*
   A faint top-edge darkening on acts 2 and 3 creates a gentle
   "turning the page" signal as each new chapter scrolls into view.
   The gradient is transparent by 4rem, well before any header text
   (act-header top-padding = var(--act-section-pad-v) ≥ 3rem).
*/
.act-3 {
  background-image: linear-gradient(
    to bottom,
    rgba(26, 40, 16, 0.055) 0%,
    transparent              4rem
  );
}

/* ── Bridge — dark forest → parchment gradient ────────────────── */
/*
   The bridge sits between the dark forest animation and Act 1.
   The track has a CSS gradient from #0A150A (forest dark) to
   the act parchment colour. The sticky stage is transparent so
   the gradient scrolls behind it. JS (initBridge in
   act1-correlation.js) interpolates the text colour from
   white → var(--act-text-primary) as scroll progresses.
*/
.act-bridge {
  position:   relative;
  background: #0A150A;    /* fallback / top colour */
}

.act-bridge__track {
  height:     200vh;
  position:   relative;
  background: linear-gradient(
    to bottom,
    #0A150A  0%,
    #0A150A  18%,
    #1E3014  38%,
    #8A9E72  62%,
    #C8C5B0  74%,
    #F4EFE6  88%,
    #F4EFE6 100%
  );
}

.act-bridge__stage {
  position:   sticky;
  top:        0;
  height:     100vh;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:        1.2rem;
  background: transparent;   /* show gradient behind */
}

/* Text starts white; JS scroll listener transitions to dark */
.act-bridge__stat {
  font-family:    var(--font-family);
  font-size:      clamp(1.4rem, 3.2vw, 2.5rem);
  font-weight:    400;
  color:          #ffffff;
  text-align:     center;
  letter-spacing: -0.01em;
  line-height:    1.35;
  max-width:      36ch;
  margin:         0;
  opacity:        0;
  transform:      translateY(18px);
  transition:     opacity 1400ms ease, transform 1400ms ease;
}

.act-bridge__stat.is-visible {
  opacity:    1;
  transform:  translateY(0);
}

.act-bridge__attribution {
  color:          rgba(255, 255, 255, 0.85);
  text-align:     center;
  margin:         0;
  opacity:        0;
  transition:     opacity 1400ms ease 500ms;
}

.act-bridge__attribution.is-visible {
  opacity:    1;
}

/* ── Bridge act index (Roman numerals) ────────────────────────── */
.act-bridge__index {
  display:    flex;
  gap:        clamp(2.5rem, 5vw, 5rem);
  align-items: flex-start;
  margin-top: 0.5rem;
}

.act-bridge__act-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.35rem;
}

.act-bridge__numeral {
  font-family:    var(--font-family);
  font-size:      clamp(3rem, 7vw, 6rem);
  font-weight:    400;
  line-height:    1;
  letter-spacing: -0.03em;
  color:          inherit;
}

.act-bridge__act-label {
  font-family:    var(--act-font-mono);
  font-size:      0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity:        0.55;
  color:          inherit;
}

.act-bridge__act-title {
  font-size:  0.82rem;
  font-style: italic;
  color:      inherit;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .act-body {
    grid-template-columns: 1fr;
  }

  .act-viz {
    position: static;
  }

  .act-number {
    display: none;
  }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .act-enter {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  .act-bridge__stat,
  .act-bridge__attribution {
    opacity:    1;
    transform:  none;
    transition: none;
    color:      var(--act-text-primary);
  }
}

/* ── Conclusion section ───────────────────────────────────────── */
.act-conclusion {
  padding:    0 var(--act-gutter) var(--act-section-pad-v);
  max-width:  1400px;
  margin:     0 auto;
}

.act-conclusion .act-title {
  max-width:  none;
  margin-bottom: 2rem;
}

.act-conclusion__prose p {
  font-family:  Georgia, 'Times New Roman', serif;
  font-size:    var(--act-prose-size);
  color:        var(--act-text-body);
  line-height:  1.74;
  margin:       0 0 1.35em;
}

.act-conclusion__prose p:first-of-type {
  font-size:    calc(var(--act-prose-size) * 1.16);
  color:        var(--act-text-primary);
  line-height:  1.62;
}