/* ============================================================
   AGENTIC GROWTH OS — motion.css
   Animation keyframes & utility classes
   ============================================================ */

/* ---------- Keyframes ---------- */

@keyframes fx-rise-kf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fx-fade-kf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fx-scale-kf {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fx-slide-r-kf {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fx-slide-l-kf {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fx-pop-kf {
  0%   { opacity: 0; transform: scale(.85) translateY(8px); }
  70%  { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes a-breathe {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.04); }
}

@keyframes a-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes a-pulse-ring {
  0%       { transform: scale(.85); opacity: .5; }
  80%, 100%{ transform: scale(2.2); opacity: 0; }
}

@keyframes a-tick {
  from { stroke-dashoffset: 30; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

@keyframes a-scan {
  from { top: 0; }
  to   { top: 100%; }
}

@keyframes a-line-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes a-progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes a-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes a-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(226,177,247,.15); }
  50%       { box-shadow: 0 0 40px rgba(226,177,247,.35), 0 0 80px rgba(226,177,247,.1); }
}

@keyframes a-count-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

@keyframes a-blob-move {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.08); }
  66%       { transform: translate(-20px, 20px) scale(.95); }
}

@keyframes a-blob-move-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-50px, 30px) scale(1.05); }
  66%       { transform: translate(30px, -20px) scale(.98); }
}

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

@keyframes a-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes a-typing-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---------- Utility classes ---------- */

.fx-rise {
  animation: fx-rise-kf .45s cubic-bezier(.22,1,.36,1) both;
}

.fx-fade {
  animation: fx-fade-kf .35s ease both;
}

.fx-scale {
  animation: fx-scale-kf .4s cubic-bezier(.22,1,.36,1) both;
}

.fx-slide-r {
  animation: fx-slide-r-kf .4s cubic-bezier(.22,1,.36,1) both;
}

.fx-slide-l {
  animation: fx-slide-l-kf .4s cubic-bezier(.22,1,.36,1) both;
}

.fx-pop {
  animation: fx-pop-kf .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Stagger helpers — apply to children */
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 55ms; }
.stagger > *:nth-child(3)  { animation-delay: 110ms; }
.stagger > *:nth-child(4)  { animation-delay: 165ms; }
.stagger > *:nth-child(5)  { animation-delay: 220ms; }
.stagger > *:nth-child(6)  { animation-delay: 275ms; }
.stagger > *:nth-child(7)  { animation-delay: 330ms; }
.stagger > *:nth-child(8)  { animation-delay: 385ms; }

/* Lift on hover */
.lift {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 20px rgba(226,177,247,.08);
}

/* Live dot */
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  position: relative;
  flex-shrink: 0;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4ade80;
  opacity: .35;
  animation: a-pulse-ring 1.6s ease-out infinite;
}

/* Thinking dots */
.thinking {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.thinking span {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #e2b1f7;
  animation: a-breathe 1.2s ease-in-out infinite;
}
.thinking span:nth-child(2) { animation-delay: .2s; }
.thinking span:nth-child(3) { animation-delay: .4s; }

/* Shimmer active bar */
.shimmer-active {
  background: linear-gradient(90deg,
    rgba(226,177,247,.12) 0%,
    rgba(226,177,247,.28) 50%,
    rgba(226,177,247,.12) 100%
  );
  background-size: 200% 100%;
  animation: a-shimmer 1.6s linear infinite;
}

/* Blob ambient background */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.ambient-blob-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(226,177,247,.12) 0%, transparent 70%);
  animation: a-blob-move 18s ease-in-out infinite;
}
.ambient-blob-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(73,69,179,.18) 0%, transparent 70%);
  animation: a-blob-move-2 22s ease-in-out infinite;
}

/* Glow pulse on card */
.glow-pulse {
  animation: a-glow-pulse 3s ease-in-out infinite;
}

/* Count up reveal */
.count-up {
  animation: a-count-up .5s cubic-bezier(.22,1,.36,1) both;
}

/* Float */
.float {
  animation: a-float 4s ease-in-out infinite;
}

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