/* ==========================================================================
   THE ASSUMPTION MACHINE
   Built from the Figma file "project-1-draft". Every screen is drawn on a
   1080 × 1920 canvas (the Figma frame size) and scaled to fit the window,
   so all positions below are the exact Figma coordinates.
   ========================================================================== */

:root {
  --red: #ff0033;           /* #f03 in Figma */
  --ink: #0a0a0a;
  --black: #000;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fade: 300ms;            /* set by the script for each screen change */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: var(--black); }

body {
  overflow: hidden;
  font-family: var(--mono);
  color: var(--red);
}

/* A fixed, clipped frame the size of the window. The 1080 × 1920 canvas sits
   inside it, so the canvas can never make the page wider than the phone. */
.viewport { position: fixed; inset: 0; overflow: hidden; background: var(--black); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Focus outlines only for keyboard users (the script adds .kb to <body> when
   someone presses Tab/arrows/Enter, and removes it on any tap or click). */
button { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
.kb button:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }

/* ---------- The canvas ---------- */
.stage {
  position: absolute;
  left: 0; top: 0;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  background: var(--black);
  transform-origin: 0 0;
  isolation: isolate;
}

.abs { position: absolute; }
.stage img, .stage video { display: block; }
/* Never shrink images or videos to their container: several (the head strip,
   the CRT overlay, the wires) are deliberately wider than the box they sit in. */
.stage img, .stage video, .stage canvas { max-width: none; max-height: none; }
.stage video, .media-fill { object-fit: cover; }
/* Each video sits in its own clipping frame, so no browser can draw it outside its box */
.vframe { overflow: hidden; }
.vframe > video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Anything with data-show is only visible on the screens it lists.
   The script adds .on to switch it in, with a fade. */
[data-show], [data-arc] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
[data-show].on, [data-arc].on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease, visibility 0s;
}

/* A missing photo or video stays empty rather than showing a broken icon. */
.missing { visibility: hidden !important; }

/* ---------- Layer order ---------- */
.z-rain    { z-index: 1; }
.z-under   { z-index: 2; }
.z-machine { z-index: 3; }
.z-life    { z-index: 4; }
.z-screen  { z-index: 5; }
.z-header  { z-index: 6; }
.z-control { z-index: 7; }
.z-blowup  { z-index: 8; }
.z-crt     { z-index: 9; pointer-events: none; }
.z-top     { z-index: 10; }

/* ---------- Shared background layers ---------- */
.rain { left: 0; top: 0; width: 1080px; height: 1920px; }
.machine { left: -420px; top: 870px; width: 1920px; height: 1080px; mix-blend-mode: hard-light; }
/* The machine uses hard-light on every screen, including 05 and the explosion
   (Figma used lighten there only because it showed the video on a solid background). */
[data-alpha-video] canvas, [data-canvas-video] canvas { display: block; width: 100%; height: 100%; }
[data-alpha-video] video, [data-canvas-video] video { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
[data-canvas-video] { overflow: hidden; }
[data-alpha-video].no-alpha { overflow: hidden; }
[data-alpha-video].no-alpha canvas { display: none; }
[data-alpha-video].no-alpha video { left: 0; top: 0; width: 100%; height: 200%; opacity: 1; object-fit: fill; }
.crt {
  left: 50%; top: 0;
  width: 2435px; height: 1920px;
  transform: translateX(-50%);
  object-fit: cover;
  mix-blend-mode: soft-light;
  opacity: 0.8;
}
.crt.on { opacity: 0.8; }

/* ---------- Header: title + landscape strip ---------- */
/* Font size 0 on the paragraph so each line takes its height from its own text,
   as in Figma: the small second line no longer runs into the landscape strip. */
.header-text {
  left: 96px; top: 82px; width: 900px; height: 151px;
  font-size: 0; line-height: 0;
}
.header-text .main { font-weight: 700; font-size: 39px; line-height: normal; }
.header-text .sub { font-weight: 400; font-size: 24px; line-height: normal; }
.header-bar {
  left: 96px; top: 165px; width: 889px; height: 68px;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='889' height='68' viewBox='0 0 889 68'%3E%3Cg fill='white'%3E%3Crect width='289.667' height='68'/%3E%3Crect x='299.667' width='289.667' height='68'/%3E%3Crect x='599.333' width='289.667' height='68'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 889px 68px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='889' height='68' viewBox='0 0 889 68'%3E%3Cg fill='white'%3E%3Crect width='289.667' height='68'/%3E%3Crect x='299.667' width='289.667' height='68'/%3E%3Crect x='599.333' width='289.667' height='68'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 889px 68px;
}
/* landscape.mp4 is pre-cropped to the band that shows through the three bars */
.header-bar video { position: absolute; left: 0; top: 0; width: 889px; height: 68px; object-fit: fill; }

/* ---------- Text helpers ---------- */
.mid { transform: translateY(-50%); }
.quote { font-weight: 700; font-size: 58px; line-height: normal; }
.body22 { font-weight: 400; font-size: 22px; line-height: normal; }
.pre { white-space: pre-wrap; }

/* ==========================================================================
   START SCREEN
   ========================================================================== */
.start-the, .start-machine { font-weight: 900; font-size: 96px; line-height: normal; }
.start-the { left: 99px; top: 125.5px; }
.start-machine { left: 584px; top: 682.5px; }

.big-marquee {
  left: 0; top: 164px; width: 1080px; height: 479px;
  overflow: hidden;
  font-weight: 900; font-size: 640px;
}
.big-marquee .track {
  position: absolute; left: 675px; top: 239.5px;
  display: flex; gap: 790px;
  white-space: nowrap; line-height: normal;
  animation: big-scroll 6s linear infinite;
}
.big-marquee .track span { width: 3903px; flex: none; }
@keyframes big-scroll {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-4693px, -50%); }
}

