/* Parallax Performance Optimizations */

/* Base parallax container optimizations */
.parallax {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    will-change: transform;
    contain: layout style;
}

/* Optimize individual layers */
.parallax .layer {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    contain: layout style paint;
}

/* Disable parallax transforms during theme transitions */
.theme-transitioning .parallax,
.theme-transitioning .parallax .layer {
    transition: none !important;
    animation: none !important;
    transform: translateZ(0) !important;
}

/* Parallax icons - optimize rendering */
.parallax-icon {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style paint;
}

.app-icon-parallax {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Prevent layout thrashing */
.parallax,
.parallax * {
    contain: layout;
}

/* During scroll - reduce parallax complexity */
body.scrolling .parallax .layer {
    transition: transform 0.1s linear !important;
}

/* Disable parallax on low-performance devices */
@media (max-width: 768px) {
    .parallax .layer {
        transform: none !important;
    }
}

/* High performance mode */
@supports (contain: layout) and (transform: translateZ(0)) {
    .parallax {
        contain: strict;
        content-visibility: auto;
    }
}

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    .parallax,
    .parallax .layer {
        transform: none !important;
        transition: none !important;
    }
}

/* GPU acceleration hints */
.parallax::before,
.parallax::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    pointer-events: none;
    z-index: -1;
}

/* Prevent parallax during theme transition */
html.theme-transitioning .parallax {
    pointer-events: none !important;
    opacity: 0.8;
    transition: opacity 0.3s ease !important;
}

/* Optimize parallax bubble transitions */
.parallax-icon,
.app-icon-parallax {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Prevent flickering during theme change */
.theme-transitioning .parallax-icon,
.theme-transitioning .app-icon-parallax {
    animation: none !important;
    transition: none !important;
}