/* ==========================================================================
   borderglow.v1.css
   Pointer-tracked edge glow for cards (BorderGlow.tsx). Adapted from the
   React Bits BorderGlow technique to plain CSS + IDW tokens; zero dependencies.

   How it works
   - A glow layer sits in an ::before pseudo on the wrapper, behind nothing but
     the card's own border. It is a radial gradient centred on the pointer
     (--glow-x / --glow-y, written by BorderGlow.tsx on pointermove), then clipped
     to a 1px-ish ring with a mask so colour only ever lands ON THE BORDER, never
     across the card face or behind text. Text contrast is therefore untouched.
   - --glow-on (0 or 1) fades the ring in on pointer-enter / out on leave.
   - Colour comes from the brand tokens: navy/blue --blue with an amber --amber
     accent, kept low-alpha and restrained.

   Accessibility / motion
   - The wrapper only renders the glow when html.js is present and motion is on.
     Under html.no-motion / prefers-reduced-motion the ::before is removed and the
     card shows a plain static border - no glow, and BorderGlow.tsx attaches no
     listeners (so nothing runs).
   ========================================================================== */

/* .bg-glow is added directly to the card element itself (BorderGlow.tsx forwards
   the card's className), so it stays a direct grid child and keeps all its own
   layout. We only establish a positioning context and the glow custom props;
   the card's own .pp-plan rules already set position:relative, border, radius. */
.bg-glow {
  --glow-x: 50%;
  --glow-y: 0%;
  --glow-on: 0;
}

/* The glow ring. Painted only under html.js with motion on (see the no-motion
   reset below). A radial gradient follows the pointer; the mask composite keeps
   colour on a thin border band, never on the face. */
html.js .bg-glow::before {
  content: "";
  position: absolute;
  inset: -1px;                 /* sit just outside the child border edge */
  border-radius: inherit;
  padding: 1.5px;              /* ring thickness - the masked band */
  pointer-events: none;
  z-index: 1;                  /* above the card border, below its content */
  opacity: var(--glow-on);
  transition: opacity .35s var(--ease-monument);
  background:
    radial-gradient(
      170px circle at var(--glow-x) var(--glow-y),
      var(--glow-blue) 0%,
      color-mix(in srgb, var(--amber) 55%, transparent) 38%,
      transparent 70%
    );
  /* clip the fill to the ring only: show = full box, hide = padding box, the
     XOR leaves just the 1.5px frame. Both -webkit- and standard for Safari. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* The card's direct children (tier label, name, price, features, CTA, and the
   absolutely-positioned "recommended" badge) sit above the glow ring so the ring
   only ever shows on the bare border edge, never over content. The card keeps its
   own border, background, contrast and layout unchanged. */
.bg-glow > * {
  position: relative;
  z-index: 2;
}

/* Reduced motion: kill the glow entirely and leave a plain static border. This
   matches BorderGlow.tsx, which attaches no pointer listeners under no-motion. */
html.no-motion .bg-glow::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .bg-glow::before { display: none; }
}