/* ==============================
   ENHANCED SCROLL ANIMATIONS
   ============================== */

/* Base Animation Classes */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.6s ease;
}

/* Fade Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Slide Animations */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-up {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-down {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Scale Animations */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in-up {
  opacity: 0;
  transform: scale(0.8) translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Rotate Animations */
.rotate-in {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rotate-in-left {
  opacity: 0;
  transform: rotate(-15deg) translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rotate-in-right {
  opacity: 0;
  transform: rotate(15deg) translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Flip Animations */
.flip-in {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform-style: preserve-3d;
}

.flip-in-x {
  opacity: 0;
  transform: rotateX(90deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform-style: preserve-3d;
}

/* Zoom Animations */
.zoom-in {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.zoom-in-rotate {
  opacity: 0;
  transform: scale(0.3) rotate(-180deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Bounce Animation */
.bounce-in {
  opacity: 0;
  transform: scale(0.3);
  animation: bounceIn 0.8s ease-out forwards;
}

/* Elastic Animation */
.elastic-in {
  opacity: 0;
  transform: scale(0);
  animation: elasticIn 0.8s ease-out forwards;
}

/* Animated States */
.fade-in-up.animated,
.fade-in-down.animated,
.fade-in-left.animated,
.fade-in-right.animated,
.fade-in.animated {
  opacity: 1;
  transform: translate(0, 0);
}

.slide-in-left.animated,
.slide-in-right.animated {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-up.animated,
.slide-in-down.animated {
  opacity: 1;
  transform: translateY(0);
}

.scale-in.animated,
.scale-in-up.animated {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.rotate-in.animated,
.rotate-in-left.animated,
.rotate-in-right.animated {
  opacity: 1;
  transform: rotate(0) translate(0, 0);
}

.flip-in.animated,
.flip-in-x.animated {
  opacity: 1;
  transform: rotate(0);
}

.zoom-in.animated,
.zoom-in-rotate.animated {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Keyframe Animations */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-200deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateY(0);
  }
}

@keyframes flipInX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Staggered Animations */
.stagger-fade-in > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.stagger-fade-in > *.animated {
  opacity: 1;
  transform: translateY(0);
}

.stagger-slide-up > * {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.7s ease;
}

.stagger-slide-up > *.animated {
  opacity: 1;
  transform: translateY(0);
}

.stagger-slide-left > * {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.7s ease;
}

.stagger-slide-left > *.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal Animations */
.reveal-section {
  position: relative;
  overflow: hidden;
}

.reveal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left .reveal-overlay {
  transform: translateX(-100%);
}

.reveal-right .reveal-overlay {
  transform: translateX(100%);
}

.reveal-up .reveal-overlay {
  transform: translateY(100%);
}

.reveal-down .reveal-overlay {
  transform: translateY(-100%);
}

.reveal-left.revealed .reveal-overlay,
.reveal-right.revealed .reveal-overlay,
.reveal-up.revealed .reveal-overlay,
.reveal-down.revealed .reveal-overlay {
  transform: translate(0, 0);
}

/* Parallax Effects */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

.parallax-element {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.parallax-slow {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.parallax-medium {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.parallax-fast {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Scroll Progress Indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #b30000);
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.scroll-progress-thick {
  height: 5px;
}

.scroll-progress-colored {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #d4af37, #b30000);
  background-size: 300% 100%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Counter Animations */
.counter {
  display: inline-block;
}

.stat-number {
  font-weight: 700;
  font-size: 2.5rem;
  color: #b30000;
}

.count-up {
  font-weight: 600;
}

/* Video Scroll Animations */
.video-scroll-play {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.video-scroll-play.playing {
  opacity: 1;
}

.video-parallax {
  transform: scale(1.1);
  will-change: transform;
}

/* Scroll Triggered Animations */
.scroll-trigger {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-trigger.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Delay Variations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }

/* Duration Variations */
.duration-slow { transition-duration: 1s; }
.duration-normal { transition-duration: 0.6s; }
.duration-fast { transition-duration: 0.3s; }

/* Easing Variations */
.ease-linear { transition-timing-function: linear; }
.ease-ease { transition-timing-function: ease; }
.ease-ease-in { transition-timing-function: ease-in; }
.ease-ease-out { transition-timing-function: ease-out; }
.ease-ease-in-out { transition-timing-function: ease-in-out; }
.ease-cubic-bezier { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Hover Effects with Scroll */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* Responsive Considerations */
@media (max-width: 768px) {
  .fade-in-up,
  .fade-in-down,
  .slide-in-up,
  .slide-in-down {
    transform: translateY(30px);
  }
  
  .fade-in-left,
  .fade-in-right,
  .slide-in-left,
  .slide-in-right {
    transform: translateX(30px);
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .fade-in-up,
  .fade-in-down,
  .slide-in-up,
  .slide-in-down {
    transform: translateY(20px);
  }
  
  .fade-in-left,
  .fade-in-right,
  .slide-in-left,
  .slide-in-right {
    transform: translateX(20px);
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
}

/* Accessibility - Respect prefers-reduced-motion */
@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;
  }
  
  .parallax-bg {
    background-attachment: scroll;
  }
  
  .scroll-progress,
  .scroll-progress-thick,
  .scroll-progress-colored {
    animation: none !important;
    transition: none !important;
  }
}

/* Performance Optimizations */
.gpu-accelerated {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Scroll Snap for Galleries */
.scroll-snap-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
}

.scroll-snap-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
}