.ticker {
  left: 0; top: 780px; width: 1080px; height: 54px;
  overflow: hidden;
  font-weight: 300; font-size: 59px;
}
.ticker .track {
  position: absolute; left: 0; top: 21px;
  display: flex; gap: 417px;
  white-space: nowrap; line-height: normal;
  animation: ticker-scroll 7s linear infinite;
}
.ticker .track span { width: 2123px; flex: none; }
@keyframes ticker-scroll {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-2540px, -50%); }
}

/* ENTER: hovering dissolves from the solid block to the outlined one */
.enter { left: 796px; top: 888px; width: 185px; height: 50px; }
.enter span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 300; font-size: 37px; line-height: 1;
  transition: opacity 100ms ease-in;
}
.enter .solid   { background: var(--red); color: var(--ink); }
.enter .outline { border: 2px solid var(--red); color: var(--red); opacity: 0; }
@media (hover: hover) and (pointer: fine) { .enter:hover .solid { opacity: 0; } }
.kb .enter:focus-visible .solid { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .enter:hover .outline { opacity: 1; } }
.kb .enter:focus-visible .outline { opacity: 1; }

.readout { left: 654px; top: 960px; width: 327px; font-weight: 500; font-size: 12px; line-height: normal; white-space: pre; }
.energy { left: 763px; top: 1040px; display: flex; gap: 5px; }
.energy i { display: block; width: 9px; height: 11px; border: 1px solid var(--red); }
.energy i.full { background: var(--red); }
.energy i.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { background: transparent; } }

/* ==========================================================================
   MAIN MENU
   ========================================================================== */
.error-grid {
  left: 97px; top: 254px; width: 656px; height: 656px;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='656' height='656' viewBox='0 0 656 656'%3E%3Cg fill='white'%3E%3Cpath transform='matrix%280 1 -1 0 218.667 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 218.667 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 218.667 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 656px 656px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='656' height='656' viewBox='0 0 656 656'%3E%3Cg fill='white'%3E%3Cpath transform='matrix%280 1 -1 0 218.667 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 218.667 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 218.667 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 437.333 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 0%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 218.667%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3Cpath transform='matrix%280 1 -1 0 656 437.333%29' d='M218.667 90.425L90.425 218.667L0 218.667L0 101.016L101.017 0L218.667 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 656px 656px;
}
/* error.mp4 is pre-cropped to the part of Error_3 that shows through the grid */
.error-grid video { position: absolute; left: 0; top: 0; width: 656px; height: 656.88px; object-fit: fill; }

.tile { width: 219px; height: 219px; transition: opacity var(--fade) ease; }
.tile svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.tile .hover { display: none; }
@media (hover: hover) and (pointer: fine) { .tile:hover .face { display: none; } }
.kb .tile:focus-visible .face { display: none; }
@media (hover: hover) and (pointer: fine) { .tile:hover .hover { display: inline; } }
.kb .tile:focus-visible .hover { display: inline; }
.tile.cleared { opacity: 0; visibility: hidden; pointer-events: none; }
.tile[disabled] { cursor: default; }
@media (hover: hover) and (pointer: fine) { .tile[disabled]:hover .face { display: inline; } .tile[disabled]:hover .hover { display: none; } }

/* Lined up with the life meter below it: same left edge and width (764px, 213px) */
.dot-grid { left: 764px; top: 256px; width: 213px; height: 213px; }
.side-video { left: 764px; top: 475px; width: 213px; height: 379px; }
.boss { left: 763px; top: 886px; width: 219px; font-weight: 600; font-size: 24px; line-height: normal; }
.boss .thin { font-weight: 300; }
.circuit { left: 99px; top: 921px; width: 881px; height: 97px; }

