/* parallax.css */
/* advanced-parallax.css */

/* Core Setup */
html {
    overflow-x: hidden;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    perspective: 1px;
    transform-style: preserve-3d;
}

.parallax-wrapper {
    height: 100vh;
    overflow-x: hidden;
    perspective: 10px;
    perspective-origin: center;
    transform-style: preserve-3d;
}

/* Base Parallax Classes */
.parallax-section {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Speed Controls (more granular) */
.parallax-speed-0-25 { --parallax-speed: 0.25; }
.parallax-speed-0-5 { --parallax-speed: 0.5; }
.parallax-speed-0-75 { --parallax-speed: 0.75; }
.parallax-speed-1 { --parallax-speed: 1; }
.parallax-speed-1-25 { --parallax-speed: 1.25; }
.parallax-speed-1-5 { --parallax-speed: 1.5; }
.parallax-speed-1-75 { --parallax-speed: 1.75; }
.parallax-speed-2 { --parallax-speed: 2; }
.parallax-speed-2-5 { --parallax-speed: 2.5; }
.parallax-speed-3 { --parallax-speed: 3; }

/* Direction Controls */
.parallax-move-up { --parallax-direction: -1; }
.parallax-move-down { --parallax-direction: 1; }
.parallax-move-left { --parallax-direction: -1; }
.parallax-move-right { --parallax-direction: 1; }
.parallax-move-diagonal-tl { --parallax-direction-x: -1; --parallax-direction-y: -1; }
.parallax-move-diagonal-tr { --parallax-direction-x: 1; --parallax-direction-y: -1; }
.parallax-move-diagonal-bl { --parallax-direction-x: -1; --parallax-direction-y: 1; }
.parallax-move-diagonal-br { --parallax-direction-x: 1; --parallax-direction-y: 1; }

/* Enhanced Depth Control */
.parallax-depth-0 { --parallax-depth: 0; }
.parallax-depth-10 { --parallax-depth: 10; }
.parallax-depth-20 { --parallax-depth: 20; }
.parallax-depth-30 { --parallax-depth: 30; }
.parallax-depth-40 { --parallax-depth: 40; }
.parallax-depth-50 { --parallax-depth: 50; }
.parallax-depth-60 { --parallax-depth: 60; }
.parallax-depth-70 { --parallax-depth: 70; }
.parallax-depth-80 { --parallax-depth: 80; }
.parallax-depth-90 { --parallax-depth: 90; }
.parallax-depth-100 { --parallax-depth: 100; }

/* Animation Effects */
.parallax-fade {
    opacity: 0;
    transition: opacity var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.parallax-blur {
    filter: blur(20px);
    transition: filter var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.parallax-scale {
    transform: scale(0);
    transition: transform var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.parallax-rotate {
    transform: rotate(180deg);
    transition: transform var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.parallax-flip-x {
    transform: rotateX(180deg);
    transition: transform var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.parallax-flip-y {
    transform: rotateY(180deg);
    transition: transform var(--transition-duration, 0.6s) var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Active States */
.is-visible.parallax-fade { opacity: 1; }
.is-visible.parallax-blur { filter: blur(0); }
.is-visible.parallax-scale { transform: scale(1); }
.is-visible.parallax-rotate { transform: rotate(0); }
.is-visible.parallax-flip-x { transform: rotateX(0); }
.is-visible.parallax-flip-y { transform: rotateY(0); }

/* Special Effects */
.parallax-glow {
    position: relative;
    overflow: hidden;
}

.parallax-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    transform: translate(-100%, -100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-visible.parallax-glow::after {
    transform: translate(0, 0);
}

/* Perspective Controls */
.parallax-perspective-500 { perspective: 500px; }
.parallax-perspective-1000 { perspective: 1000px; }
.parallax-perspective-1500 { perspective: 1500px; }
.parallax-perspective-2000 { perspective: 2000px; }

/* Timing Controls */
.parallax-duration-fast { --transition-duration: 0.3s; }
.parallax-duration-normal { --transition-duration: 0.6s; }
.parallax-duration-slow { --transition-duration: 0.9s; }
.parallax-duration-slower { --transition-duration: 1.2s; }

/* Easing Controls */
.parallax-ease-linear { --transition-timing: linear; }
.parallax-ease-smooth { --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); }
.parallax-ease-bounce { --transition-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.parallax-ease-elastic { --transition-timing: cubic-bezier(0.68, -0.6, 0.32, 1.6); }

/* New Wave Effect */
.parallax-wave {
    position: relative;
    overflow: hidden;
}

.parallax-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%) skewX(-15deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-visible.parallax-wave::before {
    transform: translateX(100%) skewX(-15deg);
}

/* <!-- Basic parallax eg-->
<!-- Basic parallax with speed and direction -->
    <div class="parallax-section 
         parallax-speed-0-75 
         parallax-move-up 
         parallax-depth-50">
        Basic parallax content
    </div>

    <!-- Multi-effect parallax -->
    <div class="parallax-section 
         parallax-speed-1-5 
         parallax-move-diagonal-tr 
         parallax-depth-70 
         parallax-fade 
         parallax-blur 
         parallax-duration-slow 
         parallax-ease-bounce">
        Complex animation content
    </div>

    <!-- Wave effect with glow -->
    <div class="parallax-section 
         parallax-speed-1 
         parallax-move-up 
         parallax-wave 
         parallax-glow 
         parallax-duration-normal">
        Wave effect content
    </div>

    <!-- 3D rotation effect -->
    <div class="parallax-section 
         parallax-speed-0-5 
         parallax-perspective-1000 
         parallax-flip-x 
         parallax-ease-elastic">
        3D rotating content
    </div>