/* Reusable keyframes */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes toast-slide-in {
  from { transform: translateX(400px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

/* Subtle success burst used for archive action */
@keyframes success-burst {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45), 0 0 0 0 rgba(16, 185, 129, 0.25);
    transform: scale(1);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 0 0 rgba(16, 185, 129, 0);
    transform: scale(1);
  }
}

/* Apply archive animation when button enters animating state */
.mark-as-read-btn.animating {
  animation: success-burst 600ms ease-out 1;
}

.mark-as-read-btn.animating svg {
  animation: pulse 600ms ease-in-out 1;
}

@keyframes highlight-pulse-animation {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--highlight-rgb, 255, 255, 0), 0.2); transform: scale(1); }
  25% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
  50% { box-shadow: 0 0 8px rgba(var(--highlight-rgb, 255, 255, 0), 0.2); transform: scale(1); }
  75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
}

/* Reading progress bar positioning */
@media (min-width: 769px) {
  .reading-progress-bar {
    left: var(--left-offset) !important;
    right: var(--right-offset) !important;
  }
}