.lift {
  --lift-stage-color: #fbfbfb;
  --factory-tone: calc(var(--factory-light, 0) * 100%);
  --sea-tone: calc(var(--sea-alpha, 0) * 100%);
  --scene-tone: max(var(--sea-tone), var(--factory-ink, 0%));
  --lift-floor: color-mix(in srgb, #141619, #091722 var(--factory-tone));
  --lift-ink: color-mix(in srgb, #12151a, #f7fbff var(--scene-tone));
  --lift-muted: color-mix(in srgb, #434952, #d6e5f0 var(--scene-tone));
  --lift-line: color-mix(in srgb, #d3d5d8, #d4e8f973 var(--scene-tone));
  --lift-accent: color-mix(in srgb, #aa202a, #ffc0b7 var(--scene-tone));
  position: relative;
  background: var(--lift-stage-color);
  color: var(--lift-ink);
  color-scheme: light;
}

.lift-screen {
  position: relative;
  height: 100svh;
  min-height: 22rem;
  overflow: hidden;
  isolation: isolate;
}

.lift-screen::before,
.factory-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lift-screen::before {
  content: '';
  opacity: var(--rig-light, 0);
  background: radial-gradient(ellipse at 62% 63%, #fff 8%, #f6f8fa 49%, #d9e1e8 100%);
}
.factory-light {
  opacity: var(--factory-light, 0);
  background:
    radial-gradient(ellipse 68% 69% at 67% 78%, #315669 0%, #1b3345 36%, transparent 76%),
    linear-gradient(155deg, #0a131e 18%, #142232 65%, #09131e);
}

.is-lift-scroll { height: 1520svh; }
.is-lift-scroll .lift-screen { position: sticky; top: 0; }
.lift-sea-anchor { position: absolute; top: 0; left: 0; }
.is-lift-scroll .lift-sea-anchor { top: calc((100% - 100svh) * var(--sea-start, .32) + 1px); }

.lift-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1rem, 4vw, 4rem);
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
  padding-top: clamp(2rem, 8.5svh, 5.5rem);
}

.lift-head::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--gutter)) -3.5rem;
  opacity: var(--factory-contrast, 0);
  background: linear-gradient(
    color-mix(in srgb, #fbfbfb, #08121d var(--factory-ink, 0%)) 56%,
    transparent
  );
  pointer-events: none;
}

.lift-kicker,
.lift-status,
.lift-foot {
  font: 500 .6875rem/1.5 var(--typeface);
  letter-spacing: .075em;
}

.lift-kicker { margin: 0 0 .8125rem; color: var(--lift-muted); }
.lift-kicker span { color: var(--lift-accent); margin-inline-end: .55em; font-family: var(--mono); }

.lift-story { display: none; }
[data-chapter='1'] .lift-story:nth-of-type(1),
[data-chapter='2'] .lift-story:nth-of-type(2),
[data-chapter='3'] .lift-story:nth-of-type(3),
[data-chapter='4'] .lift-story:nth-of-type(4),
[data-chapter='5'] .lift-story:nth-of-type(5) { display: block; }

.lift-head h2 {
  margin: 0;
  font-size: clamp(2.7rem, 4.6vw, 5.15rem);
  font-weight: var(--title-weight);
  line-height: 1.18;
  letter-spacing: var(--title-tracking);
}

.lift-story p {
  max-width: 28em;
  margin: .75rem 0 0;
  color: var(--lift-muted);
  font-size: clamp(.875rem, 1.15vw, 1.0625rem);
  line-height: 1.8;
  text-wrap: pretty;
}

.lift-controls { min-width: 25rem; }
.lift-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--lift-line);
}
.lift-steps button {
  display: grid;
  justify-items: start;
  gap: .3125rem;
  width: 100%;
  min-height: 3rem;
  padding: .3rem .75rem .6875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--lift-muted);
  background: transparent;
  font-size: .75rem;
  white-space: nowrap;
  cursor: pointer;
}
.lift-steps button span:first-child { font: 700 .625rem/1 var(--mono); }
.lift-steps button:hover { color: var(--lift-ink); background: color-mix(in srgb, var(--lift-muted) 12%, transparent); }
.lift-steps button[aria-current='step'] { color: var(--lift-ink); border-color: var(--lift-accent); font-weight: 600; }
.lift-steps button[aria-current='step'] span:first-child { color: var(--lift-accent); }
.lift:not(.is-lift-scroll) .lift-controls { display: none; }

.lift-status { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8125rem; color: var(--lift-muted); }
.lift-status p { margin: 0; }
.lift-status p:last-child { letter-spacing: .04em; }
.lift-status p:last-child span { color: var(--lift-accent); }

.lift-progress { height: 1px; background: var(--lift-line); margin-top: .625rem; }
.lift-progress::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--lift-accent);
  transform: scaleX(var(--lift-progress, 0));
  transform-origin: left;
}

