/* =================================================================
   PHASE 1 — BEATS CSS
   Inherits all Phase 0 variables and classes. Adds:
   - body modifier classes (.b0 … .b7) that reposition persistent elements
   - beat-overlay containers with crossfade
   - per-beat composition styles
   ================================================================= */

/* ==================== BEAT OVERLAY BASE ==================== */
.beat-overlay{
  position:absolute; inset:0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.beat-overlay.active{
  opacity: 1;
}

/* Persistent Phase-0 element transitions (triggered by body class) */
.title-wrap,
.partners,
.supertitle,
.qr-fixed,
.flesh,
.panel-note,
.signup,
.readout.primary,
.footer,
.corner,
.edge-nodes,
.scratch,
.header-strip .countdown,
#agendaTimeline {
  transition:
    transform 800ms cubic-bezier(.4,0,.2,1),
    opacity 800ms cubic-bezier(.4,0,.2,1),
    left 800ms cubic-bezier(.4,0,.2,1),
    top 800ms cubic-bezier(.4,0,.2,1),
    right 800ms cubic-bezier(.4,0,.2,1),
    bottom 800ms cubic-bezier(.4,0,.2,1),
    width 800ms cubic-bezier(.4,0,.2,1),
    font-size 800ms cubic-bezier(.4,0,.2,1);
}

/* ==================== CLEAN MODE (H key) ==================== */
body.clean .header-strip,
body.clean .footer,
body.clean .corner,
body.clean .edge-nodes,
body.clean .scratch,
body.clean .readout,
body.clean .partners,
body.clean .supertitle,
body.clean .qr-fixed,
body.clean .scanline,
body.clean .signup {
  opacity: 0 !important;
  pointer-events: none;
}

/* ==================== BODY MODIFIER: BEAT 1+ (non-zero) ==================== */
/* T-doors countdown disappears on any non-zero beat */
body.beat-1 .header-strip .countdown,
body.beat-4 .header-strip .countdown,
body.beat-5 .header-strip .countdown,
body.beat-6 .header-strip .countdown,
body.beat-7 .header-strip .countdown,
body.beat-8 .header-strip .countdown,
body.beat-9 .header-strip .countdown{
  opacity: 0;
  pointer-events: none;
}

/* ==================== BODY: beats 1-6 — title contracts to corner ==================== */
body.beat-4 .title-wrap,
body.beat-5 .title-wrap,
body.beat-8 .title-wrap{
  top: 185px;
  left: 80px;
  right: auto;
  width: 820px;
  transform: none;
  font-size: 0.40em;
}
body.beat-5 .title-wrap,
body.beat-8 .title-wrap{
  top: 170px;
  width: 560px;
  font-size: 0.28em;
}
/* Beats 4, 5, 6: hide the DESIGN / AGENTICS title entirely */
body.beat-2 .title-wrap,
body.beat-3 .title-wrap,
body.beat-6 .title-wrap,
body.beat-7 .title-wrap,
body.beat-8 .title-wrap{ opacity: 0 !important; pointer-events: none; }

body.beat-1 .row-design,
body.beat-4 .row-design,
body.beat-5 .row-design,
body.beat-6 .row-design,
body.beat-7 .row-design,
body.beat-8 .row-design{ font-size: 128px; }

body.beat-5 .row-design,
body.beat-6 .row-design,
body.beat-7 .row-design,
body.beat-8 .row-design{ font-size: 88px; }

body.beat-1 .row-agentics,
body.beat-4 .row-agentics,
body.beat-5 .row-agentics,
body.beat-6 .row-agentics,
body.beat-7 .row-agentics,
body.beat-8 .row-agentics{ font-size: 128px; }

body.beat-5 .row-agentics,
body.beat-6 .row-agentics,
body.beat-7 .row-agentics,
body.beat-8 .row-agentics{ font-size: 88px; }

body.beat-1 .row-strap,
body.beat-4 .row-strap,
body.beat-5 .row-strap,
body.beat-6 .row-strap,
body.beat-7 .row-strap,
body.beat-8 .row-strap,
body.beat-9 .row-strap{ opacity: 0; pointer-events: none; }

/* Title fully hides on beats 2 and 3 — word composition / creative leap take over */
body.beat-4 .title-wrap,
body.beat-5 .title-wrap{
  opacity: 0;
  pointer-events: none;
}

/* Partners move to upper-right, aligned to coords row (top 109) */
body.beat-1 .partners,
body.beat-4 .partners,
body.beat-5 .partners,
body.beat-6 .partners,
body.beat-7 .partners,
body.beat-8 .partners{
  left: auto;
  right: 80px;
  top: 109px;
  font-size: 11px;
  opacity: .7;
}

/* Supertitle + corners + edge-nodes + scratch hidden during active beats */
body.beat-1 .supertitle,
body.beat-4 .supertitle,
body.beat-5 .supertitle,
body.beat-6 .supertitle,
body.beat-7 .supertitle,
body.beat-8 .supertitle,
body.beat-9 .supertitle{ opacity: 0; pointer-events: none; }

body.beat-4 .corner,
body.beat-5 .corner,
body.beat-6 .corner,
body.beat-7 .corner,
body.beat-8 .corner,
body.beat-9 .corner{ opacity: .25; }

body.beat-5 .edge-nodes,
body.beat-6 .edge-nodes,
body.beat-7 .edge-nodes,
body.beat-8 .edge-nodes{ opacity: .3; }

body.beat-5 .scratch,
body.beat-6 .scratch,
body.beat-7 .scratch,
body.beat-8 .scratch,
body.beat-9 .scratch{ opacity: .08; }

/* Flesh modulation per beat */
body.beat-1 .flesh,
body.beat-4 .flesh,
body.beat-6 .flesh,
body.beat-7 .flesh,
body.beat-8 .flesh{ animation-play-state: paused; opacity: 0 !important; }

/* Beat 3 hides the original Phase 0 mouth-eye; Beat 3's own smeared version takes over */
body.beat-5 .flesh{ animation-play-state: paused; opacity: 0 !important; }

/* Beat 3 slows the scan line */
body.beat-5 .scanline{ animation-duration: 180s; }

