/* ============================
   ANIMATIONS
   ============================ */

/* Bubble in */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Typing bounce */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* Fade in up (scroll observer) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulse ring for WhatsApp float */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Float up-down for phone mockup */
@keyframes floatUpDown {
  0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0px); }
  50%       { transform: rotateY(-8deg) rotateX(4deg) translateY(-10px); }
}

/* Shimmer for promo banner */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============================
   SCROLL ANIMATION CLASSES
   ============================ */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.fade-in-delay {
  animation: fadeIn 0.8s ease 0.3s forwards;
  opacity: 0;
}

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.cards-grid   .fade-up:nth-child(2),
.features-grid .fade-up:nth-child(2),
.steps-row    .fade-up:nth-child(2) { transition-delay: 0.1s; }

.cards-grid   .fade-up:nth-child(3),
.features-grid .fade-up:nth-child(3),
.steps-row    .fade-up:nth-child(3) { transition-delay: 0.2s; }

.features-grid .fade-up:nth-child(4) { transition-delay: 0.1s; }
.features-grid .fade-up:nth-child(5) { transition-delay: 0.2s; }
.features-grid .fade-up:nth-child(6) { transition-delay: 0.3s; }

/* ============================
   PHONE FLOAT ANIMATION
   ============================ */
.phone-frame {
  animation: floatUpDown 4s ease-in-out infinite;
}


/* ============================
   PROMO BANNER SHIMMER
   ============================ */
.promo-banner {
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
  background-image: linear-gradient(
    135deg,
    var(--green-dark) 0%,
    var(--green-primary) 40%,
    #3de87a 50%,
    var(--green-primary) 60%,
    var(--green-dark) 100%
  );
}