/* Animations CSS */

/* Logo Rotation Animation */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Floating Coins Animation */
@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

/* Spin Animation for Rotation Arrows */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Background Elements Pulse Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.1); opacity: 0.15; }
}

/* Button Hover Animations */
.btn {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}

/* Card Hover Animations */
.advantage-card,
.feature-card,
.testimonial-card,
.team-card,
.social-channel-card,
.event-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.advantage-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.team-card:hover,
.social-channel-card:hover,
.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Feature Icon Animations */
.feature-icon,
.card-icon,
.channel-icon {
  transition: all 0.3s ease;
}

.feature-item:hover .feature-icon,
.vision-card:hover .card-icon,
.mission-card:hover .card-icon,
.social-channel-card:hover .channel-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Image Hover Effects */
.team-img img,
.about-image-container img {
  transition: all 0.5s ease;
}

.team-card:hover .team-img img,
.about-image-container:hover img {
  transform: scale(1.05);
}

/* Social Icons Animation */
.social-icon {
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px) rotate(5deg);
}

/* Page Transition Animation */
.page-transition {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Feature Badge Hover Animation */
.feature-badge {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(153, 69, 255, 0.2);
}

.feature-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}

.feature-badge:hover::after {
  left: 100%;
}

/* Process Number Animation */
.process-number {
  transition: all 0.3s ease;
}

.process-item:hover .process-number {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(153, 69, 255, 0.3);
}

/* Navbar Link Hover Animation */
.navbar-nav .nav-link {
  position: relative;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 70%;
}

/* Form Input Focus Animation */
.form-control, .form-select {
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  transform: translateY(-1px);
}

/* CTA Buttons Animation */
.cta-buttons .btn {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cta-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Loading Animation */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(153, 69, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}

/* Token Chart Animation */
.token-chart {
  transition: all 0.5s ease;
  transform-origin: center bottom;
}

.token-chart:hover {
  transform: scale(1.02);
}