/* Animations and transitions */

/* Floating animation for ethereum diamond */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.ethereum-diamond {
  animation: float 6s ease-in-out infinite;
}

/* Orbit animations for icons */
@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(120px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(90deg) translateX(140px) rotate(-90deg);
  }
  100% {
    transform: rotate(450deg) translateX(140px) rotate(-450deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(180deg) translateX(130px) rotate(-180deg);
  }
  100% {
    transform: rotate(540deg) translateX(130px) rotate(-540deg);
  }
}

@keyframes orbit4 {
  0% {
    transform: rotate(270deg) translateX(150px) rotate(-270deg);
  }
  100% {
    transform: rotate(630deg) translateX(150px) rotate(-630deg);
  }
}

.icon-1 {
  animation: orbit1 20s linear infinite;
}

.icon-2 {
  animation: orbit2 25s linear infinite;
}

.icon-3 {
  animation: orbit3 30s linear infinite;
}

.icon-4 {
  animation: orbit4 35s linear infinite;
}

/* Glowing animation for stat cards */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(76, 111, 255, 0.3);
  }
  50% {
    box-shadow: 0 8px 32px rgba(76, 111, 255, 0.6);
  }
}

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

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

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

/* Number increment animation for stats */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-value {
  animation: countUp 1.5s ease-out forwards;
}

/* Fade in animations for sections */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title, .section-description, .step-card, 
.ecosystem-card, .blog-card, .validator-logo {
  opacity: 0;
}

.fade-in {
  animation: fadeIn 1s ease forwards;
}

/* Gradient background animation */
@keyframes gradientBackground {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-primary {
  background-size: 200% 200%;
  animation: gradientBackground 5s ease infinite;
}

/* Pulse animation for CTA buttons */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 111, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(76, 111, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 111, 255, 0);
  }
}

.start-staking-btn {
  animation: pulse 2s infinite;
}

/* Hover animations for cards */
.staking-card:hover, .step-card:hover, .ecosystem-card:hover, 
.blog-card:hover, .validator-logo:hover {
  transition: all 0.3s ease;
}

/* Reveal animations for scrolling */
.reveal-left {
  transform: translateX(-50px);
  opacity: 0;
  transition: all 1s ease;
}

.reveal-right {
  transform: translateX(50px);
  opacity: 0;
  transition: all 1s ease;
}

.reveal-up {
  transform: translateY(50px);
  opacity: 0;
  transition: all 1s ease;
}

.reveal-active {
  transform: translate(0);
  opacity: 1;
}

/* Rotating animation for network icons */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.network-icon i, .network-icon img {
  transition: transform 0.5s ease;
}

.network-icon:hover i, .network-icon:hover img {
  animation: rotate 2s linear infinite;
}

/* Scale animation for logo hover */
@keyframes logoScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.navbar-brand:hover .logo, .footer-logo:hover {
  animation: logoScale 2s ease-in-out infinite;
}

/* Shimmer effect for gradient texts */
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.gradient-text {
  background-size: 200% 100%;
  animation: shimmer 5s infinite linear;
}

/* Typing animation for titles */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.typing-effect {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end);
}