/* The finale: one sticky screen over a long scroll. The game comes back for the last fight, ends one
   way or the other, the television switches off, the credits roll, and the table becomes the Exe.Eyes
   mark. One family throughout: Geist, its mono for readouts, Mincho for the Japanese. */
.finale_wrap {
  --fi-ink: #ece7dd; --fi-dim: rgba(236, 231, 221, .56); --fi-faint: rgba(236, 231, 221, .16); --fi-green: #a6f3c9; --fi-alarm: #ff3b22; --fi-void: #06080a;
  --fi-sans: 'MGS Geist', 'Helvetica Neue', Arial, sans-serif; --fi-mono: 'MGS Geist Mono', ui-monospace, monospace; --fi-jp: 'MGS Mincho', 'Yu Mincho', serif;
  --fi-gutter: clamp(16px, 2.4vw, 36px); --fi-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; z-index: 4; margin-top: -100vh; height: 1300vh; color: var(--fi-ink); font-family: var(--fi-sans); font-weight: 300;
}
.finale_wrap .finale_contain { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; opacity: var(--cut, 0); transform: translate3d(0, var(--hold, 0px), 0); }
/* the picture tube: switching off, everything collapses to a bright line, then a point */
.finale_wrap .finale_tv { position: absolute; inset: 0; overflow: hidden; background: var(--fi-void); transform: scale(var(--tvx, 1), var(--tvy, 1)); filter: brightness(var(--tvb, 1)); }
.finale_wrap .finale_tv::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); }
.finale_wrap .finale_stage { position: absolute; inset: 0; }
.finale_wrap .finale_stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 1; }
.finale_wrap .finale_osd { position: absolute; z-index: 10; top: 7vh; right: 8vw; margin: 0; font-family: 'MGS VT323', ui-monospace, monospace; font-size: clamp(30px, 3.4vw, 50px); letter-spacing: .06em;
  color: #2fe35a; text-shadow: 0 0 8px rgba(47, 227, 90, .55); opacity: 0; transition: opacity .2s; }
.finale_wrap .finale_osd.is-on { opacity: 1; }

/* the fight: the area's name, as the game shows it, and what is left to hit */
.finale_wrap .finale_area { position: absolute; z-index: 3; left: var(--fi-gutter); top: calc(var(--fi-gutter) + 92px); max-width: min(560px, 44vw); opacity: 0; transform: translateY(10px); transition: opacity .6s, transform 1.2s var(--fi-out); }
.finale_wrap .finale_area.is-on { opacity: 1; transform: none; }
.finale_wrap .finale_jp { margin: 0 0 14px; font-family: var(--fi-jp); font-weight: 500; font-size: 13px; letter-spacing: .32em; color: var(--fi-dim); }
.finale_wrap .finale_area_title { margin: 0 -.38em 0 0; font-weight: 300; text-transform: uppercase; letter-spacing: .38em; line-height: 1.15; font-size: clamp(22px, 2.3vw, 38px); }
.finale_wrap .finale_where { margin: 16px 0 0; font-family: var(--fi-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fi-dim); line-height: 1.8; }
.finale_wrap .finale_goals { margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--fi-faint); list-style: none; display: grid; gap: 8px;
  font-family: var(--fi-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fi-dim); }
