/* ===== SCROLL-TRIGGERED ANIMATION SYSTEM ===== */
/* iOS-style liquid glass professional entrance animations */

/* ===== ANIMATION CUSTOM PROPERTIES ===== */
:root {
  /* Animation timing and easing - Refined iOS-inspired curves for smoother motion */
  --scroll-animation-duration: 600ms;
  --scroll-animation-delay: 0ms;
  --scroll-animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth iOS-style - PRIMARY */
  --scroll-animation-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Gentle bounce - reduced from 1.275 */
  --scroll-animation-easing-elastic: cubic-bezier(0.68, -0.25, 0.265, 1.25); /* Subtle elastic - reduced from 1.55 */
  --scroll-animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material smooth */
  --scroll-animation-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); /* Sharp entrance */
  --scroll-animation-easing-gentle: cubic-bezier(0.25, 0.8, 0.25, 1); /* Gentle curve */
  --scroll-animation-easing-mobile: cubic-bezier(0.4, 0, 0.6, 1); /* Faster for mobile */
  
  /* Progressive reveal timing */
  --reveal-duration-fast: 400ms;
  --reveal-duration-medium: 600ms;
  --reveal-duration-slow: 800ms;
  --reveal-duration-extra-slow: 1000ms;
  
  /* Stagger animation delays for service cards and advantage items */
  --stagger-delay-base: 100ms;
  --stagger-delay-fast: 50ms;
  --stagger-delay-slow: 150ms;
  --stagger-delay-service-cards: 120ms;
  --stagger-delay-advantage-items: 80ms;
  --stagger-delay-gallery-items: 60ms;
  
  /* Animation distances */
  --animation-distance-small: 20px;
  --animation-distance-medium: 40px;
  --animation-distance-large: 60px;
  --animation-distance-extra-large: 80px;
  
  /* Parallax speeds */
  --parallax-speed-slow: 0.3;
  --parallax-speed-medium: 0.5;
  --parallax-speed-fast: 0.8;
  
  /* Progressive reveal opacity stages */
  --reveal-opacity-start: 0;
  --reveal-opacity-partial: 0.3;
  --reveal-opacity-visible: 0.7;
  --reveal-opacity-complete: 1;
}

/* ===== BASE ANIMATION CLASSES ===== */

/* Initial state - elements are hidden and positioned for animation */
.animate-initial {
  opacity: 0;
  transition: all var(--animation-duration, var(--scroll-animation-duration)) 
              var(--animation-easing, var(--scroll-animation-easing));
  transition-delay: var(--animation-delay, var(--scroll-animation-delay));
}

/* Active state - animation is in progress */
.animate-active {
  opacity: 1;
}

/* Complete state - animation is finished */
.animate-complete {
  opacity: 1;
  transform: none !important;
}

/* ===== FADE ANIMATIONS ===== */

/* Simple fade in */
.animate-fade.animate-initial {
  opacity: 0;
}

.animate-fade.animate-active {
  opacity: 1;
}

/* Fade up - most common entrance animation */
.animate-fade-up.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-medium));
}

.animate-fade-up.animate-active {
  opacity: 1;
  transform: translateY(0);
}

/* Fade down */
.animate-fade-down.animate-initial {
  opacity: 0;
  transform: translateY(calc(-1 * var(--animation-distance-medium)));
}

.animate-fade-down.animate-active {
  opacity: 1;
  transform: translateY(0);
}

/* Fade left */
.animate-fade-left.animate-initial {
  opacity: 0;
  transform: translateX(var(--animation-distance-medium));
}

.animate-fade-left.animate-active {
  opacity: 1;
  transform: translateX(0);
}

/* Fade right */
.animate-fade-right.animate-initial {
  opacity: 0;
  transform: translateX(calc(-1 * var(--animation-distance-medium)));
}

.animate-fade-right.animate-active {
  opacity: 1;
  transform: translateX(0);
}

/* ===== SLIDE ANIMATIONS ===== */

/* Slide up */
.animate-slide-up.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-large));
}