/* Beat 3 halftone intensifies */
body.beat-5 .ground-halftone,
body.beat-5 .ground-grain{ opacity: .42; }

/* Panel note hides during active beats (too loud next to composition) */
body.beat-1 .panel-note,
body.beat-4 .panel-note,
body.beat-5 .panel-note,
body.beat-6 .panel-note,
body.beat-7 .panel-note,
body.beat-8 .panel-note,
body.beat-9 .panel-note{ opacity: 0; pointer-events: none; }

/* Readout primary dims during beats; fully hidden on beat 7 (v19) */
body.beat-4 .readout.primary,
body.beat-5 .readout.primary,
body.beat-6 .readout.primary,
body.beat-7 .readout.primary,
body.beat-8 .readout.primary{ opacity: .3; }
body.beat-9 .readout.primary{ opacity: 0; }

/* QR hidden across ALL Phase 1 beats (including 7 — v19) */
body.beat-1 .qr-fixed,
body.beat-4 .qr-fixed,
body.beat-5 .qr-fixed,
body.beat-6 .qr-fixed,
body.beat-7 .qr-fixed,
body.beat-8 .qr-fixed,
body.beat-9 .qr-fixed{
  opacity: 0;
  pointer-events: none;
}

/* Signup + edge-node dots hidden fully in all Phase 1 beats (Enek: cut for v2) */
body.beat-1 .signup,
body.beat-4 .signup,
body.beat-5 .signup,
body.beat-6 .signup,
body.beat-7 .signup,
body.beat-8 .signup,
body.beat-9 .signup,
body.beat-1 .edge-nodes,
body.beat-4 .edge-nodes,
body.beat-5 .edge-nodes,
body.beat-6 .edge-nodes,
body.beat-7 .edge-nodes,
body.beat-8 .edge-nodes,
body.beat-9 .edge-nodes{
  display: none !important;
}

/* ==================== AGENDA TIMELINE (persistent after beat 1) ==================== */
#agendaTimeline{
  position:absolute;
  left: 80px; right: 80px;
  top: 648px; /* 60% of 1080 */
  z-index: 7;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
}
#agendaTimeline .a-item{
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 600ms linear;
}
#agendaTimeline .a-item.shown{ opacity: 1; }
#agendaTimeline .a-label{ display: block; }
#agendaTimeline .a-time{
  font-size: 14px;
  letter-spacing: .28em;
  color: var(--cream);
  opacity: .48;
  font-weight: 400;
}
#agendaTimeline .a-item.red .a-label{ color: var(--laser); }
#agendaTimeline .a-item.red .a-time{ color: var(--laser); opacity: .6; }

/* Active beat 1 — full brightness */
body.beat-1 #agendaTimeline{ opacity: 1; }
/* Persistent dim state for beats 2-6 */
body.beat-4 #agendaTimeline{ opacity: .15; }
body.beat-5 #agendaTimeline{ opacity: .05; }
body.beat-6 #agendaTimeline{ opacity: .15; }
body.beat-7 #agendaTimeline{ opacity: .15; }
body.beat-8 #agendaTimeline{ opacity: .15; }
/* Beat 7 — full prominence, center-mid, larger */
body.beat-9 #agendaTimeline{
  opacity: 1;
  top: 480px;
  font-size: 34px;
}
body.beat-9 #agendaTimeline .a-time{ font-size: 18px; }

/* ==================== BEAT 1 — WELCOME + BIO ==================== */
.beat-overlay[data-beat="1"]{
  opacity: 0;
  transition: opacity .8s linear;
  pointer-events: none;
}
body.beat-1 .beat-overlay[data-beat="1"]{ opacity: 1; }

.b1-bio{
  position: absolute;
  right: 80px;
  top: 170px; /* sits just below the partners strip */
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
  text-align: right;
}
.b1-bio-line{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s linear .2s, transform .9s ease-out .2s;
  margin-bottom: 6px;
}
body.beat-1 .b1-bio-line{ opacity: .9; transform: translateY(0); }

.b1-bio-body{
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 90;
  font-size: 24px;
  line-height: 1.3;
  color: var(--cream);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s linear, transform .9s ease-out;
}
.b1-bio-body .chunk{
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-right: .18em;
}
body.beat-1 .b1-bio-body:nth-of-type(2){ transition-delay: 1.0s; opacity: 1; transform: translateY(0); }
body.beat-1 .b1-bio-body:nth-of-type(3){ transition-delay: 1.9s; opacity: 1; transform: translateY(0); }
body.beat-1 .b1-bio-body:nth-of-type(4){ transition-delay: 2.7s; opacity: 1; transform: translateY(0); }
body.beat-1 .b1-bio-body:nth-of-type(5){ transition-delay: 3.7s; opacity: 1; transform: translateY(0); }
body.beat-1 .b1-bio-body:nth-of-type(6){ transition-delay: 4.5s; opacity: 1; transform: translateY(0); }

/* Blue fear-metabolics focus line */
.b1-bio-focus{
  margin-top: 10px;
  font-size: 26px;
}
.b1-bio-focus .chunk-ultra{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--ultra);
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px rgba(17, 0, 255, 0.35);
}
.b1-bio-focus .chunk-x{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  opacity: .6;
  margin: 0 .25em;
}

/* Red url line under the fear-metabolics focus line */
.b1-bio-url{
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  letter-spacing: .04em;
}
.b1-bio-url a{
  color: var(--laser);
  text-decoration: none;
  text-shadow: 0 0 18px rgba(255, 0, 46, .45);
  border-bottom: 1px solid rgba(255, 0, 46, .45);
  padding-bottom: 1px;
}

/* ==================== BEAT 2 — FEAR THESIS (black hole + text) ==================== */
.beat-overlay[data-beat="2"]{
  opacity: 0;
  transition: opacity 1s linear;
  pointer-events: none;
}
body.beat-2 .beat-overlay[data-beat="2"]{ opacity: 1; }

