/* Custom Animations & Utilities for Indika Tours */

/* Route Marker Animation */
@keyframes routeMarker {
  0% { left: 0%; }
  100% { left: 100%; }
}

.animate-route-marker {
  animation: routeMarker 12s linear infinite;
}

/* Progress Bar Animation */
@keyframes progressBar {
  0% { width: 0%; opacity: 0.8; }
  50% { width: 75%; opacity: 1; }
  100% { width: 100%; opacity: 0.8; }
}

.animate-progress-bar {
  animation: progressBar 6s ease-in-out infinite;
}

/* Scroll Reveal Animation Base States */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid items are handled inline via style attribute in HTML */

/* Custom Scrollbar for Premium Feel */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0F3D2E;
}

::-webkit-scrollbar-thumb {
  background: #D6A84F;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #F4EBDD;
}

/* Accessibility: Respects User's Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-route-marker, 
  .animate-progress-bar, 
  .animate-bounce, 
  .animate-pulse {
    animation: none !important;
  }
  
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* Focus Visible Enhancements for Keyboard Navigation */
*:focus-visible {
  outline: 2px solid #D6A84F;
  outline-offset: 4px;
}