.animate-slide-up.animate-active {
  opacity: 1;
  transform: translateY(0);
  transition-timing-function: var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* Slide down */
.animate-slide-down.animate-initial {
  opacity: 0;
  transform: translateY(calc(-1 * var(--animation-distance-large)));
}

.animate-slide-down.animate-active {
  opacity: 1;
  transform: translateY(0);
  transition-timing-function: var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* Slide left */
.animate-slide-left.animate-initial {
  opacity: 0;
  transform: translateX(var(--animation-distance-large));
}

.animate-slide-left.animate-active {
  opacity: 1;
  transform: translateX(0);
  transition-timing-function: var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* Slide right */
.animate-slide-right.animate-initial {
  opacity: 0;
  transform: translateX(calc(-1 * var(--animation-distance-large)));
}

.animate-slide-right.animate-active {
  opacity: 1;
  transform: translateX(0);
  transition-timing-function: var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* ===== SCALE ANIMATIONS ===== */

/* Scale up */
.animate-scale-up.animate-initial {
  opacity: 0;
  transform: scale(0.8);
}

.animate-scale-up.animate-active {
  opacity: 1;
  transform: scale(1);
  transition-timing-function: var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* Scale down */
.animate-scale-down.animate-initial {
  opacity: 0;
  transform: scale(1.2);
}

.animate-scale-down.animate-active {
  opacity: 1;
  transform: scale(1);
}

/* ===== ROTATION ANIMATIONS ===== */

/* Rotate in */
.animate-rotate-in.animate-initial {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
}

.animate-rotate-in.animate-active {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition-timing-function: var(--scroll-animation-easing-elastic); /* Using refined elastic */
}

/* ===== GLASS MORPHISM SPECIFIC ANIMATIONS ===== */

/* Glass card entrance with backdrop blur animation */
.animate-glass-card.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-medium)) scale(0.95);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.animate-glass-card.animate-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  backdrop-filter: var(--glass-blur-medium, blur(16px));
  -webkit-backdrop-filter: var(--glass-blur-medium, blur(16px));
}

/* Glass overlay entrance */
.animate-glass-overlay.animate-initial {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: transparent;
}

.animate-glass-overlay.animate-active {
  opacity: 1;
  backdrop-filter: var(--glass-blur-heavy, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur-heavy, blur(24px));
  background: var(--glass-bg-primary, rgba(255, 255, 255, 0.25));
}

/* Glass glow entrance */
.animate-glass-glow.animate-initial {
  opacity: 0;
  box-shadow: none;
  transform: translateY(var(--animation-distance-small));
}

.animate-glass-glow.animate-active {
  opacity: 1;
  box-shadow: var(--glass-shadow-light, 0 8px 32px rgba(0, 0, 0, 0.1)), 
              var(--glass-glow-primary, 0 0 20px rgba(255, 255, 255, 0.3));
  transform: translateY(0);
}

/* ===== PROGRESSIVE REVEAL ANIMATIONS ===== */

/* Progressive fade-up with multiple stages */
.animate-progressive-fade-up.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateY(var(--animation-distance-large));
  filter: blur(2px);
}

.animate-progressive-fade-up.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateY(0);
  filter: blur(0px);
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing),
              filter var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* Progressive slide-in with rotation */
.animate-progressive-slide-rotate.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateX(var(--animation-distance-extra-large)) rotate(5deg) scale(0.9);
}

.animate-progressive-slide-rotate.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateX(0) rotate(0deg) scale(1);
  transition: all var(--reveal-duration-slow) var(--scroll-animation-easing); /* Changed to smooth easing */
}

/* Progressive scale with glow effect */
.animate-progressive-scale-glow.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: scale(0.7);
  box-shadow: none;
}

.animate-progressive-scale-glow.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: scale(1);
  box-shadow: var(--glass-shadow-medium, 0 16px 48px rgba(0, 0, 0, 0.15)),
              var(--glass-glow-accent, 0 0 30px rgba(220, 20, 60, 0.4));
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing), /* Changed to smooth easing */
              box-shadow var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* Progressive reveal for service cards */
.animate-service-card.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateY(var(--animation-distance-medium)) scale(0.95);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: none;
}

.animate-service-card.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateY(0) scale(1);
  backdrop-filter: var(--glass-blur-medium, blur(16px)) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur-medium, blur(16px)) saturate(180%);
  box-shadow: var(--glass-shadow-light, 0 8px 32px rgba(0, 0, 0, 0.1));
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing), /* Changed to smooth easing */
              backdrop-filter var(--reveal-duration-slow) var(--scroll-animation-easing-gentle),
              box-shadow var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* Progressive reveal for advantage items */
.animate-advantage-item.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateX(-var(--animation-distance-large)) rotate(-2deg);
  background: transparent;
  border: 1px solid transparent;
}

.animate-advantage-item.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateX(0) rotate(0deg);
  background: var(--glass-bg-primary, rgba(255, 255, 255, 0.25));
  border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing), /* Changed to smooth easing */
              background var(--reveal-duration-slow) var(--scroll-animation-easing-gentle),
              border var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* Progressive reveal for gallery items */
