/* Creative TTS Visualization - Advanced Animation System */

/* Main container for 3D waveform visualization */
.tts-visualization {
  position: relative;
  width: 100%;
  height: 120px;
  margin: 35px auto;
  perspective: 1000px;
  overflow: visible;
}

/* 3D speaker visualization */
.speaker-visualization {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate-speaker 30s linear infinite;
}

@keyframes rotate-speaker {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Audio wave rings */
.wave-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(30, 30, 30, 0.3);
  opacity: 0;
  animation: wave-pulse 3s ease-out infinite;
}

.dark .wave-ring {
  border: 1px solid rgba(59, 130, 246, 0.3);
}

@keyframes wave-pulse {
  0% {
    width: 0;
    height: 0;
    opacity: 0.7;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Advanced waveform container */
.advanced-waveform {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual frequency bars */
.frequency-bar {
  position: relative;
  height: 5px;
  width: 3px;
  margin: 0 2px;
  border-radius: 2px;
  background: linear-gradient(to top, #222222, #555555);
  transform-origin: bottom;
  animation: freq-animation 1s ease-in-out infinite;
}

.dark .frequency-bar {
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

@keyframes freq-animation {
  0%, 100% {
    height: 5px;
  }
}

/* 3D environment with depth */
.environment-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
  perspective: 1000px;
}

/* Grid floor */
.grid-floor {
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: -120%;
  left: -50%;
  background-image:
    linear-gradient(to right, rgba(30, 30, 30, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 30, 30, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: rotateX(60deg);
  transform-style: preserve-3d;
  animation: grid-move 20s linear infinite;
}

.dark .grid-floor {
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
}

@keyframes grid-move {
  0% {
    transform: rotateX(60deg) translateY(0);
  }
  100% {
    transform: rotateX(60deg) translateY(40px);
  }
}

/* Light beams */
.light-beam {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(30, 30, 30, 0.02) 90deg,
    transparent 180deg,
    rgba(30, 30, 30, 0.02) 270deg,
    transparent 360deg
  );
  animation: rotate-beam 20s linear infinite;
}

.dark .light-beam {
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(59, 130, 246, 0.02) 90deg,
    transparent 180deg,
    rgba(59, 130, 246, 0.02) 270deg,
    transparent 360deg
  );
}

@keyframes rotate-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Advanced text effects */
.text-glow {
  text-shadow: 0 0 10px rgba(30, 30, 30, 0.2);
  animation: text-pulse 3s ease-in-out infinite;
}

.dark .text-glow {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

@keyframes text-pulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(30, 30, 30, 0.2);
  }
  50% {
    text-shadow: 0 0 15px rgba(30, 30, 30, 0.3);
  }
}

.dark @keyframes text-pulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  }
}

/* Creative card hover effects */
.creative-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.creative-card::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(30, 30, 30, 0.1),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dark .creative-card::before {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(59, 130, 246, 0.1),
    transparent 70%
  );
}

.creative-card:hover::before {
  opacity: 1;
}

.creative-card:hover {
  transform: scale(1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.dark .creative-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .tts-visualization {
    height: 80px;
  }

  .wave-ring {
    max-width: 150px;
    max-height: 150px;
  }
}

/* Floating text animation for hero */
.floating-text span {
  display: inline-block;
  animation: float-up-down 3s ease-in-out infinite;
}

@keyframes float-up-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}