/* ==========================================================================
   CTA  —  Figma "CTA - Animate" (720:25086)
   1920 x 1057 at y 9566, on Mono/Dark.

   Default -> Animate:
     dotted halo  opacity 0 -> 1, rises 216
     eyebrow      translateY +20 -> 0
     both h2s     translateY +80 -> 0
     button       translateY +50 -> 0
   ========================================================================== */

.cta {
  top: calc(9566 * var(--s));
  height: calc(1057 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 5;
}

.cta__halo {
  position: absolute;
  left: calc(50% - 1.5 * var(--s));
  top: calc(50% + 96 * var(--s));
  width: calc(941 * var(--s));
  height: calc(941 * var(--s));
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--rv-dur) * 1.3) var(--rv-ease),
              transform calc(var(--rv-dur) * 1.4) var(--rv-ease);
}
.cta:not(.is-in) .cta__halo { transform: translate(-50%, -50%) translateY(calc(216 * var(--s))); }
.cta.is-in .cta__halo { opacity: 1; }

/* Mono/Light at the 0.2 opacity Figma specifies — unchanged. The vector is
   now carried by four .dotring layers (base.css) so it turns like the hero.

   The bottom fade moves up to .cta__halo so it applies to all four rings at
   once: the dot artwork is each ring's own mask, and this gradient holds full
   strength through the top half then reaches zero at 72%, so the sphere
   dissolves into the ground rather than ending on a hard edge. */
.cta__halo {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 72%);
}

.cta__halo-inner {
  position: absolute;
  inset: 0;
  --ring-fill: var(--c-mono-light);
  opacity: 0.2;
}

.cta__glow {
  position: absolute;
  left: calc(8.33% + 42 * var(--s));
  top: calc(536 * var(--s));
  width: calc(1516 * var(--s));
  height: calc(895 * var(--s));
  pointer-events: none;
}
/* Figma exports blurred backdrop layers with negative-inset bleed. Written out
   as left/top/width/height rather than `inset` + width:auto: an <img> is a
   replaced element, so with auto width it keeps its intrinsic aspect and the
   `right`/`bottom` insets are simply dropped — the layer renders undersized. */
.cta__glow img {
  position: absolute;
  left: -19.79%;
  top: -33.52%;
  width: 139.57999999999998%;
  height: 167.04000000000002%;
  /* the reset caps img at 100%; a bleed layer must opt out */
  max-width: none;
}

.cta__eyebrow {
  position: absolute;
  left: calc(41.67% + 47 * var(--s));
  top: calc(380 * var(--s));
  width: calc(227 * var(--s));
  height: calc(19 * var(--s));
  text-align: center;
  white-space: nowrap;
}

.cta__h {
  position: absolute;
  left: calc(25% + 29 * var(--s));
  width: calc(902 * var(--s));
  height: calc(96 * var(--s));
}
.cta__h--1 { top: calc(423 * var(--s)); }
.cta__h--2 { top: calc(519 * var(--s)); }
.cta__h h2,
.cta__h span {
  display: block;
  font-weight: 400;
  font-size: calc(80 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-4 * var(--s));
  text-align: center;
  color: var(--c-mono-light);
  white-space: nowrap;
}

.cta__btn {
  position: absolute;
  left: calc(41.67% + 68 * var(--s));
  top: calc(679 * var(--s));
  width: calc(184 * var(--s));
  height: calc(48 * var(--s));
}
.cta__btn .rv { height: 100%; }
.cta__btn .btn { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cta__halo { opacity: 1; transition: none; }
  .cta:not(.is-in) .cta__halo { transform: translate(-50%, -50%); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .cta__h h2, .cta__h span { font-size: calc(60 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .cta { height: auto; padding: 96px 20px 104px; text-align: center; }
  .cta__glow { display: none; }
  .cta__halo { top: 50%; width: 130vw; height: 130vw; }

  .cta__eyebrow, .cta__h, .cta__btn { position: static; width: auto; height: auto; }
  .cta__eyebrow { font-size: 12px; }
  .cta__h { margin-top: 16px; }
  .cta__h h2, .cta__h span { font-size: clamp(34px, 10vw, 56px); white-space: normal; letter-spacing: -0.04em; }
  .cta__btn { margin: 28px auto 0; width: 184px; height: 48px; }
}