/* ==========================================================================
   Launch Labs — Section: Finale ("Someone is looking.")
   The emotional conclusion of the page, just before the footer — styled
   as one large rounded editorial panel rather than type floating on open
   black. The photograph fills the entire panel; a left-to-right scrim
   (near-black behind the text, fading out toward the right) keeps the
   typography legible while letting the photo show through on its own
   toward the right edge. The section itself sits one shade lighter
   (--charcoal, the same token used elsewhere for the black theme) than
   the panel's own near-black, which is what gives the rounded rectangle
   a visible edge.

   Reveal, via js/finale.js: one shared .is-visible trigger on the
   section. Text fades in first (the hero statement — "Someone is
   looking. For exactly what you do." as a single line-broken sentence,
   one element — then the resolve line, in quick succession), then the
   photo/scrim, 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-muted: rgba(255, 255, 255, 0.6);
  --ink-resolve: rgba(255, 255, 255, 0.88);
  --contrast: #D92632;

  background: #0b0a0d;
  color: var(--ink);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.finale__panel {
  position: relative;
  width: min(90%, 88rem);
  margin: 0 auto;
  background: #010202;
  border-radius: clamp(24px, 2.5vw, 32px);
  overflow: hidden;
  padding: clamp(5rem, 8vw, 7.5rem);
}

.finale__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.finale__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(1, 2, 2, 0.97) 0%,
    rgba(1, 2, 2, 0.88) 30%,
    rgba(1, 2, 2, 0.4) 60%,
    rgba(1, 2, 2, 0.05) 85%
  );
}

.finale__content {
  position: relative;
  z-index: 2;
  max-width: 30rem;
}

.finale__hero,
.finale__resolve,
.finale__cta,
.finale__photo,
.finale__scrim {
  opacity: 0;
}

.finale__hero,
.finale__resolve,
.finale__cta {
  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__photo,
.finale.is-visible .finale__scrim {
  animation: finale-fade 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__photo,
.finale.is-visible .finale__scrim   { animation-delay: 0.55s; }
.finale.is-visible .finale__cta     { animation-delay: 0.85s; }

.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;
}

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

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

@keyframes finale-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 56rem) {
  .finale__panel {
    padding: clamp(3rem, 8vw, 4rem);
  }

  .finale__content {
    max-width: none;
  }

  .finale__scrim {
    background: linear-gradient(
      180deg,
      rgba(1, 2, 2, 0.97) 0%,
      rgba(1, 2, 2, 0.9) 45%,
      rgba(1, 2, 2, 0.45) 75%,
      rgba(1, 2, 2, 0.1) 100%
    );
  }
}