@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-purple-600 dark:bg-haiti-600
  }

  .transcribe-bg {
    @apply dark:bg-blue-600 bg-blue-600
  }

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

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

.blue .microphone-bg-1, .blue .microphone-bg-2 {
  background: #0057B533;
}

.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;
}

/* Record Lecture */
.record-lecture {
  position: relative;
  border-radius: 30px;
  background: linear-gradient(255.27deg, #93CEFF 0%, #FF86AE 53.85%, #FFE39F 100%);
  padding: 2px;

  .recording-wrapper {
    background: linear-gradient(255.27deg, #93CEFF 0%, #FF86AE 53.85%, #FFE29F 100%);
    border-radius: 30px;
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      width: 880px;
      height: 880px;
      left: 715px;
      top: 356px;
      background: #FFE7CF;
      mix-blend-mode: lighten;
      filter: blur(238px);
      flex: none;
      order: 0;
      flex-grow: 0;
      z-index: 1;
    }

    &::before {
      content: "";
      position: absolute;
      width: 776px;
      height: 776px;
      left: -237px;
      top: -476px;
      background: #D7EDFF;
      mix-blend-mode: lighten;
      filter: blur(238px);
      flex: none;
      order: 1;
      flex-grow: 0;
      z-index: 1;
    }
  }
}