/* CSS Scroll Animations - Pure CSS Implementation */

/* Base animation keyframes */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   DEFAULT: Polyfill-based approach (most browsers)
   ============================================ */

/* Start hidden, animate when .in-viewport is added by polyfill */
.animate-on-scroll,
.fade-in,
.fade-in-up,
.fade-in-down,
.slide-in-left,
.slide-in-right,
.scale-in {
  opacity: 0;
  /* Use animation instead of transition for more reliable behavior */
  animation: none !important;
  will-change: opacity, transform; /* Hint to browser for better performance */
}

/* Ensure elements without .in-viewport stay hidden */
.animate-on-scroll:not(.in-viewport),
.fade-in:not(.in-viewport),
.fade-in-up:not(.in-viewport),
.fade-in-down:not(.in-viewport),
.slide-in-left:not(.in-viewport),
.slide-in-right:not(.in-viewport),
.scale-in:not(.in-viewport) {
  opacity: 0 !important;
}

/* Specific initial transforms for each animation type */
/* Base transforms without !important - animation will override when .in-viewport is added */
.fade-in {
  transform: none;
}

.fade-in-up {
  transform: translateY(50px);
}

.fade-in-down {
  transform: translateY(-30px);
}

.slide-in-left {
  transform: translateX(-50px);
}

.slide-in-right {
  transform: translateX(50px);
}

.scale-in {
  transform: scale(0.9);
}

/* Ensure initial transform is maintained for elements without .in-viewport */
/* Use !important only for non-animated state to prevent Tailwind overrides */
.fade-in-up:not(.in-viewport) {
  transform: translateY(50px) !important;
}

.fade-in-down:not(.in-viewport) {
  transform: translateY(-30px) !important;
}

.slide-in-left:not(.in-viewport) {
  transform: translateX(-50px) !important;
}

.slide-in-right:not(.in-viewport) {
  transform: translateX(50px) !important;
}

.scale-in:not(.in-viewport) {
  transform: scale(0.9) !important;
}

/* Trigger animation when polyfill adds .in-viewport class */
/* Use CSS animations - they handle both opacity and transform smoothly */
/* Animation keyframes control opacity, forwards maintains final state */
.animate-on-scroll.in-viewport {
  animation: fade-in-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  /* Don't set transform here - let animation control it */
}

.fade-in.in-viewport {
  animation: fade-in 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.fade-in-up.in-viewport {
  animation: fade-in-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  /* Don't set transform here - animation keyframes handle the transform transition */
}

.fade-in-down.in-viewport {
  animation: fade-in-down 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.slide-in-left.in-viewport {
  animation: slide-in-left 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.slide-in-right.in-viewport {
  animation: slide-in-right 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.scale-in.in-viewport {
  animation: scale-in 1s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Safety fallback: Show elements after 0.5 seconds if polyfill hasn't triggered */
/* This ensures elements are never invisible for too long */
@keyframes fade-in-fallback {
  to {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

/* Apply fallback animation only if element doesn't have .in-viewport class */
.animate-on-scroll:not(.in-viewport),
.fade-in:not(.in-viewport),
.fade-in-up:not(.in-viewport),
.fade-in-down:not(.in-viewport),
.slide-in-left:not(.in-viewport),
.slide-in-right:not(.in-viewport),
.scale-in:not(.in-viewport) {
  animation: fade-in-fallback 0.8s ease-out 0.5s forwards;
}

/* ============================================
   MODERN BROWSERS: CSS Scroll-Driven Animations
   ============================================ */

/* Override with CSS Scroll-Driven Animations if supported */
@supports (animation-timeline: view()) {
  /* Reset fallback for modern browsers */
  .animate-on-scroll:not(.in-viewport),
  .fade-in:not(.in-viewport),
  .fade-in-up:not(.in-viewport),
  .fade-in-down:not(.in-viewport),
  .slide-in-left:not(.in-viewport),
  .slide-in-right:not(.in-viewport),
  .scale-in:not(.in-viewport) {
    animation: none;
    opacity: 1; /* Override: elements visible by default */
    transform: none; /* Override: no transform */
  }
  
  /* Reset .in-viewport styles (not needed for CSS Scroll-Driven Animations) */
  .animate-on-scroll.in-viewport,
  .fade-in.in-viewport,
  .fade-in-up.in-viewport,
  .fade-in-down.in-viewport,
  .slide-in-left.in-viewport,
  .slide-in-right.in-viewport,
  .scale-in.in-viewport {
    opacity: 1;
    transform: none;
  }
  
  /* Use CSS Scroll-Driven Animations */
  .animate-on-scroll {
    animation: fade-in-up 0.6s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both; /* Ensure final state is applied */
  }
  
  .fade-in {
    animation: fade-in 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .fade-in-up {
    animation: fade-in-up 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .fade-in-down {
    animation: fade-in-down 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .slide-in-left {
    animation: slide-in-left 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .slide-in-right {
    animation: slide-in-right 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .scale-in {
    animation: scale-in 0.8s ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
}

/* Fallback for browsers that support scroll() but not view() */
@supports (animation-timeline: scroll()) and not (animation-timeline: view()) {
  /* Reset fallback */
  .animate-on-scroll:not(.in-viewport),
  .fade-in:not(.in-viewport),
  .fade-in-up:not(.in-viewport),
  .fade-in-down:not(.in-viewport),
  .slide-in-left:not(.in-viewport),
  .slide-in-right:not(.in-viewport),
  .scale-in:not(.in-viewport) {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .animate-on-scroll {
    animation: fade-in-up 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .fade-in {
    animation: fade-in 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .fade-in-up {
    animation: fade-in-up 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .fade-in-down {
    animation: fade-in-down 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .slide-in-left {
    animation: slide-in-left 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .slide-in-right {
    animation: slide-in-right 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
  
  .scale-in {
    animation: scale-in 0.8s ease-out;
    animation-timeline: scroll();
    animation-range: entry 0% entry 30%;
    animation-fill-mode: both;
  }
}

/* ============================================
   USER PREFERENCES
   ============================================ */

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .fade-in,
  .fade-in-up,
  .fade-in-down,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================
   STAGGERED ANIMATIONS
   ============================================ */

/* Animation delays for staggered effects */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* Staggered animations for grid layouts (nth-child selectors) */
.fade-in-up:nth-child(1) { animation-delay: 0ms; transition-delay: 0ms; }
.fade-in-up:nth-child(2) { animation-delay: 100ms; transition-delay: 100ms; }
.fade-in-up:nth-child(3) { animation-delay: 200ms; transition-delay: 200ms; }
.fade-in-up:nth-child(4) { animation-delay: 300ms; transition-delay: 300ms; }
.fade-in-up:nth-child(5) { animation-delay: 400ms; transition-delay: 400ms; }
.fade-in-up:nth-child(6) { animation-delay: 500ms; transition-delay: 500ms; }
.fade-in-up:nth-child(n+7) { animation-delay: 600ms; transition-delay: 600ms; }

.scale-in:nth-child(1) { animation-delay: 0ms; transition-delay: 0ms; }
.scale-in:nth-child(2) { animation-delay: 100ms; transition-delay: 100ms; }
.scale-in:nth-child(3) { animation-delay: 200ms; transition-delay: 200ms; }
.scale-in:nth-child(4) { animation-delay: 300ms; transition-delay: 300ms; }
.scale-in:nth-child(5) { animation-delay: 400ms; transition-delay: 400ms; }
.scale-in:nth-child(6) { animation-delay: 500ms; transition-delay: 500ms; }
.scale-in:nth-child(n+7) { animation-delay: 600ms; transition-delay: 600ms; }