/* #build-film: the site-builds-itself showpiece, now the page's fixed background. Six tinted
   glass "layers" of a page (grid, layout, typography, photos, colour, phone) drop one by one
   into an isometric 3D stack with small mono labels, then over the last third or so of the page
   the stack itself folds flat: each layer's rotateX/rotateZ eases from the isometric angle to 0,
   its translateZ/translateY eases to 0, and it slides sideways and resizes to land exactly on
   the finished composition's browser frame or phone (a short crossfade only once that landing is
   already aligned), so the finished page reads as made of the layers rather than merely
   fading in behind them. A short flourish after that (tilt, light sweep, content bars, the CTA
   chip lighting up) carries the rest of the page. The whole thing is fixed, aria-hidden,
   pointer-events:none and centred in the viewport, sitting behind every section and in front of
   the ambient shapes (#scene-bg): see layout.ts for the stacking order.

   Structure: #build-film > .build-canvas > .build-world (the stack) and .build-final (the
   finished composition), two siblings that crossfade once the fold has landed: they never need
   to coexist for long, so nothing needs keeping clear of anything else.

   Driven by whole-page scroll, two paths:
   1. @supports (animation-timeline: scroll(root)): every moving piece gets that timeline
      directly (no named ancestor timeline needed) with its own animation-range as a plain
      percentage of the whole document's scroll. Layers and the finished composition now share
      the full 0%-100% range; each layer's own keyframe stops stagger its arrival, its hold, and
      its fold-and-land move inside it. The CTA chip and the content bars get their own ranges
      right at the end (94%-100%), once the fold has finished.
   2. .js fallback (js/build-stage.js): mirrors the same thresholds as a fine data-step
      attribute (0..60, only to gate the transition rules below) plus coarser is-step-N classes,
      which the rules at the bottom of this file key off. Keep the percentages here in sync with
      the BOUNDARIES table in build-stage.js.

   Default rules below (outside every @supports/@media gate) are the finished, settled look:
   world hidden, final composition fully drawn and visible, faint and centred. That is also the
   whole story for JS off, for a browser without animation-timeline support, and for
   prefers-reduced-motion: reduce. */

#build-film {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}

@media (max-width: 680px) {
  #build-film {
    opacity: 0.4;
  }
}

/* at >=1680px the hero (site.css) stops centering its copy under the film and instead holds it
   to a left-hand measure, so the film shifts into its own right-hand column instead of sitting
   centered behind the text: that was reading as empty background on wide screens and putting
   the "-20%" sticker over the film's glass card instead of the headline. Still the one fixed,
   whole-page background, just anchored right instead of centered. */
/* ---------- canvas: layer stack and finished composition, two cross-fading siblings ---------- */

.build-canvas {
  position: relative;
  width: min(1040px, 92vw);
  min-height: clamp(460px, 62vh, 640px);
  perspective: 1900px;
  perspective-origin: 50% 40%;
}

@media (min-width: 1680px) {
  #build-film {
    justify-content: flex-end;
    /* match .wrap's own right margin (max-width: 1600px there) so the film's right
       edge lands flush with the nav/content column instead of a viewport-relative guess. */
    padding-right: calc(50vw - 800px);
  }

  .build-canvas {
    width: min(760px, 42vw);
  }
}

@media (min-width: 2200px) {
  #build-film {
    /* .wrap's max-width grows to 1900px here, so the margin matching it changes too. */
    padding-right: calc(50vw - 950px);
  }

  .build-canvas {
    width: min(920px, 40vw);
  }
}

/* ---------- the isometric layer stack ---------- */

.build-world {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  opacity: 0;
}

.build-layer {
  position: absolute;
  width: clamp(300px, 46vw, 560px);
  aspect-ratio: 640 / 420;
  transform-style: preserve-3d;
  opacity: 0;
}

.build-layer-card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-sm)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.3);
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42);
  padding: 16px;
  overflow: hidden;
}

/* a faint tint per layer so the stack reads as distinct sheets, not one flat grey wash */
.build-layer:nth-of-type(1) .build-layer-card { background: linear-gradient(160deg, rgba(200, 255, 61, 0.14), var(--glass-strong)); }
.build-layer:nth-of-type(2) .build-layer-card { background: linear-gradient(160deg, rgba(111, 168, 255, 0.14), var(--glass-strong)); }
.build-layer:nth-of-type(3) .build-layer-card { background: linear-gradient(160deg, rgba(200, 160, 255, 0.12), var(--glass-strong)); }
.build-layer:nth-of-type(4) .build-layer-card { background: linear-gradient(160deg, rgba(255, 170, 140, 0.14), var(--glass-strong)); }
.build-layer:nth-of-type(5) .build-layer-card { background: linear-gradient(160deg, rgba(200, 255, 61, 0.18), var(--glass-strong)); }
.build-layer:nth-of-type(6) .build-layer-card { background: linear-gradient(160deg, rgba(111, 168, 255, 0.12), var(--glass-strong)); }

