/* Computers only: chapters that pin while a scene plays. Without this file's rules the page reads top to bottom. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

.scene-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }

.debug {
  position: fixed; left: 8px; bottom: 8px; z-index: 90; margin: 0; padding: 8px 10px;
  border-radius: 8px; background: rgb(0 0 0 / 0.78); color: #fff;
  font: 12px/1.45 ui-monospace, Menlo, monospace; pointer-events: none;
}

/* Chapters 2 and 3: doors over the tunnel. */
.tier-full .flight { height: 514vh; padding: 0; }
.tier-full .flight-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ground); }
.tier-full .doors { position: absolute; inset: 0; z-index: 2; display: block; height: auto; min-height: 0; pointer-events: none; }
.tier-full .door { position: absolute; top: 0; bottom: 0; width: 50%; will-change: transform; pointer-events: auto; }
.tier-full .door-custom { left: 0; }
.tier-full .door-ready { right: 0; }
.tier-full .rooms { position: absolute; inset: 0; z-index: 1; }
.tier-full .room {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  background: none;
  opacity: 0;
  visibility: hidden;
  perspective: var(--focal, 1000px);
  perspective-origin: 50% 50%;
}
.tier-full .room-screen, .tier-full .room:nth-child(even) .room-screen { transform: translate(var(--drift, 0px, 0px)) rotateY(var(--tilt, 0rad)); }
.tier-full .flight.scene-on .room-back { display: none; }

/* Chapters 5 and 6: one phone, two jobs. */
.tier-full .assembly { height: 550vh; padding: 0; }
.tier-full .assembly-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ground); }
.tier-full .assembly .built, .tier-full .assembly .brand { position: absolute; inset: 0; z-index: 1; min-height: 0; background: none; }
.tier-full .assembly .brand { opacity: 0; visibility: hidden; }
.tier-full .assembly.scene-on .built-stage { display: none; }

.part-now { display: none; }
.tier-full .scene-on .built { display: block; padding: 0; }
.tier-full .scene-on .built-copy { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }
.tier-full .scene-on .built h2 {
  position: absolute;
  left: var(--margin);
  width: 46vw;
  top: 88px;
  will-change: transform, opacity;
}
.tier-full .scene-on .built.after h2 { top: auto; bottom: var(--margin); }
.tier-full .scene-on .parts { position: absolute; inset: 0; display: block; opacity: 0; }
.tier-full .scene-on .part { position: absolute; left: var(--margin); top: 0; display: block; width: 33vw; will-change: transform; }
.tier-full .scene-on .part b { display: block; font-size: clamp(18px, 1.55vw, 28px); transform-origin: left center; will-change: transform, opacity; }
.tier-full .scene-on .part > span:not(.still) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tier-full .scene-on .part-now {
  position: absolute;
  left: var(--margin);
  top: 0;
  display: block;
  width: 33vw;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.35;
  opacity: 0;
  will-change: transform, opacity;
}

.tier-full .scene-on .brand { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 34px; padding-block: 0; }
.tier-full .scene-on .nv-phone { display: none; }
.tier-full .scene-on .nv-switch { align-items: flex-start; }
.tier-full .scene-on .nv-brands { justify-content: flex-start; }