/* ═══════════════════════════════════════════════════════════════
   Streak - Landing Page Animations & Effects
   ═══════════════════════════════════════════════════════════════ */

/* Hero headline gradient text animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text-animate {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #d946ef, #8b5cf6, #3b82f6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* Background mesh grid drift */
@keyframes meshDrift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-10px, -10px); }
  50% { transform: translate(-20px, 0); }
  75% { transform: translate(-10px, 10px); }
  100% { transform: translate(0, 0); }
}

.mesh-animate {
  will-change: transform;
  animation: meshDrift 25s ease-in-out infinite;
}

/* Scroll-triggered fade-in-up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s ease-out forwards;
}

.fade-in-up-delay-1 { animation-delay: 0.1s; }
.fade-in-up-delay-2 { animation-delay: 0.2s; }
.fade-in-up-delay-3 { animation-delay: 0.3s; }
.fade-in-up-delay-4 { animation-delay: 0.4s; }
.fade-in-up-delay-5 { animation-delay: 0.5s; }
.fade-in-up-delay-6 { animation-delay: 0.6s; }
.fade-in-up-delay-7 { animation-delay: 0.7s; }

/* CTA button glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1); }
  50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.2); }
}

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

/* Badge pulsing dot */
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

.dot-pulse {
  animation: dotPulse 2s ease-in-out infinite;
}

/* Premium pricing card border shimmer (reuses gradientShift keyframes) */
.border-shimmer {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #d946ef, #8b5cf6, #3b82f6);
  background-size: 300% 100%;
  animation: gradientShift 3s ease infinite;
}

/* Smooth accordion height transition */
.accordion-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Feature card hover/active effect */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

/* Active state for touch devices */
.feature-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.12);
}

/* Hero video container 3D tilt */
.hero-visual {
  transform: perspective(2000px) rotateX(6deg);
  transition: transform 0.5s ease;
}

.hero-visual:hover {
  transform: perspective(2000px) rotateX(2deg);
}

/* Counter number transition */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* Navbar scroll transition */
.landing-nav {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Mobile hamburger animation */
.hamburger-line {
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Optimizations
   ═══════════════════════════════════════════════════════════════ */

/* Disable 3D perspective on mobile - causes rendering issues */
@media (max-width: 768px) {
  .hero-visual {
    transform: none;
  }
  .hero-visual:hover {
    transform: none;
  }

  /* Simplify glow pulse on mobile for battery */
  .glow-pulse {
    animation: none;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }

  /* Disable mesh drift animation on mobile for performance */
  .mesh-animate {
    animation: none;
  }

  /* Disable hover transform on touch devices */
  .feature-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gradient-text-animate,
  .mesh-animate,
  .glow-pulse,
  .dot-pulse,
  .border-shimmer,
  .fade-in-up {
    animation: none !important;
  }

  .fade-in-up {
    opacity: 1 !important;
  }

  .hero-visual {
    transform: none;
  }

  .feature-card {
    transition: none;
  }

  .accordion-content {
    transition: none;
  }
}

/* Fanbasis checkout iframe - force the SDK wrapper to fill its flex parent */
.auto-checkout {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.auto-checkout iframe {
  flex: 1 1 0%;
  min-height: 0;
}