/* 
    Premium Parallax Hero Animation
    Scroll-driven anti-gravity bottles
*/

.hero {
    position: relative;
    overflow: hidden;
}

.hero .container {
    position: relative;
    z-index: 20; /* Keep text readable, above perfumes */
    pointer-events: none; /* Perfumes are behind, but we want the background clicks to pass through if necessary, wait, actually lets keep hero-content clickable */
}

/* Ensure only the actual content is clickable, not the entire container blocking perfumes if they had pointer events */
.hero-content {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* This puts it below hero-content (20) */
    overflow: hidden;
    perspective: 1000px;
}

/* Base style for all parallax bottles */
.parallax-bottle {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px; /* Base size, effectively controlled by scale */
    will-change: transform;
    opacity: 0.95;
}

/* Adding a subtle natural floating idle motion that runs independently of scroll */
/* We animate a wrapper instead of the bottle to prevent conflicts with Javascript inline transforms */
.idle-wrapper {
    will-change: transform;
    animation: idle-float 12s infinite cubic-bezier(0.3, 0.05, 0.3, 0.95) alternate;
}

/* Independent floating so they aren't static when NOT scrolling */
/* Using translate3d so the GPU handles it flawlessly at 60fps+ */
@keyframes idle-float {
    0% { transform: translate3d(0, 0px, 0); }
    100% { transform: translate3d(0, -12px, 0); }
}

/* Different desync delays for the idle float move to wrappers */
.pb-float-1 { animation-delay: 0s; }
.pb-float-2 { animation-delay: -3.2s; }
.pb-float-3 { animation-delay: -1.7s; }
.pb-float-4 { animation-delay: -5.4s; }
.pb-float-5 { animation-delay: -4.1s; }

/* Different desync delays for the idle float, adjusting z-index to all be relative to each other but under the hero's z-index:20 */
.pb-1 { animation-delay: 0s;     z-index: 10; } /* Foreground */
.pb-2 { animation-delay: -1.2s;  z-index: 6;  } /* Midground */
.pb-3 { animation-delay: -2.3s;  z-index: 3;  } /* Background */
.pb-4 { animation-delay: -3.4s;  z-index: 5;  } /* Midground */
.pb-5 { animation-delay: -4.5s;  z-index: 12; } /* Foreground Extreme */
.pb-6 { animation-delay: -5.6s;  z-index: 2;  } /* Background Extreme */
.pb-7 { animation-delay: -3.1s;  z-index: 11; } /* Foreground */

/* New bottles */
.pb-8 { animation-delay: -6.1s;  z-index: 10; } 
.pb-9 { animation-delay: -2.8s;  z-index: 4;  } 
.pb-10 { animation-delay: -7.5s; z-index: 8;  } 
.pb-11 { animation-delay: -1.9s; z-index: 7;  } 
.pb-12 { animation-delay: -4.1s; z-index: 9;  } 

.parallax-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.15)) drop-shadow(0 15px 20px rgba(0,0,0,0.1));
}

/* Background layers have slight blur to enhance depth of field naturally */
.pb-3 .parallax-img, .pb-6 .parallax-img {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05)) blur(1px);
    opacity: 0.8;
}

/* Creating royal blue and warm pale yellow via CSS filters from existing assets */
.filter-royal-blue {
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.15)) hue-rotate(-30deg) saturate(1.5) brightness(0.9);
}

.filter-warm-yellow {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05)) hue-rotate(60deg) saturate(1.2) brightness(1.1) blur(1px);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Limit the number of perfumes to exactly 6 on mobile to avoid overcrowding the narrow screen */
    .pb-7, .pb-8, .pb-9, .pb-10, .pb-11, .pb-12 {
        display: none !important;
    }
}