/* src/styles.css */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root {
  --glowingWidth: 4px;
  --glowingBlurRatio: 1.5;
  --glowingBorderZIndex: 999;
  --rotationDuration: 2s;
  --glowingBlendMode: multiply;
  --glowingColors:
    cyan,
    purple,
    tomato,
    purple,
    cyan;
  --glowingColors2:
    white,
    transparent,
    transparent,
    white,
    transparent,
    transparent,
    white;
}
.glowing-wrapper {
  position: fixed;
  z-index: var(--glowingBorderZIndex);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  --glowingInnerWidth: calc(var(--glowingWidth) / 4);
}
.glowing-container {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: filter 0.5s ease-in-out;
}
.glowing-border {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.glowing-container--blur-wrapper {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--glowingWidth) / 2 * var(--glowingBlurRatio)));
  border-radius: inherit;
}
.glowing-border::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: glowing-spin-gradient var(--rotationDuration) linear infinite;
  border-radius: inherit;
  border: var(--glowingWidth) solid transparent;
  background: conic-gradient(from var(--angle), var(--glowingColors)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: inset 0.5s ease-in-out, filter;
}
.glowing-container-2 {
  inset: calc(var(--glowingInnerWidth) * 1);
}
.glowing-border2::after {
  border: calc(var(--glowingWidth) / 2) solid transparent;
}
.glowing-container-2 .glowing-container--blur-wrapper {
  filter: blur(calc(var(--glowingWidth) / 3 * var(--glowingBlurRatio)));
}
.glowing-border3::after {
  inset: calc(var(--glowingWidth) /-2);
  border: calc(var(--glowingWidth) * 2) solid transparent;
  background: conic-gradient(from var(--angle), var(--glowingColors2)) border-box;
  animation-direction: reverse;
  animation-duration: calc(var(--rotationDuration) * 1.31);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@keyframes glowing-spin-gradient {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}