/* Animation Delay Utilities */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-150 {
  animation-delay: 150ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-450 {
  animation-delay: 450ms;
}

/* 3D Transform Utilities */
.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

/* Hero Image Styles - Full viewport width with dynamic transform */
.hero-image-after,
.hero-image-before {
  width: 100vw;
  max-width: none;
  transform: scale(1.02) translateY(calc(var(--offset-y, 0) * 0.05px));
}

/* Slider Dynamic Width */
.slider-clip {
  width: calc(var(--slider-position, 50) * 1%);
}

/* Slider Line Position */
.slider-line {
  left: calc(var(--slider-position, 50) * 1%);
}

/* Carousel 3D Rotation */
.carousel-container {
  transform: rotateX(-2deg) rotateY(calc(var(--rotation, 0) * 1deg));
  transform-style: preserve-3d;
}

/* Carousel Card Position */
.carousel-card {
  transform: rotateY(calc(var(--angle, 0) * 1deg)) translateZ(calc(var(--radius, 200) * 1px));
  transform-style: preserve-3d;
}

/* Animation Delay Dynamic */
.animation-delay-dynamic {
  animation-delay: calc(var(--delay, 0) * 1ms);
}

/* Mobile Optimizations - Reduce animations on touch devices */
@media (hover: none) and (pointer: coarse) {

  /* Disable parallax on mobile for better scroll performance */
  .hero-image-after,
  .hero-image-before {
    transform: scale(1.02) !important;
  }

  /* Reduce motion on mobile */
  .animate-float {
    animation: none;
  }
}