/* ============================================================
   Waloops Marketing Website — Main Stylesheet
   ============================================================ */

:root {
  --primary: #128C7E;
  --primary-hover: #075E54;
  --primary-light: #25D366;
  --accent: #10B981;
  --dark: #0F172A;
  --dark-light: #1E293B;
  --muted: #64748B;
  --light: #F8FAFC;
  --border: #E2E8F0;
  --card-bg: #FFFFFF;

  /* Animation timing */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:     0.25s;
  --dur-mid:      0.5s;
  --dur-slow:     0.75s;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1E293B;
  background-color: #FAFAFA;
  overflow-x: hidden;
}

/* ── Gradients & Glows ────────────────────────────────────── */
.gradient-text-green {
  background: linear-gradient(135deg, #128C7E 0%, #25D366 50%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-dark {
  background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-glow {
  background:
    radial-gradient(circle at 50% -20%, rgba(37,211,102,0.18), transparent 70%),
    radial-gradient(circle at 90% 20%,  rgba(18,140,126,0.12), transparent 50%),
    radial-gradient(circle at 10% 40%,  rgba(56,189,248,0.08), transparent 50%);
}

/* ── Cards ────────────────────────────────────────────────── */
.card-hover {
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-spring);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(18,140,126,0.15), 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Glass ────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(226,232,240,0.8);
}
.glass-dark {
  background: rgba(15,23,42,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── Mega menu ────────────────────────────────────────────── */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s var(--ease-spring),
              transform 0.22s var(--ease-spring),
              visibility 0.22s;
}
.group:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── Navbar scroll shrink ─────────────────────────────────── */
.navbar-shrunk {
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — Base states (invisible until triggered)
   ══════════════════════════════════════════════════════════ */

/* Fade up (default) */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
}

/* Fade in (no movement) */
.anim-fade-in {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* Slide in from left */
.anim-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
}

/* Slide in from right */
.anim-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
}

/* Scale up */
.anim-scale-up {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
}

/* Staggered children — apply on parent, children auto-staggered via JS */
.anim-stagger-children > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-spring),
              transform var(--dur-slow) var(--ease-spring);
}

/* ── Visible state (JS adds this) ─────────────────────────── */
.anim-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Delay utilities ──────────────────────────────────────── */
.anim-delay-1  { transition-delay: 0.08s !important; }
.anim-delay-2  { transition-delay: 0.16s !important; }
.anim-delay-3  { transition-delay: 0.24s !important; }
.anim-delay-4  { transition-delay: 0.32s !important; }
.anim-delay-5  { transition-delay: 0.40s !important; }
.anim-delay-6  { transition-delay: 0.48s !important; }

/* ══════════════════════════════════════════════════════════
   HERO SECTION — Entrance animations  
   ══════════════════════════════════════════════════════════ */

/* Hero badge */
.hero-badge {
  animation: hero-badge-pop 0.6s var(--ease-spring) 0.1s both;
}
@keyframes hero-badge-pop {
  from { opacity:0; transform: scale(0.8) translateY(-8px); }
  to   { opacity:1; transform: none; }
}

/* Hero headline */
.hero-headline {
  animation: hero-slide-up 0.7s var(--ease-spring) 0.2s both;
}

/* Hero subtext */
.hero-subtext {
  animation: hero-slide-up 0.7s var(--ease-spring) 0.35s both;
}

/* Hero CTA */
.hero-cta {
  animation: hero-slide-up 0.7s var(--ease-spring) 0.48s both;
}

/* Hero mockup card */
.hero-mockup {
  animation: hero-float-in 0.9s var(--ease-spring) 0.3s both;
}

@keyframes hero-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-float-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   CHAT BUBBLE SEQUENCE — sequential reveals
   ══════════════════════════════════════════════════════════ */
.chat-bubble {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.45s var(--ease-spring),
              transform 0.45s var(--ease-spring);
}
.chat-bubble.chat-visible {
  opacity: 1;
  transform: none;
}

/* Typing indicator dots */
.typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  animation: typing-bounce 1.4s infinite both;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

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

/* ══════════════════════════════════════════════════════════
   STEP / TIMELINE REVEAL
   ══════════════════════════════════════════════════════════ */
.step-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s var(--ease-spring),
              transform 0.5s var(--ease-spring);
}
.step-item.step-visible {
  opacity: 1;
  transform: none;
}

/* Progress line grow */
.step-line {
  height: 0;
  transition: height 0.6s var(--ease-out);
}
.step-line.step-visible {
  height: 100%;
}

/* ══════════════════════════════════════════════════════════
   COUNTER / NUMBER ANIMATION
   ══════════════════════════════════════════════════════════ */
.count-up {
  display: inline-block;
  transition: transform 0.4s var(--ease-spring);
}

/* ══════════════════════════════════════════════════════════
   STAT CARD SHIMMER
   ══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-on-scroll {
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.35) 50%, transparent 75%);
  background-size: 200% 100%;
}
.shimmer-on-scroll.anim-visible {
  animation: shimmer 1.2s var(--ease-out) 0.5s;
}

/* ══════════════════════════════════════════════════════════
   CTA BANNER PULSE
   ══════════════════════════════════════════════════════════ */
.cta-ring {
  animation: cta-ring-pulse 3s ease-in-out infinite;
}
@keyframes cta-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}

/* ══════════════════════════════════════════════════════════
   FLOATING AMBIENT ELEMENTS
   ══════════════════════════════════════════════════════════ */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.animate-float  { animation: float 5s ease-in-out infinite; }
.animate-float2 { animation: float 7s ease-in-out 1.5s infinite; }
.animate-float3 { animation: float 6s ease-in-out 0.8s infinite; }

/* ── Subtle pulse ─────────────────────────────────────────── */
@keyframes pulse-subtle {
  0%,100% { opacity:1; transform: scale(1); }
  50%      { opacity:.85; transform: scale(1.02); }
}
.animate-pulse-subtle { animation: pulse-subtle 4s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════
   BADGE / PILL
   ══════════════════════════════════════════════════════════ */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #25D366, #128C7E);
  z-index: 9999;
  transition: width 0.05s linear;
}

/* ══════════════════════════════════════════════════════════
   BUTTON SHINE SWEEP
   ══════════════════════════════════════════════════════════ */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease-spring);
}
.btn-shine:hover::after {
  left: 150%;
}

/* ══════════════════════════════════════════════════════════
   FEATURE ICON BOUNCE ON HOVER
   ══════════════════════════════════════════════════════════ */
.icon-bounce {
  transition: transform 0.35s var(--ease-spring);
}
.icon-bounce:hover {
  transform: scale(1.12) rotate(-4deg);
}

/* ══════════════════════════════════════════════════════════
   MOBILE MENU
   ══════════════════════════════════════════════════════════ */
#mobile-menu {
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s var(--ease-spring),
              opacity 0.3s var(--ease-out),
              visibility 0.3s;
}
#mobile-menu.open {
  transform: none;
  opacity: 1;
  visibility: visible;
}