/* ===========================================
   SOIC — Animaciones globales
   =========================================== */

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

@keyframes float-shape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -20px) rotate(8deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero shapes floating */
.hero__shape--1 { animation: float-shape 14s ease-in-out infinite; }
.hero__shape--2 { animation: float-shape 18s ease-in-out infinite reverse; }
.what__shape--1 { animation: float-shape 16s ease-in-out infinite; }
.what__shape--2 { animation: float-shape 22s ease-in-out infinite reverse; }

/* GSAP utility: starting state for reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* Typing indicator (for WhatsApp demo) */
.bubble.typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.bubble.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #999;
  animation: typing-dot 1.2s infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* ===========================================
   Reduced motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .integrations__track,
  .wheel__track { animation: none !important; }
  .hero__shape, .what__shape, .problem__shape { animation: none !important; }
}