/* ==========================================================================
   Meet Ava — Animations
   ========================================================================== */

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

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

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

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

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

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(13, 115, 119, 0.15);
  }
  50% {
    box-shadow: 0 0 24px rgba(13, 115, 119, 0.35);
  }
}

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

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

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

@keyframes waveShape {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-20px) translateY(5px); }
  100% { transform: translateX(0) translateY(0); }
}

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

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* ── Typing effect for chat messages ───────────────────────────────────────── */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
}

.typing-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator__dot:nth-child(1) { animation-delay: 0ms; }
.typing-indicator__dot:nth-child(2) { animation-delay: 200ms; }
.typing-indicator__dot:nth-child(3) { animation-delay: 400ms; }

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

/* ── Notification slide-in ─────────────────────────────────────────────────── */
.notification-enter {
  animation: slideInNotification 0.5s ease forwards;
}

@keyframes slideInNotification {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ── Counter counting animation ────────────────────────────────────────────── */
.counter-animate {
  animation: countUp 0.6s ease forwards;
}

/* ── Floating elements ─────────────────────────────────────────────────────── */
.float-slow {
  animation: float 6s ease-in-out infinite;
}

.float-medium {
  animation: float 4s ease-in-out infinite;
}

.float-fast {
  animation: float 3s ease-in-out infinite;
}

/* ── Glow effects ──────────────────────────────────────────────────────────── */
.glow-pulse {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ── Background shapes ─────────────────────────────────────────────────────── */
.bg-wave {
  animation: waveShape 8s ease-in-out infinite;
}

.bg-rotate {
  animation: rotateSlowly 30s linear infinite;
}

.bg-glow {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ── Staggered chat messages ───────────────────────────────────────────────── */
.chat-dialog .bubble {
  opacity: 0;
}

.chat-dialog.animate .bubble:nth-child(1) {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 0ms;
}

.chat-dialog.animate .bubble:nth-child(2) {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 600ms;
}

.chat-dialog.animate .bubble:nth-child(3) {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 1200ms;
}

.chat-dialog.animate .bubble:nth-child(4) {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 1800ms;
}

.chat-dialog.animate .bubble:nth-child(5) {
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: 2400ms;
}

/* ── Office rooms stagger ──────────────────────────────────────────────────── */
.office-grid .office-room {
  opacity: 0;
}

.office-grid.animate .office-room:nth-child(1) {
  animation: scaleIn 0.4s ease forwards;
  animation-delay: 0ms;
}

.office-grid.animate .office-room:nth-child(2) {
  animation: scaleIn 0.4s ease forwards;
  animation-delay: 150ms;
}

.office-grid.animate .office-room:nth-child(3) {
  animation: scaleIn 0.4s ease forwards;
  animation-delay: 300ms;
}

.office-grid.animate .office-room:nth-child(4) {
  animation: scaleIn 0.4s ease forwards;
  animation-delay: 450ms;
}

/* ── Notification stagger ──────────────────────────────────────────────────── */
.notification-stack .notification {
  opacity: 0;
}

.notification-stack.animate .notification:nth-child(1) {
  animation: slideInNotification 0.5s ease forwards;
  animation-delay: 0ms;
}

.notification-stack.animate .notification:nth-child(2) {
  animation: slideInNotification 0.5s ease forwards;
  animation-delay: 500ms;
}

.notification-stack.animate .notification:nth-child(3) {
  animation: slideInNotification 0.5s ease forwards;
  animation-delay: 1000ms;
}

/* ── Trust badges stagger ──────────────────────────────────────────────────── */
.trust-grid .trust-badge {
  opacity: 0;
}

.trust-grid.animate .trust-badge:nth-child(1) {
  animation: scaleIn 0.5s ease forwards;
  animation-delay: 0ms;
}

.trust-grid.animate .trust-badge:nth-child(2) {
  animation: scaleIn 0.5s ease forwards;
  animation-delay: 150ms;
}

.trust-grid.animate .trust-badge:nth-child(3) {
  animation: scaleIn 0.5s ease forwards;
  animation-delay: 300ms;
}

.trust-grid.animate .trust-badge:nth-child(4) {
  animation: scaleIn 0.5s ease forwards;
  animation-delay: 450ms;
}

.trust-grid.animate .trust-badge:nth-child(5) {
  animation: scaleIn 0.5s ease forwards;
  animation-delay: 600ms;
}

/* ── Slots stagger ─────────────────────────────────────────────────────────── */
.slots .slot {
  opacity: 0;
}

.slots.animate .slot:nth-child(1) { animation: scaleIn 0.4s ease forwards; animation-delay: 0ms; }
.slots.animate .slot:nth-child(2) { animation: scaleIn 0.4s ease forwards; animation-delay: 100ms; }
.slots.animate .slot:nth-child(3) { animation: scaleIn 0.4s ease forwards; animation-delay: 200ms; }
.slots.animate .slot:nth-child(4) { animation: scaleIn 0.4s ease forwards; animation-delay: 300ms; }
.slots.animate .slot:nth-child(5) { animation: scaleIn 0.4s ease forwards; animation-delay: 400ms; }

/* ── Reduced Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}