/* ==========================================================================
   Animations - Keyframe Animations for Landing Page
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Hero Pipeline Animation
   --------------------------------------------------------------------------- */

.pipeline-node {
  opacity: 0.5;
  transition: all var(--duration-normal) var(--ease-default);
}

.pipeline-node.active {
  opacity: 1;
  border-color: var(--accent-start);
  box-shadow: var(--glow-purple);
}

.pipeline-connector {
  position: relative;
  overflow: hidden;
}

.pipeline-connector::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-start), transparent);
}

.pipeline-connector.active::after {
  animation: flowPulse 0.5s ease-out forwards;
}

@keyframes flowPulse {
  to { left: 100%; }
}

/* ---------------------------------------------------------------------------
   Typing Animation
   --------------------------------------------------------------------------- */

.typing-text {
  display: inline;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent-start);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Section A: Topic Generation Animation
   --------------------------------------------------------------------------- */

#mockup-a .mockup-state {
  display: none;
}

#mockup-a .mockup-state.active {
  display: block;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

/* Selection pulse animation */
@keyframes selectionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

.mockup-radio.selected {
  background: rgba(124, 58, 237, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
  margin-bottom: var(--space-2);
}

/* State timing controlled by JS */

/* ---------------------------------------------------------------------------
   Section B: Chapter Planning Animation
   --------------------------------------------------------------------------- */

.chapter-bar {
  height: 8px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-default);
}

.chapter-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-mid));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}

.chapter-equalizing .chapter-bar-fill {
  width: 100% !important;
}

/* ---------------------------------------------------------------------------
   Section C: Research Verification Animation
   --------------------------------------------------------------------------- */

.verification-badge {
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-fast) var(--ease-bounce);
}

.verification-badge.visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   Section D: Script Generation Animation
   --------------------------------------------------------------------------- */

.script-text {
  position: relative;
}

.script-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--bg-mockup));
  pointer-events: none;
}

.word-counter {
  transition: all var(--duration-fast);
}

.word-counter.counting {
  color: var(--accent-start);
}

/* ---------------------------------------------------------------------------
   Section E: Image Pipeline Animation
   --------------------------------------------------------------------------- */

.image-cell {
  transition: all var(--duration-normal) var(--ease-default);
}

.image-cell.loading {
  animation: imagePulse 1s ease-in-out infinite;
}

@keyframes imagePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

@keyframes imageCellPulse {
  0%, 100% {
    background: var(--bg-input);
  }
  50% {
    background: var(--bg-hover);
  }
}

.image-cell.rejected {
  animation: imageReject var(--duration-normal) var(--ease-out) forwards;
}

@keyframes imageReject {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.95); border-color: var(--status-error); }
  100% { opacity: 0; transform: scale(0.8); }
}

.image-cell.ai-generated {
  border: 1px solid var(--accent-start);
  animation: aiGlow var(--duration-slow) var(--ease-out);
}

@keyframes aiGlow {
  0% { box-shadow: 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 15px rgba(124, 58, 237, 0.5); }
  100% { box-shadow: 0 0 5px rgba(124, 58, 237, 0.2); }
}

/* AI Generation glow animations */
@keyframes aiGeneratingGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3),
                0 0 20px rgba(124, 58, 237, 0.2),
                0 0 30px rgba(124, 58, 237, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5),
                0 0 30px rgba(124, 58, 237, 0.3),
                0 0 45px rgba(124, 58, 237, 0.2);
  }
}

@keyframes aiGlowPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes aiIconPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Image appear animation */
@keyframes imageAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.mockup-image-cell .coffee-image {
  animation: imageAppear 0.4s var(--ease-out) forwards;
}

/* Rejected shake animation */
@keyframes rejectShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.mockup-image-cell.rejecting {
  animation: rejectShake 0.4s var(--ease-default);
}

/* ---------------------------------------------------------------------------
   Section F: Audio Generation Animation
   --------------------------------------------------------------------------- */

.audio-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}

.audio-wave-bar {
  width: 3px;
  background: var(--accent-start);
  border-radius: var(--radius-full);
  animation: audioWave 0.8s ease-in-out infinite;
}

.audio-wave-bar:nth-child(1) { animation-delay: 0s; }
.audio-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.audio-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.audio-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.audio-wave-bar:nth-child(5) { animation-delay: 0.4s; }
.audio-wave-bar:nth-child(6) { animation-delay: 0.5s; }
.audio-wave-bar:nth-child(7) { animation-delay: 0.6s; }
.audio-wave-bar:nth-child(8) { animation-delay: 0.7s; }
.audio-wave-bar:nth-child(9) { animation-delay: 0.8s; }
.audio-wave-bar:nth-child(10) { animation-delay: 0.9s; }

@keyframes audioWave {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

.dsp-toggle {
  transition: all var(--duration-fast) var(--ease-default);
}

.dsp-toggle.processing {
  animation: dspProcess var(--duration-normal) var(--ease-out);
}

@keyframes dspProcess {
  0% { background: var(--bg-input); }
  50% { background: rgba(124, 58, 237, 0.2); }
  100% { background: var(--accent-start); }
}

/* ---------------------------------------------------------------------------
   Section G: Render & Upload Animation
   --------------------------------------------------------------------------- */

.render-progress {
  transition: width 0.1s linear;
}

.upload-success {
  animation: uploadComplete var(--duration-slow) var(--ease-bounce);
}

@keyframes uploadComplete {
  0% { transform: scale(1); }
  30% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   Section H: Thumbnail Editor Animation
   --------------------------------------------------------------------------- */

.thumbnail-live-preview {
  transition: all var(--duration-normal) var(--ease-default);
}

.thumbnail-text-animated {
  transition: all var(--duration-normal) var(--ease-default);
}

.thumbnail-overlay {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.thumbnail-overlay.visible {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Section I: Presets Animation
   --------------------------------------------------------------------------- */

.preset-value {
  transition: all var(--duration-normal) var(--ease-default);
}

.preset-value.changing {
  color: var(--accent-start);
}

/* ---------------------------------------------------------------------------
   Section K: Localization Animation
   --------------------------------------------------------------------------- */

.language-progress {
  transition: width var(--duration-slow) linear;
}

.language-complete {
  animation: langComplete var(--duration-normal) var(--ease-out);
}

@keyframes langComplete {
  0% { color: var(--text-muted); }
  50% { color: var(--status-success); transform: scale(1.05); }
  100% { color: var(--status-success); transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   Section L: Settings Explorer (Interactive)
   No auto-animations - user-triggered interactions
   --------------------------------------------------------------------------- */

.settings-dropdown {
  transition: all var(--duration-fast) var(--ease-default);
}

.settings-dropdown.open .settings-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.settings-dropdown-menu {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all var(--duration-fast) var(--ease-default);
}

.settings-slider-thumb {
  transition: left var(--duration-fast) var(--ease-default);
}

.settings-slider-thumb:active {
  transform: translate(-50%, -50%) scale(1.2);
}

.settings-toggle-thumb {
  transition: left var(--duration-fast) var(--ease-default);
}

/* ---------------------------------------------------------------------------
   General Animation States
   --------------------------------------------------------------------------- */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pipeline-connector::after {
    display: none;
  }

  .audio-wave-bar,
  .mockup-waveform-bar {
    animation: none;
    height: 50% !important;
  }
}