/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */

/* ─── Keyframes ─── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

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

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── Hero Animations ─── */
.hero-content > * {
  animation: fadeSlideUp var(--duration-slow) var(--ease-std) both;
}
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .15s; }
.hero-content > *:nth-child(3) { animation-delay: .25s; }
.hero-content > *:nth-child(4) { animation-delay: .35s; }
.hero-content > *:nth-child(5) { animation-delay: .45s; }

.hero-card-wrap {
  animation: fadeSlideUp var(--duration-slow) var(--ease-std) .3s both;
}

/* ─── Float decoration ─── */
.float-anim { animation: floatY 4s ease-in-out infinite; }

/* ─── Stagger helper classes ─── */
.stagger > * {
  animation: fadeSlideUp var(--duration-slow) var(--ease-std) both;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .15s; }
.stagger > *:nth-child(3) { animation-delay: .25s; }
.stagger > *:nth-child(4) { animation-delay: .35s; }
.stagger > *:nth-child(5) { animation-delay: .45s; }
.stagger > *:nth-child(6) { animation-delay: .55s; }

/* ─── Hover micro-interactions ─── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-std),
              box-shadow var(--duration-base) var(--ease-std);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ─── Reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable marquee animations */
  .reviews-marquee,
  .marquee-content {
    animation: none !important;
  }
  
  /* Disable hover effects */
  :hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── REVIEWS MARQUEE ── */
.reviews-marquee {
  overflow: hidden;
  position: relative;
  height: auto;
}

.marquee-content {
  display: flex;
  flex-direction: row;
  gap: var(--sp-6);
  animation: marquee 45s linear infinite;
  -webkit-animation: marquee 45s linear infinite;
}

.review-card {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  /* Fix Safari overflow issue */
  width: 100%;
  box-sizing: border-box;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@-webkit-keyframes marquee {
  0%   { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee-content {
    animation-duration: 30s;
    -webkit-animation-duration: 30s;
  }
}

@media (max-width: 480px) {
  .marquee-content {
    animation-duration: 25s;
    -webkit-animation-duration: 25s;
  }
}