/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes taDa {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-4px) rotate(-3deg); }
  20% { transform: translateX(4px) rotate(3deg); }
  30% { transform: translateX(-4px) rotate(-3deg); }
  40% { transform: translateX(4px) rotate(3deg); }
  50% { transform: translateX(0) rotate(0deg); }
}

/* Hero animations */
.hero-content > * {
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
}

.hero-badge {
  animation-delay: 0.2s !important;
}

.hero h1 {
  animation-delay: 0.4s !important;
}

.hero-subtitle {
  animation-delay: 0.6s !important;
}

.hero-cta {
  animation-delay: 0.8s !important;
}

/* Scroll animations */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transition-property: opacity, transform;
}

/* Feature cards - scale + 3D rotation animation (same as screenshots) */
.features-grid .feature-card.animate-on-scroll {
  transform: scale(0.85) perspective(1000px) rotateX(15deg);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 rgba(99, 102, 241, 0);
}
.features-grid .feature-card.animate-on-scroll.visible {
  transform: scale(1) perspective(1000px) rotateX(0deg);
  opacity: 1;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

/* Staggered delays for features - per row (3 columns) */
.features-grid .feature-card:nth-child(3n+1) { transition-delay: 0s; }
.features-grid .feature-card:nth-child(3n+2) { transition-delay: 0.3s; }
.features-grid .feature-card:nth-child(3n+3) { transition-delay: 0.6s; }

/* Screenshot items - scale + glow animation on scroll */
.screenshots-grid .screenshot-item.animate-on-scroll {
  transform: scale(0.85) perspective(1000px) rotateX(15deg);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 rgba(99, 102, 241, 0);
}

.screenshots-grid .screenshot-item.animate-on-scroll.visible {
  transform: scale(1) perspective(1000px) rotateX(0deg);
  opacity: 1;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

/* Screenshot items - staggered entrance when entering viewport */
.screenshots-grid .screenshot-item.animate-on-scroll {
  transform: scale(0.85) perspective(1000px) rotateX(15deg);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 rgba(99, 102, 241, 0);
}

.screenshots-grid .screenshot-item.animate-on-scroll.visible {
  transform: scale(1) perspective(1000px) rotateX(0deg);
  opacity: 1;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

/* Staggered delays for screenshots - per row (4 columns) */
.screenshots-grid .screenshot-item:nth-child(4n+1) { transition-delay: 0s; }
.screenshots-grid .screenshot-item:nth-child(4n+2) { transition-delay: 0.3s; }
.screenshots-grid .screenshot-item:nth-child(4n+3) { transition-delay: 0.6s; }
.screenshots-grid .screenshot-item:nth-child(4n+4) { transition-delay: 0.9s; }

/* Glow pulse when visible */
.screenshots-grid .screenshot-item.animate-on-scroll.visible::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), transparent, var(--accent));
  opacity: 0;
  z-index: -1;
  animation: screenshotGlow 2s ease-in-out infinite;
}

@keyframes screenshotGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Button glow effect */
.btn-primary {
  animation: glow 2s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* Typewriter effect for subtitle */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(40) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Counter animation */
@keyframes countDown {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cooldown-timer {
  animation: countDown 0.3s ease;
}

/* Page transitions */
.page-transition {
  animation: fadeIn 0.4s ease;
}