/* ===========================================================================
   Cursor-reactive border glow, ported from the React "Border Glow" component
   at reactbits.dev/components/border-glow to plain CSS + vanilla JS (no
   React runtime is available on this static export - Framer's own bundle
   is the only JS framework present, and it isn't ours to extend).

   Mechanics, unchanged from the original: --edge-proximity (how close the
   pointer is to the element's edge, 0-100) drives opacity, and a conic
   gradient aimed at --cursor-angle (the pointer's angle from centre) masks
   everything down to just the stretch of border nearest the cursor - so
   the lit arc travels ALONG the border as the pointer moves. Both custom
   properties are written by border-glow.js on every pointermove.

   How the ring itself is drawn: NOT by masking out the middle (a first
   attempt did that with mask-composite and the layers ended up painting
   the whole card instead of a rim - the "blob"). The original's approach,
   kept here, is a background layer stack: the colour gradients are clipped
   to border-box, and a flat fill of the CARD'S OWN background colour is
   clipped to padding-box and stacked on top. That flat layer covers the
   gradients everywhere except the 1.5px border ring, which is the only
   place a border-box layer extends past a padding-box one. It needs to
   know the card's real background, so border-glow.js measures it and
   writes --card-bg (re-measuring on pointerenter, which keeps it correct
   across dark/light theme switches - the glow is only visible on hover, so
   a refresh there is always in time).

   The pseudo-element sits at z-index -1, which - inside the stacking
   context that `isolation: isolate` creates here - paints it above the
   element's own background but below its in-flow content, so the ring can
   never cover card text. --glow-padding stays 0 on this site so the outer
   glow ring stays inside the element's own box: several targets (the
   review-card marquee, the store-button rows) sit in ancestors that clip
   overflow for unrelated reasons, and a 0 bleed sidesteps touching that.

   The original's third layer - a soft-light mesh fill across the card
   interior - is deliberately not ported. It reads as a wash across the
   middle of the card rather than anything on the border, and it was the
   other half of the blob; the border ring plus the outer glow carry the
   effect on their own. */

[data-aimore-glow] {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --glow-padding: 0px;
  --cone-spread: 25;
  --ring-width: 2px;

  position: relative;
  isolation: isolate;
}

[data-aimore-glow]::before,
[data-aimore-glow] > .aimore-glow-edge {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

[data-aimore-glow]:not(:hover)::before,
[data-aimore-glow]:not(:hover) > .aimore-glow-edge {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* the gradient border ring itself */
[data-aimore-glow]::before {
  z-index: -1;
  border: var(--ring-width) solid transparent;
  background:
    linear-gradient(var(--card-bg, #101114) 0 100%) padding-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-base) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* the soft bloom hugging that same stretch of border */
[data-aimore-glow] > .aimore-glow-edge {
  inset: calc(var(--glow-padding) * -1);
  z-index: -1;

  -webkit-mask-image:
    conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image:
    conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

[data-aimore-glow] > .aimore-glow-edge::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  /* The inset half of this stack is what actually reads as the glow: the
     outer shadows sit outside the element's own box, and several of these
     targets live inside ancestors that clip overflow (the review-card
     marquee especially), so an outward halo is unreliable. The inset
     blurs hug the border from the inside and can't be clipped away. */
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(205deg 95% 65% / 100%)),
    inset 0 0 3px 0 var(--glow-color-60, hsl(205deg 95% 65% / 60%)),
    inset 0 0 8px 0 var(--glow-color-50, hsl(205deg 95% 65% / 50%)),
    inset 0 0 16px 0 var(--glow-color-40, hsl(205deg 95% 65% / 40%)),
    inset 0 0 28px 2px var(--glow-color-20, hsl(205deg 95% 65% / 20%)),
    inset 0 0 48px 6px var(--glow-color-10, hsl(205deg 95% 65% / 10%)),
    0 0 3px 0 var(--glow-color-60, hsl(205deg 95% 65% / 60%)),
    0 0 8px 0 var(--glow-color-50, hsl(205deg 95% 65% / 50%)),
    0 0 16px 0 var(--glow-color-30, hsl(205deg 95% 65% / 30%)),
    0 0 32px 2px var(--glow-color-20, hsl(205deg 95% 65% / 20%)),
    0 0 56px 6px var(--glow-color-10, hsl(205deg 95% 65% / 10%));
}

/* --- overlay variant, for targets whose visible surface is a CHILD -------
   The ring above is painted at z-index -1, which works when the element
   itself carries the background the ring is cut out of (the review and FAQ
   cards do). The App Store / Google Play badges don't: their white surface
   is a child element filling the button, so a ring behind it is simply
   covered up. The bloom has a second problem there - `plus-lighter` over
   white can only produce white, so it never shows.

   So those get a ring painted ON TOP of the content instead. It can't use
   the card-bg cut-out trick, since filling the middle with an opaque
   colour would hide the badge artwork - inset box-shadows draw only near
   the edges and leave the middle genuinely transparent, which is what
   makes overlaying safe. It costs the mesh-gradient colouring (a single
   glow colour instead), but on a small badge that reads the same. The
   separate bloom layer is switched off here; these shadows already carry
   both the ring and its falloff. */
[data-aimore-glow-overlay]::before {
  z-index: 2;
  border: none;
  background: none;
  box-shadow:
    inset 0 0 0 var(--ring-width) var(--glow-color, hsl(205deg 95% 68% / 100%)),
    inset 0 0 6px 0 var(--glow-color-50, hsl(205deg 95% 68% / 50%)),
    inset 0 0 14px 0 var(--glow-color-30, hsl(205deg 95% 68% / 30%)),
    0 0 6px 0 var(--glow-color-50, hsl(205deg 95% 68% / 50%)),
    0 0 14px 0 var(--glow-color-30, hsl(205deg 95% 68% / 30%)),
    0 0 28px 2px var(--glow-color-20, hsl(205deg 95% 68% / 20%));
}

[data-aimore-glow-overlay] > .aimore-glow-edge {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-aimore-glow]::before,
  [data-aimore-glow] > .aimore-glow-edge {
    display: none;
  }
}