/**
 * Parallax Scrolling Effects
 * For QManCo Website
 */

/* Base parallax container styles */
.parallax-background {
    position: relative;
    background-attachment: fixed; /* Traditional parallax */
    background-position: center center; 
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* Basic parallax container */
.parallax-container {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

/* Fixed parallax styling for containers */
.parallax-container[style*="background-attachment: fixed"],
.parallax-section,
.overlay-section-with-image {
    background-attachment: fixed !important;
    position: relative !important;
}

/* Home section specifics */
.py-5:has(.display-4).parallax-container {
    position: relative !important;
    z-index: 1;
}

/* Modern parallax container */
.parallax-container {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

/* Fixed parallax style - the background stays perfectly fixed */
.parallax-container[data-parallax-direction="fixed"] {
    background-attachment: fixed !important;
}

/* Parallax background element for animated effects */
.parallax-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 150% !important; /* Extra height for movement */
    background-size: cover !important;
    background-position: center center !important;
    z-index: -1 !important;
}

/* Parallax background element for the reveal effect */
.parallax-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important; /* Cover only the container */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed !important; /* This creates the reveal effect */
    z-index: -1;
}

/* Overlay for parallax backgrounds */
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Content positioning within parallax sections */
.parallax-content,
.parallax-container .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Special speed classes (kept for compatibility) */
.parallax-slow {
    --parallax-speed: 0.3;
}

.parallax-medium {
    --parallax-speed: 0.5;
}

.parallax-fast {
    --parallax-speed: 0.7;
}

/* Debug class to help troubleshoot */
.parallax-debug {
    position: relative;
}

.parallax-debug::after {
    content: "Parallax";
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 2px 5px;
    font-size: 10px;
    z-index: 100;
}

/* Mobile optimization */
@media only screen and (max-width: 768px) {
    .parallax-bg {
        height: 120% !important; /* Less movement on mobile */
    }
    /* iOS and some mobile browsers don't handle fixed backgrounds well */
    .parallax-container[style*="background-attachment: fixed"],
    .parallax-container.fixed-background,
    .parallax-section,
    .overlay-section-with-image {
        background-attachment: scroll !important;
    }
}

/* Fix for iOS/mobile devices that don't handle fixed backgrounds well */
@supports (-webkit-touch-callout: none) {
    .parallax-container[style*="background-attachment: fixed"],
    .parallax-container.fixed-background,
    .parallax-section,
    .overlay-section-with-image {
        background-attachment: scroll !important;
    }
}

/* Home and overlay section parallax */
.overlay-section-with-image {
    position: relative;
    z-index: 1;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden;
    min-height: 350px; /* Ensure minimum height */
    display: flex;
    align-items: center;
}

/* Ensure content is visible over any overlay */
.overlay-section-with-image .container {
    position: relative;
    z-index: 2;
}

/* Overlay styles */
.overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Mobile optimization */
@media only screen and (max-width: 768px) {
    .overlay-section-with-image {
        background-attachment: scroll !important;
    }
}

/* Fix for iOS/mobile devices that don't handle fixed backgrounds well */
@supports (-webkit-touch-callout: none) {
    .overlay-section-with-image {
        background-attachment: scroll !important;
    }
}

/* Home section specific parallax styles */
.py-5.overlay-section-with-image {
    background-position: center top !important; /* Align to top */
    min-height: 350px;
    background-attachment: fixed !important;
    position: relative;
    overflow: hidden;
}

/* Make sure the overlay is positioned correctly */
.py-5.overlay-section-with-image .overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Make sure container content appears on top */
.py-5.overlay-section-with-image .container {
    position: relative;
    z-index: 2;
}

/* Fix for other section types */
.overlay-section-with-image:not(.py-5) {
    background-position: center center !important;
}

/* Specific styles for home section (display-4 identifies the home section) */
.py-5:has(.display-4) .parallax-bg {
    background-position: center top !important; /* Force top alignment */
}

/* Ensure the background stays fixed and covers full width */
.parallax-bg.parallax-fixed {
    position: absolute !important;
    height: 150% !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    z-index: -1 !important;
}

/* Fix for when multiple classes are applied to home section */
.py-5.parallax-section.overlay-section-with-image.parallax-container {
    background-position: center top !important;
}

/* Specific adjustment for home section to ensure background stays truly fixed */
.py-5:has(.display-4).parallax-section {
    background-attachment: fixed !important;
    background-position: center top !important;
    position: relative;
    z-index: 1;
}

/* Fix for multiple classes being applied */
.py-5.overlay-section-with-image.parallax-section.parallax-container[data-parallax-applied="true"] {
    background-attachment: fixed !important;
    position: relative !important;
}

/* Ensure overlay is properly positioned */
.py-5.overlay-section-with-image .overlay-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* JavaScript-based parallax background */
.js-parallax-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120% !important; /* Default height - will be updated by JS */
    background-size: cover !important;
    background-position: center top !important;
    z-index: -1 !important;
    transform: translateY(0); /* Will be animated by JS */
}

@media screen and (orientation: landscape) {
    .js-parallax-bg {
        height: 150% !important; /* Taller in landscape by default - JS will override */
    }
}

/* Mobile-specific parallax background */
.mobile-parallax-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 130% !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    z-index: -1 !important;
    transform: translateY(0);
    will-change: transform; /* Optimize for animation performance */
}

/* Make sure overlay stays on top of parallax background for proper rendering */
[data-mobile-parallax="true"] .overlay-background {
    z-index: 0 !important;
}