.sequence-intro {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #141413;
}

.sequence-intro-inner {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding-block: 90px;
}

.sequence-intro h1 {
  color: var(--ink);
  font: 650 clamp(4rem, 11.4vw, 11.3rem)/.91 var(--font-display);
  letter-spacing: -.089em;
  text-align: center;
  text-wrap: balance;
}

.sequence-intro h1 span, .sequence-copy h2 span { color: var(--gold); }
.sequence-scroll {
  position: absolute;
  bottom: clamp(26px, 6vh, 58px);
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #665534;
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.52rem;
  text-decoration: none;
  transition: color 170ms ease, background-color 170ms ease;
}

.sequence-scroll:hover { color: #15130e; background: var(--gold); }
.sequence-contours {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  transform: translateY(calc(var(--intro-travel, 0) * -36px));
}

.sequence-contours i {
  position: absolute;
  top: var(--curve-top);
  left: var(--curve-left);
  width: var(--curve-width);
  height: clamp(100px, 28vw, 340px);
  border-radius: 50%;
  border-top: 1px solid #e9b750;
  opacity: var(--curve-opacity);
  transform: rotate(var(--curve-angle));
  animation: sequence-drift 4.8s cubic-bezier(.25,.55,.35,1) both;
}

.sequence-contours i:nth-child(1) { --curve-top: 7%; --curve-left: 52%; --curve-width: 66%; --curve-angle: 11deg; --curve-opacity: .63; }
.sequence-contours i:nth-child(2) { --curve-top: 10%; --curve-left: 59%; --curve-width: 61%; --curve-angle: 14deg; --curve-opacity: .22; }
.sequence-contours i:nth-child(3) { --curve-top: 75%; --curve-left: -25%; --curve-width: 78%; --curve-angle: 13deg; --curve-opacity: .64; }
.sequence-contours i:nth-child(4) { --curve-top: 80%; --curve-left: -26%; --curve-width: 67%; --curve-angle: 15deg; --curve-opacity: .28; }
.sequence-contours i:nth-child(5) { --curve-top: 76%; --curve-left: 74%; --curve-width: 44%; --curve-angle: -14deg; --curve-opacity: .32; }

@keyframes sequence-drift {
  from { opacity: 0; transform: translate3d(-3%, 25px, 0) rotate(calc(var(--curve-angle) - 5deg)); }
  to { opacity: var(--curve-opacity); transform: translate3d(0, 0, 0) rotate(var(--curve-angle)); }
}

.sequence-scene {
  position: relative;
  overflow-x: clip;
  background: #171715;
  border-top: 1px solid #39352a;
}

.sequence-vehicle { background: #151515; }
.sequence-world { background: #181715; }

.sequence-stage {
  position: relative;
  display: grid;
  min-height: min(680px, calc(100svh - var(--header-height)));
  align-items: center;
  padding-block: clamp(30px, min(4.5vw, 7svh), 70px);
}

.sequence-stage-inner {
  display: grid;
  grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr);
  align-items: center;
  gap: clamp(16px, 4vw, 60px);
}

.sequence-copy { position: relative; z-index: 1; }
.sequence-copy h2 {
  max-width: 11ch;
  margin-block: 15px 25px;
  font: 650 clamp(2.9rem, 5.05vw, 5.5rem)/.94 var(--font-display);
  letter-spacing: -.078em;
  text-wrap: balance;
}

.sequence-copy p:not(.portfolio-kicker) {
  max-width: 30ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.sequence-options {
  display: grid;
  max-width: 290px;
  border-block-end: 1px solid #49463e;
}

.sequence-options button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-block-start: 1px solid #49463e;
  border-inline-start: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1.25 var(--font-display);
  text-align: left;
}

.sequence-options button span { opacity: .52; }
.sequence-options button:hover { background: #201e19; }
.sequence-options button[aria-pressed="true"] { color: var(--gold); border-inline-start-color: var(--gold); }
.sequence-options button[aria-pressed="true"] span { opacity: 1; }
.sequence-options button:focus-visible { outline-offset: -3px; }

.sequence-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 13px;
  margin-top: 17px;
  color: var(--ink);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 650;
}

.sequence-link span, .sequence-link:hover { color: var(--gold); }
.sequence-link-muted { display: flex; width: fit-content; margin-top: 0; color: var(--muted); }
.sequence-world .sequence-stage-inner > .sequence-link { margin-top: -7px; }
.sequence-preview { position: relative; min-width: 0; }
.sequence-preview-media { position: relative; }
.sequence-switcher .sequence-preview-media { aspect-ratio: 1.72; }
.sequence-preview-panel { position: absolute; inset: 0; display: grid; place-items: center; }
.sequence-preview-panel img { width: 100%; height: 100%; object-fit: contain; }
.sequence-web-art { width: 100%; height: 100%; }
.sequence-web-art .web-device-composition {
  transform: perspective(950px) rotateX(var(--art-y, 0deg)) rotateY(var(--art-x, 0deg));
  transition: transform 210ms ease-out;
}
.sequence-preview figcaption {
  min-height: 1.5em;
  margin-top: 12px;
  color: #c1b9a7;
  font: 500 .73rem/1.5 var(--font-mono);
  text-align: center;
}

.sequence-mini-world, .sequence-vehicle-art, .sequence-world-art { display: grid; width: 100%; }
.sequence-mini-world img, .sequence-vehicle-art img, .sequence-world-art img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sequence-vehicle-art { aspect-ratio: 1068 / 636; }
.sequence-world-art { aspect-ratio: 1320 / 583; }
.sequence-vehicle .sequence-preview { opacity: var(--vehicle, 1); }
.sequence-vehicle-art {
  transform: translate3d(calc((1 - var(--vehicle, 1)) * 50px), calc((1 - var(--vehicle, 1)) * 20px), 0)
    scale(calc(.962 + .038 * var(--vehicle, 1)));
}

.sequence-wire {
  clip-path: inset(0 0 0 calc(100% - 29% * var(--wire, 1)));
}
.sequence-car { clip-path: inset(0 calc(29% * var(--wire, 1)) 0 0); }

.sequence-world .sequence-stage-inner { grid-template-columns: minmax(0, 1fr); gap: 23px; justify-items: center; }
.sequence-world .sequence-copy { text-align: center; }
.sequence-world .sequence-copy h2 { max-width: none; margin: 10px 0 6px; }
.sequence-world .portfolio-kicker { justify-content: center; }
.sequence-world .sequence-preview { width: min(100%, 930px, calc((100svh - 360px) * 2.2)); }
.sequence-world-base {
  opacity: var(--foundation, 1);
  transform: translate3d(0, calc((1 - var(--foundation, 1)) * 45px), 0);
}

.sequence-world-roof {
  opacity: var(--roof-in, 1);
  transform: translate3d(0, calc((1 - var(--roof-seat, 1)) * -12%), 0);
}

.sequence-meter { display: none; }
.sequence-scene.is-scrubbed { min-height: calc(100svh - var(--header-height) + var(--scene-runway)); }
.sequence-scene.is-scrubbed .sequence-stage {
  position: sticky;
  top: calc(var(--header-height) + 1px);
  min-height: calc(100svh - var(--header-height) - 1px);
}

.sequence-scene.is-scrubbed .sequence-meter {
  position: absolute;
  right: max(20px, calc((100% - 1312px) / 2));
  bottom: 14px;
  display: block;
  width: 54px;
  height: 2px;
  background: #484335;
}

@media (min-width: 761px) and (max-height: 760px) {
  .sequence-stage { padding-block: 32px; }
}

.sequence-meter::before {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(var(--stage-progress, 0));
  transform-origin: left;
  content: "";
}

.sequence-switcher .sequence-copy, .sequence-late-copy, .sequence-world .sequence-copy {
  opacity: calc(.06 + .94 * var(--chapter-copy, 1));
  transform: translate3d(0, calc((1 - var(--chapter-copy, 1)) * 21px), 0);
}

.sequence-copy:focus-within { opacity: 1; transform: none; }
.sequence-world .sequence-preview figcaption { opacity: var(--roof-seat, 1); }
.sequence-switcher .sequence-preview figcaption { opacity: var(--chapter-copy, 1); }
.sequence-switcher .sequence-preview:has([data-panel]:not([data-panel="web"]):not([hidden])) figcaption { opacity: 1; }

@media (max-width: 760px) {
  .sequence-intro h1 { font-size: clamp(3.5rem, 13.8vw, 6.6rem); }
  .sequence-stage { padding-block: 30px 38px; }
  .sequence-stage-inner { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sequence-copy h2 { max-width: none; margin-block: 10px 14px; font-size: clamp(2.58rem, 9.7vw, 4.75rem); }
  .sequence-options { max-width: none; }
  .sequence-options button { min-height: 44px; padding-block: 6px; }
  .sequence-link { margin-top: 6px; }
  .sequence-preview figcaption { margin-top: 7px; font-size: .68rem; }
  .sequence-world .sequence-preview { width: 100%; }
  .sequence-world .sequence-copy h2 { max-width: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .sequence-contours { transform: none; }
  .sequence-contours i { animation: none; }
  .sequence-web-art .web-device-composition { transform: none; }
}