/* v17 — Closing: a centered editorial statement, no device. */
.closing > .scene-body { display: flex; flex-direction: column; min-height: min(100svh, 980px); padding-top: clamp(96px, 12vh, 150px) !important; }
.join-grid.join-solo { display: flex; justify-content: center; align-items: center; flex: 1; max-width: 980px; margin: 0 auto; grid-template-columns: none; }
.closing .join-solo .invitation { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
.closing .join-solo .invitation > img { width: 84px; height: 84px; margin: 0 0 34px !important; }
.closing .join-solo .invitation h2 {
  font: 400 clamp(46px, 5.6vw, 86px)/1.04 var(--serif) !important; letter-spacing: -.03em; max-width: 15ch; margin: 0 auto !important; text-wrap: balance;
}
.closing .join-solo .invitation h2 em { font-style: italic; }
.closing .join-solo .invitation h2 > span { font-style: italic; }
.join-rule { display: block; width: 72px; height: 1px; margin: 38px auto 34px; background: linear-gradient(90deg, rgb(0 184 107 / 0), var(--emerald), rgb(0 184 107 / 0)); }
.closing .join-solo .early-access { margin: 0 auto; max-width: 540px; width: 100%; }
.closing .join-solo .early-access label { text-align: center; }
.closing .join-solo .ea-note { text-align: center; }
.closing .join-solo .cta-row { justify-content: center; margin: 34px auto 0; gap: 28px; }

/* CTA hover states */
.closing .appstore-badge { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.closing .appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(0 0 0 / .35), 0 0 0 1px rgb(242 245 243 / .22); }
.closing .contact-link { position: relative; }
.closing .contact-link::after { content: ""; position: absolute; left: 0; right: 32px; bottom: 8px; height: 1px; background: var(--emerald); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.closing .contact-link:hover::after, .closing .contact-link:focus-visible::after { transform: scaleX(1); }

/* Scroll-triggered staggered reveal (class added by v17.js) */
html.mo .join-solo .jr { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
html.mo .join-solo .join-rule.jr { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s; }
html.mo .join-solo.is-in .jr { opacity: 1; transform: none; }
html.mo .join-solo.is-in .jr-1 { transition-delay: .12s; }
html.mo .join-solo.is-in .jr-2 { transition-delay: .5s; }
html.mo .join-solo.is-in .jr-3 { transition-delay: .62s; }
html.mo .join-solo.is-in .jr-4 { transition-delay: .76s; }

/* Light sweep on "Eye." matching the hero, after the reveal. */
html.mo .join-solo.is-in h2 > span {
  background: linear-gradient(100deg, var(--emerald) 42%, #8ff2c4 50%, var(--emerald) 58%) no-repeat 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: v16-sheen 9s cubic-bezier(.45,0,.2,1) 1.4s infinite;
}

/* Soft ambient drift on the bright final background. */
html.mo .closing > .scenery img { animation: v17-drift 38s ease-in-out infinite alternate; }
@keyframes v17-drift { from { transform: scale(1.02) translate3d(-.6%, 0, 0); } to { transform: scale(1.06) translate3d(.6%, -.8%, 0); } }

@media (max-width: 700px) {
  .closing > .scene-body { min-height: 0; padding-top: 72px !important; }
  .closing .join-solo .invitation h2 { font-size: clamp(38px, 10.6vw, 46px) !important; }
  .closing .join-solo .invitation > img { width: 68px; height: 68px; margin-bottom: 26px !important; }
  .join-rule { margin: 28px auto 26px; }
  .closing .join-solo .cta-row { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html.mo .join-solo .jr { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.mo .join-solo.is-in h2 > span, html.mo .closing > .scenery img { animation: none !important; }
  .closing .appstore-badge, .closing .contact-link::after { transition: none; }
}
html.motion-paused .join-solo .jr { opacity: 1 !important; transform: none !important; }
html.motion-paused .join-solo h2 > span, html.motion-paused .closing > .scenery img { animation: none !important; }

/* Quiet scrim so the ribbon artwork never competes with the copy and CTAs. */
.closing .join-solo .invitation { position: relative; isolation: isolate; }
.closing .join-solo .invitation::before { content: ""; position: absolute; z-index: -1; inset: -6% -18% -10%; pointer-events: none;
  background: radial-gradient(ellipse 50% 52% at 50% 56%, rgb(5 8 7 / .72), rgb(5 8 7 / .4) 60%, rgb(5 8 7 / 0) 100%); }