/* Life ring, bottom right */
.life { left: 704px; top: 1188px; width: 352px; height: 362px; border-radius: 183px; overflow: hidden; }
.arc80 { left: 883px; top: 1211.2px; width: 165px; height: 156.8px; }
.arc60 { left: 749.3px; top: 1203px; width: 298.7px; height: 165px; }
.arc40 { left: 710px; top: 1195px; width: 346px; height: 275.1px; }
.arc20, .ring05 { left: 710px; top: 1195px; width: 346px; height: 346px; }
.percent { left: 827px; top: 1324px; font-weight: 600; font-size: 58px; line-height: normal; white-space: nowrap; }
.percent.full { left: 810px; }

/* Loading checker on the last start transition */
.loader { left: 753px; top: 1248px; width: 250px; height: 250px; opacity: 0.5; }
.loader.on { opacity: 0.5; }
.loader path { fill: var(--red); animation: load 1s linear infinite; animation-delay: calc(var(--d) * 100ms); }
@keyframes load { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }

/* Continue arrow on the assumption screens */
.arrow { left: 830px; top: 1319px; width: 100px; height: 100px; }
.arrow img { width: 100%; height: 100%; }

/* ==========================================================================
   ASSUMPTION SCREENS 01–04
   ========================================================================== */
.screen { left: 0; top: 0; width: 1080px; height: 1920px; pointer-events: none; }
.screen.on { pointer-events: auto; }
.screen h2:focus { outline: none; }

.scope { left: -44px; top: 352px; width: 665px; height: 445px; }
.globe { left: 436px; top: 386px; width: 630px; height: 422px; }

/* Screen 03: the scanning panel under the second column */
.scan { left: 491px; top: 802px; width: 505px; height: 207px; overflow: hidden; }
/* vector-07.png is the strip of the Figma Vector-07 square that the panel shows
   (the head), so each copy is just shifted sideways as in the Frame 17 variants. */
.scan .v07 { position: absolute; top: 0; width: 1010px; height: 207px; opacity: 0; }
.scan .v07.a { left: -505px; } .scan .v07.b { left: -336px; } .scan .v07.c { left: -166px; } .scan .v07.d { left: 0; }
.scan .icon { position: absolute; top: 0; width: 243px; height: 207px; opacity: 0; transition: opacity 300ms linear; }
.scan .icon.l { left: 0; } .scan .icon.r { left: 272px; }
.scan .glow {
  position: absolute; left: 0; top: 1px; width: 505px; height: 5px;
  background: var(--red); filter: blur(2.5px);
  transition: top 300ms linear;
}
.scan .v07, .scan .icon { transition: opacity 300ms linear; }

/* Screen 04: reprogram summary */
.echo span { position: absolute; top: 270.5px; transform: translateY(-50%); font-weight: 700; font-size: 58px; line-height: normal; white-space: nowrap; }
.asum-label { font-weight: 700; font-size: 22px; line-height: normal; white-space: nowrap; }
.bracket { width: 503px; height: 202px; }

/* ==========================================================================
   05 — IMPLEMENT REPROGRAM, and the END screens
   ========================================================================== */
.implement { left: 87px; top: 257px; width: 907px; }
.implement .row {
  position: absolute; left: 3px; width: 901px; height: 67px;
  border: 3px solid var(--red);
  visibility: hidden;
}
.implement .row span {
  position: absolute; left: -1px; top: 34px; width: 901px;
  transform: translateY(-50%);
  font-weight: 900; font-size: 79px; line-height: normal; white-space: nowrap;
}
.implement .row.show { visibility: visible; }

.wire6 { left: 135px; top: 386.2px; width: 869px; height: 888px; }
.wire5 { left: 342.5px; top: 622.3px; width: 600px; height: 684px; }
.wire4 { left: 465.8px; top: 846px; width: 439px; height: 447px; }
.wire3 { left: 0; top: 1011px; width: 1080px; height: 909px; overflow: visible; }

.clipbox { left: 130px; width: 623px; height: 224px; }
.rule-text { font-weight: 700; font-size: 58px; line-height: normal; white-space: nowrap; }