.b2-fear{
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  text-align: center;
  padding: 0 80px;
}
.b2-fear-kicker{
  font-family: 'JetBrains Mono', monospace;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: lowercase;
  color: var(--laser);
  text-shadow:
    0 0 22px rgba(255, 0, 46, .55),
    0 0 64px rgba(255, 0, 46, .3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s linear .8s, transform 1.2s ease-out .8s;
  margin-bottom: 56px;
}
body.beat-2 .b2-fear-kicker{ opacity: 1; transform: translateY(0); }

.b2-fear-line{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 68px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s linear, transform 1.4s ease-out;
  margin-bottom: 18px;
}
.b2-fear-line em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  color: var(--ultra);
}
.b2-fear-line .money{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--neon);
  margin-left: .2em;
}
.b2-fear-line .money.big{ color: var(--laser); }
.b2-fear-line .fast{
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: .72em;
  color: var(--laser);
  letter-spacing: .04em;
  margin-left: .3em;
  transform: skewX(-10deg);
}
body.beat-2 .b2-fear-line-1{ transition-delay: 1.8s; opacity: 1; transform: translateY(0); }
body.beat-2 .b2-fear-line-2{ transition-delay: 3.6s; opacity: 1; transform: translateY(0); }
body.beat-2 .b2-fear-line-3{ transition-delay: 5.4s; opacity: 1; transform: translateY(0); }

/* ==================== BEAT 3 — THE SCARES (max vortex + 4 screenshots 2x2) ==================== */
.beat-overlay[data-beat="3"]{
  opacity: 0;
  transition: opacity 1s linear;
  pointer-events: none;
}
body.beat-3 .beat-overlay[data-beat="3"]{ opacity: 1; }

.b3-grid{
  position: absolute;
  left: 80px; right: 80px;
  top: 180px; bottom: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 32px;
  z-index: 10;
}
.b3-cell{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(246,241,227,.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.95);
  transition: opacity 1.1s linear, transform 1.1s ease-out;
}
.b3-cell img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
body.beat-3 .b3-cell-1{ transition-delay: .8s; opacity: 1; transform: scale(1); }
body.beat-3 .b3-cell-2{ transition-delay: 1.6s; opacity: 1; transform: scale(1); }
body.beat-3 .b3-cell-3{ transition-delay: 2.4s; opacity: 1; transform: scale(1); }
body.beat-3 .b3-cell-4{ transition-delay: 3.2s; opacity: 1; transform: scale(1); }

/* ==================== BEAT 4 — THE SITUATION (Claude Design lockout) ==================== */
.beat-overlay[data-beat="4"]{
  opacity: 0;
  transition: opacity 1s linear;
  pointer-events: none;
}
body.beat-4 .beat-overlay[data-beat="4"]{ opacity: 1; }

/* v4 — single screenshot, vortex. Kicker + right screen removed. */
.b4-kicker{ display: none !important; }
.b4-screen-right{ display: none !important; }

.b4-screens{
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.b4-screen{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1.2s linear, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
body.beat-4 .b4-screen-left{ transition-delay: .4s; opacity: 1; transform: scale(1); }

.b4-screen-left{
  width: 820px;
}

.b4-screen img{
  width: 100%;
  height: 760px;
  object-fit: contain;
  object-position: center;
  background: rgba(246,241,227,.05);
  border: 1px solid rgba(246,241,227,.2);
  box-shadow: 0 0 60px rgba(0,0,0,.45), 0 0 120px rgba(255,93,168,.08);
}

/* Fallback placeholder if the image can't load (file not saved yet) */
.b4-screen-placeholder{
  display: none;
  width: 100%;
  height: 760px;
  background: rgba(246,241,227,.03);
  border: 1px dashed rgba(246,241,227,.25);
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.b4-screen-placeholder .ph-title{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: lowercase;
}
.b4-screen-placeholder .ph-body{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(201,195,178,.55);
}

.b4-screen-caption{
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(201,195,178,.75);
}
.b4-screen-left .b4-screen-caption{ color: var(--laser); opacity: .9; }
.b4-screen-right .b4-screen-caption{ color: var(--neon); opacity: .9; }

/* Beat 2 v3 — raw first-reading: no landing lines, just the two screenshots. */
.b4-screen-caption{ display: none; } /* caption labels removed for first reading */

/* ==================== BEAT 3 — SMEARED MOUTH-EYE ==================== */
.b5-flesh{
  position: absolute;
  right: -2%;
  top: 0;
  width: 65%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(1.02) brightness(.96);
  background-image: url("assets/mouth-eye-smeared.jpg");
  background-size: cover;
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, rgba(0,0,0,.88) 40%, rgba(0,0,0,.28) 75%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, rgba(0,0,0,.88) 40%, rgba(0,0,0,.28) 75%, transparent 100%);
  transition: opacity 4s ease-in;
}
.b5-flesh.lit{ opacity: .78; }

.b5-labels{
  position: absolute;
  left: 80px; top: 260px;
  width: 1200px;
  z-index: 9;
  pointer-events: none;
}
.b5-label{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1.08;
  letter-spacing: .16em;
  color: var(--laser);
  text-shadow:
    0 0 28px rgba(255, 0, 46, .65),
    0 0 68px rgba(255, 0, 46, .42),
    0 0 140px rgba(255, 0, 46, .25);
  filter: blur(.3px);
  text-transform: lowercase;
  opacity: 0;
  margin-bottom: 22px;
  position: relative;
  mix-blend-mode: screen;
}
.b5-label .word{
  display: inline-block;
  white-space: nowrap;
  margin-right: .28em;
}
.b5-label .ch{ display: inline-block; opacity: 0; }
.b5-label.showing{ opacity: 1; }
.b5-label.showing .ch{ animation: b3CharIn 40ms linear forwards; }
.b5-label.dissolving{ animation: b3LabelOut 800ms ease-in forwards; }
@keyframes b3CharIn{
  0% { opacity: 0; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes b3LabelOut{
  0% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(6px); transform: translateY(-4px); }
}

.b5-caption{
  display: none;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 28px;
  color: var(--cream);
  z-index: 9;
  opacity: 0;
  transition: opacity 1200ms ease-out;
}
.b5-caption.shown{ opacity: 1; }

/* Beat 3 — headline questions (bottom-left, aligned with Virilio right-side) */
.b5-questions{
  position: absolute;
  left: 80px;
  bottom: 180px;
  max-width: 820px;
  z-index: 9;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s linear .4s, transform 1.2s ease-out .4s;
}
body.beat-5 .b5-questions{ opacity: .95; transform: translateY(0); }
.b5-q-big{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 14px;
}
.b5-q-big em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  color: var(--cream);
}
.b5-q-small{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--cream);
  opacity: .75;
  line-height: 1.2;
}

/* Beat 3 — Virilio foothold, bottom-right, aligned with question block (long quote) */
.b5-virilio{
  position: absolute;
  right: 80px;
  bottom: 160px;
  max-width: 720px;
  text-align: right;
  z-index: 9;
  opacity: 0;
  transition: opacity 1.4s linear 6s;
}
body.beat-5 .b5-virilio{ opacity: .85; }
.b5-virilio-q{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 22px;
  color: var(--cream);
  line-height: 1.35;
}
.b5-virilio-attrib{
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,195,178,.55);
}

