/* The stage, the room, the room below it, and the two overlay acts. */

/* -- stage and world ------------------------------------------------------ */
/* World units. The cabinet is 700 tall and centred on y = 0, so it stands on a floor at
   y = +350. The ceiling is at y = -820 — a low pub ceiling, which is also what brings the
   failing tube into frame in the wide shot. The back wall is at z = -1100, and the room
   below the floor runs from y = +430 down to y = +1150.
   Horizontal planes reach forward to z = +650 and no further: the machine close-up puts
   the camera at z = +400, and geometry past the 1400 perspective distance would end up
   behind the lens. */

#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  background:
    radial-gradient(140% 90% at 50% 42%, #0b0b12 0%, #050508 62%, #020204 100%);
  transition: opacity 0.4s var(--ease);
}
#stage.is-parked { opacity: 0; pointer-events: none; }

#world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

#veil {
  position: absolute;
  inset: -10%;
  z-index: 5;
  background: #010103;
  pointer-events: none;
}

#vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(120% 82% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.62) 88%, rgba(0, 0, 0, 0.9) 100%);
  mix-blend-mode: multiply;
}

/* Every plane hangs off the world origin. */
#room, #basement, #cabinet {
  position: absolute;
  transform-style: preserve-3d;
}

/*
 * CSS 3D sorts sibling planes by centroid depth, not per pixel. The monitor wall's
 * centroid is nearer the camera than the floor's, so the wall paints over the floor and
 * the ending is visible from the wide shot. Depth ordering cannot fix that, so each room
 * is simply not painted until the camera has business being there. `visibility` is used
 * rather than opacity: opacity would flatten the 3D subtree.
 */
#basement.is-dormant, #room.is-dormant { visibility: hidden; }

/* -- the room ------------------------------------------------------------- */
#room { --light: 1; }

.room__plane {
  position: absolute;
  left: 0; top: 0;
  transform-style: flat;
  backface-visibility: hidden;
}

.room__floor {
  width: 2800px; height: 2600px;
  margin-left: -1400px; margin-top: -1300px;
  transform: translate3d(0, 350px, -650px) rotateX(90deg);
  background: #080706;
  overflow: hidden;
  /* A genuine hole, cut with an even-odd clip so the room below shows through it long
     before the camera arrives. Local Y on this plane maps to world Z as worldZ + 1950, so
     the 620 × 520 service hatch at world z −320…+200 is local y 1630…2150. */
  clip-path: polygon(evenodd,
    0 0, 2800px 0, 2800px 2600px, 0 2600px,
    1090px 1630px, 1710px 1630px, 1710px 2150px, 1090px 2150px);
}
/* Pub carpet: the loud pattern nobody chose, dark enough that you only sense it. */
.room__carpet {
  position: absolute;
  inset: 0;
  opacity: calc(0.5 + var(--light) * 0.5);
  background-color: #17100e;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(150, 26, 18, 0.42) 0 7px, transparent 8px),
    radial-gradient(circle at 75% 75%, rgba(150, 26, 18, 0.42) 0 7px, transparent 8px),
    radial-gradient(circle at 75% 25%, rgba(196, 148, 44, 0.2) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 75%, rgba(196, 148, 44, 0.2) 0 5px, transparent 6px),
    linear-gradient(45deg, rgba(0, 0, 0, 0.5) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.5) 75%);
  background-size: 96px 96px, 96px 96px, 96px 96px, 96px 96px, 48px 48px;
}
/* The pool of light the machine throws onto the carpet in front of it. */
/* Children of the floor plane sit in its local space, where local Y maps to world Z.
   The plane's centre is 750 behind the machine, so anything meant to sit under the
   cabinet is offset forwards by that much. */
.room__pool {
  position: absolute;
  left: 50%; top: 50%;
  width: 1200px; height: 1100px;
  margin-top: 650px;
  translate: -50% -50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 150, 60, 0.3) 0%, rgba(200, 40, 20, 0.14) 42%, transparent 74%);
  mix-blend-mode: screen;
  filter: blur(14px);
}

.room__ceiling {
  width: 2800px; height: 2600px;
  margin-left: -1400px; margin-top: -1300px;
  transform: translate3d(0, -820px, -650px) rotateX(-90deg);
  background: #090910;
}
.room__tiles {
  position: absolute;
  inset: 0;
  opacity: calc(0.18 + var(--light) * 0.5);
  background-image:
    linear-gradient(rgba(120, 126, 140, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 126, 140, 0.14) 1px, transparent 1px);
  background-size: 200px 200px;
}

