// Cursor-tracked border glow — ports the reactbits.dev BorderGlow effect.
// All visual state is driven by two custom properties the component writes:
//   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance
//   --wr-border-glow-angle     0deg..360deg, pointer-from-centre angle
// Plus a colour/geometry bag set once from inputs (see border-glow.ts).

.wr-border-glow {
  --wr-border-glow-edge-proximity: 0;
  --wr-border-glow-angle: 45deg;
  // Theme-default halo (overridden inline when `[glowColor]` is set):
  // deep amber that reads on white. Dark theme swaps to the pale pastel.
  --wr-border-glow-color: hsl(40deg 90% 45% / 100%);
  --wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);
  --wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);
  --wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);
  --wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);
  --wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);
  --wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);
  // Theme-default mesh palette (overridden inline when `[colors]` is set):
  // deep tones that read on white. Dark theme restores the pastels below.
  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);
  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);
  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);
  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);
  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);
  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);
  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);
  --wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);
  --wr-border-glow-edge-sensitivity: 30;
  --wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);
  --wr-border-glow-radius: 28px;
  --wr-border-glow-padding: 40px;
  --wr-border-glow-cone-spread: 25;

  position: relative;
  display: grid;
  border-radius: var(--wr-border-glow-radius);
  background: var(--wr-border-glow-bg, var(--wr-color-white, #fff));
  overflow: visible;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
  // The faint static outline uses `box-shadow inset` instead of `border:` —
  // CSS borders + `border-radius` leave 1px subpixel notches at the corners
  // where the mask layers meet the curve, but inset shadows hug the radius
  // pixel-perfect.
  box-shadow: inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-light, rgb(255 255 255 / 15%)));

  &::before,
  &::after,
  & > .wr-border-glow__edge {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
  }

  // Hide the glow layers when the cursor isn't engaged AND the one-shot
  // sweep isn't running.
  &:not(:hover):not(.wr-border-glow--sweeping) {
    &::before,
    &::after,
    & > .wr-border-glow__edge {
      opacity: 0;
      transition: opacity 0.75s ease-in-out;
    }
  }

  // Coloured mesh-gradient slice of the border (the visible "cone" along
  // the perimeter under the cursor).
  &::before {
    border: 1px solid transparent;
    background:
      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-white, #fff)) 0 100%) padding-box,
      linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
        border-box,
      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

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

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

  // Soft interior bloom — same mesh, blended with the card content.
  &::after {
    border: 1px solid transparent;
    background:
      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
        padding-box,
      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

    mask-image:
      linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
      conic-gradient(from var(--wr-border-glow-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-composite: subtract, add, add, add, add, add;

    // `--wr-border-glow-fill-scale` keeps the interior bloom subtle on
    // light surfaces — at full strength the multiply wash darkens the
    // whole card and the cone's surface wedge shows against it.
    opacity: calc(
      var(--wr-border-glow-fill-opacity, 0.5) * var(--wr-border-glow-fill-scale, 0.25) *
        (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
        (100 - var(--wr-border-glow-color-sensitivity))
    );
    mix-blend-mode: var(--wr-border-glow-fill-blend, multiply);
  }

  // Outer halo — stacked box-shadows on a separate child so we can mask
  // the shadows to the cone without affecting the host's content.
  & > .wr-border-glow__edge {
    inset: calc(var(--wr-border-glow-padding) * -1);
    pointer-events: none;
    z-index: 1;

    mask-image: conic-gradient(
      from var(--wr-border-glow-angle) at center,
      black 2.5%,
      transparent 10%,
      transparent 90%,
      black 97.5%
    );
    opacity: calc(
      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) /
        (100 - var(--wr-border-glow-edge-sensitivity))
    );
    // `plus-lighter` saturates to white on a light page — light theme
    // paints the halo as plain colored shadows instead (see block below).
    mix-blend-mode: var(--wr-border-glow-halo-blend, normal);

    &::before {
      content: '';
      position: absolute;
      inset: var(--wr-border-glow-padding);
      border-radius: inherit;
      // Light theme keeps only the outward halo — the inset half washes
      // amber over the card interior without additive blending. Dark
      // restores the full reactbits stack (see block below).
      box-shadow: var(
        --wr-border-glow-edge-shadow,
        inset 0 0 0 1px var(--wr-border-glow-color, hsl(40deg 80% 80% / 100%)),
        0 0 1px 0 var(--wr-border-glow-color-60, hsl(40deg 80% 80% / 60%)),
        0 0 3px 0 var(--wr-border-glow-color-50, hsl(40deg 80% 80% / 50%)),
        0 0 6px 0 var(--wr-border-glow-color-40, hsl(40deg 80% 80% / 40%)),
        0 0 15px 0 var(--wr-border-glow-color-30, hsl(40deg 80% 80% / 30%)),
        0 0 25px 2px var(--wr-border-glow-color-20, hsl(40deg 80% 80% / 20%)),
        0 0 50px 2px var(--wr-border-glow-color-10, hsl(40deg 80% 80% / 10%))
      );
    }
  }

  &__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
}

// Dark theme: restore the reactbits look — pale halo + additive blends.
[data-theme='dark'] .wr-border-glow {
  --wr-border-glow-outline: rgb(255 255 255 / 15%);
  --wr-border-glow-halo-blend: plus-lighter;
  --wr-border-glow-fill-blend: soft-light;
  --wr-border-glow-fill-scale: 1;
  /* stylelint-disable-next-line */
  --wr-border-glow-edge-shadow:
    inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
    inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
    inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
    inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
    0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
    0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
    0 0 50px 2px var(--wr-border-glow-color-10);
  --wr-border-glow-color: hsl(40deg 80% 80% / 100%);
  --wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
  --wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
  --wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
  --wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
  --wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
  --wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
  --wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
}