.build-bar {
  display: block;
  height: 7px;
  border-radius: var(--r-xxs);
  background: var(--glass-border);
  width: 100%;
  margin-bottom: 8px;
}

.build-bar--accent {
  background: var(--lime);
  opacity: 0.85;
  width: 70%;
}

.build-layer-grid {
  position: absolute;
  inset: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 9px;
}

.build-layer-cell {
  border: 1px dashed var(--glass-border);
  border-radius: var(--r-xs);
}

.build-layer-cell--on {
  border-style: solid;
  border-color: var(--lime);
  background: rgba(200, 255, 61, 0.12);
}

.build-layer-blk {
  position: absolute;
  border-radius: var(--r-s);
  background: var(--glass-border);
}

.build-layer-blk--a { left: 16px; top: 16px; right: 16px; height: 40px; }
.build-layer-blk--b { left: 16px; top: 66px; width: 40%; bottom: 16px; }
.build-layer-blk--c { right: 16px; top: 66px; left: 48%; bottom: 16px; background: var(--lime); opacity: 0.4; }

.build-layer-type {
  display: block;
  width: 60%;
  height: 24px;
  margin-bottom: 14px;
  border-radius: var(--r-xs);
  background: var(--glass-border);
  position: relative;
}

.build-layer-type::after {
  content: "";
  position: absolute;
  left: 0;
  right: 30%;
  bottom: -6px;
  height: 3px;
  border-radius: var(--r-xxs);
  background: var(--lime);
}

.build-layer-photo {
  position: absolute;
  top: 16px;
  bottom: 16px;
  width: 44%;
  border-radius: var(--r-s);
  background: linear-gradient(160deg, rgba(111, 168, 255, 0.3), rgba(200, 255, 61, 0.14));
}

.build-layer-photo--a { left: 16px; }
.build-layer-photo--b { right: 16px; background: linear-gradient(160deg, rgba(255, 170, 140, 0.3), rgba(200, 255, 61, 0.14)); }

.build-layer-swatch {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 54px;
  height: 54px;
  border-radius: var(--r-m);
  background: var(--lime);
}

.build-layer-chip {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 16px;
  width: 42%;
  border-radius: var(--r-s);
  border: 1px solid var(--glass-border);
  background: repeating-linear-gradient(135deg, rgba(200, 255, 61, 0.22) 0 10px, rgba(200, 255, 61, 0.06) 10px 20px);
}

.build-layer-notch {
  display: block;
  width: 30px;
  height: 5px;
  margin: 0 auto 16px;
  border-radius: var(--r-xxs);
  background: var(--line-strong);
}

/* ---------- finished composition: browser frame next to a phone, large and centred ---------- */

.build-final {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1040px, 76%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(40px) scale(0.9);
}

.build-browser-final {
  flex: 1 1 68%;
  max-width: 680px;
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-md)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.3);
  box-shadow: 0 32px 76px rgba(0, 0, 0, 0.38);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  overflow: hidden;
}

.build-browser-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
}

.build-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}

.build-dot:first-child {
  background: var(--lime);
}

.build-url {
  margin-left: 8px;
  flex: 1;
  max-width: 160px;
  height: 11px;
  border-radius: var(--r-xxs);
  background: var(--glass-strong);
}

.build-fnav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-radius: var(--r-m);
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
}

.build-fnav-logo {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xxs);
  background: var(--lime);
  flex-shrink: 0;
}

.build-fnav .build-bar {
  width: 32px;
  margin-bottom: 0;
}

.build-fnav-cta {
  margin-left: auto;
  width: 48px;
  height: 15px;
  border-radius: var(--r-xs);
  background: var(--lime);
  opacity: 0.85;
}