/* ==================== BEAT 4 — TYPOGRAPHIC TOWER + KNOWING THROUGH USE ==================== */
.b6-tower{
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  width: auto;
  z-index: 9;
  text-align: center;
  line-height: .95; /* more vertical breathing room */
  color: var(--cream);
  /* Tower stretches the full height of the red bar (760px) so OUTPUT sits
     at the base and CONDITIONS ends at the very top of the bar. */
  height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.b6-row{
  display: block;
  opacity: 0;
  transition: opacity 1100ms ease-out; /* slower fade-in */
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}
.b6-row.shown{ opacity: 1; }
/* Flusser 4-row tower: OUTPUT → TOOL → APPARATUS → PROGRAM */
.b6-r1{ font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 56px; opacity: 0; color: var(--cream); }
.b6-r1.shown{ opacity: .7; }
.b6-r2{ font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 120px; letter-spacing: -0.02em; }
.b6-r3{ font-family: 'Fraunces', serif; font-weight: 900; font-variation-settings: "SOFT" 20; font-size: 200px; letter-spacing: -0.03em; }
.b6-r4{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 260px;
  letter-spacing: -0.04em;
  text-shadow: 4px 0 0 var(--laser);
}
/* Legacy row defs kept as no-ops (in case any cached selector references them) */
.b6-r5, .b6-r6{ display: none; }

/* Flusser reference line — small, centered under tower, ultramarine */
.b6-flusser-ref{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  z-index: 11;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: lowercase;
  color: var(--ultra);
  opacity: 0;
  transition: opacity 1.4s linear 6s;
}
.b6-flusser-ref em{
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  color: var(--ultra);
  text-transform: none;
  font-size: 14px;
  letter-spacing: 0;
}
body.beat-6 .b6-flusser-ref{ opacity: .95; }

/* Red bar pinned to the LEFT side of the stage so the vertical text has room */
.b6-redbar{
  position: absolute;
  left: 160px;
  bottom: 100px;
  width: 6px;
  height: 0;
  background: var(--laser);
  z-index: 10;
  transition: height 7s cubic-bezier(.45,.05,.55,.95);
}
.b6-redbar.risen{ height: 760px; }
.b6-redbar.pulse{ animation: b4Pulse 800ms ease-out 1; }
@keyframes b4Pulse{
  0% { box-shadow: 0 0 0 0 var(--laser); }
  50% { box-shadow: 0 0 40px 8px rgba(255,0,46,.6); }
  100% { box-shadow: 0 0 0 0 var(--laser); }
}

/* "knowing through use" — vertical, reads bottom→top, sitting right next to
   the red bar. Revealed by a clip-path wipe that climbs in sync with the bar. */
.b6-vertical{
  position: absolute;
  left: 186px; /* red bar is at 160px + 6px; sit just to its right */
  bottom: 100px;
  height: 760px;
  z-index: 11;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.b6-vertical-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 78px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* start fully clipped at bottom; clip retreats upward as bar climbs */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 7s cubic-bezier(.45,.05,.55,.95);
}
.b6-vertical.shown .b6-vertical-text{
  clip-path: inset(0 0 0 0);
}

/* Bratton's Stack — small reference column on the right */
.b6-bratton{
  position: absolute;
  right: 110px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  transition: opacity 1.4s linear 1.6s;
  pointer-events: none;
}
.b6-bratton.shown{ opacity: .82; }
.b6-bratton-label{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: rgba(201,195,178,.6);
  margin-bottom: 6px;
}
.b6-bratton-row{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .82;
}
.b6-bratton-row:nth-child(2){ color: var(--cream); }
.b6-bratton-ref{
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(201,195,178,.5);
  text-align: right;
  max-width: 280px;
}
.b6-bratton-ref em{
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
}

/* Beat 4 — "agency (?)" vertical on the LEFT of the red bar, still red */
.b6-agency{
  position: absolute;
  left: 80px; /* red bar is at 160px; sit to its LEFT */
  bottom: 100px;
  height: 760px;
  z-index: 11;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 56px;
  line-height: 1;
  color: var(--laser);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 1.4s linear 4s;
}
body.beat-6 .b6-agency{ opacity: .9; }

/* Beat 4 — local ethics marginalia, moved right, aligned with Bratton stack right edge */
.b6-localethics{
  position: absolute;
  right: 80px;
  bottom: 120px;
  max-width: 480px;
  z-index: 11;
  text-align: right;
  opacity: 0;
  transition: opacity 1.2s linear 5.5s;
}
body.beat-6 .b6-localethics{ opacity: .85; }
.b6-localethics-label{ display: none; } /* v18 — label removed */
.b6-localethics-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--laser);
  opacity: .95;
}

/* ==================== BEAT 5 — FEED SHIFT + CONSTELLATION ==================== */
.b7-stage{
  position: absolute;
  inset: 0;
  z-index: 9;
}

.b7-feed{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1400px;
  transform-origin: top right;
  transition: transform 1.4s cubic-bezier(.4,0,.2,1), opacity 1.4s linear;
  opacity: 1;
}
.b7-feed.shrunk{
  transform: translate(400px, -380px) scale(0.28);
  opacity: .25;
}
.b7-feed-row{
  display: flex; gap: 14px;
  margin-bottom: 28px;
  align-items: stretch;
}
/* Old inline row-label — no longer used; hide if present */
.b7-feed-row .row-label{ display: none; }

