/* ========================================
   ANIMATION.CSS - Mafla Private Server
   All animations and transitions
======================================== */

/* ---- Keyframes ---- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes glowPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4),
      0 0 20px rgba(255, 140, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.6),
      0 0 40px rgba(255, 140, 0, 0.3),
      0 0 60px rgba(255, 140, 0, 0.1);
  }
}

@keyframes textGlow {

  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.5),
      0 0 20px rgba(255, 140, 0, 0.3);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.8),
      0 0 40px rgba(255, 140, 0, 0.4),
      0 0 60px rgba(255, 140, 0, 0.2);
  }
}

@keyframes float {

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

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

@keyframes borderGlow {

  0%,
  100% {
    border-color: rgba(255, 140, 0, 0.3);
  }

  50% {
    border-color: rgba(255, 140, 0, 0.7);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) translateX(100px) scale(0);
    opacity: 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes popupEnter {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

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

@keyframes popupExit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

/* ---- Applied Animations ---- */

.hero-content {
  animation: fadeInUp 1s ease-out;
}

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

.text-glow {
  animation: textGlow 2.5s ease-in-out infinite;
}

.glow-border {
  animation: borderGlow 2.5s ease-in-out infinite;
}

.btn-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Navbar entrance */
.navbar {
  animation: slideDown 0.6s ease-out;
}

/* ---- Hover Transitions ---- */

.platform-card,
.feature-card,
.team-card,
.community-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.platform-card:hover,
.feature-card:hover,
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 140, 0, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 140, 0, 0.5);
}

.community-card:hover {
  transform: translateY(-5px) scale(1.02);
}

/* Button hover */
.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.6),
    0 0 40px rgba(255, 140, 0, 0.3);
}

.btn:active {
  transform: translateY(0);
}

/* Nav link hover underline */
.nav-link {
  transition: color 0.3s ease;
}

.nav-link::after {
  transition: width 0.3s ease, opacity 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
  opacity: 1;
}

/* Icon hover */
.platform-icon,
.feature-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.platform-card:hover .platform-icon,
.feature-card:hover .feature-icon {
  transform: scale(1.15);
  color: #ffa733;
}

/* Team avatar hover */
.team-avatar {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover .team-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.4);
}

/* Footer link hover */
.footer-links a {
  transition: color 0.3s ease;
}

/* Image hover */
.about-img-wrapper img {
  transition: transform 0.5s ease;
}

.about-img-wrapper:hover img {
  transform: scale(1.03);
}

/* ---- Particle Styles ---- */

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 140, 0, 0.6);
  border-radius: 50%;
  animation: particleFloat linear infinite;
  pointer-events: none;
}




/* ---- Loading shimmer for images ---- */

.shimmer {
  background: linear-gradient(90deg, #141414 25%, #1f1f1f 50%, #141414 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}