.build-fhero {
  position: relative;
  flex: 1;
  border-radius: var(--r-m);
  padding: clamp(14px, 1.8vw, 22px);
  margin-bottom: 14px;
  background:
    radial-gradient(70% 60% at 20% 15%, rgba(200, 255, 61, 0.18), transparent 60%),
    radial-gradient(60% 55% at 85% 85%, rgba(111, 168, 255, 0.14), transparent 60%),
    var(--glass-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.build-fhero .build-bar {
  max-width: 70%;
  transform-origin: left center;
}

.build-fhero-cta {
  display: block;
  margin-top: 6px;
  width: 112px;
  height: 20px;
  border-radius: var(--r-s);
  background: var(--lime);
}

.build-fline {
  display: block;
  height: 10px;
  border-radius: var(--r-xxs);
  background: var(--glass-border);
  margin-bottom: 8px;
  width: 80%;
}

.build-fline--short {
  width: 46%;
}

.build-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-140%);
}

.build-phone-final {
  flex: 0 0 24%;
  max-width: 220px;
  aspect-ratio: 1 / 2;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.34);
  padding: clamp(16px, 1.6vw, 22px) clamp(10px, 1vw, 14px) clamp(10px, 1vw, 14px);
}

.build-phone-notch {
  display: block;
  width: 30px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: var(--r-xxs);
  background: var(--line-strong);
}

.build-pf-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.build-pf-logo {
  width: 12px;
  height: 12px;
  border-radius: var(--r-xxs);
  background: var(--lime);
  margin-right: auto;
}

.build-pf-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--glass-border);
}

.build-pf-hero {
  border-radius: var(--r-s);
  padding: 12px;
  margin-bottom: 12px;
  background:
    radial-gradient(70% 60% at 25% 20%, rgba(200, 255, 61, 0.2), transparent 60%),
    radial-gradient(60% 55% at 85% 90%, rgba(111, 168, 255, 0.14), transparent 60%),
    var(--glass-strong);
  border: 1px solid var(--glass-border);
}

.build-pf-hero .build-bar:first-child {
  height: 11px;
}

.build-pf-line {
  display: block;
  height: 8px;
  border-radius: var(--r-xxs);
  background: var(--glass-border);
  margin-bottom: 8px;
  width: 90%;
}

.build-pf-line--short {
  width: 50%;
}

.build-pf-cta {
  display: block;
  margin-top: auto;
  width: 64px;
  height: 18px;
  border-radius: var(--r-s);
  background: var(--lime);
  opacity: 0.85;
}

/* ---------- default/finished state: world hidden, composition drawn and visible ---------- */

.build-world {
  opacity: 0;
}

.build-final {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(60px) scale(1);
}

/* ---------- idle 3D flourish once settled: a slight tilt, a light sweep, the phone floating
   forward. Pure CSS, time-based (not scroll-linked), so it plays the same whether the reveal
   above got here by native scroll choreography, the JS fallback, or is simply the static
   finished state. It is only ever visible once .build-final's opacity is non-zero. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .build-browser-final {
    animation: build-tilt 10s ease-in-out infinite;
  }

  .build-phone-final {
    animation: build-phone-float 8s ease-in-out infinite;
  }

  .build-sweep {
    animation: build-sweep-loop 7s ease-in-out infinite;
  }
}

@keyframes build-tilt {
  0%, 100% { transform: rotateX(0) rotateY(0); }
  50% { transform: rotateX(2deg) rotateY(-2.5deg); }
}

@keyframes build-phone-float {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50% { transform: translateZ(16px) translateY(-6px); }
}

@keyframes build-sweep-loop {
  0% { transform: translateX(-140%); }
  45%, 100% { transform: translateX(140%); }
}

/* ================= scroll choreography, whole page ================= */

