/* View transitions */
.view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.view.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Word highlight transition */
.word {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 3px;
  padding: 1px 0;
}

.word-active {
  background-color: var(--highlight-word);
  color: #1d1d1f;
}

.sentence-active {
  background-color: var(--highlight-sentence);
}

/* Button press effect */
.btn:active,
.icon-btn:active {
  transform: scale(0.96);
}

.play-btn:active {
  transform: scale(0.92);
}

/* Drop zone animation */
.drop-zone.drag-over {
  border-color: var(--accent);
  background-color: var(--accent-light);
  transform: scale(1.01);
}

.drop-zone {
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

/* Card hover */
.library-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Player bar slide up */
.player-bar {
  transition: transform 0.3s ease;
}

.player-bar.hidden {
  transform: translateY(100%);
}

/* Progress bar animation */
.progress-bar {
  transition: width 0.3s ease;
}

/* Toast animation */
.toast {
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Pulse animation for loading */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 1.5s ease infinite;
}

/* Speed menu appearance */
.speed-menu {
  animation: menu-appear 0.15s ease;
}

@keyframes menu-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}