.lift-stage {
  position: absolute;
  left: calc(50% - var(--dispatch-progress, 0) * 8%);
  bottom: calc(var(--stage-bottom, 0%) + var(--dispatch-progress, 0) * var(--dispatch-rise, 46svh));
  width: calc(min(100%, 100rem, 165svh) * (1 - var(--dispatch-progress, 0) * .14));
  transform: translateX(-50%);
}

.lift-stage::before {
  content: '';
  position: absolute;
  top: 86.29%;
  inset-inline: -100vw;
  bottom: -100vh;
  z-index: -1;
  background: var(--lift-floor);
  opacity: calc(1 - var(--sea-floor, 0));
}

.lift-stage svg { display: block; width: 100%; }
.lift[data-sea-phase] .lift-stage svg { overflow: visible; }

.factory-bay-roof { stop-color: color-mix(in srgb, #e9edef, #223648 var(--factory-tone)); }
.factory-bay-wall { stop-color: color-mix(in srgb, #f5f7f8, #2d4a5c var(--factory-tone)); }
.factory-bay-base { stop-color: color-mix(in srgb, #f9fafa, #182e3d var(--factory-tone)); }
.factory-floor-back { stop-color: color-mix(in srgb, #e4eaed, #4e687a var(--factory-tone)); }
.factory-floor-front { stop-color: color-mix(in srgb, #f7f9fa, #163042 var(--factory-tone)); }
[data-factory-env] > path:not(.factory-fill),
[data-factory-env] > g:not(.factory-beams) {
  opacity: calc(1 - var(--factory-light, 0) * .73);
}
.factory-beams { opacity: var(--factory-light, 0); }
.factory-beams path:first-child { filter: blur(5px); }
.factory-sheen {
  opacity: var(--steel-sheen, 0);
  transform: translateX(calc(var(--steel-sweep, 0) * 568px)) skewX(-17deg);
}
.factory-weld { opacity: var(--factory-weld, 0); }
.factory-status-light {
  opacity: var(--equipment-light, 0);
  filter: drop-shadow(0 0 3px #a5ffc1);
}

.dispatch-mark {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 18%;
  margin: 0;
  color: #e8e9ec;
  font: 800 clamp(3.8rem, 12vw, 13.5rem)/.83 Arial, sans-serif;
  letter-spacing: -.065em;
  white-space: nowrap;
  opacity: var(--dispatch-progress, 0);
  transform: translateX(calc(34% - var(--dispatch-progress, 0) * 15% - var(--dispatch-drift, 0) * 38%));
}
.dispatch-copy {
  position: absolute;
  inset: 86.29% 0 auto;
  display: grid;
  grid-template-columns: minmax(8rem, .85fr) minmax(0, 2fr) minmax(9rem, 1fr);
  align-items: start;
  gap: 1rem;
  padding: clamp(1.25rem, 7svh, 4rem) var(--gutter) 0;
  color: #fff;
  --dispatch-copy-in: clamp(0, calc((var(--dispatch-progress, 0) - .47) * 1.89), 1);
  opacity: var(--dispatch-copy-in);
  transform: translateY(calc((1 - var(--dispatch-copy-in)) * 2.25rem));
  pointer-events: none;
}
.dispatch-copy > span { color: #bac1cb; font: 650 .625rem/1.45 var(--mono); letter-spacing: .11em; }
.dispatch-detail > span { color: #bac1cb; font: 500 .6875rem/1.5 var(--typeface); letter-spacing: .07em; }
.dispatch-copy strong { font-size: clamp(2rem, 5.4vw, 5.6rem); font-weight: var(--title-weight); line-height: 1.16; letter-spacing: var(--title-tracking); }
.dispatch-detail { align-self: end; }
.dispatch-detail p { margin: 0 0 .65rem; color: #e0e3e9; font-size: .875rem; line-height: 1.6; }
.dispatch-arrow { color: #ff9c91; padding-inline: .25em; }

.lift-foot {
  position: absolute;
  inset-inline-start: var(--gutter, 4vw);
  bottom: clamp(.75rem, 2.2svh, 1.75rem);
  margin: 0;
  color: #dadde2;
}

.lift-foot span { color: #aab0b7; padding-inline: .4rem; }
.lift[data-sea-phase='road'] .lift-foot {
  color: color-mix(in srgb, #dadde2, #414955 calc(var(--sea-floor, 0) * 100%));
}

.lift[data-sea-shot] .lift-controls,
.lift[data-sea-shot] .lift-foot {
  opacity: var(--sea-copy, 1);
}
.lift-copy { opacity: calc(var(--sea-copy, 1) * (1 - var(--dispatch-progress, 0) * .92)); }
.lift[data-sea-shot] .lift-copy { transform: translateY(calc((1 - var(--sea-copy, 1)) * 1.5rem)); }
.lift:has(.lift-controls :focus-visible) .lift-head { z-index: 3; }
.lift[data-sea-shot] .lift-controls:has(:focus-visible) { opacity: 1; }
.lift[data-sea-shot] .lift-controls { pointer-events: none; }
.lift[data-sea-controls] .lift-controls,
.lift[data-sea-shot] .lift-controls:has(:focus-visible) { pointer-events: auto; }
.lift[data-sea-shot='cloud'] .lift-controls:has(:focus-visible) {
  --lift-ink: #12151a;
  --lift-muted: #434952;
  --lift-line: #9aa4ad;
  --lift-accent: #aa202a;
  background: #fbfbfb;
  padding: .5rem;
}

.sea-hull { filter: saturate(1.14) contrast(1.04); }
.sea-cut-light {
  --edge-in: clamp(0, calc((var(--sea-progress, 0) - .262) * 68), 1);
  --edge-out: clamp(0, calc((.386 - var(--sea-progress, 0)) * 47), 1);
  position: absolute;
  top: var(--sea-wipe, 100%);
  inset-inline: 0;
  height: clamp(1rem, 6svh, 4rem);
  visibility: hidden;
  opacity: calc(var(--edge-in) * var(--edge-out));
  background:
    radial-gradient(ellipse 38% 83% at 50% 0%, #b1d7f15c, transparent 87%),
    linear-gradient(180deg, #071b33bb, #0b2b4940 40%, transparent 96%);
  pointer-events: none;
}
.lift[data-sea-shot='match'] .sea-cut-light { visibility: visible; }

.road-notes {
  --road-note-in: clamp(0, calc((var(--sea-progress, 0) - .228) * 34), 1);
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding-inline: var(--gutter);
  clip-path: inset(0 0 calc(100% - var(--sea-wipe, 100%)) 0);
  visibility: hidden;
  pointer-events: none;
}
.lift:is([data-sea-shot='road'], [data-sea-shot='match']) .road-notes { visibility: visible; }
.road-notes > * {
  max-width: 17rem;
  opacity: var(--road-note-in);
  transform: translateY(calc((1 - var(--road-note-in)) * 1.2rem));
}
.road-notes > p { margin: 34svh 0 0; }
.road-notes > div { justify-self: end; width: min(100%, 17rem); margin-top: 23svh; }
.road-notes p { color: #444d59; font-size: .875rem; line-height: 1.65; text-wrap: pretty; }
.road-notes div p { margin: .35rem 0 0; }
.road-notes span { display: block; margin-bottom: .55rem; color: #9b2a30; font: 500 .6875rem/1.5 var(--typeface); letter-spacing: .08em; }
.road-notes strong { color: #181d24; font-size: clamp(1.125rem, 2.4vw, 2.125rem); font-weight: var(--title-weight); line-height: 1.2; }

.sea-notes {
  --note-progress: clamp(0, calc((var(--sea-progress, 0) - .761) * 16), 1);
  position: absolute;
  z-index: 1;
  top: 34%;
  inset-inline: 0;
  bottom: 13%;
  display: grid;
  grid-template-columns: 1fr clamp(6.75rem, 11vw, 11rem) 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 1rem;
  width: min(calc(100% - 2 * var(--gutter)), 56rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  visibility: hidden;
  pointer-events: none;
}
.lift[data-sea-shot='wide'] .sea-notes { visibility: visible; }
.sea-notes li {
  --note-in: clamp(0, calc(var(--note-progress) * 1.35 - var(--note-delay, 0)), 1);
  display: grid;
  gap: .28rem;
  justify-self: end;
  text-align: right;
  color: #f5fbff;
  text-shadow: 0 1px .85rem #011220;
  opacity: calc(var(--note-in) * var(--sea-copy, 1));
  transform: translateY(calc((1 - var(--note-in)) * 1.3rem));
}
.sea-notes li:nth-child(2) { --note-delay: .12; grid-column: 3; justify-self: start; text-align: left; }
.sea-notes li:nth-child(3) { --note-delay: .24; grid-area: 2 / 1 / 3 / -1; justify-self: center; text-align: center; }
.sea-notes span { color: #ffc6bb; font: 650 .625rem/1 var(--mono); letter-spacing: .15em; }
.sea-notes strong { font-size: clamp(.875rem, 1.45vw, 1.25rem); font-weight: var(--title-weight); line-height: 1.35; }
.sea-notes small { color: #e0eaf4; font-size: clamp(.6875rem, 1vw, .875rem); }

.cloud-flight {
  --fly: var(--sea-cloud-travel, 0);
  --plane-entry: min(1, calc(var(--fly) * 3.5));
  --plane-exit: clamp(0, calc((var(--fly) - .64) * 4.7), 1);
  --white-wipe: clamp(0, calc((var(--fly) - .34) * 1.83), 1);
  --cloud-edge: calc(-14% + var(--arrival-reveal, 0) * 128%);
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: var(--sea-cloud, 0);
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 20%, #aac2e5, transparent 58%),
    linear-gradient(120deg, #405c89, #7c9bbc 54%, #dbe8ef);
  mask-image: linear-gradient(112deg, transparent calc(var(--cloud-edge) - 7%), #000 calc(var(--cloud-edge) + 7%));
}
.lift[data-sea-shot='cloud'] .cloud-flight { visibility: visible; }
.cloud-flight::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(105deg, #fbfbfb 45%, #e5eef5 100%);
  clip-path: polygon(0 0, calc(-35% + var(--white-wipe) * 147%) 0,
    calc(-7% + var(--white-wipe) * 147%) 100%, 0 100%);
}
.cloud-bank {
  position: absolute;
  inset: -28% -22%;
  background: url('assets/cloud-bank.webp') center center / cover no-repeat;
}
.cloud-bank-far {
  opacity: .95;
  transform: translate(calc(-12% + var(--fly) * 22%), calc(19% - var(--fly) * 48%))
    scale(calc(1.2 - var(--fly) * .31));
}
.cloud-bank-near {
  z-index: 3;
  inset: auto -36% -55% 32%;
  height: 112%;
  opacity: .88;
  mask-image: radial-gradient(ellipse at 49% 55%, #000 35%, #000e 49%, transparent 73%);
  transform: translate(calc(24% - var(--fly) * 37%), calc(16% - var(--fly) * 30%)) rotate(161deg);
}
.cloud-plane {
  position: absolute;
  z-index: 2;
  top: 52%;
  left: calc(-50% + var(--plane-entry) * 100% + var(--plane-exit) * 111%);
  width: min(99vw, 158svh);
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg) scale(calc(1 + var(--fly) * .28));
  filter: drop-shadow(-.9rem .8rem 1.15rem #17315a69);
}

@media (max-width: 760px) {
  .is-lift-scroll { height: 1380svh; }
  .lift-head { grid-template-columns: 1fr; padding-top: clamp(2.75rem, 9svh, 5.5rem); }
  .lift-head h2 { font-size: clamp(2.35rem, 9.8vw, 4.25rem); }
  .lift-story { min-height: 7.25rem; }
  .lift-story p { margin-top: .625rem; }
  .lift-controls { min-width: 0; max-width: 31rem; }
  .lift-steps button { padding-inline: .25rem; font-size: .6875rem; }
  .lift-status { margin-top: .625rem; }
  .lift-stage { --stage-bottom: 17%; --dispatch-rise: 24svh; left: 50%; width: max(100%, min(112%, 27rem)); }
  .dispatch-copy {
    inset-inline: 50% auto;
    width: min(100%, 100vw);
    grid-template-columns: minmax(0, 1fr) auto;
    translate: -50% 0;
  }
  .dispatch-copy > span:first-child { grid-column: 1 / -1; }
  .dispatch-copy strong { font-size: clamp(1.55rem, 7.5vw, 2.65rem); }
  .dispatch-detail p { display: none; }
  .dispatch-detail > span { white-space: nowrap; }

  .lift[data-sea-phase] .lift-head {
    gap: .8rem;
    padding-top: clamp(2.5rem, 7svh, 4.75rem);
  }
  .lift[data-sea-phase] .lift-story { min-height: 6rem; }
  .lift[data-sea-phase] .lift-head::before {
    --sea-panel: color-mix(in srgb, #fbfbfbfa, #021423e8 var(--sea-tone));
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 calc(-1 * var(--gutter)) -2rem;
    background: linear-gradient(var(--sea-panel) calc(100% - 2rem), transparent);
    opacity: var(--sea-copy, 1);
    pointer-events: none;
  }
  .lift[data-sea-phase] .lift-head:has(:focus-visible)::before { opacity: 1; }
  .road-notes { display: none; }
  .sea-notes {
    top: 43%;
    bottom: 9%;
    grid-template-columns: minmax(0, 1fr) clamp(6rem, 32vw, 9rem) minmax(0, 1fr);
    gap: .5rem;
  }
  .sea-notes small { display: none; }
  .cloud-bank { inset: -17% -74%; }
  .cloud-bank-near { inset: auto -62% -49% -42%; height: 98%; }
  .cloud-plane { width: 122vw; }
}

@media (max-height: 470px) {
  .lift-screen { min-height: 0; }
  .lift .lift-head { gap: .5rem; padding-top: .85rem; }
  .lift .lift-story { min-height: 0; }
  .lift-kicker { margin-bottom: .3rem; }
  .lift-head h2 { font-size: clamp(1.65rem, 5vw, 3rem); }
  .lift-story p { margin-top: .3rem; font-size: .75rem; line-height: 1.5; }
  .lift-steps button { min-height: 2.2rem; padding-block: .18rem .32rem; }
  .lift-status, .lift-progress { margin-top: .35rem; }
  .lift-stage { --stage-bottom: 0%; width: min(100%, 40rem, 165svh); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-flight { display: none; }
}

.sea-film {
  overflow: hidden;
  touch-action: pinch-zoom;
}
.sea-film .skip-link,
.sea-film .site-header,
.sea-film .site-footer,
.sea-film main > :not(.lift),
.sea-film :is(.lift-head, .road-notes, .sea-notes, .lift-foot) { display: none; }
.sea-film .lift-screen { min-height: 0; }
@media (max-height: 470px) {
  .sea-film .lift-stage { width: min(100%, 40rem); }
}