/* Colored glowing edge — port of https://codepen.io/simeydotme/pen/RNWoPRj */

.glow-edge {
  --glow-sens: 30;
  --color-sens: calc(var(--glow-sens) + 20);
  --card-bg: linear-gradient(8deg, #171a18 75%, #1d211f 75.5%);
  --blend: soft-light;
  --glow-blend: plus-lighter;
  --glow-color: 40deg 80% 80%;
  --glow-boost: 0%;
  --pointer-°: 45deg;
  --pointer-d: 0;
  --pads: 1.75rem;
  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  border: 1px solid rgb(255 255 255 / 22%);
  background: var(--card-bg);
  background-repeat: no-repeat;
}

body.theme-light .glow-edge {
  --card-bg: linear-gradient(8deg, #f2f3f2 75%, #f8f8f7 75.5%);
  --blend: darken;
  --glow-blend: luminosity;
  --glow-color: 280deg 90% 95%;
  --glow-boost: 15%;
  border-color: rgb(20 24 22 / 8%);
}

.glow-edge--on-dark,
body.theme-light .glow-edge.glow-edge--on-dark {
  --card-bg: transparent;
  --blend: plus-lighter;
  --glow-blend: plus-lighter;
  --glow-color: 40deg 80% 80%;
  --glow-boost: 5%;
  border-color: rgb(255 255 255 / 22%);
}

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

.glow-edge:not(:hover):not(.glow-edge--animating)::before,
.glow-edge:not(:hover):not(.glow-edge--animating)::after,
.glow-edge:not(:hover):not(.glow-edge--animating) > .glow-edge__glow {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.glow-edge::before {
  border: 1px solid transparent;
  background:
    var(--card-bg) padding-box,
    linear-gradient(transparent, transparent) border-box,
    radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) border-box,
    linear-gradient(#c299ff 0 100%) border-box;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  -webkit-mask-image: conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
  mask-image: conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.glow-edge::after {
  border: 1px solid transparent;
  background:
    radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) padding-box,
    linear-gradient(#c299ff 0 100%) padding-box;
  -webkit-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(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  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(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mix-blend-mode: var(--blend);
}

.glow-edge > .glow-edge__glow {
  --outset: var(--pads);
  inset: calc(var(--outset) * -1);
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image: conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
  mix-blend-mode: var(--glow-blend);
}

.glow-edge > .glow-edge__glow::before {
  content: "";
  position: absolute;
  inset: var(--outset);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-color) / 100%),
    inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
    inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
    inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
    inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
    inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
    inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
    0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
    0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
    0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
    0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
    0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
    0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
}

.contact-modal__panel.glow-edge,
body:not(.theme-light) .contact-modal__panel.glow-edge,
body.theme-light .contact-modal__panel.glow-edge {
  overflow: visible;
  max-height: none;
  padding: 0;
  background: var(--card-bg);
  background-repeat: no-repeat;
}

.contact-modal__body {
  position: relative;
  z-index: 1;
  max-height: min(92vh, 720px);
  overflow: auto;
  padding: 1.75rem 1.6rem 1.4rem;
  border-radius: inherit;
}

.contact-modal__panel.glow-edge .contact-modal__close {
  z-index: 3;
}

.image-lightbox__figure.glow-edge {
  border-radius: 14px;
}

.image-lightbox__figure.glow-edge .image-lightbox__img {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

@media (max-width: 640px) {
  .glow-edge {
    --pads: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-edge::before,
  .glow-edge::after,
  .glow-edge > .glow-edge__glow {
    transition: none;
  }
}