@supports (animation-timeline: scroll(root)) {
  @media (prefers-reduced-motion: no-preference) {
    /* .build-world itself stays opacity:1 for the whole choreographed run: each layer's own
       keyframe already carries it from a visible "already falling" pose at 0% through to
       opacity 0 once it has flattened into the finished page, so the container needs no fade-in
       or fade-out of its own. */
    .build-world {
      opacity: 1;
    }

    .build-layer,
    .build-final {
      animation-timeline: scroll(root);
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    /* stack and finished composition now share the full page range: each layer's own keyframe
       stops (below) place its drop, its hold, and its fold-flat-and-land move inside it, so the
       first layer is already dropping at 0% and the last fold (the finale) lands in roughly the
       final third. */
    .build-layer:nth-of-type(1) { animation-name: build-layer-in-1; animation-range: 0% 100%; }
    .build-layer:nth-of-type(2) { animation-name: build-layer-in-2; animation-range: 0% 100%; }
    .build-layer:nth-of-type(3) { animation-name: build-layer-in-3; animation-range: 0% 100%; }
    .build-layer:nth-of-type(4) { animation-name: build-layer-in-4; animation-range: 0% 100%; }
    .build-layer:nth-of-type(5) { animation-name: build-layer-in-5; animation-range: 0% 100%; }
    .build-layer:nth-of-type(6) { animation-name: build-layer-in-6; animation-range: 0% 100%; }



    .build-final { animation-name: build-final-in; animation-range: 0% 100%; }

    /* very end of the page: the CTA chip lights up and the content bars take their staggered
       pass, once the finished composition has fully taken over from the folded layers */
    .build-cta-chip {
      animation-timeline: scroll(root);
      animation-fill-mode: both;
      animation-timing-function: ease-out;
      animation-name: build-cta-chip-glow;
      animation-range: 94% 100%;
    }

    .build-fhero .build-bar {
      animation-timeline: scroll(root);
      animation-fill-mode: both;
      animation-timing-function: ease-out;
      animation-name: build-bar-pulse;
    }

    .build-fhero .build-bar:nth-child(1) { animation-range: 93% 96%; }
    .build-fhero .build-bar:nth-child(2) { animation-range: 95% 98%; }
    .build-fhero .build-bar:nth-child(3) { animation-range: 97% 100%; }
  }
}

/* each layer drops into its own isometric slot (a shared tilt plus a translateZ/translateY
   stagger per layer), holds flat together, then over the last ~30-35% of the page folds itself
   flat: rotateX/rotateZ ease from the isometric angle to 0, translateZ/translateY ease to 0, and
   a translateX plus a non-uniform scale carry it sideways and resize it to land exactly on
   .build-final's browser frame (layers 1-5) or phone (layer 6, "06 Telefon") - the translateX and
   scale values are measured offsets/ratios between .build-layer's own box and
   .build-browser-final / .build-phone-final once both sit centred in the same .build-canvas (see
   scripts/build-stage-measure note below), not guesses. translateX is listed before scale in
   each transform so the offset lands in the parent's pixels, unaffected by the layer's own
   resize. Only transform and opacity move, so the fold stays compositor-only on phones. Layer 1
   starts the shared range already mid-fall (no dead first frame): its 0% pose is a visible pose,
   not fully hidden off the top of the stage, so the very top of the page already shows motion.
   Measured geometry (1440x900 desktop, 390x844 mobile; mobile values duplicated in the
   max-width:680 block below):
     desktop  layers 1-5 -> browser: translateX(-107px) scale(0.915, 1.046)
     desktop  layer 6    -> phone:   translateX(276px)  scale(0.311, 0.949)
     mobile   layers 1-5 -> browser: translateX(-49px)  scale(0.839, 0.959)
     mobile   layer 6    -> phone:   translateX(110px)  scale(0.333, 1.126) */
@keyframes build-layer-in-1 {
  0% { opacity: 0.55; transform: translate3d(0, -22vh, -90px) rotateX(20deg) rotateZ(-14deg) scale(0.86); }
  5.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(400px) translateY(-75px) translateX(0) scale(1); }
  60% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(400px) translateY(-75px) translateX(0) scale(1); }
  88% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  90% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
}
@keyframes build-layer-in-2 {
  0%, 5.5% { opacity: 0; transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) scale(0.72); }
  11% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(265px) translateY(-38px) translateX(0) scale(1); }
  61% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(265px) translateY(-38px) translateX(0) scale(1); }
  89% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  91% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
}
@keyframes build-layer-in-3 {
  0%, 11% { opacity: 0; transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) scale(0.72); }
  16.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(135px) translateY(0) translateX(0) scale(1); }
  62% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(135px) translateY(0) translateX(0) scale(1); }
  90% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  92% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
}
@keyframes build-layer-in-4 {
  0%, 16.5% { opacity: 0; transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) scale(0.72); }
  22% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(38px) translateX(0) scale(1); }
  63% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(38px) translateX(0) scale(1); }
  91% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  93% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
}
@keyframes build-layer-in-5 {
  0%, 22% { opacity: 0; transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) scale(0.72); }
  27.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-135px) translateY(76px) translateX(0) scale(1); }
  64% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-135px) translateY(76px) translateX(0) scale(1); }
  92% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  94% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
}
@keyframes build-layer-in-6 {
  0%, 27.5% { opacity: 0; transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) scale(0.72); }
  33% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-265px) translateY(115px) translateX(0) scale(1); }
  66% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-265px) translateY(115px) translateX(0) scale(1); }
  95% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(276px) scale(0.311, 0.949); }
  96% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(276px) scale(0.311, 0.949); }
  100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(276px) scale(0.311, 0.949); }
}