/* Walls span the full ceiling-to-floor height, −820 to +350, centred on −235. */
.room__wall {
  width: 2800px; height: 1200px;
  margin-left: -1400px; margin-top: -600px;
  background: linear-gradient(180deg, #08080d 0%, #0c0b11 58%, #050508 100%);
}
.room__wall--back { transform: translate3d(0, -235px, -1100px); }
.room__wall--left {
  width: 2600px; margin-left: -1300px;
  transform: translate3d(-1400px, -235px, -650px) rotateY(90deg);
  background: linear-gradient(90deg, #030307, #0a0a10);
}
.room__wall--right {
  width: 2600px; margin-left: -1300px;
  transform: translate3d(1400px, -235px, -650px) rotateY(-90deg);
  background: linear-gradient(270deg, #030307, #0a0a10);
}
.room__wall-skirt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, #191922, #0a0a10);
  border-top: 1px solid rgba(150, 156, 172, 0.1);
}

.room__exit {
  position: absolute;
  right: 560px; bottom: 90px;
  width: 200px; height: 380px;
  background: linear-gradient(180deg, #0a0a10, #06060a);
  border: 2px solid rgba(140, 146, 162, 0.14);
  border-bottom: 0;
}
.room__exit-sign {
  position: absolute;
  top: -46px; left: 50%;
  translate: -50% 0;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #b9f7c8;
  background: #08150c;
  border: 1px solid #1c4a28;
  border-radius: 2px;
  text-shadow: 0 0 10px rgba(90, 255, 150, 0.75);
  box-shadow: 0 0 22px rgba(60, 220, 130, 0.28);
}

/* Neighbouring cabinets, out of focus, present. Their feet sit exactly on the floor at
   y = +350 so they never intrude into the room below. */
.room__neighbour {
  position: absolute;
  left: 50%; top: 0;
  width: 380px; height: 640px;
  margin-left: -190px;
  background: linear-gradient(180deg, #2c0c09 0%, #180505 44%, #0a0202 100%);
  border-radius: 14px 14px 3px 3px;
  filter: blur(3px) brightness(0.46);
}
/* Topper, screen and belly, blurred down to a silhouette that still reads as a machine. */
.room__neighbour::before {
  content: '';
  position: absolute;
  left: 4%; right: 4%; top: 0;
  height: 11%;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #9c1810, #4d0a06);
  box-shadow: inset 0 2px 0 rgba(255, 206, 150, 0.35);
}
.room__neighbour::after {
  content: '';
  position: absolute;
  left: 11%; right: 11%; top: 15%;
  height: 44%;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 186, 70, 0.42) 0 46%, rgba(196, 34, 22, 0.34) 100%);
  box-shadow: 0 0 40px rgba(255, 140, 40, 0.28);
}
.room__neighbour--l { transform: translate3d(-880px, -290px, -420px) rotateY(26deg); }
.room__neighbour--r { transform: translate3d(880px, -290px, -420px) rotateY(-26deg); }

/* -- ceiling fixture ------------------------------------------------------ */
.room__fixture {
  position: absolute;
  left: 50%; top: 0;
  width: 620px; height: 90px;
  margin-left: -310px;
  transform: translate3d(0, -808px, -60px) rotateX(-90deg);
  transform-style: preserve-3d;
}
.room__fixture-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a2c34, #14161c);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}
.room__fixture-tube {
  position: absolute;
  left: 22px; right: 22px; top: 22px;
  height: 44px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #cfe4ff 40%, #8fb7e8 100%);
  opacity: calc(0.18 + var(--light) * 0.82);
  box-shadow:
    0 0 30px rgba(200, 226, 255, calc(var(--light) * 0.8)),
    0 0 90px rgba(150, 190, 240, calc(var(--light) * 0.55));
}
/* The cone of light, faked as a soft wedge hanging below the fixture. */
.room__fixture-cone {
  position: absolute;
  left: 50%; top: 100%;
  width: 1500px; height: 1500px;
  margin-left: -750px;
  transform: rotateX(90deg);
  transform-origin: top center;
  background: radial-gradient(46% 58% at 50% 0%,
    rgba(198, 222, 255, 0.1) 0%, rgba(160, 196, 246, 0.04) 34%, transparent 64%);
  opacity: calc(0.1 + var(--light) * 0.9);
  mix-blend-mode: screen;
  filter: blur(10px);
  pointer-events: none;
}

/* -- dust ----------------------------------------------------------------- */
.room__dust {
  position: absolute;
  left: 50%; top: 50%;
  width: 1400px; height: 1200px;
  margin-left: -700px; margin-top: -700px;
  transform: translateZ(-120px);
  pointer-events: none;
  opacity: calc(0.35 + var(--light) * 0.65);
}
.room__dust i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: rgba(255, 236, 200, 0.75);
  box-shadow: 0 0 5px rgba(255, 230, 190, 0.5);
  animation: drift var(--t) linear var(--d) infinite;
}
@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.8; }
  88% { opacity: 0.6; }
  100% { transform: translate(var(--dx), -220px); opacity: 0; }
}

