/* Turbo Stream Animation Styles */

/* Base transition for all turbo-animatable elements */
[data-turbo-animate] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation state: Before content update */
.turbo-updating {
  opacity: 0.9;
  transform: scale(0.95);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation state: After content update (highlight flash) */
.turbo-updated {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(250, 204, 21, 0.1); /* yellow-400 with opacity */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframe animation for the highlight flash */
@keyframes turbo-highlight {
  0% {
    background-color: rgba(250, 204, 21, 0.2);
    transform: scale(0.95);
  }
  50% {
    background-color: rgba(250, 204, 21, 0.1);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Alternative animation using keyframes for more control */
.turbo-updated-keyframe {
  animation: turbo-highlight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Ensure smooth transitions for different content types */
.turbo-updating .prose,
.turbo-updated .prose {
  transition: inherit;
}

.turbo-updating .kramdown,
.turbo-updated .kramdown {
  transition: inherit;
}

/* Dark mode support */
.dark .turbo-updated {
  background-color: rgba(250, 204, 21, 0.05);
}

@media (prefers-color-scheme: dark) {
  .turbo-updated {
    background-color: rgba(250, 204, 21, 0.05);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-turbo-animate],
  .turbo-updating,
  .turbo-updated {
    transition: none;
    animation: none;
    transform: none;
  }
  
  .turbo-updated {
    background-color: rgba(250, 204, 21, 0.1);
    transition: background-color 0.3s ease;
  }
}