/* ==========================================================================
   DUET — A PRIVATE SPACE FOR TWO
   NextGen TechEdge Solutions Private Limited
   Animations & Motion Design Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

/* Gentle floating animation for the hero phone mockup */
@keyframes floatPhone {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(0.4deg);
  }
}

/* Secondary phone floating with slight phase offset */
@keyframes floatPhoneAlt {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-0.3deg);
  }
}

/* Soft ambient glow pulsation */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

/* Subtle romantic heart beat */
@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.12);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(1);
  }
}

/* Gentle gradient flow / wave drift */
@keyframes subtleWave {
  0%, 100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(6px) scaleX(1.02);
  }
}

/* Shimmer effect for premium badges */
@keyframes badgeShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* --------------------------------------------------------------------------
   2. APPLIED ANIMATION CLASSES
   -------------------------------------------------------------------------- */

.animate-float {
  animation: floatPhone 6s ease-in-out infinite;
  will-change: transform;
}

.animate-float-alt {
  animation: floatPhoneAlt 7s ease-in-out 1s infinite;
  will-change: transform;
}

.animate-pulse-glow {
  animation: pulseGlow 5s ease-in-out infinite;
}

.animate-heartbeat {
  animation: heartBeat 2.4s ease-in-out infinite;
  display: inline-block;
  transform-origin: center center;
}

.animate-wave {
  animation: subtleWave 8s ease-in-out infinite;
}

/* Interactive hover micro-effects */
.feature-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
}

.feature-card:hover .feature-icon-container {
  transform: scale(1.1) rotate(4deg);
}

.step-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.step-card:hover {
  transform: translateY(-6px);
}

.step-card:hover .step-number-badge {
  transform: scale(1.15) rotate(-6deg);
}

.step-card:hover .step-icon-circle {
  transform: scale(1.08);
}

.btn-primary, .btn-secondary, .header-cta-btn, .store-badge-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease;
}

.btn-primary:hover, .header-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(236, 27, 170, 0.42);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(123, 58, 237, 0.2);
}

.store-badge-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(25, 19, 59, 0.25);
  border-color: rgba(236, 27, 170, 0.6);
}

/* --------------------------------------------------------------------------
   3. GSAP PREPARATION & TRANSITIONS
   -------------------------------------------------------------------------- */
.gsap-ready [data-gsap] {
  opacity: 0;
  visibility: hidden;
}

/* Smooth reveal helper */
.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   4. ACCESSIBILITY: REDUCED MOTION OVERRIDES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-float,
  .animate-float-alt,
  .animate-pulse-glow,
  .animate-heartbeat,
  .animate-wave {
    animation: none !important;
    transform: none !important;
  }

  .gsap-ready [data-gsap] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .feature-card:hover,
  .step-card:hover,
  .btn-primary:hover,
  .header-cta-btn:hover,
  .store-badge-btn:hover {
    transform: none !important;
  }
}