/* =====================================================================================================
   Final page — "Bet on yourself." + the utility footer. Built from the founder's reference
   (design/references/ref-6-finale.webp, 2000 x 1119), so desktop sizes are in that frame's pixels: 1v = frame / 2000
   (the same --v as page 2). One closing scene: the line, one call to action, the giant orange agent rising from
   the bottom edge, a quiet footer under it. No spine or connector from page 3 enters here.
   The agent is the one drawn in the reference: its outline traced to a vector mask and its own gradient taken from
   the reference by tools/build-finale-agent.py; its two eyes are vector capsules fitted to the reference's.
   ===================================================================================================== */
:root { --foot-h: calc(75 * var(--v)); }

.finale {
  /* the agent's box: 1440 x 585 reference pixels (x 244-1684, y 460-1045), cut by the bottom edge as in the
     reference. Full reference size when there is room; down to 80% of it on short screens. */
  --ah-min: calc(468 * var(--v)); --ah-max: calc(585 * var(--v)); --gap: clamp(20px, 3svh, 48px);
  position: relative; background: var(--paper); min-height: calc(100svh - var(--foot-h));
  display: flex; flex-direction: column; overflow: hidden;
}

/* the line sits where the reference has it (150 px down its 1119 px frame); a taller screen shares its extra height
   between the space above the line and the space above the agent */
.finale__copy { position: relative; z-index: 1; padding: max(56px, calc(150 * var(--v) + (100svh - 1119 * var(--v)) * .4)) 16px 0; text-align: center; }
/* the weight of "Be the next…" (620), in Inter's text cut, as in the reference (rounder and more open than the Display cut) */
.finale__title { margin: 0; font-weight: 620; font-size: calc(128 * var(--v)); line-height: 1; letter-spacing: -0.032em; font-optical-sizing: none; white-space: nowrap; }
.finale__sub { margin: calc(22 * var(--v)) 0 0; font-size: max(16px, calc(30 * var(--v))); line-height: 1.3; letter-spacing: -0.012em; }
.finale__cta { height: max(46px, calc(62 * var(--v))); margin-top: calc(31 * var(--v)); padding: 0 calc(33 * var(--v)); gap: .42em; font-size: max(15px, calc(22 * var(--v))); }
.finale__cta svg { width: 1em; height: 1em; margin-right: -.08em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.finale__cta:hover svg { transform: translateX(3px); }

/* the stage: everything under the copy. Its bottom edge crops the agent; nothing crosses into the copy. */
.finale__stage { position: relative; flex: 1 0 auto; min-height: calc(var(--ah-min) + var(--gap)); overflow: hidden; }
.finale__agent {
  position: absolute; left: calc(50% - 36 * var(--v)); bottom: 0; translate: -50% 0;
  height: clamp(var(--ah-min), calc(100% - var(--gap)), var(--ah-max)); aspect-ratio: 1440 / 585; pointer-events: none;
}
.finale__body {
  position: absolute; inset: 0; isolation: isolate;
  background: url("finale/agent-fill.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask: url("finale/agent-mask.svg") 0 0 / 100% 100% no-repeat;
          mask: url("finale/agent-mask.svg") 0 0 / 100% 100% no-repeat;
}
/* fine monochrome grain at device pixels (tile made by finale.js), like the hero's colour field */
.finale__body::after { content: ""; position: absolute; inset: 0; background-image: var(--grain, none); background-size: var(--grain-size, 128px); mix-blend-mode: soft-light; opacity: .55; }
/* the eyes: the reference's two capsules, in the box's units so they scale with it. A blink shortens them along
   their length, as on the hero. */
.finale__eyes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff; }
.finale__gaze { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.finale__eyes rect { transform: scaleX(var(--blink, 1)); transition: transform .09s ease-in; }
.finale__agent.is-blinking { --blink: .28; }

/* ---------- the footer: small, under the agent's edge ---------- */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: calc(1484 * var(--v)); height: var(--foot-h); margin: 0 auto; background: var(--paper); color: var(--ink); }
.foot__nav { grid-column: 2; translate: calc(-34 * var(--v)) 0; }   /* the links sit a little left of centre, as in the reference */
.foot ul { display: flex; align-items: center; gap: calc(40 * var(--v)); margin: 0; padding: 0; list-style: none; font-size: max(12px, calc(17.4 * var(--v))); line-height: 1; letter-spacing: -0.004em; }
.foot ul a { color: rgba(11, 11, 11, .72); transition: color .2s ease; }
.foot ul a:hover { color: var(--ink); }
.foot .foot__brand { color: var(--ink); font-weight: 700; font-size: 1.1em; letter-spacing: .01em; text-transform: uppercase; }
.foot__copy { grid-column: 3; justify-self: end; margin: 0; font-size: max(12px, calc(17.4 * var(--v))); line-height: 1; color: var(--p-grey); }

/* ---------- motion: calm. The agent rises a little, its eyes settle up toward the line, it blinks once. ---------- */
.js-reveal .finale .fin-rv { opacity: 0; translate: 0 10px; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--ri, 0) * 90ms); }
.js-reveal .finale.is-in .fin-rv { opacity: 1; translate: 0 0; }
.js-reveal .finale .finale__agent { transform: translateY(7%); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .15s; }
.js-reveal .finale.is-in .finale__agent { transform: none; }
.js-reveal .finale:not(.is-in) .finale__gaze { transform: translate(5px, 16px); }
.js-reveal .finale.is-in .finale__gaze { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .9s; }

/* the sticky header steps aside on the final scene (its button would be a second call to action) */
.bar.is-tucked { transform: translateY(-102%); visibility: hidden; transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s; }

/* ---------- phones and tablets ---------- */
@media (max-width: 1023px) {
  :root { --foot-h: 104px; }
  .finale { --ah-min: min(58vw, 34svh); --ah-max: 84vw; --gap: clamp(24px, 5svh, 56px); }
  .finale__copy { padding-top: clamp(72px, 13svh, 128px); }
  .finale__agent { left: 50%; translate: -57.4% 0; }   /* wider than the screen: the eyes in the middle, both sides cut */
  .finale__title { font-size: clamp(54px, 21vw, 112px); line-height: .98; letter-spacing: -0.042em; white-space: normal; text-wrap: balance; }
  .finale__sub { max-width: 21em; margin: 18px auto 0; font-size: clamp(16px, 4.4vw, 20px); text-wrap: balance; }
  .finale__cta { height: 52px; margin-top: 26px; padding: 0 22px; font-size: 16px; }
  .foot { width: auto; height: auto; min-height: var(--foot-h); padding: 18px 16px 22px; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 12px; }
  .foot__nav { grid-column: 1; translate: none; }
  .foot ul { flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13px; }
  .foot__copy { grid-column: 1; justify-self: center; font-size: 12px; }
  @media (min-width: 600px) {                     /* tablets: the line holds on one row, the agent a little smaller */
    .finale { --ah-min: min(40vw, 30svh); --ah-max: 60vw; }
    .finale__title { font-size: min(12.4vw, 104px); white-space: nowrap; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .finale__cta svg, .foot ul a, .finale__gaze, .finale__eyes rect { transition: none; }
  .finale__cta:hover svg { transform: none; }
}

/* capture helper: ?only=finale shows this page on its own */
.only-finale .hero, .only-finale .examples, .only-finale .process, .only-finale .bar { display: none; }