/* ==========================================================================
   Launch Labs — Section: Finale ("Someone is looking.")
   The emotional conclusion of the page, just before the footer. It is the
   destination of the .choice transition above (css/choice.css): that
   sequence expands a small red dot until the whole viewport is Launch red,
   and THIS section is that same solid red (#D92632) continuing with no
   seam — the dot literally becomes the finale. White type, centred, full
   viewport height so the red canvas reads as one uninterrupted field.

   Reveal, via js/finale.js: one shared .is-visible trigger on the section.
   The hero statement fades in first, then the resolve line, then the button
   last — opacity + translateY only, no scale, no bounce. Clicking the
   button (data-shape-open, wired in js/shape-modal.js) opens the fullscreen
   SHAPE questionnaire — see css/shape-modal.css.
   ========================================================================== */

.finale {
  --ink: #FFFFFF;
  --ink-resolve: rgba(255, 255, 255, 0.9);

  background: #D92632;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem);
}

.finale__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  text-align: center;
}

.finale__hero,
.finale__resolve,
.finale__cta {
  opacity: 0;
  transform: translateY(22px);
}

.finale.is-visible .finale__hero,
.finale.is-visible .finale__resolve,
.finale.is-visible .finale__cta {
  animation: finale-rise 0.9s var(--ease) forwards;
}

.finale.is-visible .finale__hero    { animation-delay: 0s; }
.finale.is-visible .finale__resolve { animation-delay: 0.3s; }
.finale.is-visible .finale__cta     { animation-delay: 0.6s; }

.finale__hero {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.finale__resolve {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-resolve);
}

.finale__cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
}

.finale__btn {
  padding: 1.15rem 2.75rem;
  font-size: 0.9375rem;
}

/* On the red canvas the CTA flips to a solid white chip with near-black
   type (the red-on-red default .btn would vanish). No glow/shadow — the
   palette is white / near-black / red only. Selector is scoped with
   body[data-theme="black"] to out-specify hero.css's themed .btn glow. */
body[data-theme="black"] .finale__btn {
  background: #FFFFFF;
  color: #010202;
  border: 1px solid #FFFFFF;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body[data-theme="black"] .finale__btn:hover {
    background: #010202;
    color: #FFFFFF;
    border-color: #010202;
    box-shadow: none;
  }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes finale-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}