/* ========== SCROLL ANIMATIONS ========== */
[data-animate] {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="scale-in"] {
  transform: scale(0.95);
}

[data-animate="slide-left"] {
  transform: translateX(40px);
}

[data-animate="slide-right"] {
  transform: translateX(-40px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

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

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* ========== NEW PREMIUM VARIANTS ========== */
[data-animate="zoom-in"] {
  transform: scale(0.85) translateY(20px);
}

[data-animate="rotate-in"] {
  transform: rotate(-3deg) translateY(30px);
}

[data-animate="blur-in"] {
  filter: blur(8px);
  transform: none;
}

[data-animate="blur-in"].is-visible {
  filter: blur(0);
}

/* Utility classes */
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ========== HERO MOCKUP ANIMATIONS ========== */
@keyframes morph-blob {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  20% { border-radius: 75% 25% 35% 65% / 55% 65% 35% 45%; }
  40% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; }
  60% { border-radius: 30% 70% 55% 45% / 35% 55% 45% 65%; }
  80% { border-radius: 65% 35% 45% 55% / 50% 60% 40% 50%; }
}

@keyframes float-card-1 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-14px); }
}

@keyframes float-card-2 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-18px); }
}

@keyframes float-card-3 {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-10px); }
}

@keyframes scroll-line-grow {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ========== HERO PULSE GLOW CTA ========== */
.hero__actions .btn--primary {
  animation: hero-pulse-glow 3s ease-in-out infinite;
}

@keyframes hero-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
  50% { box-shadow: 0 0 20px 8px rgba(230, 57, 70, 0.15); }
}

/* ========== TYPING CURSOR ========== */
.hero__title-accent {
  border-right: 2px solid var(--color-primary);
  animation: blink-cursor 0.8s step-end infinite;
  padding-right: 4px;
}

.hero__title-accent.typing-done {
  border-right: none;
  padding-right: 0;
  animation: none;
}

@keyframes blink-cursor {
  0%, 100% { border-color: var(--color-primary); }
  50% { border-color: transparent; }
}

/* ========== TRUST SECTION ANIMATIONS ========== */
@keyframes stat-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.trust__stat-number.count-done {
  animation: stat-pop 0.4s var(--ease-out);
}

@keyframes card-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}