/* BorderGlow's edge-proximity interaction adapted for the static Showcase cards. */
.featured-projects .border-glow-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-strength: 0;
  isolation: isolate;
  overflow: visible;
}

.featured-projects .border-glow-card::before {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background: radial-gradient(155px circle at var(--glow-x) var(--glow-y), #38bdf835, #c084fc16 48%, transparent 100%);
  filter: none;
  opacity: calc(var(--glow-strength) * .8);
  pointer-events: none;
  animation: none;
}

.featured-projects .border-glow-card::after {
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  content: "";
  background: radial-gradient(140px circle at var(--glow-x) var(--glow-y), #38bdf8 0%, #c084fc 48%, #f472b6 68%, transparent 100%);
  -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;
  opacity: var(--glow-strength);
  pointer-events: none;
  transition: opacity 220ms ease-out;
}

.featured-projects .border-glow-card > .border-glow-edge {
  position: absolute;
  inset: -5px;
  z-index: 1;
  border: 2px solid #91d8ff;
  border-radius: inherit;
  box-shadow: 0 0 12px #38bdf8a8, 0 0 32px #c084fc70;
  filter: blur(7px);
  -webkit-mask-image: radial-gradient(115px circle at calc(var(--glow-x) + 5px) calc(var(--glow-y) + 5px), #000 5%, transparent 100%);
  mask-image: radial-gradient(115px circle at calc(var(--glow-x) + 5px) calc(var(--glow-y) + 5px), #000 5%, transparent 100%);
  opacity: calc(var(--glow-strength) * .8);
  pointer-events: none;
  transition: opacity 220ms ease-out;
}

.featured-projects .border-glow-card > :not(.border-glow-edge) {
  position: relative;
  z-index: 3;
}

.featured-projects .border-glow-card:focus-visible {
  outline: 2px solid #bde9ff;
  outline-offset: 4px;
}

@media (hover: none), (pointer: coarse) {
  .featured-projects .border-glow-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-projects .border-glow-card::after,
  .featured-projects .border-glow-card > .border-glow-edge { transition: none; }
}

/* Shared treatment for card surfaces on the other public pages. */
.site-glow-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-strength: 0;
  position: relative;
}

.site-glow-card > .site-glow-border,
.site-glow-card > .site-glow-halo {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
  color: transparent;
  font-size: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
}

.site-glow-card > .site-glow-border {
  inset: 0;
  z-index: 4;
  padding: 2px;
  border: 0;
  border-radius: inherit;
  background: radial-gradient(145px circle at var(--glow-x) var(--glow-y), #38bdf8 0%, #c084fc 48%, #f472b6 68%, transparent 100%);
  -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;
  opacity: var(--glow-strength);
}

.site-glow-card > .site-glow-halo {
  inset: -5px;
  z-index: 3;
  padding: 0;
  border: 2px solid #91d8ff;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 12px #38bdf8a8, 0 0 32px #c084fc70;
  filter: blur(7px);
  -webkit-mask-image: radial-gradient(115px circle at calc(var(--glow-x) + 5px) calc(var(--glow-y) + 5px), #000 5%, transparent 100%);
  mask-image: radial-gradient(115px circle at calc(var(--glow-x) + 5px) calc(var(--glow-y) + 5px), #000 5%, transparent 100%);
  opacity: calc(var(--glow-strength) * .8);
}

@media (prefers-reduced-motion: reduce) {
  .site-glow-card > .site-glow-border,
  .site-glow-card > .site-glow-halo { transition: none; }
}