@property --gc-spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --gc-glow-cyan: 93, 228, 255;
  --gc-glow-mint: 159, 255, 213;
  --gc-glow-violet: 180, 124, 255;
  --gc-glow-gold: 255, 179, 92;
}

.gc-spin-target {
  position: relative;
}

.gc-spin-border {
  --gc-spin-speed: 8.4s;
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 1px solid rgba(var(--gc-glow-cyan), 0.34);
  border-radius: inherit;
  box-shadow:
    0 0 7px rgba(var(--gc-glow-cyan), 0.17),
    0 0 15px rgba(var(--gc-glow-violet), 0.08);
  opacity: 0.68;
  pointer-events: none;
  transition: opacity 220ms ease, filter 220ms ease;
}

.gc-spin-control > .gc-spin-border {
  --gc-spin-speed: 5.8s;
  opacity: 0.88;
}

.gc-spin-target:hover > .gc-spin-border,
.gc-spin-target:focus-visible > .gc-spin-border,
.gc-spin-target:focus-within > .gc-spin-border {
  opacity: 1;
  filter:
    drop-shadow(0 0 4px rgba(var(--gc-glow-cyan), 0.62))
    drop-shadow(0 0 8px rgba(var(--gc-glow-violet), 0.32));
}

.gc-spin-target:disabled > .gc-spin-border,
.gc-spin-target[aria-disabled="true"] > .gc-spin-border {
  opacity: 0.24;
  animation-play-state: paused;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .gc-spin-border {
    padding: 1px;
    border: 0;
    background: conic-gradient(
      from var(--gc-spin-angle),
      rgba(var(--gc-glow-cyan), 0.14) 0deg,
      rgba(var(--gc-glow-cyan), 0.14) 205deg,
      rgba(var(--gc-glow-cyan), 0.72) 231deg,
      rgba(var(--gc-glow-mint), 1) 247deg,
      rgba(var(--gc-glow-violet), 1) 266deg,
      rgba(var(--gc-glow-gold), 0.84) 282deg,
      rgba(var(--gc-glow-cyan), 0.14) 312deg,
      rgba(var(--gc-glow-cyan), 0.14) 360deg
    );
    box-shadow: none;
    filter:
      drop-shadow(0 0 4px rgba(var(--gc-glow-cyan), 0.46))
      drop-shadow(0 0 9px rgba(var(--gc-glow-violet), 0.24));
    -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;
    animation: gc-spin-border-turn var(--gc-spin-speed) linear infinite;
    animation-play-state: paused;
  }

  .gc-spin-active > .gc-spin-border {
    animation-play-state: running;
  }
}

.gc-spin-field {
  border-color: rgba(var(--gc-glow-cyan), 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(var(--gc-glow-violet), 0.12),
    0 0 11px rgba(var(--gc-glow-cyan), 0.14) !important;
  animation: gc-spin-field-glow 5.8s linear infinite;
}

.gc-spin-field:hover,
.gc-spin-field:focus {
  border-color: rgba(var(--gc-glow-mint), 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--gc-glow-violet), 0.25),
    0 0 17px rgba(var(--gc-glow-cyan), 0.24) !important;
}

@keyframes gc-spin-border-turn {
  to {
    --gc-spin-angle: 360deg;
  }
}

@keyframes gc-spin-field-glow {
  0%,
  100% {
    border-color: rgba(var(--gc-glow-cyan), 0.46);
    box-shadow:
      0 0 0 1px rgba(var(--gc-glow-violet), 0.1),
      0 0 10px rgba(var(--gc-glow-cyan), 0.13);
  }

  50% {
    border-color: rgba(var(--gc-glow-violet), 0.52);
    box-shadow:
      0 0 0 1px rgba(var(--gc-glow-cyan), 0.14),
      0 0 13px rgba(var(--gc-glow-violet), 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-spin-border {
    --gc-spin-angle: 248deg;
    animation: none !important;
  }

  .gc-spin-field {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .shop-page .gc-spin-border {
    --gc-spin-angle: 248deg;
    animation: none !important;
    filter: none;
  }

  .shop-page .gc-spin-field {
    animation: none !important;
  }
}