/* =========================
   GLOW BUTTONS
========================= */

.glow-button {
  position: relative;
  animation: glowPulse 1.7s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.85),
    0 0 18px rgba(34, 211, 238, 0.55),
    0 0 34px rgba(167, 139, 250, 0.35);
}

.glow-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(103, 232, 249, 0.55);
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.45),
    0 0 38px rgba(167, 139, 250, 0.35);
  opacity: 0.8;
  pointer-events: none;
  animation: glowRing 1.7s ease-in-out infinite;
}

.glow-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 1),
    0 0 24px rgba(34, 211, 238, 0.75),
    0 0 48px rgba(167, 139, 250, 0.5);
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.75),
      0 0 16px rgba(34, 211, 238, 0.45),
      0 0 30px rgba(167, 139, 250, 0.25);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(103, 232, 249, 1),
      0 0 26px rgba(34, 211, 238, 0.75),
      0 0 52px rgba(167, 139, 250, 0.45);
  }
}

@keyframes glowRing {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* =========================
   VIEW TRANSITIONS
========================= */

.view-enter {
  animation: viewEnter 0.35s ease;
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}