/* INITIATE wheel: four bracket rings swing back and forth, the label blinks */
.wheel { left: 703.44px; top: 1190.44px; width: 321.44px; height: 321.44px; transform: scale(1.103); transform-origin: 0 0; }
.wheel .ring { position: absolute; }
.wheel .r1 { left: 217.3px; top: 116.2px; width: 98px;  height: 181px; transform-origin: -56.6px 44.5px; animation: swing-a 1.8s linear infinite; }
.wheel .r2 { left: 98.7px;  top: 38.7px;  width: 184px; height: 205px; transform-origin: 62px 122px;    animation: swing-b 1.8s linear infinite; }
.wheel .r3 { left: 75.8px;  top: 81.3px;  width: 175px; height: 169px; transform-origin: 84.9px 79.4px; animation: swing-a 1.8s linear infinite; }
.wheel .r4 { left: 102.5px; top: 102.9px; width: 117px; height: 116px; transform-origin: 58.2px 57.8px; animation: swing-b 1.8s linear infinite; }
@keyframes swing-a { 0% { transform: rotate(0); } 33.33% { transform: rotate(-120deg); } 66.67% { transform: rotate(120deg); } 100% { transform: rotate(0); } }
@keyframes swing-b { 0% { transform: rotate(0); } 33.33% { transform: rotate(120deg); } 66.67% { transform: rotate(-120deg); } 100% { transform: rotate(0); } }
.wheel .initiate {
  position: absolute; left: 9.8px; top: 129px; width: 301.4px; height: 63px;
  background: var(--black); border: 1.7px solid var(--red);
  display: grid; place-items: center;
  font-weight: 700; font-size: 61.3px; line-height: 1; color: var(--red);
  animation: label-blink 1.8s linear infinite;
}
@keyframes label-blink { 0% { opacity: 1; } 33.33% { opacity: 0; } 66.67% { opacity: 1; } 100% { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .wheel:hover .initiate { animation-play-state: paused; opacity: 1; } }
.kb .wheel:focus-visible .initiate { animation-play-state: paused; opacity: 1; }

.blowup { mix-blend-mode: lighten; border-radius: 720px; }
.blowup.b1 { left: -668px; top: 688px; width: 2560px; height: 1440px; }
.blowup.b2 { left: -420px; top: 1234px; width: 1335px; height: 751px; }
.blowup.b3 { left: -237px; top: 997px; width: 1099px; height: 618px; }

/* END_2: congratulations */
.end-marquee {
  left: 108px; top: 476px; width: 863.55px; height: 383px;
  overflow: hidden; font-weight: 900; font-size: 511.73px;
}
.end-marquee .track {
  position: absolute; left: 539.72px; top: 191.5px;
  display: flex; gap: 631.67px;
  white-space: nowrap; line-height: normal;
  animation: end-scroll 6s linear infinite;
}
.end-marquee .track span { width: 3120.77px; flex: none; }
@keyframes end-scroll {
  from { transform: translate(0, -50%); }
  to   { transform: translate(-3752.44px, -50%); }
}
.end-the, .end-machine { font-weight: 800; font-size: 74px; line-height: normal; }
.end-the { left: 106px; top: 452px; }
.end-machine { left: 665px; top: 884px; }
.typing { width: 870px; font-weight: 300; font-size: 46px; line-height: normal; white-space: pre-wrap; }
.typing.t1 { left: 106px; top: 176px; }
.typing.t2 { left: 105px; top: 907px; }
.cover { left: 436px; top: 349px; width: 237px; height: 68px; background: var(--black); }

.restart { left: 755px; top: 1600px; width: 217px; height: 61px; }
.restart span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 300; font-size: 46px; line-height: 1;
  background: var(--red); color: var(--black);
  border: 3px solid var(--red);
  transition: background 300ms ease-in, color 300ms ease-in;
}
@media (hover: hover) and (pointer: fine) { .restart:hover span { background: transparent; color: var(--red); } }
.kb .restart:focus-visible span { background: transparent; color: var(--red); }

/* Screen-reader-only text */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* People who ask their system for less motion get still loops. */
@media (prefers-reduced-motion: reduce) {
  .big-marquee .track, .ticker .track, .end-marquee .track,
  .energy i.blink, .loader path, .wheel .ring, .wheel .initiate { animation: none; }
}

/* If a phone still turns any text into a link, keep it looking like the design */
.stage a[href^="tel:"], .stage a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none; }

/* EXIT (temporary): top right, clear of every screen's content */
.exit { left: 846px; top: 18px; width: 136px; height: 48px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.exit span {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 3px solid var(--red); color: var(--red); background: var(--black);
  font-family: var(--mono); font-weight: 300; font-size: 34px; line-height: 1;
  transition: background 200ms ease-in, color 200ms ease-in;
}
@media (hover: hover) and (pointer: fine) { .exit:hover span { background: var(--red); color: var(--black); } }
.exit:active span { background: var(--red); color: var(--black); }
.kb .exit:focus-visible span { background: var(--red); color: var(--black); }

/* EXIT fades the whole machine to black before leaving */
.viewport { transition: opacity 400ms ease; }
.viewport.leaving { opacity: 0; }