/* Hire: through the Dungeon's gate into the night; the mark and the words land together. The story's
   type: Amiri speaks, Reem Kufi labels. */
.finale_wrap {
  --finale-ink: #efe6d3;
  --finale-gold: #e2b56a;
  --finale-kufi: 'Magi Kufi', 'Reem Kufi', system-ui, sans-serif;
  --finale-naskh: 'Magi Naskh', 'Amiri', Georgia, serif;
  position: relative; height: 230vh; margin-top: -100vh; z-index: 3; color: var(--finale-ink);
}
.finale_wrap .finale_contain {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: transparent;
  transform: translateY(var(--hold, 0px)); visibility: var(--vis, hidden); touch-action: pan-y;
}
.finale_wrap .finale_stage { position: absolute; inset: 0; background: #04060d; visibility: var(--stage, hidden); }
.finale_wrap .finale_stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the gate: the paper with a star cut out of it, the seal's rim in light, split at its edge into colours */
.finale_wrap .finale_gate { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.finale_wrap .finale_gate_paper { fill: #f1ece1; opacity: var(--paper, 0); }
.finale_wrap .finale_gate_rim { fill: none; stroke-width: 1.5; opacity: calc(var(--rimo, 0) * 0.55); mix-blend-mode: screen; }
.finale_wrap .finale_gate_rim.is-c { stroke: #7fc8e8; }
.finale_wrap .finale_gate_rim.is-m { stroke: #d98fd0; }
.finale_wrap .finale_gate_seal { color: var(--sealc, #121010); opacity: var(--sealo, 0); filter: drop-shadow(0 0 calc(var(--glow, 0) * 14px) rgba(255, 214, 150, calc(var(--glow, 0) * 0.95))); }
.finale_wrap .finale_corner { position: absolute; top: clamp(20px, 3vw, 44px); z-index: 3; margin: 0; font: 500 10px/1.3 var(--finale-kufi); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(239, 230, 211, 0.6); opacity: 0; transition: opacity 1.2s ease; }
.finale_wrap .finale_corner.is-tl { left: clamp(150px, 14vw, 220px); top: calc(clamp(20px, 2.6vw, 40px) + 9px); }
.finale_wrap .finale_corner.is-tr { top: auto; bottom: calc(clamp(20px, 2.6vw, 40px) + 6px); left: clamp(20px, 2.6vw, 40px); }
.finale_wrap .finale_text {
  position: absolute; left: 50%; bottom: clamp(70px, 12vh, 130px); z-index: 3; transform: translateX(-50%); width: min(92vw, 760px);
  display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
}
.finale_wrap .finale_title {
  margin: 0; font: 400 clamp(60px, 7.6vw, 132px)/0.95 var(--finale-naskh); letter-spacing: -0.03em;
  opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.2, 0.7, 0.1, 1), filter 1.4s ease;
  text-shadow: 0 0 50px rgba(226, 181, 106, 0.35);
}
.finale_wrap .finale_line { margin: 26px 0 30px; font: 400 clamp(19px, 1.5vw, 24px)/1.4 var(--finale-naskh); color: rgba(239, 230, 211, 0.82); opacity: 0; transition: opacity 1.4s ease 0.35s; }
.finale_wrap .finale_cta {
  pointer-events: auto; padding: 16px 30px 15px; border-radius: 999px; background: linear-gradient(180deg, #f2cf8e, #c99347); color: #1b1206; text-decoration: none;
  font: 500 11px/1 var(--finale-kufi); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity 1s ease 0.6s, transform 1s ease 0.6s, background 0.3s ease;
}
.finale_wrap .finale_cta:hover, .finale_wrap .finale_cta:focus-visible { background: linear-gradient(180deg, #fbe2b1, #dba65a); }
.finale_wrap .finale_hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(20px, 3vw, 44px); z-index: 3; margin: 0; font: 500 10px/1 var(--finale-kufi); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 217, 162, 0.8); opacity: 0; transition: opacity 1s ease 1s; }
.finale_wrap.is-hire .finale_title { opacity: 1; transform: none; filter: blur(0); }
.finale_wrap.is-hire .finale_line, .finale_wrap.is-hire .finale_corner, .finale_wrap.is-hire .finale_hint { opacity: 1; }
.finale_wrap.is-hire .finale_cta { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .finale_wrap .finale_corner.is-tl { left: 54px; top: 64px; }
  .finale_wrap .finale_corner.is-tr { display: none; }
  .finale_wrap .finale_text { bottom: 86px; }
  .finale_wrap .finale_title { font-size: 52px; }
  /* the words sit on the lit sand: a low shade under them keeps them readable */
  .finale_wrap .finale_text::before { content: ''; position: absolute; z-index: -1; left: -16%; right: -16%; top: -18%; bottom: -24%; background: radial-gradient(closest-side, rgba(4, 6, 13, 0.62), rgba(4, 6, 13, 0)); opacity: 0; transition: opacity 1.4s ease; }
  .finale_wrap.is-hire .finale_text::before { opacity: 1; }
  .finale_wrap .finale_hint { display: none; }
}