@tailwind base;

.vignette {
  width: fit-content;
  mask-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 70%);
}

html[data-theme="dark"] .recording-wrapper.blue {
  background-position-y: -6rem;
  background-color: rgb(35,89,134);
  background-image: radial-gradient(circle, rgba(35,89,134,1) 0%, rgba(22,14,46,1) 60%);
}

html[data-theme="dark"] .recording-wrapper.purple {
  background-position-y: -6rem;
  background-color: rgb(100,35,134);
  background-image: radial-gradient(circle, rgba(100,35,134,1) 0%, rgba(22,14,46,1) 60%);
}

@layer base {
  .transcribe-trigger {
    @apply dark:bg-sky-400 bg-sky-400
  }


  .generate-img {
    @apply  bg-[url("/assets/generate-light-74459f67.svg")] dark:bg-[url("/assets/generate-6bf6a620.svg")];
  }

  .transcribe-light-button {
    @apply bg-sky-50 text-blue-600 dark:bg-white dark:bg-white/5
  }

  .ai-light-button {
    @apply bg-purple-100 text-azure-500 dark:bg-haiti-600
  }

  .transcribe-bg {
    @apply dark:bg-azure-500 bg-azure-500
  }

  .ai-bg {
    @apply dark:bg-azure-600 bg-azure-600
  }
}

.microphone {
  border-radius: 50%;
}

.microphone-bg-1, .microphone-bg-2 {
  background: #008CFF33;
  border-radius: 50%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue .microphone-bg-1, .blue .microphone-bg-2 {
  background: rgba(0, 140, 255, 0.1);
}

.microphone-bg-1 {
  height: 165%;
  width: 165%;
}

.microphone-bg-2 {
  height: 135%;
  width: 135%;
}

@keyframes deepWave {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
  25% {
    transform: translate3d(0, 5px, 0) scaleY(1.6) skewX(-6deg);
  }
  50% {
    transform: translate3d(0, -10px, 0) scaleY(0.7) skewX(8deg);
  }
  75% {
    transform: translate3d(0, 3px, 0) scaleY(1.3) skewX(-4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
}

@keyframes pulsingWave {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
  15% {
    transform: translate3d(0, 10px, 0) scaleY(1.8) skewX(8deg);
  }
  35% {
    transform: translate3d(0, -15px, 0) scaleY(0.6) skewX(-10deg);
  }
  55% {
    transform: translate3d(0, 8px, 0) scaleY(1.4) skewX(5deg);
  }
  75% {
    transform: translate3d(0, -5px, 0) scaleY(0.9) skewX(-6deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
}

@keyframes layeredWave {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
  20% {
    transform: translate3d(0, 7px, 0) scaleY(1.4) skewX(-6deg);
  }
  40% {
    transform: translate3d(0, -12px, 0) scaleY(0.8) skewX(10deg);
  }
  60% {
    transform: translate3d(0, 5px, 0) scaleY(1.2) skewX(-8deg);
  }
  80% {
    transform: translate3d(0, -3px, 0) scaleY(0.9) skewX(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(1) skewX(0deg);
  }
}



.animate .wave {
  animation: 
    deepWave 6s ease-in-out infinite, 
    pulsingWave 8s ease-in-out infinite alternate, 
    layeredWave 10s ease-in-out infinite;
}

@keyframes ScaleAnimation {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.05;
  }

  50% {
    scale: 0.95;
  }

  75% {
    scale: 1.05;
  }

  100% {
    scale: 1;
  }
}

.animate .microphone-bg-1 {
  animation: ScaleAnimation 3s infinite linear;
}
.animate .microphone-bg-2 {
  animation: ScaleAnimation 5s infinite linear;
}