/* The title card's camera move into the film, and where the mission band waits
   while it happens. UI-dev owns every other layout. */
.portal-ready .hero {
  padding-top: 0;
  height: calc(var(--portal-pin-height, 100svh) + 200svh);
  overflow-anchor: none;
}
.portal-ready .hero-portal-pin {
  position: sticky;
  top: var(--portal-pin-top, 0px);
  min-height: 100svh;
  padding-top: var(--marquee-height);
  background: var(--ink);
}
.portal-ready .hero .vault-scene {
  animation: none;
  transform-origin: 0 0;
  will-change: transform;
}
body.portal-ready .hero .vault-art {
  animation: none;
  translate: none;
  scale: none;
}
.portal-ready .hero .vault-stage::after { animation: none; }
/* Depth inside the move: the light around the diamond swells ahead of the wall it falls
   on, and the dust in the air rises past both. */
.portal-ready .hero .vault-aura { scale: calc(1 + var(--camera, 0) * .2); }
.portal-ready .hero .vault-dust { translate: 0 calc(var(--camera, 0) * -5%); }
.portal-ready .reel {
  margin-top: -100svh;
  /* Clear only where it overlaps the title card. From there down it is the reel's
     own black, so the film still closes into black and the next section rises out of it. */
  background: linear-gradient(to bottom, transparent 100svh, #090a0d 100svh);
  z-index: 5;
  pointer-events: none;
  overflow-anchor: none;
}
/* Fixed while approaching, then the original sticky projector at exactly y=0. */
body.portal-ready .reel-stage {
  animation: none;
  clip-path: circle(var(--portal-radius, 0px) at var(--portal-x, 50%) var(--portal-y, 46%));
  pointer-events: none;
}
.portal-ready .reel-stage.is-entering { position: fixed; inset: 0; }
.portal-ready .reel.is-open, .portal-ready .reel.is-open .reel-stage { pointer-events: auto; }
/* The film's own top row sits where the marquee is: once the film has the screen, the marquee goes. */
body.portal-open .marquee:not(:focus-within) { opacity: 0; pointer-events: none; }
.portal-ready .reel .gate { transform: scale(var(--portal-gate-scale, 1)); }
.portal-ready .reel :is(.reel-top, .reel-sub, .reel-strip, .perfs) { opacity: var(--portal-ui, 1); }
/* Retain UI-dev's original iris-out into the crew files. */
@supports (animation-timeline: view()) {
  body.portal-ready .reel-stage:not(.is-entering) {
    animation: reel-iris-out linear forwards;
    animation-timeline: --reel;
    animation-range: exit 0% exit 70%;
  }
}

/* ---------- the mission band, after the film ----------
   On a screen the artwork fills, the brief and the mission strip leave the title
   card (so the camera starts with the first scroll) and are read here instead, on
   the reel's black. The film closes into that black and the crew's ground fades up
   out of it, so there is no edge on either side: nothing here draws a line. */
.mission-later {
  position: relative;
  /* The whole of it fits one window under the marquee, so there is a place in the scroll
     where every line of it has arrived and none has begun to leave. */
  padding-block: clamp(64px, 10.5vh, 120px) clamp(56px, 10vh, 120px);
  background: #090a0d;
}
/* Here the band has a screen to itself, so it is set like a scene and not like a
   caption: the line is the picture, its second half in the one red ink; the copy is
   typed at a size that can be read from a seat; and the three steps stand in a row
   in the display face, numbered, the way the priors do further down. */
.mission-later .hero-brief {
  background: none; box-shadow: none; clip-path: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(24px, 3.4vw, 48px) clamp(32px, 6vw, 96px); padding-block: 0;
}
.mission-later .hero-brief > div:first-child { grid-column: 1 / -1; }
.mission-later .hero-brief .label { font-size: 13px; letter-spacing: .24em; }
.mission-later .hero-brief > div > p { margin-top: 20px; font-size: clamp(60px, min(10.6vw, 17vh), 176px); line-height: .86; letter-spacing: .01em; }
.mission-later .brief-copy { font: clamp(17px, 1.5vw, 23px)/1.6 var(--f-typed); color: var(--bone); }
.mission-later .brief-actions { justify-items: stretch; gap: 14px; }
.mission-later .brief-actions .btn { min-height: 58px; padding: 0 28px; font-size: 14px; }
.mission-later .brief-film { font-size: 12px; text-align: center; }
.mission-later .mission-strip {
  border-block: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 0;
  width: min(1240px, 100% - 32px); margin: clamp(36px, 6vh, 64px) auto 0; padding: 0;
}
.mission-later .mission-strip > span:not(.tc-credit) {
  padding: 6px 24px 0; border-left: var(--rule) solid var(--hair);
  font: clamp(38px, 4.6vw, 72px)/.9 var(--f-display); letter-spacing: .02em; color: var(--paper);
}
.mission-later .mission-strip > span:first-child { padding-left: 0; border-left: 0; }
.mission-later .mission-strip b { display: block; margin-bottom: 14px; font: 700 13px/1 var(--f-type); letter-spacing: .24em; color: var(--stamp-lit); }
.mission-later .mission-strip i { display: none; }
.mission-later .mission-strip .tc-credit { margin-bottom: 6px; }
.mission-later .brief-film span { display: inline-block; rotate: 180deg; }   /* the film is above now */
@media (max-width: 780px) {
  .mission-later .hero-brief, .mission-later .mission-strip { grid-template-columns: minmax(0, 1fr); }
  .mission-later .brief-actions { display: grid; justify-items: start; }
  .mission-later .mission-strip { row-gap: 22px; }
  .mission-later .mission-strip > span:not(.tc-credit) { padding-left: 0; border-left: 0; }
}
/* Its lines arrive one after another as it comes up (data-motion, scroll-cinema.js). */
/* The crew's ground comes up out of that black on a long eased ramp rather than a
   short straight one: a dissolve, with no place the eye can find an edge. */
.portal-ready .crew {
  background: linear-gradient(180deg,
    #090a0d 0, rgba(9,10,13,.93) 70px, rgba(9,10,13,.78) 150px, rgba(9,10,13,.56) 240px,
    rgba(9,10,13,.33) 330px, rgba(9,10,13,.15) 420px, rgba(9,10,13,.04) 500px, rgba(9,10,13,0) 560px);
}

@media print {
  .mission-later { padding-block: 0; background: none; }
  .portal-ready .crew { background: none; }
  .portal-ready .hero { height: auto; }
  .portal-ready .hero-portal-pin { position: static; min-height: 0; }
  .portal-ready .hero .vault-scene { transform: none !important; }
  .portal-ready .reel { margin-top: 0; }
  body.portal-ready .reel-stage { position: relative; clip-path: none; }
}