/* the finished composition only crosses in during the last few %, once the folded layers have
   already landed in its exact spot: a short crossfade, then its existing small 3D pop/settle. */
@keyframes build-final-in {
  0%, 92% { opacity: 0; transform: translate(-50%, -50%) translateZ(40px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateZ(60px) scale(1); }
}

@keyframes build-cta-chip-glow {
  0% { opacity: 0.55; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1.04); }
}

@keyframes build-bar-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.88); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* ---------- JS fallback (no animation-timeline support): js/build-stage.js keeps
   #build-film[data-step] in sync (fine grain, 0..60, only used to gate the transition rules
   below) and #build-film.is-step-N in sync with the thresholds the keyframes above use. Steps
   7-9 add two extra intermediate fold poses (quarter, half) before the landed pose at step 9, so
   the fold reads as a continuous move through several small transitions rather than one big
   jump; a per-layer transition-delay on top (top layers first) gives it the same stagger as the
   native keyframes. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js #build-film[data-step] .build-world {
    transition: opacity 320ms var(--ease);
  }

  .js #build-film[data-step] .build-layer {
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  }

  .js #build-film[data-step] .build-layer:nth-of-type(1) { transition-delay: 0ms; }
  .js #build-film[data-step] .build-layer:nth-of-type(2) { transition-delay: 30ms; }
  .js #build-film[data-step] .build-layer:nth-of-type(3) { transition-delay: 60ms; }
  .js #build-film[data-step] .build-layer:nth-of-type(4) { transition-delay: 90ms; }
  .js #build-film[data-step] .build-layer:nth-of-type(5) { transition-delay: 120ms; }
  .js #build-film[data-step] .build-layer:nth-of-type(6) { transition-delay: 160ms; }


  .js #build-film[data-step] .build-final {
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .js #build-film[data-step] .build-cta-chip {
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  }

  .js #build-film[data-step] .build-fhero .build-bar {
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  }

  /* base hidden pose, overridden per layer once its own is-step-N threshold is reached */
  .js #build-film[data-step] .build-layer {
    opacity: 0;
    transform: translate3d(0, -70vh, -200px) rotateX(0) rotateZ(0) translateX(0) scale(0.72);
  }
  /* world stays visible for the whole run (same reasoning as the native path above); layers
     fade themselves out once landed (is-step-10) so the container needs no fade of its own */
  .js #build-film[data-step] .build-world { opacity: 1; }
  .js #build-film[data-step] .build-final { opacity: 0; transform: translate(-50%, -50%) translateZ(40px) scale(0.9); }
  .js #build-film[data-step] .build-cta-chip { opacity: 0.55; transform: scale(0.96); }
  .js #build-film[data-step] .build-fhero .build-bar { opacity: 0.6; transform: scaleX(0.88); }

  /* arrival: each layer drops into its own slot, same end transform as its native keyframe's
     settled state (the 5.5%/11%/.../33% frame above) */
  .js #build-film.is-step-1 .build-layer:nth-of-type(1) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(400px) translateY(-75px) translateX(0) scale(1); }
  .js #build-film.is-step-2 .build-layer:nth-of-type(2) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(265px) translateY(-38px) translateX(0) scale(1); }
  .js #build-film.is-step-3 .build-layer:nth-of-type(3) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(135px) translateY(0) translateX(0) scale(1); }
  .js #build-film.is-step-4 .build-layer:nth-of-type(4) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(38px) translateX(0) scale(1); }
  .js #build-film.is-step-5 .build-layer:nth-of-type(5) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-135px) translateY(76px) translateX(0) scale(1); }
  .js #build-film.is-step-6 .build-layer:nth-of-type(6) { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-265px) translateY(115px) translateX(0) scale(1); }

  /* fold, quarter way: a linear blend between the isometric arrived pose and the landed pose
     below, same transform-function order throughout so the browser interpolates each axis on
     its own instead of falling back to matrix decomposition */
  .js #build-film.is-step-7 .build-layer:nth-of-type(1) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(300px) translateY(-56.25px) translateX(-26.75px) scale(0.979, 1.012); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(2) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(198.75px) translateY(-28.5px) translateX(-26.75px) scale(0.979, 1.012); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(3) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(101.25px) translateY(0) translateX(-26.75px) scale(0.979, 1.012); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(4) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(0) translateY(28.5px) translateX(-26.75px) scale(0.979, 1.012); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(5) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(-101.25px) translateY(57px) translateX(-26.75px) scale(0.979, 1.012); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(6) { opacity: 1; transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(-198.75px) translateY(86.25px) translateX(69px) scale(0.828, 0.987); }

  /* fold, over halfway: same blend further along */
  .js #build-film.is-step-8 .build-layer:nth-of-type(1) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(160px) translateY(-30px) translateX(-64.2px) scale(0.949, 1.028); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(2) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(106px) translateY(-15.2px) translateX(-64.2px) scale(0.949, 1.028); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(3) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(54px) translateY(0) translateX(-64.2px) scale(0.949, 1.028); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(4) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(0) translateY(15.2px) translateX(-64.2px) scale(0.949, 1.028); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(5) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(-54px) translateY(30.4px) translateX(-64.2px) scale(0.949, 1.028); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(6) { opacity: 1; transform: rotateX(22deg) rotateZ(-14deg) translateZ(-106px) translateY(46px) translateX(165.6px) scale(0.587, 0.969); }

  /* landed: fully flat and face-on, sitting exactly on .build-browser-final (layers 1-5) or
     .build-phone-final (layer 6), same measured values as the native keyframes' 88-96% frames */
  .js #build-film.is-step-9 .build-layer:nth-of-type(1) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-9 .build-layer:nth-of-type(2) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-9 .build-layer:nth-of-type(3) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-9 .build-layer:nth-of-type(4) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-9 .build-layer:nth-of-type(5) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-9 .build-layer:nth-of-type(6) { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(276px) scale(0.311, 0.949); }

  /* crossfade: geometry is already aligned (is-step-9's pose holds), so the folded layers simply
     fade out as the finished composition fades in on top of them */
  .js #build-film.is-step-10 .build-layer:nth-of-type(1) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-10 .build-layer:nth-of-type(2) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-10 .build-layer:nth-of-type(3) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-10 .build-layer:nth-of-type(4) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-10 .build-layer:nth-of-type(5) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-107px) scale(0.915, 1.046); }
  .js #build-film.is-step-10 .build-layer:nth-of-type(6) { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(276px) scale(0.311, 0.949); }
  .js #build-film.is-step-10 .build-world { opacity: 0; }
  .js #build-film.is-step-10 .build-final { opacity: 1; transform: translate(-50%, -50%) translateZ(60px) scale(1); }

  /* last stretch: the content bars take their pass, then the CTA chip lights up on the way to
     the footer */
  .js #build-film.is-step-11 .build-fhero .build-bar { opacity: 1; transform: scaleX(1); }
  .js #build-film.is-step-12 .build-cta-chip { opacity: 1; transform: scale(1.04); }
}