/* Big stage-1 labels: CHRONOLOGICAL above, ALGORITHMIC below */
.b7-bigLabel{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 96px;
  color: var(--cream);
  letter-spacing: .08em;
  text-align: center;
  line-height: 1;
  text-transform: uppercase;
}
.b7-bigLabel-chrono{ margin-bottom: 28px; }
.b7-bigLabel-algo{ margin-top: 28px; color: var(--laser); }

.b7-card{
  flex: 1;
  border: 1px solid rgba(246,241,227,.35);
  padding: 16px;
  background: rgba(246,241,227,.015);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  min-height: 150px;
}
.b7-card .b7-ts{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--cream);
  letter-spacing: .12em;
}
.b7-card .b7-eng{
  position: absolute;
  top: 12px; right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--laser);
  letter-spacing: .08em;
}
.b7-card .b7-line{
  height: 6px;
  background: rgba(246,241,227,.15);
  width: 100%;
}
.b7-card .b7-line.short{ width: 60%; }
.b7-card .b7-line.tiny{ width: 40%; }

.b7-feed.algo .b7-card{
  border-color: rgba(246,241,227,.25);
  transform: translateY(2px) rotate(-0.15deg);
}
.b7-feed.algo .b7-card:nth-child(3n+1){ transform: translateY(-2px) rotate(0.25deg); }

.b7-mid{
  display: flex; align-items: center; justify-content: center;
  gap: 32px;
  margin: 14px 0;
}
.b7-year{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 120px;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}
.b7-arrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 96px;
  color: var(--laser);
  line-height: 1;
}
.b7-feed-caption{
  text-align: center;
  margin-top: 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 26px;
  color: var(--cream);
}

.b7-constellation{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 800ms linear;
  z-index: 9;
}
.b7-constellation.lit{ opacity: 1; }

.b7-node{
  position: absolute;
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.b7-node.lit{ opacity: 1; }
.b7-node .dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 12px rgba(246,241,227,.55);
}
.b7-node.vibes .dot{ background: var(--neon); box-shadow: 0 0 18px rgba(155,255,0,.7); }
.b7-node .lbl{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 10px;
  white-space: nowrap;
}
.b7-node .sub{
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--cream);
  opacity: .7;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
  white-space: nowrap;
}
.b7-node .date{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cream);
  opacity: .55;
  letter-spacing: .22em;
  margin-top: 4px;
}

.b7-lines{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.b7-lines path{
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.8;
  opacity: .92;
  filter: drop-shadow(0 0 5px rgba(246,241,227,.65));
}
.b7-lines path.pulse{
  stroke: var(--neon);
  stroke-width: 2.6;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(155,255,0,.95));
}

/* Media era labels — broadcast · network · neural */
.b7-era{
  position: absolute;
  bottom: 60px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .34em;
  text-transform: lowercase;
  color: var(--cream);
  opacity: 0;
  transition: opacity 1.2s linear 1.8s;
  pointer-events: none;
}
.b7-era::before{
  content: "— ";
  color: rgba(201,195,178,.6);
  margin-right: .2em;
}
.b7-era::after{
  content: " —";
  color: rgba(201,195,178,.6);
  margin-left: .2em;
}
.b7-constellation.lit .b7-era{ opacity: .7; }

/* Stage 2 — spinning pair at stage center */
.b7-spinPair{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 900px;
  height: 420px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.b7-spinPair.lit{ opacity: 1; }
.b7-spinWord{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 100px;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
  transform-origin: center center;
  white-space: nowrap;
  will-change: transform;
}
.b7-spinWord-algo{ color: var(--laser); }
.b7-spinPair.lit .b7-spinWord-chrono{
  animation: b5SpinCW 30s linear infinite;
}
.b7-spinPair.lit .b7-spinWord-algo{
  animation: b5SpinCCW 30s linear infinite;
  animation-delay: -15s; /* offset so they're out of phase */
}
/* Combine 360° rotate + scale pulse into a single keyframe so both transforms
   coexist (CSS transform is a single property). */
@keyframes b5SpinCW{
  0%   { transform: rotate(0deg)   scale(0.92); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(0.92); }
}
@keyframes b5SpinCCW{
  0%   { transform: rotate(0deg)    scale(1.05); }
  50%  { transform: rotate(-180deg) scale(0.92); }
  100% { transform: rotate(-360deg) scale(1.05); }
}

/* Stage 2 — node typography overrides per brief */
.b7-node{
  margin-left: -10px; /* re-center now that text is bigger */
}
.b7-node .lbl{
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 300 !important;
  font-size: 42px !important;
  text-transform: uppercase;
  letter-spacing: .28em !important;
  color: var(--cream);
  margin-top: 10px;
}
.b7-node .sub{
  font-family: 'Fraunces', serif !important;
  font-style: italic;
  font-weight: 300 !important;
  font-size: 34px !important;
  color: var(--cream);
  margin-top: 6px;
  line-height: 1.1;
}
.b7-node .date{
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: var(--cream);
  opacity: .55;
  margin-top: 8px;
  letter-spacing: .12em;
}
.b7-node .dot{
  width: 14px !important;
  height: 14px !important;
  background: var(--cream) !important;
  box-shadow: none !important;
  border-radius: 50%;
}

/* Thin cream constellation lines */
.b7-lines path:not(.pulse){
  stroke: var(--cream);
  stroke-width: 0.6;
  opacity: .6;
  filter: none;
}

/* Beat 5 — present-tense landscape (replaces the 5-node lineage).
   Stage 1 (feed flip) remains above; Stage 2 swaps constellation for 4 cards. */
.b7-present{
  position: absolute; inset: 0;
  z-index: 9;
  opacity: 0;
  transition: opacity 1s linear;
  pointer-events: none;
}
.b7-present.lit{ opacity: 1; }

.b7-present-header{
  position: absolute;
  left: 80px; top: 84px;
  display: flex; flex-direction: column; gap: 6px;
}
.b7-present-kicker{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: lowercase;
  color: var(--neon);
  opacity: .85;
}
.b7-present-title{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.b7-present-title em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
}

/* 4 asymmetric cards */
.b7-card{
  position: absolute;
  width: 520px;
  padding: 22px 24px;
  border: 1px solid rgba(246,241,227,.22);
  background: rgba(246,241,227,.03);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s linear, transform .9s ease-out;
}
.b7-card.lit{ opacity: 1; transform: translateY(0); }
.b7-card:nth-of-type(odd){
  border-color: rgba(155,255,0,.32);
}
.b7-card:nth-of-type(3n+2){
  border-color: rgba(17,0,255,.35);
}
.b7-card-label{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: lowercase;
  margin-bottom: 10px;
}
.b7-card:nth-of-type(odd) .b7-card-label{ color: var(--neon); }
.b7-card-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  color: var(--cream);
  opacity: .92;
  margin-bottom: 14px;
}
.b7-card-attrib{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(201,195,178,.6);
}

