/* ============================================================
   c-ctafx — closing-CTA entrance (the home's x3 ctafx, shared)
   The aurora paints full-bleed over the section while it enters
   from the bottom edge, then contracts into the rounded card once
   its top reaches ~30% of the viewport. Driven by
   /js/behaviors/cta-fx.js:
     [data-cta-fx]       the section (positions the bg, owns the vars)
     .c-ctafx-bg         full-bleed layer, first child of the section
     [data-cta-fx-card]  the card; carries .c-ctafx-card for the aurora
   No-JS / reduced-motion: is-ctafx never lands, the bg stays hidden,
   and the card keeps its own aurora — the plain static design.
   ============================================================ */

/* the aurora recipe, identical to the home CTA card. The base is a FLAT
   background-color (the blue tint moved into a gradient layer over it):
   static contrast checkers can't resolve color-mix or background-image,
   so the card's white type measured 1.05:1 (a11y audit 2026-08-05) —
   same fallback pattern as .btn--primary. Visually identical: blue-deep
   at 14% over black == color-mix(black 86%, blue-deep). */
.c-ctafx-card,
.c-ctafx-bg {
  background-color: var(--color-black);
  background-image:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-x3-indigo) 65%, transparent), transparent 65%),
    linear-gradient(
      color-mix(in oklab, var(--color-x3-blue-deep) 14%, transparent),
      color-mix(in oklab, var(--color-x3-blue-deep) 14%, transparent)
    );
}

[data-cta-fx] { position: relative; }
/* the card paints above the absolute bg layer */
[data-cta-fx] [data-cta-fx-card] { position: relative; }

.c-ctafx-bg {
  display: none;
  position: absolute;
  inset: 0;
}
[data-cta-fx].is-ctafx .c-ctafx-bg {
  display: block;
  clip-path: inset(
    calc(var(--ctafx-p, 1) * var(--ctafx-t, 0px))
    calc(var(--ctafx-p, 1) * var(--ctafx-r, 0px))
    calc(var(--ctafx-p, 1) * var(--ctafx-b, 0px))
    calc(var(--ctafx-p, 1) * var(--ctafx-l, 0px))
    round calc(var(--ctafx-p, 1) * 24px)
  );
}
/* while armed the bg layer is the only aurora, so the contraction
   never double-paints against the card's own gradient */
[data-cta-fx].is-ctafx .c-ctafx-card { background: none; }