/* P10 finale "Night drive home" (client pick 8 Oct, from Design/variations/2026-10-08-finale/3a.html).
   Scoped to .cta.fin (#finale) on the Players side; the Brands CTA is untouched.
   Static by default (no JS, OS reduced motion, footer toggle): the night scene with the ticket in the middle.
   finale.js adds .is-on for the pinned, scrubbed scene. */
.cta.fin {
  --night: #0B0F26; --fin-top: 0px; --fin-h: calc(100svh - var(--fin-top)); --fin-bar: 7svh; --fin-gutter: 24px; --slot-y: 30%;
  --wc: var(--ink); --ws: transparent;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  padding: 0; overflow: clip; background: var(--night); color: var(--paper);
  scroll-margin-top: calc(var(--fin-top) - 112px);
}
@media (max-width: 699px) { .cta.fin { --fin-bar: 5svh; --fin-gutter: 16px; --slot-y: 22%; } }
.fin__stage { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; padding: 96px 0; }
.fin.is-on .fin__stage { display: block; height: var(--fin-h); min-height: 0; padding: 0; }

/* Night Lagos: Third Mainland Bridge, the lagoon and its reflections, light trails, our danfo */
.fin__bd { position: absolute; inset: 0; overflow: hidden; }
.fin__night { position: absolute; inset: 0; width: 100%; height: 100%; }
.fin__danfo { position: absolute; left: 58%; top: 0; width: clamp(120px, 12vw, 190px); height: auto; }
.fin__dim { position: absolute; inset: 0; background: #000; opacity: 0; }

/* The printer head the ticket feeds out of */
.fin__prn { position: absolute; left: 50%; top: calc(var(--slot-y) - 64px); width: min(860px, 96vw); height: 72px; margin-left: calc(min(860px, 96vw) / -2); z-index: 4; border: 3px solid var(--ink); border-radius: 22px 22px 14px 14px; background: linear-gradient(#2a3270, #1B2350); box-shadow: 0 0 0 3px var(--paper), 0 18px 40px rgba(0,0,0,.5); }
.fin__prn::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 8px; height: 10px; border-radius: 999px; background: #000; }
.fin__prn-led { position: absolute; right: 26px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.fin__prn-lbl { position: absolute; left: 26px; top: 14px; font: 800 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,252,247,.8); }
.fin:not(.is-on) .fin__prn { display: none; }

/* The ticket: Play free is the tear-off stub */
.fin__feed { position: relative; z-index: 5; width: 100%; }
.fin.is-on .fin__feed { position: absolute; left: 0; right: 0; top: var(--slot-y); bottom: 0; overflow: hidden; pointer-events: none; }
.fin__tk { position: relative; width: min(780px, 92vw); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.45); text-align: left; pointer-events: auto; }
.fin.is-on .fin__tk { position: absolute; left: 50%; top: 0; margin-left: calc(min(780px, 92vw) / -2); }
.fin__main { padding: 26px 30px 24px; }
.fin__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fin__admit { color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 10px; background: var(--gold-soft); }
.fin__who { margin-top: 14px; min-height: 2.6em; font: 600 15px/1.3 var(--text); color: var(--ink-2); }
.fin__who b { color: var(--ink); font-weight: 800; }
.fin__res { display: inline-block; margin-left: 6px; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 800; white-space: nowrap; }
.fin__res--lapo { background: var(--green); }
.fin__spacer { display: block; margin: 4px 0 10px; }
.fin__small { font-size: 12.5px; color: var(--ink-2); }
.fin__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 26px; border-left: 3px dashed var(--ink); background: var(--green-soft); border-radius: 0 19px 19px 0; }
.fin__stub::before, .fin__stub::after { content: ""; position: absolute; left: -14px; width: 24px; height: 24px; border-radius: 50%; background: #10173d; border: 3px solid var(--ink); }
.fin__stub::before { top: -14px; clip-path: inset(50% 0 0 0); }
.fin__stub::after { bottom: -14px; clip-path: inset(0 0 50% 0); }
.fin__fine { font-size: 12.5px; color: var(--ink-2); text-align: center; max-width: 18ch; }
.fin__no { font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; right: 8px; top: 50%; translate: 0 -50%; }
.fin .fin__cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* The lockup: in motion mode it is laid over the ticket's headline spacer by finale.js */
.fin__lock { z-index: 6; }
.fin.is-on .fin__lock { position: absolute; pointer-events: none; display: flex; align-items: center; }
.fin__h { font: 800 min(7.4vw, 10.5svh)/.86 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; text-transform: uppercase; text-align: left; }
.fin__l { display: flex; gap: .2em; white-space: nowrap; }
.fin__w { display: inline-block; color: var(--wc); -webkit-text-stroke: .04em var(--ws); paint-order: stroke fill; transform-origin: 50% 50%; }
.fin__w--lagos { color: var(--green); }

@media (max-width: 699px) {
  .fin__tk { grid-template-columns: 1fr; }
  .fin__main { padding: 20px 20px 16px; }
  .fin__stub { border-left: 0; border-top: 3px dashed var(--ink); border-radius: 0 0 19px 19px; }
  .fin__stub::before, .fin__stub::after { top: -14px; }
  .fin__stub::before { left: -14px; clip-path: inset(0 0 0 50%); }
  .fin__stub::after { left: auto; right: -14px; bottom: auto; clip-path: inset(0 50% 0 0); }
  .fin__no { position: static; writing-mode: horizontal-tb; transform: none; translate: none; }
  .fin__fine { max-width: none; }
  .fin__h { font-size: 13vw; }
  .fin__prn { height: 60px; top: calc(var(--slot-y) - 52px); }
}

/* Letterbox, slate, grain */
.fin:not(.is-on) .fin__bars { display: none; }
.fin__bars { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.fin__bar { position: absolute; left: 0; right: 0; height: var(--fin-bar); background: #000; }
.fin__bar--t { top: 0; transform-origin: 50% 0; }
.fin__bar--b { bottom: 0; transform-origin: 50% 100%; }
.fin__slate { position: absolute; top: calc(var(--fin-bar) / 2); left: var(--fin-gutter); transform: translateY(-50%); display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--text); letter-spacing: .06em; color: var(--paper); white-space: nowrap; }
.fin__play { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 9px; padding-left: 2px; }
@media (max-width: 699px) { .fin__slate { font-size: 11px; } }
.fin__grain { position: absolute; inset: -60px; z-index: 9; pointer-events: none; background-image: var(--grain); opacity: .1; mix-blend-mode: overlay; }
.fin.is-on .fin__grain { animation: fin-grain .9s steps(6) infinite; }
@keyframes fin-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-20px,14px)} 50%{transform:translate(16px,-24px)} 75%{transform:translate(-26px,-6px)} 100%{transform:translate(0,0)} }
.fin .is-playing :is(.fin__w, .fin__tk, [data-fin-par]) { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fin__grain { animation: none !important; } }
.reduce-motion .fin__grain { animation: none !important; }