/* ============================================================
   CONCEPT A — "ASCII FIELD"
   Twist: a full-bleed ASCII bloom (the machine layer) over a near-black
   terminal field. On scroll the painted artwork floods UP from the bottom,
   a rising waterline dissolving ASCII into art — cold machine → warm human.
   ============================================================ */
.scene-a {
  background: var(--slab);
  --water: 0.05;            /* 0 = all ASCII · 1 = all artwork (driven by JS) */
  color: var(--bone);
}

/* layer 2 — painted artwork (PLACEHOLDER warm wash; swap for real render).
   Revealed from the bottom up by the --water mask. */
.scene-a .art {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(30% 26% at 52% 38%, rgba(255,238,206,0.55), transparent 60%),
    radial-gradient(42% 32% at 33% 60%, rgba(255,168,96,0.45), transparent 62%),
    radial-gradient(46% 34% at 71% 54%, rgba(255,108,72,0.42), transparent 62%),
    radial-gradient(130% 95% at 50% 100%, #ee382b 0%, #c2241b 24%, #7c1712 50%, #2c0e0b 78%, #190a08 100%);
  filter: saturate(1.06);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--water) * 100%), transparent calc(var(--water) * 100% + 14vh));
          mask-image: linear-gradient(to top, #000 calc(var(--water) * 100%), transparent calc(var(--water) * 100% + 14vh));
}

/* layer 4 — the ASCII machine field */
.scene-a .ascii {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 4;
  margin: 0;
  white-space: pre;
  font: 400 clamp(7px, 1.04vw, 13px)/1.0 var(--type-mono);
  color: rgba(241,235,221,0.9);
  text-shadow: 0 0 22px rgba(238,56,43,0.12);
  user-select: none;
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--water) * 100% - 5vh), #000 calc(var(--water) * 100% + 7vh));
          mask-image: linear-gradient(to top, transparent calc(var(--water) * 100% - 5vh), #000 calc(var(--water) * 100% + 7vh));
}

/* legibility scrim behind the thesis lines (upper field) */
.scene-a .scrim {
  position: absolute; inset: 0; z-index: 5;
  background: radial-gradient(56% 42% at 50% 33%, rgba(8,6,5,0.66), transparent 72%);
  opacity: 0;
}

/* poster colours on the dark field */
.scene-a .rail,
.scene-a .credits { color: rgba(241,235,221,0.78); }
.scene-a .tag     { color: var(--bone); }
.scene-a .hwm-back   { fill: rgba(241,235,221,0.14); }
.scene-a .hwm-front  { fill: var(--bone); }
.scene-a .hwm-initial { fill: var(--c-accent); }

/* thesis lines — upper third, bone on dark, warm serif punch */
.scene-a .stage-lines { top: 29%; }
.scene-a .stage-line  { color: var(--bone); }
.scene-a .stage-3 {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.04em;
}
.scene-a .stage-3 .em { color: #ffd6a0; font-size: 1.24em; }

.scene-a .render-tag { color: rgba(241,235,221,0.5); }