/* =========================================================
   ZACK PORTFOLIO
   Animations
   ========================================================= */

/* =========================
   Fade
   ========================= */

.fade-up {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;

  transition: opacity 700ms ease;
}

.fade-in.is-visible {
  opacity: 1;
}

/* =========================
   Scale
   ========================= */

.scale-in {
  opacity: 0;
  transform: scale(0.94);

  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* =========================
   Stagger
   ========================= */

.stagger-item {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item:nth-child(1) {
  transition-delay: 100ms;
}

.stagger-item:nth-child(2) {
  transition-delay: 200ms;
}

.stagger-item:nth-child(3) {
  transition-delay: 300ms;
}

.stagger-item:nth-child(4) {
  transition-delay: 400ms;
}

.stagger-item:nth-child(5) {
  transition-delay: 500ms;
}

.stagger-item:nth-child(6) {
  transition-delay: 600ms;
}

/* =========================
   Floating
   ========================= */

.float {
  animation: floating 5s ease-in-out infinite;
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* =========================
   Pulse
   ========================= */

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* =========================
   Glow
   ========================= */

.glow {
  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }

  50% {
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.12);
  }
}

/* =========================
   Reduced Motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}