/* ============================================
   Layer Parallax - Scroll Animation Styles
   ============================================ */

/* Base element styles - GPU acceleration */
.parallax-layer {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Ensure images inside have proper rendering */
.parallax-layer img,
.parallax-layer video {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================
   CONTAINER SETUP
   ============================================ */

/* Parent container should allow overflow for parallax movement */
.parallax-container {
  overflow: visible;
  position: relative;
}

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

@media (prefers-reduced-motion: reduce) {
  .parallax-layer {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
  }
}

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

.parallax-layer {
  contain: layout style;
}

/* ============================================
   DEBUG MODE
   ============================================ */

.parallax-layer.parallax-debug {
  outline: 2px dashed rgba(164, 251, 129, 0.6);
  outline-offset: 4px;
}

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

@media print {
  .parallax-layer {
    transform: none !important;
    opacity: 1 !important;
  }
}