/* Home scene "cta" (tools/templates/pages/home/cta.mjs): the last call under the mark in code.
   Scoped to .sc-cta. --q (cta.js, 0 → 1 as the mark's centre rises from the bottom of the window to its
   middle) brings the halves together along the seam's normal; the seam lights over the last 15 %, as
   they meet. Without scenes --q is 1: the mark whole. */

.sc-cta { position: relative; padding: 96px 0 184px; overflow: hidden; }
.sc-cta .ct-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc-cta .ct-art { --q: 1; --d: 120px; position: relative; width: 360px; height: 360px; margin-bottom: 36px; }
.sc-cta .ct-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The seam's normal is (3, 1)/√10: the left half leaves up and left, the right half down and right */
.sc-cta .ct-l { transform: translate(calc(var(--d) * -0.949 * (1 - var(--q))), calc(var(--d) * -0.316 * (1 - var(--q)))); opacity: calc(0.15 + 0.85 * var(--q)); }
.sc-cta .ct-r { transform: translate(calc(var(--d) * 0.949 * (1 - var(--q))), calc(var(--d) * 0.316 * (1 - var(--q)))); opacity: calc(0.15 + 0.85 * var(--q)); }
.sc-cta .ct-seam { opacity: clamp(0, (var(--q) - 0.85) * 6.67, 1); }
.sc-cta .ct-glow {
  position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 107, 239, 0.16), rgba(47, 107, 239, 0.05) 50%, transparent 72%);
  opacity: clamp(0, (var(--q) - 0.5) * 2, 1);
}
.sc-cta .art-fallback { position: absolute; inset: 0; align-items: center; justify-content: center; }
.sc-cta .ct-title { max-width: 980px; }
.sc-cta .ct-lead { max-width: 560px; margin: 20px auto 0; font: 400 21px/32px var(--font); color: var(--text-secondary); text-wrap: balance; }
.sc-cta .ct-btns { margin-top: 36px; }

@media (max-width: 599px) {
  .sc-cta { padding: 72px 0 128px; }
  .sc-cta .ct-art { width: 248px; height: 248px; --d: 64px; margin-bottom: 28px; }
  .sc-cta .ct-title { font-size: 42px; line-height: 46px; }
  .sc-cta .ct-lead { font-size: 17px; line-height: 26px; margin-top: 16px; }
  .sc-cta .ct-btns { margin-top: 30px; }
}