/* ============================================================
   WatchTower AI — Animations & Keyframes
   ============================================================ */

/* ---------- Core Entry Animations ---------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Glow & Pulse ---------- */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(108, 43, 217, 0.45),
                0 0 0 0 rgba(108, 43, 217, 0);
  }
  50% {
    box-shadow: 0 6px 32px rgba(108, 43, 217, 0.7),
                0 0 40px rgba(108, 43, 217, 0.25);
  }
}

@keyframes glow-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 43, 217, 0); }
  50%       { box-shadow: 0 0 20px 4px rgba(108, 43, 217, 0.35); }
}

@keyframes glow-green {
  0%, 100% { text-shadow: 0 0 4px rgba(0,230,118,0.4); }
  50%       { text-shadow: 0 0 16px rgba(0,230,118,0.8), 0 0 32px rgba(0,230,118,0.3); }
}

/* ---------- Float (Mockup) ---------- */

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

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  50%       { transform: translateY(-8px) rotate(-0.5deg); }
}

/* ---------- WhatsApp Typing Dots ---------- */

@keyframes typing-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ---------- Shimmer / Skeleton ---------- */

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

.shimmer-effect {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.03) 80%
  );
  background-size: 800px 100%;
  animation: shimmer 2s infinite linear;
}

/* ---------- Counter / Count-up ---------- */

@keyframes count-up {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ---------- Spin ---------- */

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

/* ---------- Rotate Ring (ClaudIA avatar) ---------- */

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

/* ---------- Bounce (attention / highlight) ---------- */

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-6px); }
  60%       { transform: translateY(-3px); }
}

/* ---------- Gradient Move ---------- */

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ---------- Message appear ---------- */

@keyframes msg-in-left {
  from {
    opacity: 0;
    transform: translateX(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes msg-in-right {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ---------- Applied Animation Classes ---------- */

/* Hero section entry — applied inline via JS or statically for above-fold */
.animate-fade-in-up {
  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in-right {
  animation: fadeInRight 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Delay helpers */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }
.delay-700 { animation-delay: 0.70s; }
.delay-800 { animation-delay: 0.80s; }

/* Float applied to mockup wrapper */
.is-floating {
  animation: float 5s ease-in-out infinite;
}

.is-floating-slow {
  animation: float-slow 7s ease-in-out infinite;
}

/* Pulsing CTA button */
.btn--pulse {
  animation: pulse-glow 2.8s ease-in-out infinite;
}

/* Gradient animated bg (hero headline or badge) */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 5s ease infinite;
}

/* Rotating gradient ring */
.avatar-ring-animated {
  animation: rotate-ring 4s linear infinite;
}

/* Bounce icon */
.animate-bounce {
  animation: bounce-soft 2s ease-in-out infinite;
}

/* Hero grid / glow subtle entrance */
.hero-glow {
  animation: fadeIn 1.5s ease both;
}

/* Counter number animation */
.counter-number.animate {
  animation: count-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* WhatsApp message animations */
.wa-msg.animate-left {
  animation: msg-in-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.wa-msg.animate-right {
  animation: msg-in-right 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Glow on active step */
.step-card.active-step .step-number-badge {
  animation: glow-border 2s ease-in-out infinite;
}

/* Success icon bounce */
.success-icon {
  animation: bounce-soft 1s ease-in-out 0.2s both;
}