/* Adapted from the user-provided React Bits BorderGlow. */
.home-page :is(.hero-platform-button, .contact-primary-button) {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 999px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.home-page :is(.hero-platform-button, .contact-primary-button)::before,
.home-page :is(.hero-platform-button, .contact-primary-button)::after,
.home-page :is(.hero-platform-button, .contact-primary-button) > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: 0;
  pointer-events: none;
}

.home-page :is(.hero-platform-button, .contact-primary-button):not(.glow-pointer):not(.sweep-active):not(:focus-visible)::before,
.home-page :is(.hero-platform-button, .contact-primary-button):not(.glow-pointer):not(.sweep-active):not(:focus-visible)::after,
.home-page :is(.hero-platform-button, .contact-primary-button):not(.glow-pointer):not(.sweep-active):not(:focus-visible) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.home-page :is(.hero-platform-button, .contact-primary-button)::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: clamp(0, calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), 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%)
    );
}

/* colored mesh-gradient background fill near edges */
.home-page :is(.hero-platform-button, .contact-primary-button)::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--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(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: clamp(0, calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), 1);
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.home-page :is(.hero-platform-button, .contact-primary-button) > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

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

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

.home-page :is(.hero-platform-button, .contact-primary-button) > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}


/* Preserve the existing link geometry and isolate the decoration from hit testing. */
.home-page .hero-btn-group :is(.hero-platform-button, .contact-primary-button) {
  --card-bg: #120F17;
  --fill-opacity: .5;
  --gradient-base: linear-gradient(#c084fc 0 100%);
  --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%);
  overflow: visible; background: var(--card-bg); border: 1px solid rgb(255 255 255 / 15%);
  box-shadow: 0 1px 2px #0000001a, 0 2px 4px #0000001a, 0 4px 8px #0000001a, 0 8px 16px #0000001a, 0 16px 32px #0000001a, 0 32px 64px #0000001a;
}
.home-page :is(.hero-platform-button, .contact-primary-button) > .border-glow-label { position: relative; z-index: 2; }
.home-page :is(.hero-platform-button, .contact-primary-button):focus-visible { --edge-proximity: 100 !important; --cursor-angle: 45deg !important; outline: 2px solid #f5e0a3; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .home-page :is(.hero-platform-button, .contact-primary-button)::before, .home-page :is(.hero-platform-button, .contact-primary-button)::after, .home-page :is(.hero-platform-button, .contact-primary-button) > .edge-light { transition: none; opacity: 0; }
  .home-page .hero-btn-group :is(.hero-platform-button, .contact-primary-button) { border-color: #c084fc; }
}
@media (forced-colors: active) {
  .home-page :is(.hero-platform-button, .contact-primary-button)::before, .home-page :is(.hero-platform-button, .contact-primary-button)::after, .home-page :is(.hero-platform-button, .contact-primary-button) > .edge-light { display: none; }
  .home-page .hero-btn-group :is(.hero-platform-button, .contact-primary-button) { border-color: ButtonText; }
}

/* Contact CTA uses the same interaction with a cool blue palette. */
.home-page #contact .contact-primary-button {
  line-height: 1.25;
  --card-bg: #141414;
  --fill-opacity: .5;
  --gradient-base: linear-gradient(#2563ff 0 100%);
  --gradient-one: radial-gradient(at 80% 55%, #2563ff 0, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #38bdf8 0, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #00e5ff 0, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #2563ff 0, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #38bdf8 0, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #00e5ff 0, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #38bdf8 0, transparent 50%);
  --glow-color: hsl(205deg 100% 75% / 100%);
  --glow-color-60: hsl(205deg 100% 75% / 60%);
  --glow-color-50: hsl(205deg 100% 75% / 50%);
  --glow-color-40: hsl(205deg 100% 75% / 40%);
  --glow-color-30: hsl(205deg 100% 75% / 30%);
  --glow-color-20: hsl(205deg 100% 75% / 20%);
  --glow-color-10: hsl(205deg 100% 75% / 10%);
  overflow: visible;
}
.home-page #contact .contact-primary-button > .edge-light { background: none; background-clip: border-box; -webkit-text-fill-color: initial; }
.home-page #contact .contact-primary-button:focus-visible { outline-color: #7dd3fc; }
@media (prefers-reduced-motion: reduce) {
  .home-page #contact .contact-primary-button { border-color: #38bdf8; }
}