/* Parallax Animation Styles */

/* Prevent horizontal scrolling */
html,
body {
  overflow-x: hidden;
}

/* Performance optimizations for smooth animations */
.mountains,
.hill_back,
.hill_front,
.lanterns {
  will-change: background-position;
}

/* Fix for seamless mountains background */
.mountains {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.001);
}

/* Optional: Add hardware acceleration for smoother animations */
.main_wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  height: 100svh; /* Use small viewport height for better mobile support */
}

/* Cloud styles - individual clouds */
.cloud {
  z-index: 1;
  position: absolute;
  height: 12%;
  width: auto;
  pointer-events: none;
  will-change: transform;
}

.cloud_1 {
  top: 15%;
}

.cloud_2 {
  top: 35%;
}

/* Ensure background pattern stays still */
.background {
  animation: none;
}

/* Horse and shadow don't move (no animation needed) */
.horse,
.shadow {
  animation: none;
}