/* ==========================================
   EPSE Animations
   ========================================== */

/* Fade Up */

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left */

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right */

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom */

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotate */

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Floating */

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

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

  100% {
    transform: translateY(0px);
  }
}

/* Pulse */

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Shine */

@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 120%;
  }
}

/* Bounce */

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

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

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

/* ==========================================
Animation Utility Classes
========================================== */

.fade-up {
  animation: fadeUp 0.8s ease forwards;
}

.fade-down {
  animation: fadeDown 0.8s ease forwards;
}

.fade-left {
  animation: fadeLeft 0.8s ease forwards;
}

.fade-right {
  animation: fadeRight 0.8s ease forwards;
}

.zoom-in {
  animation: zoomIn 0.7s ease forwards;
}

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

.pulse {
  animation: pulse 2s infinite;
}

.rotate {
  animation: rotate360 10s linear infinite;
}

.bounce {
  animation: bounce 2s infinite;
}

/* Hover Effects */

.hover-up {
  transition: 0.35s;
}

.hover-up:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: 0.35s;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-shadow {
  transition: 0.35s;
}

.hover-shadow:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

/* Button Shine */

.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60px;

  height: 100%;

  background: rgba(255, 255, 255, 0.35);

  transform: skewX(-25deg);
}

.btn:hover::before {
  animation: shine 0.8s;
}

/* Card Hover */

.card {
  transition: 0.35s;
}

.card:hover {
  transform: translateY(-10px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* Gallery Hover */

.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  transition: 0.5s;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Navigation */

nav a {
  transition: 0.3s;
}

nav a:hover {
  color: var(--primary);
}

/* Social Icons */

.social-links a {
  transition: 0.35s;
}

.social-links a:hover {
  transform: translateY(-5px);
}

/* Smooth Reveal */

.reveal {
  opacity: 0;

  transform: translateY(40px);

  transition: 1s;
}

.reveal.active {
  opacity: 1;

  transform: translateY(0);
}

/* Statistics */

.counter {
  font-size: 48px;

  font-weight: 700;

  color: var(--primary);
}

/* Hero Content */

.hero-content {
  animation: fadeUp 1s;
}