.animate-gallery-item.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: scale(0.8) rotate(3deg);
  filter: blur(3px) brightness(0.7);
}

.animate-gallery-item.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: scale(1) rotate(0deg);
  filter: blur(0px) brightness(1);
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing), /* Changed to smooth easing */
              filter var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* Multi-stage progressive reveal */
.animate-multi-stage.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateY(var(--animation-distance-large)) scale(0.9);
  filter: blur(4px);
}

.animate-multi-stage.animate-active {
  animation: multiStageReveal var(--reveal-duration-extra-slow) var(--scroll-animation-easing-gentle) forwards;
}

@keyframes multiStageReveal {
  0% {
    opacity: var(--reveal-opacity-start);
    transform: translateY(var(--animation-distance-large)) scale(0.9);
    filter: blur(4px);
  }
  25% {
    opacity: var(--reveal-opacity-partial);
    transform: translateY(calc(var(--animation-distance-large) * 0.6)) scale(0.95);
    filter: blur(3px);
  }
  50% {
    opacity: var(--reveal-opacity-visible);
    transform: translateY(calc(var(--animation-distance-large) * 0.3)) scale(0.98);
    filter: blur(1px);
  }
  75% {
    opacity: var(--reveal-opacity-visible);
    transform: translateY(calc(var(--animation-distance-large) * 0.1)) scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: var(--reveal-opacity-complete);
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Cascading reveal for text content */
.animate-text-cascade.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateY(var(--animation-distance-small));
  filter: blur(1px);
}

.animate-text-cascade.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateY(0);
  filter: blur(0px);
  transition: all var(--reveal-duration-medium) var(--scroll-animation-easing-gentle);
}

/* Staggered text reveal for headings */
.animate-heading-reveal.animate-initial {
  opacity: var(--reveal-opacity-start);
  transform: translateY(var(--animation-distance-medium)) scale(0.98);
  letter-spacing: 0.1em;
}

.animate-heading-reveal.animate-active {
  opacity: var(--reveal-opacity-complete);
  transform: translateY(0) scale(1);
  letter-spacing: normal;
  transition: opacity var(--reveal-duration-medium) var(--scroll-animation-easing),
              transform var(--reveal-duration-medium) var(--scroll-animation-easing), /* Changed to smooth easing */
              letter-spacing var(--reveal-duration-slow) var(--scroll-animation-easing-gentle);
}

/* ===== STAGGER ANIMATION UTILITIES ===== */

/* Stagger container */
.stagger-container {
  --stagger-delay: var(--stagger-delay-base);
}

.stagger-container.stagger-fast {
  --stagger-delay: var(--stagger-delay-fast);
}

.stagger-container.stagger-slow {
  --stagger-delay: var(--stagger-delay-slow);
}

/* Specific stagger configurations */
.stagger-container.stagger-service-cards {
  --stagger-delay: var(--stagger-delay-service-cards);
}

.stagger-container.stagger-advantage-items {
  --stagger-delay: var(--stagger-delay-advantage-items);
}

.stagger-container.stagger-gallery-items {
  --stagger-delay: var(--stagger-delay-gallery-items);
}

