/* Animations for Cliques Landing Page */

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale animation for university logos */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide-in animation for app features */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pulse animation for CTA buttons */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(234, 76, 76, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(234, 76, 76, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(234, 76, 76, 0);
  }
}

/* Bounce animation for app store buttons */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Hero section animation */
.hero-text h1, .hero-text p, .hero-buttons {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.hero-text h1 {
  animation-delay: 0.2s;
}

.hero-text p {
  animation-delay: 0.5s;
}

.hero-buttons {
  animation-delay: 0.8s;
}

.hero-image img {
  opacity: 0;
  animation: fadeIn 1s ease-out 0.6s forwards;
}

/* Value proposition animations */
.feature-item {
  opacity: 0;
  transition: all 0.4s ease;
}

.feature-item.animated {
  animation: fadeIn 0.6s ease-out forwards;
}

/* University logo animations */
.university-logo {
  opacity: 0;
  transition: transform 0.3s ease;
}

.university-logo.animated {
  animation: scaleIn 0.5s ease-out forwards;
}

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

/* App feature animations */
.app-feature-item {
  opacity: 0;
}

.app-feature-item.animated {
  animation: slideInRight 0.7s ease-out forwards;
}

.app-feature-item.reverse.animated {
  animation: slideInLeft 0.7s ease-out forwards;
}

/* CTA section animations */
.cta-section h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.cta-section.animated h2 {
  opacity: 1;
  transform: translateY(0);
}

.cta-section .btn-light {
  transition: all 0.3s ease;
}

.cta-section .btn-light:hover {
  animation: pulse 1.5s infinite;
}

/* App Download section animations */
.app-download-content h2,
.app-download-content p {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.app-download-section.animated h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.app-download-section.animated p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.app-store-button {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.app-download-section.animated .app-store-button {
  opacity: 1;
  transform: translateY(0);
}

.app-download-section.animated .app-store-button:nth-child(1) {
  transition-delay: 0.6s;
}

.app-download-section.animated .app-store-button:nth-child(2) {
  transition-delay: 0.8s;
}

.app-store-button:hover {
  animation: bounce 1s;
}

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

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Social links animations */
.social-links a {
  opacity: 0;
  transition: all 0.3s ease;
}

.social-links.animated a {
  opacity: 1;
}

.social-links.animated a:nth-child(1) {
  transition-delay: 0.1s;
}

.social-links.animated a:nth-child(2) {
  transition-delay: 0.2s;
}

.social-links.animated a:nth-child(3) {
  transition-delay: 0.3s;
}

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