/* -- the service hatch the camera drops through --------------------------- */
/* Its own plane, four units under the floor so it is seen through the hole without
   fighting the floor for depth. Mostly open: the grate is bars with gaps between them. */
/* Centred on its own origin, then placed to line up exactly with the cut in the floor:
   x −310 to +310, z −320 to +200. */
.room__hatch {
  position: absolute;
  left: 50%; top: 0;
  width: 620px; height: 520px;
  margin-left: -310px; margin-top: -260px;
  transform: translate3d(0, 354px, -60px) rotateX(90deg);
  transform-style: flat;
}
.room__hatch-grate {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg,
    #23242c 0 9px, transparent 9px 46px);
  opacity: 0.75;
}
/* Light from the monitor wall below, catching the lip of the opening. */
.room__hatch-lip {
  position: absolute;
  inset: -8px;
  border: 8px solid #191a21;
  border-radius: 2px;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(120, 210, 255, 0.16);
  background: linear-gradient(180deg, rgba(140, 220, 255, 0.07), transparent 55%);
}

/* -- title act ------------------------------------------------------------ */
/*
 * Set flush left against a hairline, not centred in the middle of the screen. A centred
 * stack with a button under it is the shape of every product page; a title block hung off a
 * rule reads as the front of a document, which is what this is.
 */
.title {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  padding: 8vh clamp(24px, 9vw, 140px);
  will-change: opacity, transform;
}
.title__inner {
  max-width: 46rem;
  padding-left: clamp(16px, 2.4vw, 30px);
  border-left: 1px solid color-mix(in oklab, var(--gold-500) 55%, transparent);
}

.title__eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.title__name {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 10.5vw, 7.6rem);
  line-height: 0.88;
  letter-spacing: -0.038em;
}
.title__word { display: block; color: var(--paper); }
/* The gold belongs on the machine's own signage, not on the page's masthead. The
   second word takes the warm tint only, so the title still reads as reporting. */
.title__word--alt { color: var(--gold-200); }
.title__standfirst {
  margin: 30px 0 0;
  max-width: 40ch;
  color: var(--ink-200);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.title__foot {
  position: absolute;
  left: clamp(24px, 9vw, 140px);
  bottom: 7vh;
  display: flex;
  align-items: center;
  gap: 14px;
}
.title__rule {
  display: block;
  width: 54px; height: 1px;
  background: linear-gradient(90deg, var(--gold-400), transparent);
  transform-origin: left;
  animation: title-rule 2.6s var(--ease) infinite;
}
.title__cue {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-400);
}
@keyframes title-rule {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .title__rule { animation: none; } }




/* -- facts act ------------------------------------------------------------ */
.facts {
  position: fixed;
  inset: 0;
  z-index: 28;
  pointer-events: none;
}
.fact {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(760px, calc(100vw - 48px));
  padding: 0 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.fact__kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.fact__figure {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
/* Hero figures are the evidence. They get scale and a warm cast from the room, not a
   decorative fill — a number a minister is meant to trust should look reported. */
.fact--hero .fact__figure {
  color: #fffaf0;
  text-shadow: 0 2px 40px rgba(226, 160, 40, 0.22);
}
.fact__line {
  margin: 18px auto 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--ink-100);
  text-wrap: balance;
}
.fact--handover .fact__line {
  max-width: 24ch;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  color: var(--gold-200);
}
.fact__note {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-300);
  text-wrap: pretty;
}
.fact__source {
  margin: 18px 0 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* -- the room below ------------------------------------------------------- */
.base__plane {
  position: absolute;
  left: 0; top: 0;
  transform-style: flat;
  backface-visibility: hidden;
}
.base__floor {
  width: 2400px; height: 2600px;
  margin-left: -1200px; margin-top: -1300px;
  transform: translate3d(0, 1150px, -650px) rotateX(90deg);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 96px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 96px),
    #0a0b0d;
}
/* This plane is what stops the monitor wall being visible from the gaming floor above:
   its near edge reaches further forward than the floor's, closing the sightline under it.
   It must therefore be double-sided — with the backface hidden it vanished when seen from
   above, and the ending was on show from the wide shot. */
