/* ==============================================
   MODERN OPACITY-FOCUSED ANIMATION SYSTEM
   ============================================== */

/* Base styles - elements start invisible */
.fade-in,
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.fade-in-scale,
.card-fade-in,
.slide-in-up,
.slide-in-down,
.hero-fade-in {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: none; /* Prevent CSS transitions from interfering */
  will-change: opacity, transform, visibility; /* Optimize for animations */
  backface-visibility: hidden; /* Prevent flickering during animations */
  transform: translate3d(0, 20px, 0); /* Force GPU acceleration */
}

/* Always visible elements (bypass animations) */
.always-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure images are always visible */
img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent flickering during class changes */
.fade-in.animate-reverse,
.fade-in-up.animate-reverse,
.fade-in-down.animate-reverse,
.fade-in-left.animate-reverse,
.fade-in-right.animate-reverse,
.fade-in-scale.animate-reverse,
.card-fade-in.animate-reverse,
.slide-in-up.animate-reverse,
.slide-in-down.animate-reverse {
  opacity: 1; /* Start from visible state for reverse animations */
  visibility: visible;
  will-change: opacity, transform, visibility;
  backface-visibility: hidden; /* Prevent flickering during reverse animations */
  transform: translate3d(0, 0, 0); /* Force GPU acceleration for reverse */
}

/* Force stable states to prevent flickering */
.fade-in.animate:not(.animate-reverse),
.fade-in-up.animate:not(.animate-reverse),
.fade-in-down.animate:not(.animate-reverse),
.fade-in-left.animate:not(.animate-reverse),
.fade-in-right.animate:not(.animate-reverse),
.fade-in-scale.animate:not(.animate-reverse),
.card-fade-in.animate:not(.animate-reverse),
.slide-in-up.animate:not(.animate-reverse),
.slide-in-down.animate:not(.animate-reverse) {
  opacity: 0; /* Ensure starting from hidden state */
  visibility: visible; /* But make sure it's in the layout */
}

/* ==============================================
   FORWARD ANIMATIONS (Scroll In)
   ============================================== */

/* Fade In Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.fade-in.animate {
  animation: fadeIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.fade-in-up.animate {
  animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Scale Animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
  }
}

.fade-in-scale.animate {
  animation: fadeInScale 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Card Fade In Animation */
@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(20px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
  }
}

.card-fade-in.animate {
  animation: cardFadeIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Hero Animation */
@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.hero-fade-in.animate {
  animation: heroFadeIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Down Animation */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.fade-in-down.animate {
  animation: fadeInDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Left Animation */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.fade-in-left.animate {
  animation: fadeInLeft 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Fade In Right Animation */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.fade-in-right.animate {
  animation: fadeInRight 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Slide In Up Animation */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slide-in-up.animate {
  animation: slideInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Slide In Down Animation */
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slide-in-down.animate {
  animation: slideInDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ==============================================
   REVERSE ANIMATIONS (Scroll Out)
   ============================================== */

/* Fade Out Animation - Smooth and quick */
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    visibility: hidden;
  }
}

.fade-in.animate-reverse {
  animation: fadeOut 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Fade Out Down Animation - Smooth and quick */
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -15px, 0);
    visibility: hidden;
  }
}

.fade-in-up.animate-reverse {
  animation: fadeOutDown 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Fade Out Scale Animation - Smooth and quick */
@keyframes fadeOutScale {
  0% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: scale(0.96) translate3d(0, -12px, 0);
    visibility: hidden;
  }
}

.fade-in-scale.animate-reverse {
  animation: fadeOutScale 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Card Fade Out Animation - Smooth and quick */
@keyframes cardFadeOut {
  0% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: scale(0.98) translate3d(0, -12px, 0);
    visibility: hidden;
  }
}

.card-fade-in.animate-reverse {
  animation: cardFadeOut 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Fade Out Up Animation (reverse of fade-in-down) */
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
    visibility: hidden;
  }
}

.fade-in-down.animate-reverse {
  animation: fadeOutUp 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Fade Out Right Animation (reverse of fade-in-left) */
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    visibility: hidden;
  }
}

.fade-in-left.animate-reverse {
  animation: fadeOutRight 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Fade Out Left Animation (reverse of fade-in-right) */
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
    visibility: hidden;
  }
}