@supports not (animation-timeline: scroll(root)) {
  @media (prefers-reduced-motion: reduce) {
    .build-final {
      opacity: 1 !important;
      transform: translate(-50%, -50%) translateZ(60px) scale(1) !important;
    }
  }
}

/* Reduced motion where scroll timelines exist: the same story without movement. Layers sit in
   their stacked pose and only fade in one by one, then the stack fades into the finished
   composition. Many Android phones report reduce whenever battery saver removes animations,
   so a static picture there read as "the background does not animate". */
@supports (animation-timeline: scroll(root)) {
  @media (prefers-reduced-motion: reduce) {
    .build-world {
      opacity: 1;
    }

    .build-layer {
      animation: build-rm-layer linear both !important;
      animation-timeline: scroll(root) !important;
    }

    .build-layer:nth-of-type(1) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(400px) translateY(-75px); animation-range: 0% 62% !important; }
    .build-layer:nth-of-type(2) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(265px) translateY(-38px); animation-range: 8% 62% !important; }
    .build-layer:nth-of-type(3) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(135px) translateY(0px); animation-range: 16% 62% !important; }
    .build-layer:nth-of-type(4) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(0px) translateY(30px); animation-range: 24% 62% !important; }
    .build-layer:nth-of-type(5) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-135px) translateY(76px); animation-range: 32% 62% !important; }
    .build-layer:nth-of-type(6) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-265px) translateY(115px); animation-range: 40% 62% !important; }

    .build-final {
      transform: translate(-50%, -50%) translateZ(60px) scale(1);
      animation: build-rm-final linear both !important;
      animation-timeline: scroll(root) !important;
      animation-range: 54% 70% !important;
    }

    @media (max-width: 680px) {
      .build-layer:nth-of-type(1) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(150px) translateY(-28px); }
      .build-layer:nth-of-type(2) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(100px) translateY(-14px); }
      .build-layer:nth-of-type(3) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(50px) translateY(0px); }
      .build-layer:nth-of-type(4) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(0px) translateY(14px); }
      .build-layer:nth-of-type(5) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-50px) translateY(28px); }
      .build-layer:nth-of-type(6) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-100px) translateY(42px); }
    }
  }
}