.base__ceiling {
  width: 2400px; height: 2600px;
  margin-left: -1200px; margin-top: -1300px;
  transform: translate3d(0, 396px, -650px) rotateX(-90deg);
  background: #06070a;
  backface-visibility: visible;
}
.base__pipe {
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  background: linear-gradient(180deg, #23252c, #12141a 60%, #0a0b0f);
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
/* On this plane world z = 650 − localY, so these sit overhead and a little behind. */
.base__pipe--a { top: 950px; }
.base__pipe--b { top: 1100px; height: 16px; background: linear-gradient(180deg, #1d2b26, #0d1613); }
.base__strip {
  position: absolute;
  left: 18%; right: 18%; top: 1400px;
  height: 14px;
  background: linear-gradient(180deg, #dfeeff, #8fb4de);
  opacity: 0.62;
  box-shadow: 0 0 60px rgba(150, 195, 245, 0.4);
}

.base__wall {
  width: 2400px; height: 720px;
  margin-left: -1200px; margin-top: -360px;
  background: linear-gradient(180deg, #0c0d11 0%, #101219 50%, #080910 100%);
}
.base__wall--back { transform: translate3d(0, 790px, -520px); }
.base__wall--left {
  width: 2600px; margin-left: -1300px;
  transform: translate3d(-1200px, 790px, -650px) rotateY(90deg);
  background: linear-gradient(90deg, #040508, #0b0d13);
}
.base__wall--right {
  width: 2600px; margin-left: -1300px;
  transform: translate3d(1200px, 790px, -650px) rotateY(-90deg);
  background: linear-gradient(270deg, #040508, #0b0d13);
}

/* Low and well forward, so the desk frames the bottom of the monitor wall instead of
   cutting across its last row. */
.base__desk {
  position: absolute;
  left: 50%; top: 0;
  width: 1500px; height: 40px;
  margin-left: -750px;
  transform: translate3d(0, 1090px, -40px) rotateX(78deg);
  background: linear-gradient(180deg, #23252d, #14161c);
  border-radius: 4px;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.75);
}
.base__keyboard {
  position: absolute;
  left: 40%; top: -6px;
  width: 280px; height: 26px;
  background: repeating-linear-gradient(90deg, #2c2f38 0 12px, #1b1d24 12px 15px);
  border-radius: 3px;
}
.base__mug {
  position: absolute;
  left: 25%; top: -18px;
  width: 40px; height: 40px;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #3a3d47, #22242b);
}
.base__papers {
  position: absolute;
  right: 20%; top: -4px;
  width: 160px; height: 22px;
  background: #6d6a63;
  opacity: 0.4;
  transform: rotate(-3deg);
}

.base__chair {
  position: absolute;
  left: 50%; top: 0;
  width: 260px; height: 300px;
  margin-left: -130px;
  transform: translate3d(-40px, 1050px, 190px);
  transform-style: preserve-3d;
  filter: brightness(0.42);
}
.base__chair-back {
  position: absolute;
  left: 22px; top: 0;
  width: 216px; height: 170px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1d1f26, #0f1116);
  box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.04);
}
.base__chair-seat {
  position: absolute;
  left: 8px; top: 168px;
  width: 244px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, #23252d, #12141a);
}
.base__chair-post {
  position: absolute;
  left: 50%; top: 206px;
  width: 16px; height: 70px;
  margin-left: -8px;
  background: linear-gradient(90deg, #1a1c22, #2c2f38, #1a1c22);
}
.base__chair-feet {
  position: absolute;
  left: 50%; top: 268px;
  width: 190px; height: 12px;
  margin-left: -95px;
  border-radius: 6px;
  background: #1a1c22;
}

.base__cables {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
}
.base__cables span {
  position: absolute;
  bottom: 0;
  left: calc(14% + var(--i) * 11%);
  width: 5px; height: calc(50px + var(--i) * 9px);
  background: #15171d;
  border-radius: 3px 3px 0 0;
  transform: rotate(calc(var(--i) * 2deg - 6deg));
}