/* --- SCROLL PROGRESS BAR STYLES --- */

html, body {
    width: 100%;
    overflow-x: hidden !important; 
    position: relative; 
}


.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 9999;
    background: transparent;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #9333ea 100%);
    width: 0%;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s ease-out;
}


/* --- ANIMATION  --- */
.parallax {
    opacity: 0;
    transition: all 0.8s ease-in-out;
    will-change: transform, opacity, filter;
}

.parallax.active {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0) skew(0);
    filter: blur(0);
}

/* =========================================
   A. ENTRANCE CLASSES (Initial State)
   ========================================= */

/* Basics */
.enter-fade-up { transform: translateY(80px); }
.enter-fade-down { transform: translateY(-80px); }
.enter-slide-left { transform: translateX(-100px); }
.enter-slide-right { transform: translateX(100px); }
.enter-long-up { transform: translateY(200px); }

/* Zooms */
.enter-zoom-in { transform: scale(0.5); }
.enter-zoom-out { transform: scale(1.3); }
.enter-elastic { transform: scale(0.5); transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* Rotations */
.enter-rotate-left { transform: rotate(-45deg) translateX(-50px); }
.enter-rotate-right { transform: rotate(45deg) translateX(50px); }
.enter-spin { transform: rotate(-180deg) scale(0.5); }

/* 3D & Specials */
.enter-flip-x { transform: perspective(600px) rotateX(90deg); }
.enter-flip-y { transform: perspective(600px) rotateY(90deg); }
.enter-blur { filter: blur(20px); transform: scale(0.9); }
.enter-skew { transform: skewX(20deg) translateX(-50px); }


/* =========================================
    EXIT CLASSES (Scrolled Past State)
   ========================================= */

/* Basics */
.parallax.scrolled-past.exit-fade-up { transform: translateY(-80px); opacity: 0; }
.parallax.scrolled-past.exit-fade-down { transform: translateY(80px); opacity: 0; }
.parallax.scrolled-past.exit-slide-left { transform: translateX(-100px); opacity: 0; }
.parallax.scrolled-past.exit-slide-right { transform: translateX(100px); opacity: 0; }
.parallax.scrolled-past.exit-long-up { transform: translateY(-200px); opacity: 0; }

/* Zooms */
.parallax.scrolled-past.exit-zoom-in { transform: scale(0); opacity: 0; }
.parallax.scrolled-past.exit-zoom-out { transform: scale(1.5); opacity: 0; }
.parallax.scrolled-past.exit-elastic { transform: scale(0); opacity: 0; }

/* Rotations */
.parallax.scrolled-past.exit-rotate-left { transform: rotate(45deg) translateX(-50px); opacity: 0; }
.parallax.scrolled-past.exit-rotate-right { transform: rotate(-45deg) translateX(50px); opacity: 0; }
.parallax.scrolled-past.exit-spin { transform: rotate(180deg) scale(0.5); opacity: 0; }

/* 3D & Specials */
.parallax.scrolled-past.exit-flip-x { transform: perspective(600px) rotateX(-90deg); opacity: 0; }
.parallax.scrolled-past.exit-flip-y { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
.parallax.scrolled-past.exit-blur { filter: blur(20px); transform: scale(1.1); opacity: 0; }
.parallax.scrolled-past.exit-skew { transform: skewX(-20deg) translateX(50px); opacity: 0; }