/* After The End, dawn: one sticky screen held over the roll's last page. The sphere forms, the mark
   appears in it, and the title menu comes back (New Game, Continue) with the glove on it. The footer
   is the save file: the time you spent, five memories of five. */
.finale_wrap {
  --fi-ink: #fbf8f2; --fi-dim: rgba(251, 248, 242, .66); --fi-gutter: clamp(18px, 2.4vw, 36px);
  --fi-win-top: rgba(46, 70, 168, .8); --fi-win-bot: rgba(12, 18, 64, .9); --fi-win-line: rgba(236, 241, 255, .9);
  --fi-display: 'FF Marcellus', 'Marcellus', 'Optima', serif; --fi-serif: 'FF Garamond', 'EB Garamond', Garamond, serif;
  position: relative; z-index: 3; margin-top: -100vh; height: 280vh; color: var(--fi-ink); font-family: 'FF Figtree', 'Figtree', system-ui, sans-serif;
}
.finale_wrap .finale_contain {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0d1530;
  opacity: var(--arrive, 0); transform: translate3d(0, var(--hold, 0px), 0);
}
.finale_wrap .finale_stage { position: absolute; inset: 0; }
/* leaving for the colophon, the dawn settles into its night, so the two meet without an edge */
.finale_wrap .finale_contain::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 8, 0) 30%, #050608 100%); opacity: var(--leave, 0); }
.finale_wrap .finale_stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 1; }
.finale_wrap .finale_layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; text-shadow: 0 2px 30px rgba(40, 20, 50, .35); }
.finale_wrap .finale_layer > * { opacity: 0; transform: translateY(16px); transition: opacity 1.4s cubic-bezier(.65, 0, .25, 1), transform 1.4s cubic-bezier(.65, 0, .25, 1); }
.finale_wrap.is-hire .finale_layer > * { opacity: 1; transform: none; }
.finale_wrap.is-hire .finale_layer > :nth-child(2) { transition-delay: .12s; }
.finale_wrap.is-hire .finale_layer > :nth-child(3) { transition-delay: .35s; }
.finale_wrap.is-hire .finale_layer > :nth-child(4) { transition-delay: .6s; }
.finale_wrap .finale_kicker {
  position: absolute; left: 0; right: 0; top: max(8vh, 62px); margin: 0; display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--fi-dim);
  font-size: 12.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
}
.finale_wrap .finale_kicker::before { content: ''; flex: none; width: 8px; height: 18px; clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); background: linear-gradient(160deg, #fff 10%, #e7c98e 50%, #6b5428); }
.finale_wrap .finale_title {
  position: absolute; left: 0; right: 0; top: calc(max(8vh, 62px) + 34px); margin: 0; text-align: center;
  font-family: var(--fi-display); font-weight: 400; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding-left: .06em;
  font-size: clamp(42px, min(5.4vw, 9vh), 104px);
}
.finale_wrap .finale_title br { display: none; }
.finale_wrap .finale_line {
  position: absolute; left: 0; right: 0; bottom: calc(14vh + 150px); margin: 0; padding: 0 var(--fi-gutter); text-align: center;
  font-family: var(--fi-serif); font-weight: 500; font-size: clamp(22px, 2vw, 32px); letter-spacing: .01em;
}
/* the title menu: two commands in the blue window, the glove on the one you're on */
.finale_wrap .finale_menu {
  position: absolute; left: 50%; bottom: 14vh; translate: -50% 0; display: grid; gap: 2px; min-width: 330px; padding: 14px 28px 14px 52px; pointer-events: auto; text-shadow: none;
  border-radius: 10px; background: linear-gradient(180deg, var(--fi-win-top), var(--fi-win-bot));
  box-shadow: inset 0 0 0 1.5px var(--fi-win-line), inset 0 0 0 3px rgba(10, 14, 40, .6), inset 0 0 0 3.6px rgba(236, 241, 255, .2), 0 24px 60px -24px rgba(4, 8, 30, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.finale_wrap .finale_cmd { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 34px; padding: 7px 0; color: rgba(251, 248, 242, .72); text-decoration: none; transition: color .2s; }
.finale_wrap .finale_cmd_name { font-family: var(--fi-display); font-size: 21px; letter-spacing: .04em; }
.finale_wrap .finale_cmd_what { font-size: 14px; letter-spacing: .04em; color: var(--fi-dim); }
.finale_wrap .finale_cmd.is-sel { color: #fff; }
.finale_wrap .finale_cmd.is-sel .finale_cmd_what { color: rgba(251, 248, 242, .9); }
.finale_wrap .finale_cmd::before {
  content: ''; position: absolute; right: calc(100% + 12px); top: 50%; width: 30px; height: 18px; margin-top: -9px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cg fill='%23fbfbff' stroke='%231b2448' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M2 8.5c0-1.4 1.1-2.5 2.5-2.5H8v14H4.5C3.1 20 2 18.9 2 17.5z'/%3E%3Cpath d='M8 6.2c2.6-1.9 5.2-2.9 8.4-2.9h3.2c1.3 0 2.2.9 2.2 2.1 0 .4-.1.8-.3 1.1h17.4c1.6 0 2.9 1.1 2.9 2.5S40.5 11.5 38.9 11.5H24.8c.9.3 1.5 1.1 1.5 2.1 0 1.2-1 2.2-2.2 2.2h-.6c.7.4 1.2 1.1 1.2 1.9 0 1.2-1 2.2-2.2 2.2h-.9c.5.4.8 1 .8 1.6 0 1.2-1 2.1-2.2 2.1H15c-2.8 0-5.2-.9-7-2.3z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 20, .5)); animation: finale-point .7s ease-in-out infinite alternate;
}
.finale_wrap .finale_cmd.is-sel::before { opacity: 1; }
@keyframes finale-point { from { translate: -3px 0; } to { translate: 1px 0; } }
/* the footer is the save file */
.finale_wrap .finale_foot {
  position: absolute; z-index: 2; inset: auto 0 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding: var(--fi-gutter);
  color: var(--fi-dim); font-size: 12px; letter-spacing: .06em; opacity: 0; transition: opacity 1.2s .9s;
}
.finale_wrap .finale_foot_side:last-child { text-align: right; }
.finale_wrap .finale_save { display: flex; gap: 12px; align-items: baseline; padding: 8px 16px; border-radius: 8px; color: var(--fi-ink);
  background: linear-gradient(180deg, var(--fi-win-top), var(--fi-win-bot)); box-shadow: inset 0 0 0 1.5px var(--fi-win-line), inset 0 0 0 3px rgba(10, 14, 40, .6); }
.finale_wrap .finale_save span { color: var(--fi-dim); }
.finale_wrap .finale_save b { font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 6px; }
.finale_wrap.is-hire .finale_foot { opacity: 1; }
@media (max-aspect-ratio: 19/20) {
  .finale_wrap .finale_kicker { top: max(11vh, 72px); }
  .finale_wrap .finale_title { top: calc(max(11vh, 72px) + 30px); font-size: clamp(38px, 10.5vw, 70px); }
  .finale_wrap .finale_title br { display: inline; }
  .finale_wrap .finale_line { bottom: calc(13vh + 136px); font-size: clamp(20px, 5.4vw, 28px); }
  .finale_wrap .finale_menu { bottom: 13vh; min-width: min(330px, calc(100vw - 2 * var(--fi-gutter))); padding-left: 46px; }
  .finale_wrap .finale_cmd { gap: 18px; }
  .finale_wrap .finale_foot { grid-template-columns: 1fr; justify-items: center; gap: 6px; font-size: 10.5px; text-align: center; }
  .finale_wrap .finale_foot_side:last-child { text-align: center; }
  .finale_wrap .finale_save { order: -1; }
}

/* keyboard: a gold ring on whatever has focus */
.finale_wrap :focus-visible { outline: 2px solid #e7c98e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .finale_wrap *, .finale_wrap *::before, .finale_wrap *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
}