/* Footer — Dryhurst landing line */
.b7-present-footer{
  position: absolute;
  left: 80px; right: 80px;
  bottom: 110px;
  text-align: center;
  opacity: 0;
  transition: opacity 1.2s linear;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.b7-present-footer.lit{ opacity: .9; }
.b7-present-footer .attrib{
  display: block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(201,195,178,.6);
}

/* ==================== BEAT 6 — ASYMMETRIC ARGUMENT ==================== */

/* diffuse ultramarine haze — soft, no hard edge, centered low-middle */
.b8-haze{
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 48% at 52% 60%,
      rgba(17,0,255,.18) 0%,
      rgba(17,0,255,.09) 40%,
      rgba(17,0,255,.03) 70%,
      rgba(17,0,255,0) 100%);
  filter: blur(60px);
}

/* SCIENTIFIC R&D — small, locked, reference register (top-left, ~25% width) */
.b8-sci{
  position: absolute;
  left: 80px;
  top: 210px;
  width: 440px;
  z-index: 10;
  padding: 24px 26px;
  border: 1px solid rgba(246,241,227,.15);
  background: rgba(246,241,227,.015);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.b8-sci-header{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 32px;
  color: var(--cream);
  opacity: .7;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.b8-sci-q{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  opacity: .75;
  line-height: 1.3;
}
.b8-sci-q em{ font-style: italic; }
.b8-sci-tags{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 14px;
  color: var(--cream);
  opacity: .5;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* CREATIVE R&D — massive, dripping, bottom-right */
.b8-art{
  position: absolute;
  right: 80px;
  bottom: 160px;
  width: auto;
  max-width: 1100px;
  z-index: 9;
  padding: 0;
  overflow: visible;
  background: transparent;
}
.b8-art-grain{
  position: absolute;
  left: -10px; right: -10px;
  top: -10px;
  height: 340px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='11'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode: screen;
  opacity: .22;
  pointer-events: none;
}
.b8-art-scratch{
  position: absolute;
  left: 6%; top: 38%;
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,241,227,.28) 30%, rgba(246,241,227,.08) 70%, transparent);
  transform: rotate(-0.9deg);
  pointer-events: none;
}
.b8-art-header{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 168px;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: 28px;
  position: relative;
  white-space: nowrap;
}
.b8-art-header .drip{
  display: inline-block;
  position: relative;
}
.b8-art-header .sp{ display: inline-block; width: .35em; }
.b8-art-header .drip::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 0;
  background: var(--cream);
  transform: translateX(-50%);
  animation: b6Drip 3.2s ease-in infinite;
  opacity: .85;
}
.b8-art-header .drip:nth-child(2n)::after{ animation-duration: 4.1s; animation-delay: .9s;  left: 30%; }
.b8-art-header .drip:nth-child(3n)::after{ animation-duration: 2.7s; animation-delay: 1.8s; left: 72%; }
.b8-art-header .drip:nth-child(5n)::after{ animation-duration: 3.7s; animation-delay: 2.4s; left: 55%; }
@keyframes b6Drip{
  0%   { height: 0; opacity: 0; }
  25%  { height: 6px; opacity: .85; }
  70%  { height: 44px; opacity: .6; }
  100% { height: 72px; opacity: 0; }
}
.b8-art-q{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 64px;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 32px;
}
.b8-art-q em{ font-style: italic; }
.b8-art-tags{
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 20px;
  color: var(--cream);
  opacity: .8;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.b8-art-tags span{
  display: inline-block;
  animation: b6Jitter 5s steps(1) infinite;
}
.b8-art-tags span:nth-child(2){ animation-delay: 1.7s; }
.b8-art-tags span:nth-child(3){ animation-delay: 3.2s; }
@keyframes b6Jitter{
  0%   { transform: translate(0,0); }
  10%  { transform: translate(-3px, 2px); }
  20%  { transform: translate(3px, -2px); }
  30%  { transform: translate(-1px, 1px); }
  40%, 100% { transform: translate(0,0); }
}

/* Research-in-design note under the creative R&D tags */
.b8-art-research{
  margin-top: 36px;
  max-width: 620px;
  opacity: 0;
  transition: opacity 1.4s linear 1.2s;
}
body.beat-8 .b8-art-research{ opacity: 1; }
.b8-art-research-label{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: lowercase;
  color: var(--neon);
  margin-bottom: 10px;
  opacity: .85;
}
.b8-art-research-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 22px;
  line-height: 1.45;
  color: var(--cream);
  opacity: .82;
}

/* 14 scattered constellation dots — asymmetric across whole frame */
.b8-stars{
  position: absolute; inset: 0;
  z-index: 8;
  pointer-events: none;
}
.b8-star{
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cream);
  opacity: .35;
  animation: b6StarPulse var(--p, 5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes b6StarPulse{
  0%, 100% { opacity: .3;  transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* caption inside the haze — upper-center, well above CREATIVE R&D */
.b8-caption2{
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 34px;
  color: var(--cream);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(17,0,255,.55),
    0 0 36px rgba(17,0,255,.3);
  white-space: nowrap;
}

/* Beat 6 — material access marginalia, top-right */
.b8-access{
  position: absolute;
  right: 80px;
  top: 120px;
  max-width: 460px;
  z-index: 11;
  opacity: 0;
  transition: opacity 1.4s linear 3s;
  text-align: right;
}
body.beat-8 .b8-access{ opacity: .85; }
.b8-access-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: var(--neon);
  opacity: .75;
  margin-bottom: 8px;
}
.b8-access-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  color: var(--cream);
  opacity: .85;
}

/* ==================== BEAT 5 — CREATIVE R&D (concept) — v2 ==================== */
/* diffuse ultramarine haze (no divider bar) */
.b5c-haze{
  position: absolute;
  left: 35%; top: 20%;
  width: 30%; height: 60%;
  background:
    radial-gradient(ellipse at center, rgba(17,0,255,.22) 0%, rgba(17,0,255,.12) 40%, rgba(17,0,255,0) 70%);
  z-index: 6;
  filter: blur(80px);
  pointer-events: none;
}

/* SCIENTIFIC R&D — small, contained, top-left */
.b5c-sci{
  position: absolute;
  left: 80px;
  top: 180px;
  max-width: 420px;
  z-index: 8;
  padding: 24px;
  border: 1px solid rgba(246,241,227,.18);
  background: rgba(246,241,227,.02);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s linear .3s, transform 1s ease-out .3s;
}
body.beat-7 .b5c-sci{ opacity: .9; transform: translateY(0); }
.b5c-sci-header{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .08em;
  color: var(--cream);
  opacity: .75;
  margin-bottom: 14px;
}
.b5c-sci-q{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  color: var(--cream);
  opacity: .8;
  margin-bottom: 12px;
}
.b5c-sci-tags{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .55;
}

/* CREATIVE R&D — massive, dominant, dead-center, dripping */
.b5c-art{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(12px);
  max-width: 1600px;
  text-align: center;
  z-index: 9;
  opacity: 0;
  transition: opacity 1.2s linear 1.0s, transform 1.2s ease-out 1.0s;
}
body.beat-7 .b5c-art{ opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.b5c-art-grain,
.b5c-art-scratch{ display: none; } /* optional decorative layers — keep hooks but off */
.b5c-art-header{
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 180px;
  line-height: .9;
  color: var(--cream);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 18px;
  white-space: nowrap;
}
.b5c-art-header .drip{
  display: inline-block;
  position: relative;
}
.b5c-art-header .sp{ display: inline-block; width: .3em; }
.b5c-art-header .drip::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 0;
  background: var(--cream);
  transform: translateX(-50%);
  animation: b5cDrip 3.2s ease-in infinite;
  opacity: .75;
}
.b5c-art-header .drip:nth-child(2n)::after{ animation-duration: 4.1s; animation-delay: .9s; left: 30%; }
.b5c-art-header .drip:nth-child(3n)::after{ animation-duration: 2.7s; animation-delay: 1.8s; left: 72%; }
.b5c-art-header .drip:nth-child(5n)::after{ animation-duration: 3.7s; animation-delay: 2.4s; left: 55%; }
@keyframes b5cDrip{
  0%   { height: 0; opacity: 0; }
  25%  { height: 6px; opacity: .75; }
  70%  { height: 40px; opacity: .55; }
  100% { height: 64px; opacity: 0; }
}
.b5c-art-q{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 48px;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 20px;
}
.b5c-art-tags{
  display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 18px;
  color: var(--cream);
  opacity: .8;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.b5c-art-tags span{
  display: inline-block;
  animation: b5cJitter 5s steps(1) infinite;
}
.b5c-art-tags span:nth-child(2){ animation-delay: 1.7s; }
.b5c-art-tags span:nth-child(3){ animation-delay: 3.2s; }
@keyframes b5cJitter{
  0%   { transform: translate(0,0); }
  10%  { transform: translate(-3px, 2px); }
  20%  { transform: translate(3px, -2px); }
  30%  { transform: translate(-1px, 1px); }
  40%, 100% { transform: translate(0,0); }
}

/* ==================== BEAT 6 — THE COURSE — v2 ==================== */

.b6c-header{
  position: absolute;
  left: 80px;
  top: 180px;
  z-index: 9;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 1600px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s linear .2s, transform .9s ease-out .2s;
}
body.beat-8 .b6c-header{ opacity: 1; transform: translateY(0); }
.b6c-kicker{ display: none; } /* v19 — removed */
.b6c-title{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1.02;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.b6c-title em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  color: var(--neon);
}
.b6c-subtitle{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 34px;
  line-height: 1.2;
  color: var(--neon);
  opacity: .9;
  margin-top: 4px;
}

/* 14 constellation dots */
.b6c-stars{
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 7;
  pointer-events: none;
}
.b6c-star{
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cream);
  opacity: .35;
  animation: b6cStarPulse var(--p, 5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes b6cStarPulse{
  0%, 100% { opacity: .3;  transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Research-in-design — center-ish */
.b6c-research{
  position: absolute;
  left: 80px;
  top: 48%;
  max-width: 720px;
  z-index: 10;
  opacity: 0;
  transition: opacity 1.2s linear 1.5s;
}
body.beat-8 .b6c-research{ opacity: .9; }
.b6c-research-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: var(--neon);
  margin-bottom: 10px;
  opacity: .85;
}
.b6c-research-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.35;
  color: var(--cream);
  opacity: .88;
}

/* Material access — bottom-right */
.b6c-access{
  position: absolute;
  right: 80px;
  top: 48%;
  max-width: 500px;
  z-index: 10;
  text-align: right;
  opacity: 0;
  transition: opacity 1.2s linear 2.5s;
}
body.beat-8 .b6c-access{ opacity: .9; }
.b6c-access-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: var(--laser);
  margin-bottom: 10px;
  opacity: .9;
}
.b6c-access-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.35;
  color: var(--cream);
  opacity: .88;
}

/* Findings strip — 4 findings from the 12-week student conversation */
.b6c-findings{
  position: absolute;
  left: 80px; right: 80px;
  bottom: 220px; /* lifted up from 120 per Enek */
  z-index: 9;
  opacity: 0;
  transition: opacity 1.2s linear 3.5s;
}
body.beat-8 .b6c-findings{ opacity: 1; }
.b6c-findings-label{ display: none; } /* v19 — removed */
.b6c-findings-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.b6c-finding{
  padding: 14px 16px;
  border: 1px solid rgba(246,241,227,.18);
  background: rgba(246,241,227,.02);
  display: flex; flex-direction: column; gap: 6px;
}
.b6c-finding .k{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: lowercase;
  line-height: 1.2;
}
.b6c-finding .k em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  color: var(--neon);
}
.b6c-finding:nth-child(2n) .k em{ color: var(--laser); }
.b6c-finding:nth-child(3n) .k em{ color: var(--cream); }
.b6c-finding .v{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--cream);
  opacity: .78;
  line-height: 1.35;
}

/* ==================== BEAT 7 — HANDOFF ==================== */
.b9-line{
  position: absolute;
  left: 0; right: 0;
  top: 600px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 38px;
  color: var(--cream);
  z-index: 9;
  opacity: 0;
  transition: opacity 1200ms ease-out;
}
.b9-line.shown{ opacity: 1; }

.b9-flesh{
  position: absolute;
  left: -10%; top: 8%;
  width: 55%; height: 84%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: contrast(1.05) saturate(.95) brightness(.92);
  background-image: url("assets/mouth-eye-smeared.jpg");
  background-size: cover;
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 55% 50%, #000 0%, rgba(0,0,0,.8) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 55% 50%, #000 0%, rgba(0,0,0,.8) 45%, transparent 100%);
  transition: opacity 1600ms linear;
}
.b9-flesh.lit{ opacity: .30; }

.b9-label{
  position: absolute;
  left: 36%;
  top: 62%;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .34em;
  color: var(--cream);
  opacity: 0;
  text-transform: lowercase;
  z-index: 9;
  transition: opacity 1000ms linear;
}
.b9-label::before{
  content: '— ';
  color: var(--laser);
  font-family: 'JetBrains Mono', monospace;
}
.b9-label.shown{ opacity: .7; }

/* Beat 7 v4 — SECOND READING bookend — 2-col images + DESIGN/AGENTICS overlay */

/* Beat 9: bring back DESIGN/AGENTICS title at top, scaled down,
   nudged right so its left edge sits just left of the center axis. */
body.beat-9 .title-wrap{
  opacity: 1 !important;
  pointer-events: none;
  top: 70px !important;        /* v5 — moved up from 140 */
  left: 65% !important;
  right: auto !important;
  transform: translateX(-50%) scale(0.42) !important;
  transform-origin: top center !important;
  width: 1760px !important;
  z-index: 13 !important;
}
/* Small text subtitle no longer needed — big title replaces it */
body.beat-9 .b9-subtitle{ display: none !important; }

/* Hide b9-flesh (big Phase-0 mouth-eye) — mouth-eye lives in triptych now */
body.beat-9 .b9-flesh{ opacity: 0 !important; }

/* Hide the legacy "first up — [student name]" label (no handoff label per Enek) */
body.beat-9 .b9-label{ display: none !important; }

/* Small title one line top-center — tuned to beat-1 scale */
.b9-subtitle{
  position: absolute;
  left: 0; right: 0;
  top: 110px;
  text-align: center;
  z-index: 12;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: lowercase;
  color: var(--cream);
  opacity: 0;
  transition: opacity 1s linear .2s;
}
body.beat-9 .b9-subtitle{ opacity: .85; }

/* 2-col layout: left column = two screenshots stacked, right column = mouth-eye */
.b9-triptych{
  position: absolute;
  left: 80px; right: 80px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  z-index: 10;
  height: 780px;
}
.b9-grid{
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.b9-mouth{ grid-column: 2; }
.b9-pane{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,241,227,.12);
  background: rgba(246,241,227,.02);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 1.1s linear, transform 1.1s ease-out;
}
body.beat-9 .b9-pane-1{ transition-delay: .8s;  opacity: 1; transform: translateY(0) scale(1); }
body.beat-9 .b9-pane-2{ transition-delay: 1.4s; opacity: 1; transform: translateY(0) scale(1); }
body.beat-9 .b9-pane-5{ transition-delay: 2.0s; opacity: 1; transform: translateY(0) scale(1); }
body.beat-9 .b9-pane-6{ transition-delay: 2.6s; opacity: 1; transform: translateY(0) scale(1); }
body.beat-9 .b9-pane-3{ transition-delay: 3.2s; opacity: 1; transform: translateY(0) scale(1); }

.b9-pane img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* mouth-eye (right column) spans full height — use cover so it fills */
.b9-pane-3 img{ object-fit: cover; }

/* Fallback placeholder if image can't load */
.b9-pane-placeholder{
  display: none;
  width: 100%;
  height: 100%;
  padding: 30px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: rgba(246,241,227,.03);
  border: 1px dashed rgba(246,241,227,.25);
}
.b9-pane-placeholder .ph-title{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--cream);
  text-transform: lowercase;
}
.b9-pane-placeholder .ph-body{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: rgba(201,195,178,.55);
}

/* Name block — removed from beat 7 per v19 */
.b9-name{ display: none !important; }

/* Sagan card — permanently hidden */
.b9-sagan{ display: none !important; }
.b9-eye-badge{ display: none !important; } /* old element, superseded by triptych */

/* Beat 7 — Sagan card, holds for a breath before handoff */
.b9-sagan{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 1200px;
  z-index: 10;
  opacity: 0;
  transition: opacity 1.4s linear 2s;
  text-align: center;
  pointer-events: none;
}
body.beat-9 .b9-sagan{ opacity: .92; }
.b9-sagan-kicker{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: lowercase;
  color: var(--neon);
  opacity: .85;
  margin-bottom: 22px;
}
.b9-sagan-body{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  font-size: 38px;
  line-height: 1.35;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.b9-sagan-attrib{
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: rgba(201,195,178,.6);
}

/* ==================== BEAT HUD (subtle helper) ==================== */
.beat-hud{
  position: absolute;
  left: 80px; bottom: 20px;
  z-index: 50;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--cream);
  opacity: .35;
  text-transform: uppercase;
  pointer-events: none;
}
body.beat-0 .beat-hud{ opacity: .22; }