/* ==========================================================================
   Niwa Chatbot – Keyframe Animations
   ---------------------------------------------------------------------------
   Centralized @keyframes used across components.
   Components reference these by name; durations use token variables.
   Pure CSS — no GSAP dependency.
   ========================================================================== */

/* ── Flyout Entrance (slide up + fade in from bottom-right) ─────────────── */
@keyframes niwa-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Flyout Exit ────────────────────────────────────────────────────────── */
@keyframes niwa-slide-down {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}

/* ── Generic Fade In ────────────────────────────────────────────────────── */
@keyframes niwa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Generic Fade Out ───────────────────────────────────────────────────── */
@keyframes niwa-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Chathead Pulse (attention ring) ────────────────────────────────────── */
@keyframes niwa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(45, 90, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0); }
}

/* ── Typing Indicator Bounce ────────────────────────────────────────────── */
@keyframes niwa-bounce-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ── Badge Pop In ───────────────────────────────────────────────────────── */
@keyframes niwa-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Chathead Icon Rotate (chat → close) ────────────────────────────────── */
@keyframes niwa-rotate-in {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}

/* ── Accordion Expand ───────────────────────────────────────────────────── */
@keyframes niwa-expand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* ── Scroll-to-bottom Button Fade ───────────────────────────────────────── */
@keyframes niwa-float-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Orb Spin ───────────────────────────────────────────────────────────── */
@keyframes niwa-orb-spin {
  to { --niwa-orb-angle: 360deg; }
}

/* ── Shine Sweep (typing indicator text) ────────────────────────────────── */
@keyframes niwa-shine-sweep {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

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