@keyframes build-rm-layer {
  0% { opacity: 0; }
  14%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes build-rm-final {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- mobile: own centred composition, no horizontal overflow ---------- */

@media (max-width: 680px) {
  .build-canvas {
    width: min(400px, 92vw);
    min-height: clamp(380px, 48vh, 480px);
    perspective: 1300px;
  }

  .build-layer {
    width: min(240px, 70%);
  }


  /* only the settled transform is redefined (a narrower translateZ/Y spread to fit the mobile
     canvas), but a @keyframes redefinition replaces the whole rule, not just one frame, so
     every other frame is restated here too, or it would drop out of the animation entirely.
     Landed poses use the mobile-measured translateX/scale pairs noted in the desktop comment
     above (390x844: layers 1-5 -> translateX(-49px) scale(0.839, 0.959), layer 6 ->
     translateX(110px) scale(0.333, 1.126)). */
  @keyframes build-layer-in-1 {
    0% { opacity: 0.55; transform: translate3d(0, -14vh, -60px) rotateX(20deg) rotateZ(-14deg) scale(0.86); }
    5.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(150px) translateY(-28px) translateX(0) scale(1); }
    60% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(150px) translateY(-28px) translateX(0) scale(1); }
    88% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    90% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
  }
  @keyframes build-layer-in-2 {
    0%, 5.5% { opacity: 0; transform: translate3d(0, -40vh, -140px) rotateX(0) rotateZ(0) scale(0.72); }
    11% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(100px) translateY(-14px) translateX(0) scale(1); }
    61% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(100px) translateY(-14px) translateX(0) scale(1); }
    89% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    91% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
  }
  @keyframes build-layer-in-3 {
    0%, 11% { opacity: 0; transform: translate3d(0, -40vh, -140px) rotateX(0) rotateZ(0) scale(0.72); }
    16.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(50px) translateY(0) translateX(0) scale(1); }
    62% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(50px) translateY(0) translateX(0) scale(1); }
    90% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    92% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
  }
  @keyframes build-layer-in-4 {
    0%, 16.5% { opacity: 0; transform: translate3d(0, -40vh, -140px) rotateX(0) rotateZ(0) scale(0.72); }
    22% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(14px) translateX(0) scale(1); }
    63% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(14px) translateX(0) scale(1); }
    91% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    93% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
  }
  @keyframes build-layer-in-5 {
    0%, 22% { opacity: 0; transform: translate3d(0, -40vh, -140px) rotateX(0) rotateZ(0) scale(0.72); }
    27.5% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-50px) translateY(28px) translateX(0) scale(1); }
    64% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-50px) translateY(28px) translateX(0) scale(1); }
    92% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    94% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959); }
  }
  @keyframes build-layer-in-6 {
    0%, 27.5% { opacity: 0; transform: translate3d(0, -40vh, -140px) rotateX(0) rotateZ(0) scale(0.72); }
    33% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-100px) translateY(42px) translateX(0) scale(1); }
    66% { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) translateZ(-100px) translateY(42px) translateX(0) scale(1); }
    95% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(110px) scale(0.333, 1.126); }
    96% { opacity: 1; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(110px) scale(0.333, 1.126); }
    100% { opacity: 0; transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(110px) scale(0.333, 1.126); }
  }

  .js #build-film.is-step-1 .build-layer:nth-of-type(1) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(150px) translateY(-28px) translateX(0) scale(1); }
  .js #build-film.is-step-2 .build-layer:nth-of-type(2) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(100px) translateY(-14px) translateX(0) scale(1); }
  .js #build-film.is-step-3 .build-layer:nth-of-type(3) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(50px) translateY(0) translateX(0) scale(1); }
  .js #build-film.is-step-4 .build-layer:nth-of-type(4) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(0) translateY(14px) translateX(0) scale(1); }
  .js #build-film.is-step-5 .build-layer:nth-of-type(5) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-50px) translateY(28px) translateX(0) scale(1); }
  .js #build-film.is-step-6 .build-layer:nth-of-type(6) { transform: rotateX(55deg) rotateZ(-35deg) translateZ(-100px) translateY(42px) translateX(0) scale(1); }

  .js #build-film.is-step-7 .build-layer:nth-of-type(1) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(112.5px) translateY(-21px) translateX(-12.25px) scale(0.96, 0.99); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(2) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(75px) translateY(-10.5px) translateX(-12.25px) scale(0.96, 0.99); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(3) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(37.5px) translateY(0) translateX(-12.25px) scale(0.96, 0.99); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(4) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(0) translateY(10.5px) translateX(-12.25px) scale(0.96, 0.99); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(5) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(-37.5px) translateY(21px) translateX(-12.25px) scale(0.96, 0.99); }
  .js #build-film.is-step-7 .build-layer:nth-of-type(6) { transform: rotateX(41.25deg) rotateZ(-26.25deg) translateZ(-75px) translateY(31.5px) translateX(27.5px) scale(0.833, 1.032); }

  .js #build-film.is-step-8 .build-layer:nth-of-type(1) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(60px) translateY(-11.2px) translateX(-29.4px) scale(0.903, 0.975); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(2) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(40px) translateY(-5.6px) translateX(-29.4px) scale(0.903, 0.975); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(3) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(20px) translateY(0) translateX(-29.4px) scale(0.903, 0.975); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(4) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(0) translateY(5.6px) translateX(-29.4px) scale(0.903, 0.975); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(5) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(-20px) translateY(11.2px) translateX(-29.4px) scale(0.903, 0.975); }
  .js #build-film.is-step-8 .build-layer:nth-of-type(6) { transform: rotateX(22deg) rotateZ(-14deg) translateZ(-40px) translateY(16.8px) translateX(66px) scale(0.6, 1.076); }

  .js #build-film.is-step-9 .build-layer:nth-of-type(1),
  .js #build-film.is-step-9 .build-layer:nth-of-type(2),
  .js #build-film.is-step-9 .build-layer:nth-of-type(3),
  .js #build-film.is-step-9 .build-layer:nth-of-type(4),
  .js #build-film.is-step-9 .build-layer:nth-of-type(5),
  .js #build-film.is-step-10 .build-layer:nth-of-type(1),
  .js #build-film.is-step-10 .build-layer:nth-of-type(2),
  .js #build-film.is-step-10 .build-layer:nth-of-type(3),
  .js #build-film.is-step-10 .build-layer:nth-of-type(4),
  .js #build-film.is-step-10 .build-layer:nth-of-type(5) {
    transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(-49px) scale(0.839, 0.959);
  }

  .js #build-film.is-step-9 .build-layer:nth-of-type(6),
  .js #build-film.is-step-10 .build-layer:nth-of-type(6) {
    transform: rotateX(0) rotateZ(0) translateZ(0) translateY(0) translateX(110px) scale(0.333, 1.126);
  }

  /* finale stays the browser + phone pair at this width too (same flex shares as the base
     rule), just scaled down by the canvas's own narrower width */
  .build-final {
    width: min(360px, 90%);
  }
}

