/* Leo AI — ambient blob drift (ported from Leo AI Q2 reference; token-based fills). */

:root {
  --leo-blob-fill-1: color-mix(in oklch, var(--brand-color) 38%, white);
  --leo-blob-fill-2: color-mix(in oklch, var(--chart-4) 42%, white);
  --leo-blob-fill-3: color-mix(in oklch, var(--chart-5) 40%, white);
  --leo-blob-fill-1-intro: color-mix(in oklch, var(--brand-color) 52%, white);
  --leo-blob-fill-2-intro: color-mix(in oklch, var(--chart-4) 55%, white);
  --leo-blob-fill-3-intro: color-mix(in oklch, var(--chart-5) 50%, white);
}

.dark {
  --leo-blob-fill-1: color-mix(in oklch, var(--brand-color) 72%, black);
  --leo-blob-fill-2: color-mix(in oklch, var(--chart-4) 68%, black);
  --leo-blob-fill-3: color-mix(in oklch, var(--chart-5) 62%, black);
  --leo-blob-fill-1-intro: color-mix(in oklch, var(--brand-color) 78%, black);
  --leo-blob-fill-2-intro: color-mix(in oklch, var(--chart-4) 74%, black);
  --leo-blob-fill-3-intro: color-mix(in oklch, var(--chart-5) 70%, black);
}

@keyframes leo-blob-spread {
  0% {
    transform: scale(0.25);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.leo-ai-blob-spread {
  animation: leo-blob-spread 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 50% 65%;
}

@keyframes leo-blob-gentle-1 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10%, 3%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes leo-blob-gentle-2 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10%, 2%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes leo-blob-gentle-3 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5%, -2%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.leo-ai-blob-1--animate {
  animation: leo-blob-gentle-1 20s ease-in-out infinite;
}

.leo-ai-blob-2--animate {
  animation: leo-blob-gentle-2 22s ease-in-out infinite;
}

.leo-ai-blob-3--animate {
  animation: leo-blob-gentle-3 24s ease-in-out infinite;
}

@keyframes leo-blob-think-1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(14%, 5%);
  }
  50% {
    transform: translate(-3%, -2%);
  }
  75% {
    transform: translate(8%, 3%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes leo-blob-think-2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-12%, 4%);
  }
  50% {
    transform: translate(2%, -2%);
  }
  75% {
    transform: translate(-7%, 3%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes leo-blob-think-3 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(7%, -4%);
  }
  50% {
    transform: translate(-2%, 2%);
  }
  75% {
    transform: translate(4%, -2%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.leo-ai-blob-thinking .leo-ai-blob-1--animate {
  animation: leo-blob-think-1 6s ease-in-out infinite;
}

.leo-ai-blob-thinking .leo-ai-blob-2--animate {
  animation: leo-blob-think-2 7s ease-in-out infinite;
}

.leo-ai-blob-thinking .leo-ai-blob-3--animate {
  animation: leo-blob-think-3 8s ease-in-out infinite;
}

.leo-ai-blob-layer--idle-anchor {
  top: auto;
  bottom: 0;
}

.leo-ai-blob-1 {
  background: radial-gradient(circle, var(--leo-blob-1-fill) 0%, transparent 72%);
}

.leo-ai-blob-2 {
  background: radial-gradient(circle, var(--leo-blob-2-fill) 0%, transparent 72%);
}

.leo-ai-blob-3 {
  background: radial-gradient(circle, var(--leo-blob-3-fill) 0%, transparent 72%);
}

.leo-ai-blob-root[data-intensity="high"] {
  --leo-blob-1-fill: var(--leo-blob-fill-1-intro);
  --leo-blob-2-fill: var(--leo-blob-fill-2-intro);
  --leo-blob-3-fill: var(--leo-blob-fill-3-intro);
}

.leo-ai-blob-root[data-intensity="normal"] {
  --leo-blob-1-fill: var(--leo-blob-fill-1);
  --leo-blob-2-fill: var(--leo-blob-fill-2);
  --leo-blob-3-fill: var(--leo-blob-fill-3);
}

@media (prefers-reduced-motion: reduce) {
  .leo-ai-blob-spread,
  .leo-ai-blob-1--animate,
  .leo-ai-blob-2--animate,
  .leo-ai-blob-3--animate {
    animation: none !important;
  }
}