.fade-in-right.animate-reverse {
  animation: fadeOutLeft 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Slide Out Down Animation (reverse of slide-in-up) */
@keyframes slideOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    visibility: hidden;
  }
}

.slide-in-up.animate-reverse {
  animation: slideOutDown 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* Slide Out Up Animation (reverse of slide-in-down) */
@keyframes slideOutUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
    visibility: hidden;
  }
}

.slide-in-down.animate-reverse {
  animation: slideOutUp 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* ==============================================
   ANIMATION DELAYS (Normal timing)
   ============================================== */

.animate-delay-1.animate { animation-delay: 0.1s; }
.animate-delay-2.animate { animation-delay: 0.2s; }
.animate-delay-3.animate { animation-delay: 0.3s; }
.animate-delay-4.animate { animation-delay: 0.4s; }
.animate-delay-5.animate { animation-delay: 0.5s; }
.animate-delay-6.animate { animation-delay: 0.6s; }
.animate-delay-7.animate { animation-delay: 0.7s; }
.animate-delay-8.animate { animation-delay: 0.8s; }
.animate-delay-9.animate { animation-delay: 0.9s; }
.animate-delay-10.animate { animation-delay: 1.0s; }
.animate-delay-11.animate { animation-delay: 1.1s; }
.animate-delay-12.animate { animation-delay: 1.2s; }
.animate-delay-13.animate { animation-delay: 1.3s; }
.animate-delay-14.animate { animation-delay: 1.4s; }
.animate-delay-15.animate { animation-delay: 1.5s; }
.animate-delay-16.animate { animation-delay: 1.6s; }
.animate-delay-17.animate { animation-delay: 1.7s; }
.animate-delay-18.animate { animation-delay: 1.8s; }
.animate-delay-19.animate { animation-delay: 1.9s; }

/* Reverse animations should be immediate and smooth */
.animate-reverse {
  animation-delay: 0s !important;
  animation-duration: 0.6s !important; /* Faster reverse for smoothness */
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Smooth easing */
}

/* ==============================================
   HOVER EFFECTS
   ============================================== */

.hover-lift:hover {
  transform: translateY(-3px);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-scale:hover {
  transform: scale(1.02);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-animate {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  .fade-in.animate {
    animation: fadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .fade-in-up.animate {
    animation: fadeInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .fade-in-scale.animate {
    animation: fadeInScale 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .card-fade-in.animate {
    animation: cardFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .hero-fade-in.animate {
    animation: heroFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .fade-in-down.animate {
    animation: fadeInDown 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .fade-in-left.animate {
    animation: fadeInLeft 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .fade-in-right.animate {
    animation: fadeInRight 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .slide-in-up.animate {
    animation: slideInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  .slide-in-down.animate {
    animation: slideInDown 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  /* Even faster reverse animations on mobile */
  .fade-in.animate-reverse {
    animation: fadeOut 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .fade-in-up.animate-reverse {
    animation: fadeOutDown 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .fade-in-scale.animate-reverse {
    animation: fadeOutScale 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .card-fade-in.animate-reverse {
    animation: cardFadeOut 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .fade-in-down.animate-reverse {
    animation: fadeOutUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .fade-in-left.animate-reverse {
    animation: fadeOutRight 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .fade-in-right.animate-reverse {
    animation: fadeOutLeft 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .slide-in-up.animate-reverse {
    animation: slideOutDown 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  
  .slide-in-down.animate-reverse {
    animation: slideOutUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==============================================
   SMOOTH SCROLLING
   ============================================== */

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

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

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

/* ==============================================
   LOADING OVERLAY
   ============================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* ==============================================
   MARQUEE ANIMATIONS - SMOOTH CONTINUOUS ROTATION
   ============================================== */
   
/* Ensure marquee runs even when window not in focus */
.marquee-container * {
  pointer-events: none; /* Prevent hover interruptions */
}

.marquee-container {
  pointer-events: auto; /* Re-enable for container */
}

/* Marquee container */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  padding: 1rem 0;
  min-height: 80px; /* Мінімальна висота щоб контент не зникав */
}

/* Marquee content wrapper */
.marquee-content {
  display: flex;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  gap: 1.5rem;
  /* Ensure content width for seamless loop */
  width: max-content;
  /* Critical: Ensure the duplicated content creates perfect loop */
  /* The HTML structure should have exactly 50% original + 50% duplicate */
}

/* Add smooth fade edges for professional look */
.marquee-container {
  /* Add mask for smooth edges */
  mask: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
}

/* Scroll-dependent movement - controlled by GSAP ScrollTrigger */
.marquee-left .marquee-content {
  /* No CSS animation - controlled by GSAP */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Scroll-dependent movement - controlled by GSAP ScrollTrigger */
.marquee-right .marquee-content {
  /* No CSS animation - controlled by GSAP */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Keyframes for left movement - perfect seamless infinite loop */
@keyframes marqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Keyframes for right movement - perfect seamless infinite loop */
@keyframes marqueeRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Remove pause on hover for continuous smooth animation */
/* .marquee-container:hover .marquee-content {
  animation-play-state: paused;
} */

/* Individual marquee items */
.marquee-item {
  flex-shrink: 0;
  min-width: 120px;
  white-space: nowrap;
  transition: all 0.3s ease;
  /* Prevent text selection during animation */
  user-select: none;
  -webkit-user-select: none;
  /* Optimize rendering */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.marquee-item:hover {
  transform: translate3d(0, -2px, 0);
}

/* Logo containers in marquee (backward compatibility) */
.marquee-logo {
  flex-shrink: 0;
  margin-right: 2rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 60px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.marquee-logo:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Auto-adjust speed based on content amount for optimal experience */
.marquee-container[data-item-count="1"] .marquee-content,
.marquee-container[data-item-count="2"] .marquee-content,
.marquee-container[data-item-count="3"] .marquee-content {
  animation-duration: 20s; /* Faster for fewer items */
}

.marquee-container[data-item-count="4"] .marquee-content,
.marquee-container[data-item-count="5"] .marquee-content,
.marquee-container[data-item-count="6"] .marquee-content {
  animation-duration: 30s; /* Medium speed */
}

/* Default speed for 7+ items is 40s as defined above */

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee-left .marquee-content,
  .marquee-right .marquee-content {
    animation-duration: 25s; /* Faster on mobile */
  }
  
  .marquee-logo {
    min-width: 100px;
    height: 50px;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
  }
  
  .marquee-item {
    min-width: 100px;
  }
}

/* Enhanced performance for heavy content and smooth continuous rotation */
.marquee-container {
  contain: layout style paint;
  /* Use hardware acceleration */
  transform: translate3d(0, 0, 0);
  /* Ensure animations don't get interrupted */
  animation-fill-mode: both;
}

/* Smooth animation settings for better visual experience */
.marquee-content {
  /* Better subpixel rendering */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Smooth animation timing */
  animation-timing-function: linear;
  animation-fill-mode: both;
  /* Prevent animation from being paused by browser optimizations */
  animation-play-state: running;
}

/* Remove old CSS animation controls - now handled by GSAP */
/* .marquee-content {
  animation-fill-mode: both !important;
  animation-play-state: running !important;
} */

/* Override any hover or focus states that might pause animation */
/* .marquee-container:hover .marquee-content,
.marquee-container:focus .marquee-content,
.marquee-container:focus-within .marquee-content {
  animation-play-state: running !important;
} */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .marquee-left .marquee-content,
  .marquee-right .marquee-content {
    animation: none;
    transform: none;
  }
  
  .marquee-container {
    overflow-x: auto;
    mask: none;
    -webkit-mask: none;
  }
  
  .marquee-content {
    animation: none !important;
  }
}

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

/* Parallax container */
.parallax-container {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Parallax element base */
.parallax-element {
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Multi-layer parallax */
.parallax-bg {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Floating elements for parallax */
.parallax-float {
  position: absolute;
  will-change: transform;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(10px, -10px, 0) rotate(1deg);
  }
  66% {
    transform: translate3d(-5px, 5px, 0) rotate(-1deg);
  }
}

/* Parallax layers with different speeds */
.parallax-slow {
  transform: translate3d(0, 0, 0);
}

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

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

/* Simple Image Container */
.hero-parallax-block {
  position: relative;
  height: 700px; /* h-96 equivalent */
  overflow: hidden;
}

/* Simple Image */
.hero-parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* Parallax overlay effects */
.hero-parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero-parallax-block:hover .hero-parallax-overlay {
  opacity: 1;
}

/* Floating particles for extra effect */
.parallax-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 8s linear infinite;
}

@keyframes particle-float {
  0% {
    transform: translate3d(0, 100vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(100px, -100px, 0) rotate(360deg);
    opacity: 0;
  }
}

/* Staggered particle delays */
.parallax-particle:nth-child(1) { animation-delay: 0s; left: 10%; }
.parallax-particle:nth-child(2) { animation-delay: 1s; left: 20%; }
.parallax-particle:nth-child(3) { animation-delay: 2s; left: 30%; }
.parallax-particle:nth-child(4) { animation-delay: 3s; left: 40%; }
.parallax-particle:nth-child(5) { animation-delay: 4s; left: 50%; }
.parallax-particle:nth-child(6) { animation-delay: 5s; left: 60%; }
.parallax-particle:nth-child(7) { animation-delay: 6s; left: 70%; }
.parallax-particle:nth-child(8) { animation-delay: 7s; left: 80%; }

/* Responsive parallax adjustments */
@media (max-width: 768px) {
  .hero-parallax-block {
    height: 20rem; /* Smaller on mobile */
    clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 2% 100%);
  }
  
  .hero-parallax-block:hover {
    transform: translate3d(0, -2px, 0) scale(1.01);
  }
  
  .hero-parallax-image {
    height: 110%; /* Less dramatic on mobile */
  }
}

/* High performance mode for low-end devices */
@media (max-resolution: 1dppx) {
  .hero-parallax-block {
    background-attachment: scroll; /* Better performance */
  }
  
  .parallax-particle {
    display: none; /* Remove particles on low-res devices */
  }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax-block {
    transition: clip-path 0.3s ease;
    transform: none !important;
  }
  
  .hero-parallax-block:hover {
    transform: none !important;
  }
  
  .hero-parallax-image {
    transition: none;
    transform: none !important;
  }
  
  .parallax-particle,
  .parallax-float {
    animation: none !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hero-parallax-overlay {
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }
}

/* Performance optimizations */
.parallax-optimized {
  contain: layout style paint;
  content-visibility: auto;
}

/* GPU layer promotion */
.gpu-accelerated {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ==============================================
   MARQUEE ANIMATIONS FOR TECHNOLOGIES SECTION
   ============================================== */

/* Marquee Container */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
}

/* Marquee Content */
.marquee-content {
  display: inline-flex;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  gap: 32px;
}

/* Moving Left - controlled by GSAP ScrollTrigger */
.marquee-left .marquee-content {
  /* No CSS animation - controlled by GSAP */
  will-change: transform;
}

/* Moving Right - controlled by GSAP ScrollTrigger */
.marquee-right .marquee-content {
  /* No CSS animation - controlled by GSAP */
  will-change: transform;
}

/* Marquee Keyframes */
@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Marquee Item */
.marquee-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.marquee-item:hover {
  transform: scale(1.05);
  background-color: #f8f9fa;
}

/* Remove pause on hover for continuous smooth animation */
/* .marquee-container:hover .marquee-content {
  animation-play-state: paused;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee-left .marquee-content {
    animation-duration: 45s;
    gap: 16px;
  }
  
  .marquee-right .marquee-content {
    animation-duration: 50s;
    gap: 16px;
  }
  
  .marquee-item {
    padding: 12px 16px;
  }
}