/* darken the light behind the stage and give the layers and the finished pieces a solid dark
   base with brighter edges, so the scene sits clearly in front of the light field haze */
.build-layer-card {
  background-color: rgba(18, 21, 26, 0.86);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.build-layer:nth-of-type(1) .build-layer-card { background-image: linear-gradient(160deg, rgba(200, 255, 61, 0.26), rgba(18, 21, 26, 0.2)); }
.build-layer:nth-of-type(2) .build-layer-card { background-image: linear-gradient(160deg, rgba(111, 168, 255, 0.26), rgba(18, 21, 26, 0.2)); }
.build-layer:nth-of-type(3) .build-layer-card { background-image: linear-gradient(160deg, rgba(200, 160, 255, 0.24), rgba(18, 21, 26, 0.2)); }
.build-layer:nth-of-type(4) .build-layer-card { background-image: linear-gradient(160deg, rgba(255, 170, 140, 0.26), rgba(18, 21, 26, 0.2)); }
.build-layer:nth-of-type(5) .build-layer-card { background-image: linear-gradient(160deg, rgba(200, 255, 61, 0.32), rgba(18, 21, 26, 0.2)); }
.build-layer:nth-of-type(6) .build-layer-card { background-image: linear-gradient(160deg, rgba(111, 168, 255, 0.24), rgba(18, 21, 26, 0.2)); }

.build-browser-final,
.build-phone-final {
  background-color: rgba(18, 21, 26, 0.9);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}