/* Verveware's warm pointer light, adapted to the portfolio's cream canvas. */
.contact-section.footer-cursor-ready {
  position: relative;
  isolation: isolate;
}

.footer-cursor-ready > .container {
  position: relative;
  z-index: 1;
}

.footer-aurora,
.footer-aurora__field,
.footer-aurora__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer-aurora {
  z-index: 0;
  overflow: hidden;
  --footer-light-x: 40%;
  --footer-light-y: 80%;
  --footer-light-size: clamp(300px, 38vw, 560px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px);
  mask-image: linear-gradient(180deg, transparent, #000 160px);
}

.footer-aurora__field {
  background:
    radial-gradient(ellipse 58% 58% at 10% 100%, color-mix(in srgb, var(--color-blue, #87a9e0) 17%, transparent), transparent 76%),
    radial-gradient(ellipse 42% 58% at 96% 65%, color-mix(in srgb, var(--color-orange, #ee9875) 13%, transparent), transparent 76%),
    radial-gradient(ellipse 40% 35% at 70% 100%, color-mix(in srgb, var(--color-accent, #d4e766) 10%, transparent), transparent 78%);
}

.footer-aurora__spot {
  background: radial-gradient(circle var(--footer-light-size) at var(--footer-light-x) var(--footer-light-y),
    color-mix(in srgb, var(--color-orange, #ee9875) 28%, transparent),
    color-mix(in srgb, var(--color-orange, #ee9875) 16%, transparent) 28%,
    color-mix(in srgb, var(--color-blue, #87a9e0) 13%, transparent) 52%,
    transparent 74%);
}

.footer-cursor-ready .contact-options .button { position: relative; }

.footer-cursor-ready .contact-options .button::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(210px circle at var(--edge-light-x, -999px) var(--edge-light-y, -999px),
    var(--color-orange-deep, #b5654b),
    color-mix(in srgb, var(--color-blue-deep, #5276b1) 80%, transparent) 38%,
    transparent 72%);
  -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;
}

.footer-cursor-active .contact-options .button::after { opacity: 1; }

html:not(.motion-on) .footer-aurora__spot { opacity: .65; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .footer-cursor-ready .contact-options .button::after { display: none; }
  .footer-aurora__spot { opacity: .65; }
}