/* Stagger children get automatic delays */
.stagger-container > [data-animate]:nth-child(1) { --animation-delay: calc(0 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(2) { --animation-delay: calc(1 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(3) { --animation-delay: calc(2 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(4) { --animation-delay: calc(3 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(5) { --animation-delay: calc(4 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(6) { --animation-delay: calc(5 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(7) { --animation-delay: calc(6 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(8) { --animation-delay: calc(7 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(9) { --animation-delay: calc(8 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(10) { --animation-delay: calc(9 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(11) { --animation-delay: calc(10 * var(--stagger-delay)); }
.stagger-container > [data-animate]:nth-child(12) { --animation-delay: calc(11 * var(--stagger-delay)); }

/* Advanced stagger patterns */
.stagger-wave > [data-animate]:nth-child(odd) {
  --animation-delay: calc(var(--stagger-delay) * 0.5);
}

.stagger-wave > [data-animate]:nth-child(even) {
  --animation-delay: calc(var(--stagger-delay) * 1.5);
}

.stagger-center-out > [data-animate]:nth-child(1) { --animation-delay: calc(2 * var(--stagger-delay)); }
.stagger-center-out > [data-animate]:nth-child(2) { --animation-delay: calc(1 * var(--stagger-delay)); }
.stagger-center-out > [data-animate]:nth-child(3) { --animation-delay: calc(0 * var(--stagger-delay)); }
.stagger-center-out > [data-animate]:nth-child(4) { --animation-delay: calc(1 * var(--stagger-delay)); }
.stagger-center-out > [data-animate]:nth-child(5) { --animation-delay: calc(2 * var(--stagger-delay)); }
.stagger-center-out > [data-animate]:nth-child(6) { --animation-delay: calc(3 * var(--stagger-delay)); }

/* ===== PARALLAX EFFECTS ===== */

/* Base parallax element setup */
[data-parallax] {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* Parallax active state */
[data-parallax].parallax-active {
  will-change: transform;
}

/* Parallax background elements */
.parallax-bg {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: relative;
  overflow: hidden;
}

/* Subtle parallax for background images */
.parallax-bg-image {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Parallax layers for depth */
.parallax-layer-1 {
  transform: translateZ(0);
}

.parallax-layer-2 {
  transform: translateZ(-1px) scale(2);
}

.parallax-layer-3 {
  transform: translateZ(-2px) scale(3);
}

/* Parallax content containers */
.parallax-content {
  position: relative;
  z-index: 2;
  background: var(--glass-bg-primary, rgba(255, 255, 255, 0.25));
  backdrop-filter: var(--glass-blur-light, blur(8px));
  -webkit-backdrop-filter: var(--glass-blur-light, blur(8px));
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
}

/* Parallax glass elements */
.parallax-glass {
  position: relative;
  background: var(--glass-bg-secondary, rgba(248, 249, 250, 0.3));
  backdrop-filter: var(--glass-blur-medium, blur(16px)) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur-medium, blur(16px)) saturate(180%);
  border: 1px solid var(--glass-border-light, rgba(255, 255, 255, 0.3));
  border-radius: 20px;
  box-shadow: var(--glass-shadow-light, 0 8px 32px rgba(0, 0, 0, 0.1));
}

/* Parallax intensity variants */
[data-parallax-intensity="subtle"] {
  --parallax-speed: var(--parallax-speed-slow);
}

[data-parallax-intensity="medium"] {
  --parallax-speed: var(--parallax-speed-medium);
}

[data-parallax-intensity="strong"] {
  --parallax-speed: var(--parallax-speed-fast);
}

/* Parallax direction variants */
[data-parallax-direction="vertical"] {
  transform-origin: center center;
}

[data-parallax-direction="horizontal"] {
  transform-origin: center center;
}

[data-parallax-direction="both"] {
  transform-origin: center center;
}

[data-parallax-direction="scale"] {
  transform-origin: center center;
}

[data-parallax-direction="rotate"] {
  transform-origin: center center;
}

/* Parallax performance optimizations */
.parallax-optimized {
  contain: layout style paint;
  transform: translateZ(0);
}

/* Parallax container for multiple elements */
.parallax-container {
  position: relative;
  perspective: 1000px;
  perspective-origin: center center;
  overflow: hidden;
}

/* Depth-based parallax sections */
.parallax-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Parallax text effects */
.parallax-text {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Parallax floating elements */
.parallax-float {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

.parallax-float-1 {
  top: 10%;
  left: 10%;
  width: 60px;
  height: 60px;
  background: var(--egyptian-red-light, rgba(220, 20, 60, 0.1));
  border-radius: 50%;
  filter: blur(1px);
}

.parallax-float-2 {
  top: 60%;
  right: 15%;
  width: 40px;
  height: 40px;
  background: var(--glass-bg-accent, rgba(220, 20, 60, 0.1));
  border-radius: 50%;
  filter: blur(2px);
}

.parallax-float-3 {
  bottom: 20%;
  left: 20%;
  width: 80px;
  height: 80px;
  background: var(--egyptian-red-medium, rgba(220, 20, 60, 0.3));
  border-radius: 50%;
  filter: blur(3px);
}

/* ===== MOBILE-OPTIMIZED ANIMATION VARIANTS ===== */

/* Mobile-specific reduced-distance animations */
.animate-fade-up-mobile.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-small));
}

.animate-fade-up-mobile.animate-active {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-down-mobile.animate-initial {
  opacity: 0;
  transform: translateY(calc(-1 * var(--animation-distance-small)));
}

.animate-fade-down-mobile.animate-active {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-up-mobile.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-medium));
}

.animate-slide-up-mobile.animate-active {
  opacity: 1;
  transform: translateY(0);
  transition-timing-function: var(--scroll-animation-easing-smooth);
}

/* Simplified glass effects for mobile */
.animate-glass-card-mobile.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-small)) scale(0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.animate-glass-card-mobile.animate-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.animate-glass-overlay-mobile.animate-initial {
  opacity: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.animate-glass-overlay-mobile.animate-active {
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mobile-optimized service cards */
.animate-service-card-mobile.animate-initial {
  opacity: 0;
  transform: translateY(var(--animation-distance-small)) scale(0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.animate-service-card-mobile.animate-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  transition: opacity 300ms var(--scroll-animation-easing-smooth),
              transform 300ms var(--scroll-animation-easing-smooth),
              backdrop-filter 400ms var(--scroll-animation-easing-smooth);
}

/* Mobile-optimized scale animations */
.animate-scale-up-mobile.animate-initial {
  opacity: 0;
  transform: scale(0.9);
}

.animate-scale-up-mobile.animate-active {
  opacity: 1;
  transform: scale(1);
  transition-timing-function: var(--scroll-animation-easing-smooth);
}

/* ===== IMPROVED ANIMATION EASING FUNCTIONS ===== */

/* iOS-inspired easing presets */
.easing-ios-standard {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.easing-ios-decelerate {
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.easing-ios-accelerate {
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
}

.easing-ios-sharp {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1);
}

.easing-ios-smooth {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Natural motion easing curves */
.easing-natural-entrance {
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.easing-natural-exit {
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
}

.easing-natural-standard {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Smooth entrance and exit curves */
.easing-smooth-entrance {
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.easing-smooth-exit {
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
}

.easing-smooth-both {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Refined cubic-bezier curves for specific use cases */
.easing-gentle-bounce {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.easing-subtle-elastic {
  transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 1.25);
}

.easing-soft-spring {
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
}

.easing-crisp {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1);
}

.easing-fluid {
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ===== NEW ANIMATION UTILITY CLASSES ===== */

/* Animation pause and resume */
.animation-pause {
  animation-play-state: paused !important;
  transition: none !important;
}

.animation-resume {
  animation-play-state: running !important;
}

.animation-paused {
  animation-play-state: paused !important;
}

.animation-running {
  animation-play-state: running !important;
}

/* Animation speed modifiers */
.animation-speed-fast {
  --animation-duration: 300ms;
  animation-duration: 300ms !important;
  transition-duration: 300ms !important;
}

.animation-speed-normal {
  --animation-duration: 600ms;
  animation-duration: 600ms !important;
  transition-duration: 600ms !important;
}

.animation-speed-slow {
  --animation-duration: 900ms;
  animation-duration: 900ms !important;
  transition-duration: 900ms !important;
}

.animation-speed-extra-slow {
  --animation-duration: 1200ms;
  animation-duration: 1200ms !important;
  transition-duration: 1200ms !important;
}

/* Animation distance modifiers */
.animation-distance-small {
  --animation-distance: var(--animation-distance-small);
}

.animation-distance-medium {
  --animation-distance: var(--animation-distance-medium);
}

.animation-distance-large {
  --animation-distance: var(--animation-distance-large);
}

.animation-distance-extra-large {
  --animation-distance: var(--animation-distance-extra-large);
}

/* Apply distance modifiers to fade animations */
.animation-distance-small.animate-fade-up.animate-initial {
  transform: translateY(var(--animation-distance-small));
}

.animation-distance-large.animate-fade-up.animate-initial {
  transform: translateY(var(--animation-distance-large));
}

.animation-distance-extra-large.animate-fade-up.animate-initial {
  transform: translateY(var(--animation-distance-extra-large));
}

/* Animation delay utilities */
.animation-delay-none {
  --animation-delay: 0ms;
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
}

.animation-delay-short {
  --animation-delay: 100ms;
  animation-delay: 100ms !important;
  transition-delay: 100ms !important;
}

.animation-delay-medium {
  --animation-delay: 200ms;
  animation-delay: 200ms !important;
  transition-delay: 200ms !important;
}

.animation-delay-long {
  --animation-delay: 400ms;
  animation-delay: 400ms !important;
  transition-delay: 400ms !important;
}

/* Animation iteration utilities */
.animation-once {
  animation-iteration-count: 1 !important;
}

.animation-twice {
  animation-iteration-count: 2 !important;
}

.animation-infinite {
  animation-iteration-count: infinite !important;
}

/* Animation direction utilities */
.animation-normal {
  animation-direction: normal !important;
}

.animation-reverse {
  animation-direction: reverse !important;
}

.animation-alternate {
  animation-direction: alternate !important;
}

/* Animation fill mode utilities */
.animation-fill-none {
  animation-fill-mode: none !important;
}

.animation-fill-forwards {
  animation-fill-mode: forwards !important;
}

.animation-fill-backwards {
  animation-fill-mode: backwards !important;
}

.animation-fill-both {
  animation-fill-mode: both !important;
}

/* Disable animations utility */
.animation-disabled,
.no-animation {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Enable animations utility */
.animation-enabled {
  animation: inherit;
  transition: inherit;
}

/* ===== RESPONSIVE ADAPTATIONS ===== */

/* Mobile optimizations - reduce animation complexity */
@media (max-width: 768px) {
  :root {
    --scroll-animation-duration: 400ms;
    --animation-distance-small: 15px;
    --animation-distance-medium: 25px;
    --animation-distance-large: 35px;
    --stagger-delay-base: 75ms;
  }
  
  /* Disable parallax on mobile for performance */
  [data-parallax] {
    transform: none !important;
  }
  
  /* Simplify glass animations on mobile */
  .animate-glass-card.animate-initial,
  .animate-glass-overlay.animate-initial {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .animate-glass-card.animate-active,
  .animate-glass-overlay.animate-active {
    backdrop-filter: var(--glass-blur-mobile, blur(6px));
    -webkit-backdrop-filter: var(--glass-blur-mobile, blur(6px));
  }
  
  /* Auto-apply mobile variants */
  .animate-fade-up.animate-initial {
    transform: translateY(var(--animation-distance-small));
  }
  
  .animate-slide-up.animate-initial {
    transform: translateY(var(--animation-distance-medium));
  }
  
  /* Reduce animation speeds on mobile */
  .animation-speed-slow {
    --animation-duration: 600ms;
    animation-duration: 600ms !important;
    transition-duration: 600ms !important;
  }
  
  .animation-speed-extra-slow {
    --animation-duration: 800ms;
    animation-duration: 800ms !important;
    transition-duration: 800ms !important;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --scroll-animation-duration: 500ms;
    --animation-distance-medium: 35px;
    --animation-distance-large: 50px;
  }
}

/* ===== ACCESSIBILITY CONSIDERATIONS ===== */

/* Keyboard navigation focus states for animated elements */
.animate-initial:focus-visible,
.animate-active:focus-visible,
.animate-complete:focus-visible {
  outline: 3px solid var(--glass-border-accent, rgba(220, 20, 60, 0.8));
  outline-offset: 2px;
  z-index: 10;
}

/* Enhanced focus states for glass animated elements */
.animate-glass-card:focus-visible,
.animate-service-card:focus-visible,
.animate-advantage-item:focus-visible,
.animate-gallery-item:focus-visible {
  outline: none;
  position: relative;
}

.animate-glass-card:focus-visible::before,
.animate-service-card:focus-visible::before,
.animate-advantage-item:focus-visible::before,
.animate-gallery-item:focus-visible::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid var(--glass-border-accent, rgba(220, 20, 60, 0.8));
  border-radius: calc(inherit + 4px);
  background: var(--glass-bg-accent, rgba(220, 20, 60, 0.1));
  opacity: 0.3;
  z-index: -1;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 20px var(--glass-glow-accent, rgba(220, 20, 60, 0.4));
}

/* Keyboard activation states for animated elements */
.animate-initial.keyboard-active,
.animate-active.keyboard-active,
.animate-complete.keyboard-active {
  transform: scale(0.98);
  transition: transform 0.1s ease-out;
}

/* Skip animation for keyboard users when focused */
.animate-initial:focus-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Ensure animated elements are keyboard accessible */
[data-animate] {
  position: relative;
}

[data-animate]:focus-visible {
  z-index: 10;
}

/* Parallax elements keyboard navigation */
[data-parallax]:focus-visible {
  outline: 3px solid var(--glass-border-accent, rgba(220, 20, 60, 0.8));
  outline-offset: 2px;
  z-index: 10;
}

/* Stagger container keyboard navigation */
.stagger-container:focus-within {
  outline: 2px solid var(--glass-border-accent, rgba(220, 20, 60, 0.5));
  outline-offset: 4px;
  border-radius: 8px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-initial,
  .animate-active,
  .animate-complete,
  [data-parallax] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  
  .animate-initial {
    opacity: 1 !important;
  }
  
  /* Ensure content is immediately visible */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Maintain focus states even with reduced motion */
  .animate-initial:focus-visible,
  .animate-active:focus-visible,
  .animate-complete:focus-visible,
  [data-animate]:focus-visible,
  [data-parallax]:focus-visible {
    outline: 3px solid var(--glass-border-accent, rgba(220, 20, 60, 0.8));
    outline-offset: 2px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .animate-glass-card.animate-active,
  .animate-glass-overlay.animate-active,
  .animate-glass-glow.animate-active {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-primary, #ffffff);
    border: 2px solid var(--text-primary, #000000);
  }
  
  [data-bs-theme="dark"] .animate-glass-card.animate-active,
  [data-bs-theme="dark"] .animate-glass-overlay.animate-active,
  [data-bs-theme="dark"] .animate-glass-glow.animate-active,
  [data-theme="dark"] .animate-glass-card.animate-active,
  [data-theme="dark"] .animate-glass-overlay.animate-active,
  [data-theme="dark"] .animate-glass-glow.animate-active {
    background: var(--bg-primary, #000000);
    border: 2px solid var(--text-primary, #ffffff);
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Hardware acceleration for animated elements */
.animate-initial,
.animate-active,
[data-parallax] {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.animate-complete {
  will-change: auto;
}

/* Contain layout and paint for better performance */
.stagger-container {
  contain: layout style paint;
}

/* ===== DEBUGGING UTILITIES ===== */

/* Debug mode - shows animation boundaries */
.scroll-animation-debug .animate-initial {
  outline: 2px dashed rgba(255, 0, 0, 0.5);
}

.scroll-animation-debug .animate-active {
  outline: 2px dashed rgba(0, 255, 0, 0.5);
}

.scroll-animation-debug .animate-complete {
  outline: 2px dashed rgba(0, 0, 255, 0.5);
}

.scroll-animation-debug [data-parallax] {
  outline: 2px dashed rgba(255, 255, 0, 0.5);
}

/* ===== PRINT STYLES ===== */

@media print {
  .animate-initial,
  .animate-active,
  .animate-complete,
  [data-animate],
  [data-parallax] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===
== DEVICE-SPECIFIC ANIMATION VARIANTS ===== */

/* Device-specific animation distances and timing */
.device-mobile {
  --scroll-animation-duration: 400ms;
  --animation-distance-small: 15px;
  --animation-distance-medium: 20px;
  --animation-distance-large: 25px;
  --stagger-delay-base: 60ms;
  --scroll-animation-easing: cubic-bezier(0.4, 0, 0.6, 1); /* Faster for mobile */
}

.device-tablet {
  --scroll-animation-duration: 500ms;
  --animation-distance-small: 25px;
  --animation-distance-medium: 35px;
  --animation-distance-large: 45px;
  --stagger-delay-base: 80ms;
}

.device-desktop {
  --scroll-animation-duration: 600ms;
  --animation-distance-small: 30px;
  --animation-distance-medium: 50px;
  --animation-distance-large: 60px;
  --stagger-delay-base: 100ms;
}

/* Mobile-specific optimizations */
@media (max-width: 767px) {
  :root {
    --scroll-animation-duration: 400ms;
    --animation-distance-small: 15px;
    --animation-distance-medium: 20px;
    --animation-distance-large: 25px;
    --animation-distance-extra-large: 30px;
    --stagger-delay-base: 60ms;
    --stagger-delay-fast: 40ms;
    --stagger-delay-slow: 80ms;
    --reveal-duration-fast: 300ms;
    --reveal-duration-medium: 400ms;
    --reveal-duration-slow: 500ms;
    --reveal-duration-extra-slow: 600ms;
  }
  
  /* Disable parallax on mobile */
  [data-parallax] {
    transform: none !important;
  }
  
  .parallax-bg,
  .parallax-float,
  .parallax-layer-2,
  .parallax-layer-3 {
    transform: none !important;
  }
  
  /* Simplify glass effects on mobile */
  .animate-glass-card.animate-active,
  .animate-glass-overlay.animate-active,
  .animate-service-card.animate-active {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  
  /* Hide decorative elements on mobile */
  .floating-element,
  .decorative-element,
  .parallax-float {
    display: none !important;
  }
  
  /* Faster animations on mobile */
  .animate-initial,
  .animate-active {
    transition-duration: 400ms !important;
  }
  
  /* Reduce multi-stage animations on mobile */
  .animate-multi-stage.animate-active {
    animation-duration: 500ms !important;
  }
}

/* Tablet-specific optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --scroll-animation-duration: 500ms;
    --animation-distance-small: 25px;
    --animation-distance-medium: 35px;
    --animation-distance-large: 45px;
    --animation-distance-extra-large: 55px;
    --stagger-delay-base: 80ms;
  }
  
  /* Reduce parallax intensity on tablet */
  [data-parallax] {
    --parallax-speed: 0.3;
  }
  
  /* Moderate glass effects on tablet */
  .animate-glass-card.animate-active,
  .animate-glass-overlay.animate-active,
  .animate-service-card.animate-active {
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  }
}

/* Desktop-specific enhancements */
@media (min-width: 1025px) {
  :root {
    --scroll-animation-duration: 600ms;
    --animation-distance-small: 30px;
    --animation-distance-medium: 50px;
    --animation-distance-large: 60px;
    --animation-distance-extra-large: 80px;
    --stagger-delay-base: 100ms;
  }
  
  /* Full parallax on desktop */
  [data-parallax] {
    --parallax-speed: 0.5;
  }
  
  /* Full glass effects on desktop */
  .animate-glass-card.animate-active,
  .animate-glass-overlay.animate-active,
  .animate-service-card.animate-active {
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  }
}

/* Device-specific animation speed classes */
.device-mobile .animation-speed-normal {
  --animation-duration: 400ms;
  animation-duration: 400ms !important;
  transition-duration: 400ms !important;
}

.device-tablet .animation-speed-normal {
  --animation-duration: 500ms;
  animation-duration: 500ms !important;
  transition-duration: 500ms !important;
}

.device-desktop .animation-speed-normal {
  --animation-duration: 600ms;
  animation-duration: 600ms !important;
  transition-duration: 600ms !important;
}

/* Performance-based complexity classes */
.complexity-minimal {
  --animation-distance-medium: 15px;
  --animation-distance-large: 20px;
  --stagger-delay-base: 50ms;
}

.complexity-minimal .animate-glass-card.animate-active,
.complexity-minimal .animate-glass-overlay.animate-active,
.complexity-minimal .animate-service-card.animate-active {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.complexity-minimal [data-parallax],
.complexity-minimal .parallax-bg,
.complexity-minimal .floating-element {
  transform: none !important;
  display: none !important;
}

.complexity-reduced {
  --animation-distance-medium: 25px;
  --animation-distance-large: 35px;
  --stagger-delay-base: 70ms;
}

.complexity-reduced .animate-glass-card.animate-active,
.complexity-reduced .animate-glass-overlay.animate-active,
.complexity-reduced .animate-service-card.animate-active {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.complexity-reduced [data-parallax] {
  --parallax-speed: 0.2;
}

.complexity-full {
  /* Full animation complexity - no restrictions */
}


/* ===== CURVED SCREEN SAFETY ZONES ===== */

/* Safe area insets for edge-to-edge displays (iPhone X+, curved screens) */
@supports (padding: max(0px)) {
  .animate-initial,
  .animate-active,
  .animate-complete,
  [data-animate] {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  
  /* Extra padding for mobile devices with notches */
  @media (max-width: 767px) {
    .animate-initial,
    .animate-active,
    .animate-complete,
    [data-animate] {
      padding-left: max(15px, env(safe-area-inset-left));
      padding-right: max(15px, env(safe-area-inset-right));
      padding-top: max(10px, env(safe-area-inset-top));
      padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
  }
}

/* Prevent animations from extending too close to screen edges */
.device-mobile .animate-fade-left.animate-initial,
.device-mobile .animate-slide-left.animate-initial {
  transform: translateX(calc(var(--animation-distance-medium) + 10px));
}

.device-mobile .animate-fade-right.animate-initial,
.device-mobile .animate-slide-right.animate-initial {
  transform: translateX(calc(-1 * (var(--animation-distance-medium) + 10px)));
}

/* Curved screen edge protection */
@media (max-width: 767px) {
  /* Add extra margin for elements near screen edges */
  .animate-initial:first-child,
  .animate-active:first-child {
    margin-top: max(10px, env(safe-area-inset-top));
  }
  
  .animate-initial:last-child,
  .animate-active:last-child {
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }
  
  /* Ensure glass cards don't extend to edges */
  .animate-glass-card,
  .animate-service-card,
  .glass-card {
    margin-left: max(15px, env(safe-area-inset-left));
    margin-right: max(15px, env(safe-area-inset-right));
  }
  
  /* Prevent parallax elements from causing edge distortions */
  [data-parallax],
  .parallax-bg {
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
  }
}

/* Notch and curved screen detection */
@supports (padding: env(safe-area-inset-top)) {
  /* Device has notch or curved screen */
  body {
    --has-curved-screen: 1;
  }
  
  /* Adjust animations for curved screens */
  .animate-fade-up.animate-initial {
    transform: translateY(calc(var(--animation-distance-medium) + 5px));
  }
  
  .animate-fade-down.animate-initial {
    transform: translateY(calc(-1 * (var(--animation-distance-medium) + 5px)));
  }
}

/* Landscape orientation on curved screens */
@media (max-width: 767px) and (orientation: landscape) {
  .animate-initial,
  .animate-active,
  [data-animate] {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}