.finale_wrap .finale_goals li { display: flex; gap: 14px; align-items: center; transition: color .4s; }
.finale_wrap .finale_goals li span { color: var(--fi-faint); }
.finale_wrap .finale_goals li.is-now { color: var(--fi-ink); }
.finale_wrap .finale_goals li.is-now span { color: var(--fi-alarm); }
.finale_wrap .finale_goals li.is-done { color: var(--fi-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

/* the call: set like the voice, the name pulled wider as it's shouted */
.finale_wrap .finale_cry { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.4vh; pointer-events: none; text-align: center; padding: 0 var(--fi-gutter); }
.finale_wrap .finale_cry_line { margin: 0; opacity: 0; transition: opacity .12s; }
.finale_wrap .finale_cry_line.is-on { opacity: 1; }
.finale_wrap .is-ask { font-size: clamp(22px, 2.1vw, 34px); letter-spacing: -.02em; color: var(--fi-dim); }
.finale_wrap .is-name { font-weight: 500; font-size: clamp(15px, 1.25vw, 20px); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; }
.finale_wrap .is-long { font-weight: 500; font-size: clamp(56px, min(9.4vw, 17vh), 190px); line-height: .9; text-transform: uppercase; color: var(--fi-alarm); letter-spacing: .02em; margin-right: -.02em;
  transition: opacity .1s, letter-spacing 1.5s cubic-bezier(.2, .7, .1, 1), margin-right 1.5s cubic-bezier(.2, .7, .1, 1); }
.finale_wrap .is-long.is-on { letter-spacing: .2em; margin-right: -.2em; }
.finale_wrap .finale_over { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14vh; display: grid; justify-items: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .8s, visibility 0s .8s; }
.finale_wrap .finale_over.is-on { opacity: 1; visibility: visible; transition: opacity .8s; }
.finale_wrap .finale_over_title { margin: 0 -.8em 0 0; font-family: var(--fi-mono); font-size: 11px; letter-spacing: .8em; text-transform: uppercase; }
.finale_wrap .finale_over_actions { display: flex; gap: 10px; }
.finale_wrap .finale_btn { font: inherit; padding: 12px 26px; border: 1px solid var(--fi-ink); background: none; color: var(--fi-ink); cursor: pointer;
  font-weight: 500; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; transition: background .3s, color .3s; }
.finale_wrap .finale_btn:hover { background: var(--fi-ink); color: var(--fi-void); }
.finale_wrap .finale_btn.is-quiet { border-color: var(--fi-faint); color: var(--fi-dim); }
/* REX down: the other ending */
.finale_wrap .finale_down { position: absolute; z-index: 3; left: 0; right: 0; top: 22vh; margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center;
  font-family: var(--fi-mono); font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--fi-dim); opacity: 0; transition: opacity .8s; }
.finale_wrap .finale_down span { font-family: var(--fi-sans); font-weight: 500; font-size: clamp(56px, min(9vw, 16vh), 180px); letter-spacing: .2em; margin-right: -.2em; line-height: .9; color: var(--fi-ink); }
.finale_wrap .finale_down.is-on { opacity: 1; }

/* the staff roll */
.finale_wrap .finale_roll { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.finale_wrap .finale_roll_track { position: absolute; left: 50%; top: 100%; width: min(640px, calc(100% - 2 * var(--fi-gutter))); text-align: center; transform: translate(-50%, var(--roll, 0px)); }
.finale_wrap .finale_roll_title { margin: 0; font-weight: 300; font-size: clamp(36px, 3.6vw, 60px); line-height: 1; letter-spacing: -.045em; }
.finale_wrap .finale_roll_title.is-ours { margin-top: 18vh; }
/* the roll reads over the disc: a dark halo round every line */
.finale_wrap .finale_roll_track { text-shadow: 0 0 6px #06080a, 0 0 18px #06080a, 0 0 32px rgba(6, 8, 10, .9); }
.finale_wrap .finale_roll_about { max-width: 30em; margin: 22px auto 0; font-size: 16px; line-height: 1.55; color: var(--fi-ink); text-wrap: pretty; }
.finale_wrap .finale_roll_title.is-ours + .finale_roll_about { margin-top: 30px; }
.finale_wrap .finale_roll_sub { margin: 14px 0 0; font-family: var(--fi-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fi-dim); }
.finale_wrap .finale_roll_list { margin: 9vh 0 0; }
.finale_wrap .finale_roll_list div { margin: 0 0 5.5vh; }
.finale_wrap .finale_roll_list dt { font-family: var(--fi-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fi-dim); }
.finale_wrap .finale_roll_list dd { margin: 10px 0 0; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.finale_wrap .finale_roll_list dd span { display: block; margin-top: 6px; font-family: var(--fi-jp); font-weight: 500; font-size: .62em; letter-spacing: .5em; color: var(--fi-dim); text-transform: none; }
.finale_wrap .finale_roll_note { margin: 12vh 0 0; font-family: var(--fi-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fi-dim); }

/* Hire */
.finale_wrap .finale_hire { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.finale_wrap .finale_hire > * { opacity: 0; transform: translateY(16px); transition: opacity 1.2s var(--fi-out), transform 1.4s var(--fi-out); }
.finale_wrap.is-hire .finale_hire > * { opacity: 1; transform: none; }
.finale_wrap.is-hire .finale_hire > :nth-child(2) { transition-delay: .12s; }
.finale_wrap.is-hire .finale_hire > :nth-child(3) { transition-delay: .3s; }
.finale_wrap.is-hire .finale_hire > :nth-child(4) { transition-delay: .45s; }
.finale_wrap .finale_kicker { position: absolute; left: 0; right: 0; top: 10vh; margin: 0; text-align: center; font-family: var(--fi-mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--fi-dim); }
.finale_wrap .finale_title { position: absolute; left: 0; right: 0; top: 14vh; margin: 0; text-align: center; font-weight: 300; font-size: clamp(52px, min(6.6vw, 10.5vh), 128px); line-height: .94; letter-spacing: -.05em; }
.finale_wrap .finale_line { position: absolute; left: 0; right: 0; bottom: 19vh; margin: 0; padding: 0 var(--fi-gutter); text-align: center; font-size: 16px; color: var(--fi-dim); }
.finale_wrap .finale_cta { position: absolute; left: 50%; bottom: 9vh; translate: -50% 0; display: flex; align-items: center; gap: 16px; padding: 12px 24px 12px 14px; white-space: nowrap; pointer-events: auto;
  border: 1px solid var(--fi-green); color: var(--fi-green); text-decoration: none; font-weight: 500; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; transition: background .4s, color .4s, opacity 1.2s var(--fi-out), transform 1.4s var(--fi-out); }
.finale_wrap .finale_cta:hover { background: var(--fi-green); color: var(--fi-void); }
.finale_wrap .finale_cta_freq svg { display: block; width: 74px; height: auto; }
.finale_wrap .finale_cta_freq path, .finale_wrap .finale_cta_freq rect { fill: rgba(166, 243, 201, .12); }
.finale_wrap .finale_cta_freq .is-lit { fill: currentColor; }

/* a wide screen: Hire is a column on the left, beside the mark (world.js slides the disc right) */
@media (min-width: 768px) and (min-aspect-ratio: 21/20) {
  .finale_wrap .finale_hire { display: grid; align-content: center; justify-items: start; gap: 22px; padding-left: 7vw; width: min(38vw, 600px); }
  .finale_wrap .finale_hire > * { position: static; margin: 0; padding: 0; text-align: left; translate: none; }
  .finale_wrap .finale_title { font-size: clamp(56px, min(5.8vw, 10vh), 112px); }
  .finale_wrap .finale_line { max-width: 24em; font-size: 17px; }
  .finale_wrap .finale_cta { margin-top: 14px; }
}
@media (max-width: 767px) {
  .finale_wrap .finale_area { max-width: calc(100vw - 2 * var(--fi-gutter)); }
  .finale_wrap .finale_area_title { font-size: 20px; letter-spacing: .3em; }
  .finale_wrap .finale_where { font-size: 9.5px; margin-top: 10px; }
  .finale_wrap .finale_goals { margin-top: 18px; padding-top: 12px; font-size: 9.5px; }
  /* below the radar, which stays on screen for Hire */
  .finale_wrap .finale_kicker { top: calc(var(--fi-gutter) + 136px); }
  .finale_wrap .finale_title { top: calc(var(--fi-gutter) + 162px); font-size: min(15vw, 8.4vh); }
  .finale_wrap .finale_line { bottom: 21vh; font-size: 14px; }
  .finale_wrap .finale_cta { bottom: 12.5vh; }
  .finale_wrap .is-long { font-size: min(12vw, 8vh); }
  .finale_wrap .is-long.is-on { letter-spacing: .05em; margin-right: -.05em; }
  .finale_wrap .finale_goals li.is-now::after { content: '· tap it'; color: var(--fi-dim); }
  .finale_wrap .finale_down span { font-size: min(14vw, 9vh); letter-spacing: .08em; margin-right: -.08em; }
  .finale_wrap .finale_roll_list dd { font-size: 15px; }
}

/* the editor's canvas (stage.js canvasPosters): each chapter as a still of the live page, in px; the stills of the
   block are one strip (desktop 16:10, phone 390:844), each figure showing its own slice */
.finale_wrap.is-canvas { margin-top: 0; height: auto; background: #06080a; }
.finale_wrap.is-canvas .finale_contain { position: relative; top: auto; height: auto; overflow: visible; opacity: 1; transform: none; background: none; }
.finale_wrap.is-canvas .finale_contain > :not(.finale_poster) { display: none !important; }
.finale_wrap .finale_poster { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(233, 227, 216, .14); }
.finale_wrap .finale_poster figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #e9e3d8; background: rgba(6, 8, 10, .72); }
@media (max-width: 767px) { .finale_wrap .finale_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }