/* ============================================================
   ACT 2 — OLD WORLD / NEW WORLD (Gantt slides)
   Two slides showing the day-in-the-life shift from sequential
   solo development to parallel AI-orchestrated work.
   Both render a 7-lane gantt with a 08:00–18:00 axis. Old World
   fills the "You" lane and ghosts the agent lanes; New World
   fills every lane.
   ============================================================ */
.s-act2 {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Use master-deck chrome bars in normal flex flow inside this slide */
.s-act2 .chrome-top,
.s-act2 .chrome-bottom {
  position: static;
  flex: 0 0 56px;
}

.s-act2 .a2-head {
  padding: 56px 90px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.s-act2 .a2-head .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.s-act2 .a2-head h1 {
  font-family: 'Inter', sans-serif;
  font-size: 88px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.s-act2 .a2-head h1 .accent  { color: var(--accent); }
.s-act2 .a2-head h1 .accent2 { color: var(--accent-2); }
.s-act2 .a2-head .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}

.s-act2 .a2-takeaway {
  margin: 0 90px 28px;
  padding: 22px 28px;
  border-left: 4px solid var(--accent);
  background: rgba(255,255,255,0.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  color: var(--fg);
}
.s-act2.light .a2-takeaway {
  background: rgba(10, 21, 84, 0.04);
}

/* Light-mode contrast overrides for the Gantt slides.
   The cyan accent (#5BE9F0) is a pale pastel that disappears on the
   cream paper bg, so we re-route spawn arrows + the you-merge block
   to a darker teal that still reads as "cyan" but actually sits on
   the cream. Ghost lanes also need more ink to stay legible. */
.s-act2.light .g1-spawn {
  background: #0E7C8A;
}
.s-act2.light .g1-spawn::before {
  border-top-color: #0E7C8A;
}
.s-act2.light .g1-spawn .tag {
  color: #0E7C8A;
}
.s-act2.light .g1-block.you-merge {
  background: #0E7C8A;
  color: #EAFBFD;
}
.s-act2.light .g1-lane.ghost {
  opacity: 0.55;
}
.s-act2.light .g1-block {
  border-color: rgba(10, 21, 84, 0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
/* The default white-on-color block text was tuned for the navy deck.
   On cream paper these darker block bgs still take white text fine,
   but the orange you-impl block already overrides to dark ink — good. */

.s-act2 .a2-takeaway .qt { color: var(--accent); margin-right: 8px; }

/* — Gantt stage / axis / board — */
.s-act2 .g1-stage {
  flex: 1;
  margin: 0 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.s-act2 .g1-axis {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: var(--fg-mute);
}
.s-act2 .g1-axis .lane-label { color: transparent; }
.s-act2 .g1-axis .ticks {
  position: relative;
  height: 32px;
}
.s-act2 .g1-axis .tick {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px solid var(--line);
  padding-left: 6px;
  color: var(--fg-mute);
  font-size: 16px;
}
.s-act2 .g1-axis .tick.major {
  border-left-color: var(--line-strong);
  color: var(--fg-dim);
  font-size: 18px;
}
.s-act2 .g1-axis .tick.minor { opacity: 0.55; }

.s-act2 .g1-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 36px; /* reserves room for spawn-arrow labels above the You lane */
  position: relative;
}
.s-act2 .g1-lane {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  gap: 0;
}
.s-act2 .g1-lane .lane-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: var(--fg-dim);
  padding-right: 24px;
  text-align: right;
}
.s-act2 .g1-lane .lane-label .sub {
  display: block;
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.s-act2 .g1-lane.you .lane-label {
  color: var(--fg);
  font-weight: 700;
  font-size: 24px;
}
.s-act2 .g1-lane.you .lane-label .sub { color: var(--accent); }
.s-act2 .g1-lane.ghost { opacity: 0.32; }
.s-act2 .g1-lane.ghost .lane-label,
.s-act2 .g1-lane.ghost .lane-label .sub { color: var(--fg-mute); }
.s-act2 .g1-track {
  position: relative;
  height: 60px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(10% - 1px),
      var(--grid) calc(10% - 1px),
      var(--grid) 10%
    );
}
.s-act2 .g1-lane.you .g1-track {
  height: 92px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

/* Task blocks */
.s-act2 .g1-block {
  position: absolute;
  top: 6px; bottom: 6px;
  border-radius: 4px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: keep-all;
  hyphens: none;
}
.s-act2 .g1-lane.you .g1-block { font-weight: 700; }
.s-act2 .g1-block.you-chore { background: #4A589C; color: #E6EAFF; }
.s-act2 .g1-block.you-impl  { background: var(--orange); color: #1A0B00; }
.s-act2 .g1-block.you-bug   { background: #B53D5F; }
.s-act2 .g1-block.you-meet  { background: #3E5DBE; }
.s-act2 .g1-block.you-mgmt  { background: var(--pink); }
.s-act2 .g1-block.you-merge { background: var(--cyan); color: #062a30; }
.s-act2 .g1-block.agent     { background: var(--purple); }
.s-act2 .g1-block.agent.alt { background: #5C2FA0; }
.s-act2 .g1-block.agent.tn  { background: #8E5BCC; }

/* Spawn-arrow markers */
.s-act2 .g1-spawn {
  position: absolute;
  top: -22px;
  width: 1px;
  height: 22px;
  background: var(--cyan);
  z-index: 2;
}
.s-act2 .g1-spawn::before {
  content: "";
  position: absolute;
  left: -4px; bottom: -2px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--cyan);
}
.s-act2 .g1-spawn .tag {
  position: absolute;
  left: 4px; top: -18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--cyan);
  white-space: nowrap;
}

/* ============================================================
   New World — step 1 "self-aware pause" overlay
   Warm tint dims the Gantt; a reconstructed Joanna Maciejewska
   newspaper clipping floats center-right; a short cue line sits
   on the left under the headline. Step 0 is unchanged (the pause
   layer is fully outside the flex flow and starts hidden).
   ============================================================ */
.s-act2 .a2-pause {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 460ms ease-out, visibility 0s linear 460ms;
}
.s-act2[data-step="1"] .a2-pause {
  opacity: 1;
  visibility: visible;
  transition: opacity 460ms ease-out, visibility 0s;
}

/* Warm scrim — radial wash with sepia / amber tones, multiplied so
   the Gantt darkens softly instead of being painted over. Kept light
   on the left so the original headline stays readable; the right
   stays a touch warmer to push the clipping forward. */
.s-act2 .a2-pause::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 68% 52%,
      rgba(255, 232, 200, 0.16) 0%,
      rgba(232, 170, 100, 0.26) 42%,
      rgba(150,  80,  40, 0.40) 82%,
      rgba( 70,  35,  20, 0.50) 100%);
  mix-blend-mode: multiply;
}
/* Subtle warm haze on top of the multiply, in normal blend, to
   tint the white paper bg of the deck without darkening it further. */
.s-act2 .a2-pause::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%,
      rgba(255, 210, 160, 0.10) 0%,
      rgba(255, 180, 120, 0.04) 60%,
      transparent 100%);
}

/* Dim the gantt + headline a touch in step 1 so the clipping
   becomes the focal point. Keep the "You" lane and the chrome
   readable — they anchor the slide back to its real subject. */
.s-act2 .g1-stage,
.s-act2 .a2-head { transition: opacity 460ms ease-out, filter 460ms ease-out; }
.s-act2[data-step="1"] .g1-stage {
  opacity: 0.58;
  filter: saturate(0.78);
}
.s-act2[data-step="1"] .a2-head { opacity: 0.82; }
.s-act2[data-step="1"] .g1-lane.you { opacity: 1; }
.s-act2[data-step="1"] .g1-lane.you .lane-label { color: var(--fg); }

/* Cue card — single paper "index card" with two reading levels.
   Combining the headline and the metadata into one card (instead of
   two stacked elements) keeps them visually unified and solves both
   the alignment + legibility issues of a separate sub-line floating
   on the warm scrim. */
.s-act2 .a2-cue {
  position: absolute;
  left: 90px;
  top: 470px;
  display: inline-block;
  padding: 14px 22px 12px;
  background: rgba(255, 246, 230, 0.96);
  border-left: 4px solid #c34b1c;
  box-shadow: 0 8px 16px rgba(40, 18, 8, 0.20);
  /* Pull the card's visible left edge flush with the slide grid
     (cancels its own left border + padding). */
  margin-left: -26px;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 380ms ease-out 80ms, transform 380ms ease-out 80ms;
}
.s-act2[data-step="1"] .a2-cue {
  opacity: 1;
  transform: translateY(0);
}
.s-act2 .a2-cue .cue-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #2a1408;
  white-space: nowrap;
}
.s-act2 .a2-cue .cue-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6a3a1a;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(70, 35, 15, 0.32);
  white-space: nowrap;
}

/* The clipping — off-white paper, slight tilt, dropped shadow.
   Two-column grid: portrait | text. Sits center-right. */
.s-act2 .a2-clipping {
  position: absolute;
  top: 52%;
  right: 70px;
  width: 900px;
  max-width: 49%;
  margin: 0;
  padding: 22px 30px 26px;
  transform: translateY(-50%) rotate(-2.2deg);
  transform-origin: center center;
  background-color: #f6ecd2;
  background-image:
    radial-gradient(rgba(60, 35, 15, 0.05) 1px, transparent 1.6px),
    radial-gradient(rgba(60, 35, 15, 0.03) 1px, transparent 1.6px),
    linear-gradient(180deg, #faf2dc 0%, #efe1bd 100%);
  background-size: 5px 5px, 3px 3px, 100% 100%;
  background-position: 0 0, 1px 2px, 0 0;
  border-radius: 2px;
  border: 1px solid rgba(60, 40, 20, 0.18);
  box-shadow:
    0 22px 44px rgba(30, 14, 6, 0.50),
    0 6px 12px rgba(30, 14, 6, 0.30);
  opacity: 0;
  transition: opacity 460ms ease-out 120ms, transform 460ms ease-out 120ms;
}
.s-act2 .a2-pause .a2-clipping {
  /* starting state for the fade-in — same rotation, lifted a touch */
  transform: translateY(calc(-50% + 12px)) rotate(-2.2deg);
}
.s-act2[data-step="1"] .a2-clipping {
  opacity: 1;
  transform: translateY(-50%) rotate(-2.2deg);
}

.s-act2 .a2-clipping .clip-masthead {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #6c4326;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(60, 40, 20, 0.30);
}
.s-act2 .a2-clipping .clip-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  /* Stretch so the portrait height matches the quote+caption stack
     on the right (instead of a fixed aspect-ratio that ran taller
     than the text column). */
  align-items: stretch;
}

/* Portrait — grayscale, paper-toned, very subtle halftone overlay.
   Height is driven by the grid row (no aspect-ratio), so the photo
   ends exactly at the bottom of the caption rule on the right. */
.s-act2 .a2-clipping .clip-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e3d2ab;
  border: 1px solid rgba(60, 40, 20, 0.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.s-act2 .a2-clipping .clip-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
}
/* light halftone — visible enough to feel printed, light enough that
   it doesn't muddy the face */
.s-act2 .a2-clipping .clip-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(40, 28, 14, 0.45) 0.6px, transparent 0.9px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}
/* faint paper warm-tone wash so the photo reads as printed-on-paper */
.s-act2 .a2-clipping .clip-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 236, 210, 0.10) 0%, rgba(246, 236, 210, 0.02) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Quote text — large, editorial, dark navy on cream. */
.s-act2 .a2-clipping .clip-text blockquote {
  margin: 0 0 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.10;
  letter-spacing: -0.012em;
  color: #2a3744;
  /* Manual <br>s shape the editorial rhythm; disable browser wrap-
     balancing so the designed cadence stays intact. */
  text-wrap: nowrap;
  white-space: normal;
}
/* Two-level hierarchy:
     <strong> = the affirmative wish (the punchline) — heavy + dark
     plain    = the inverted counter-clause                — lighter ink
   The em inside <strong> keeps the italic pull on the key phrases. */
.s-act2 .a2-clipping .clip-text blockquote strong {
  font-weight: 900;
  color: #14212e;
}
.s-act2 .a2-clipping .clip-text blockquote em {
  font-style: italic;
  font-weight: inherit;
}
.s-act2 .a2-clipping .clip-text blockquote .oq,
.s-act2 .a2-clipping .clip-text blockquote .cq {
  font-size: 1.35em;
  line-height: 0;
  vertical-align: -0.05em;
  margin: 0 0.02em;
  color: #14212e;
}
.s-act2 .a2-clipping .clip-text figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #4a3a2a;
  border-top: 1px solid rgba(60, 40, 20, 0.30);
  padding-top: 14px;
}
.s-act2 .a2-clipping .clip-text figcaption strong {
  color: #14212e;
  font-weight: 800;
}

/* Bottom callout — swap the original line for the alt on step 1.
   Both stay in flex flow so the column height doesn't jump. */
.s-act2 .a2-takeaway-alt {
  display: none;
  position: relative;
  z-index: 6;
}
.s-act2 .a2-takeaway-alt strong {
  font-weight: 700;
  color: var(--accent);
}
.s-act2[data-step="1"] .a2-takeaway { display: none; }
.s-act2[data-step="1"] .a2-takeaway-alt { display: block; }

/* PDF: drop the heavy box-shadow on the clipping (Chromium rasterises
   large blurs into opaque rectangles in page.pdf()). Border + paper
   bg still read as "lifted". */
@media print {
  .s-act2 .a2-clipping {
    box-shadow: 0 2px 0 rgba(30, 14, 6, 0.25);
  }
}