/*========================
  PACKAGE BUTTON HINT
=========================*/

@keyframes buttonHintPulse {
  0% {
    box-shadow: 0 0 0 rgba(var(--hint-glow-blue-rgb), 0);
    transform: scale(1);
    border-color: var(--hint-border-idle);
  }

  25% {
    box-shadow:
      0 0 0.8rem rgba(var(--hint-glow-blue-rgb), 0.95),
      0 0 1.8rem rgba(var(--hint-glow-blue-rgb), 0.65);
    transform: scale(1.04);
    border-color: rgba(var(--hint-glow-blue-rgb), 1);
  }

  50% {
    box-shadow:
      0 0 1rem rgba(var(--hint-glow-cyan-rgb), 0.85),
      0 0 2.2rem rgba(var(--hint-glow-blue-rgb), 0.75);
    transform: scale(1.06);
    border-color: rgba(var(--hint-glow-cyan-rgb), 1);
  }

  75% {
    box-shadow:
      0 0 0.8rem rgba(var(--hint-glow-blue-rgb), 0.95),
      0 0 1.8rem rgba(var(--hint-glow-blue-rgb), 0.65);
    transform: scale(1.04);
    border-color: rgba(var(--hint-glow-blue-rgb), 1);
  }

  100% {
    box-shadow: 0 0 0 rgba(var(--hint-glow-blue-rgb), 0);
    transform: scale(1);
    border-color: var(--hint-border-idle);
  }
}

.package-btn-aboutme.button-hint {
  animation: buttonHintPulse 1s ease-in-out 4;
}

/*========================
  SCROLL ARROW ANIMATION
=========================*/

.scroll-arrow-icon {
  animation: bounce 2s infinite;
}

/* BOUNCE ANIMATION FOR THE SCROLL ARROW */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

/*========================
  REDUCE MOTION
=========================*/

@media (prefers-reduced-motion: reduce) {
  .scroll-arrow-icon {
    animation: none;
  }
}