/* ==========================================================================
   METRIX LAB - cta.css
   Section: "CTA Closer" (#cta) - full-width, arresting closer above the footer.
   All rules scoped under #cta to avoid cross-section collisions.
   Uses contract tokens/components; no hardcoded colors that have a token.
   ========================================================================== */

#cta {
  position: relative;
  overflow: hidden; /* clip rings, grid + radial bleed */
  text-align: center;
  /* extra breathing room so the glow + rings have space to expand */
  padding-block: clamp(5rem, 3rem + 9vw, 9rem);
  isolation: isolate; /* keep decorative layers contained */
}

/* --------------------------------------------------------------------------
   DECORATIVE BACKGROUND LAYERS (behind content)
   -------------------------------------------------------------------------- */
#cta .cta__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  pointer-events: none;
}

/* deep radial gradient: dark-grey -> black, centered behind the button */
#cta .cta__radial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(34rem, 90vw, 64rem);
  height: clamp(34rem, 90vw, 64rem);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center,
      var(--color-accent-tint) 0%,
      rgba(234, 88, 12, 0.05) 22%,
      var(--color-surface-2) 46%,
      var(--color-bg) 78%);
  border-radius: 50%;
  filter: blur(6px);
}

/* concentric expanding rings emanating from the centered button */
#cta .cta__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20rem, 60vw, 40rem);
  height: clamp(20rem, 60vw, 40rem);
  transform: translate(-50%, -50%);
}

#cta .cta__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-accent-tint-2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.35);
  will-change: transform, opacity;
  animation: ctaRingPulse 6s var(--ease-out) infinite;
}
#cta .cta__ring:nth-child(2) { animation-delay: 2s; }
#cta .cta__ring:nth-child(3) { animation-delay: 4s; }

@keyframes ctaRingPulse {
  0%   { opacity: 0;    transform: scale(0.35); }
  15%  { opacity: 0.55; }
  100% { opacity: 0;    transform: scale(1.05); }
}

/* subtle perspective grid floor at the lower half */
#cta .cta__grid {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 160%;
  height: 60%;
  transform: translateX(-50%);
  background-image:
    linear-gradient(to right, var(--border-color-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-color-soft) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  /* fade the grid out toward the edges + top for a floating-floor feel */
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000 0%, transparent 70%);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */
#cta .container {
  position: relative;
  z-index: var(--z-content);
}

#cta .cta__header {
  /* override the default left bias from .section-header for a centered closer */
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 46rem;
}

#cta .section-title {
  margin-top: var(--space-sm);
}

#cta .section-lead {
  margin-top: var(--space-md);
  margin-inline: auto;
}

/* action row */
#cta .cta__actions {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   PULSING / BREATHING GLOW on the primary CTA
   Layered behind the button via ::before so it never affects layout, and
   only animates opacity + transform (GPU-friendly).
   -------------------------------------------------------------------------- */
#cta .cta__pulse {
  position: relative;
}

#cta .cta__pulse::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--gradient-accent-h);
  filter: blur(14px);
  opacity: 0.55;
  transform: scale(1);
  will-change: opacity, transform;
  animation: ctaBreathe 3.2s var(--ease-in-out) infinite;
  pointer-events: none;
}

#cta .cta__pulse:hover::before {
  opacity: 0.8;
}

@keyframes ctaBreathe {
  0%, 100% { opacity: 0.40; transform: scale(0.97); }
  50%      { opacity: 0.75; transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: stack the actions full-width on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  #cta .cta__actions .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION: kill all decorative + breathing motion, keep visible
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #cta .cta__ring {
    animation: none;
    opacity: 0.3;
    transform: scale(0.85);
  }
  #cta .cta__pulse::before {
    animation: none;
    opacity: 0.5;
    transform: scale(1);
  }
}