/*
  Native BorderGlow adaptation.
  The glow follows the pointer angle and becomes stronger when the pointer nears a card edge.
*/
.border-glow {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 28;
  --color-sensitivity: 48;
  --cone-spread: 24;
  --glow-padding: 42px;
  --glow-color: hsl(80deg 100% 76% / 100%);
  --glow-color-60: hsl(80deg 100% 76% / 60%);
  --glow-color-50: hsl(80deg 100% 76% / 50%);
  --glow-color-40: hsl(80deg 100% 76% / 40%);
  --glow-color-30: hsl(80deg 100% 76% / 30%);
  --glow-color-20: hsl(80deg 100% 76% / 20%);
  --glow-color-10: hsl(80deg 100% 76% / 10%);
  --gradient-one: radial-gradient(at 80% 55%, #9cff3f 0, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #ffb8df 0, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #66ddff 0, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #ffe878 0, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f2f0e8 0, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #9cff3f 0, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #ffb8df 0, transparent 50%);
  --gradient-base: linear-gradient(#9cff3f 0 100%);

  overflow: visible;
  transform: translate3d(0, 0, .01px);
}

.border-glow .mini-art {
  inset: 0;
  clip-path: inset(0 round var(--portfolio-card-radius-lg));
  transform: none !important;
}

.border-glow::before,
.border-glow::after,
.border-glow > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .24s ease-out;
}

.border-glow::before,
.border-glow::after {
  z-index: 3;
}

.border-glow > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 4;
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  -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%
    );
}

.border-glow > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 2px 0 var(--glow-color-60),
    inset 0 0 5px 0 var(--glow-color-50),
    inset 0 0 10px 0 var(--glow-color-40),
    inset 0 0 20px 0 var(--glow-color-30),
    inset 0 0 34px 2px var(--glow-color-20),
    inset 0 0 62px 2px var(--glow-color-10),
    0 0 2px 0 var(--glow-color-60),
    0 0 5px 0 var(--glow-color-50),
    0 0 10px 0 var(--glow-color-40),
    0 0 20px 0 var(--glow-color-30),
    0 0 34px 2px var(--glow-color-20),
    0 0 62px 2px var(--glow-color-10);
}

.border-glow::before {
  padding: 1px;
  background:
    conic-gradient(
      from calc(var(--cursor-angle) - 36deg),
      transparent 0deg,
      rgb(156 255 63 / 0) 5deg,
      rgb(156 255 63 / .9) 22deg,
      rgb(242 240 232 / .95) 38deg,
      rgb(255 184 223 / .75) 54deg,
      transparent 78deg,
      transparent 360deg
    );
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -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;
}

.border-glow::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .04), rgb(0 0 0 / .52)),
    linear-gradient(90deg, rgb(0 0 0 / .34), rgb(0 0 0 / .08) 58%, rgb(0 0 0 / .2));
  opacity: 1;
  mix-blend-mode: normal;
}

.border-glow:not(:hover):not(.sweep-active)::before,
.border-glow:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition-duration: .65s;
}

.border-glow .mini-art {
  z-index: 0;
}

.border-glow:hover .mini-art {
  transform: none !important;
}

.poster-card.border-glow > img {
  border-radius: inherit;
  transform: none !important;
}

.poster-card.border-glow:hover > img,
.poster-card.border-glow:focus-visible > img {
  transform: none !important;
}

.poster-card.border-glow > .card-label {
  z-index: 5;
}

.border-glow .selected-work-caption {
  z-index: 2;
}

/* Visual directory cards must clip their image and glow at the shared rounded edge. */
.works-directory-card.border-glow {
  overflow: hidden;
}

.works-directory-card.border-glow > img,
.works-directory-card.border-glow > .edge-light {
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .border-glow::before,
  .border-glow::after,
  .border-glow > .edge-light {
    display: none;
  }
}