/* ========================================
   SMART GYAN PARALLAX EFFECTS
   Smooth Depth & Motion
   ======================================== */

/* Parallax Container Base */
.parallax-section {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* Hero Section Parallax */
.modern-hero {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.modern-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 64, 128, 0.9) 0%,
        rgba(0, 90, 122, 0.85) 100%
    );
    z-index: 1;
}

.modern-hero .container {
    position: relative;
    z-index: 2;
}

/* Statistics Section Parallax */
.stats-section {
    position: relative;
    background-image: url("/image/stats-bg.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.stats-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 64, 128, 0.92) 0%,
        rgba(0, 90, 122, 0.88) 100%
    );
    z-index: 1;
}

.stats-section .container {
    position: relative;
    z-index: 2;
}

/* Parallax Layers for Depth */
.parallax-layer-1 {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-layer-2 {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-layer-3 {
    transform: translateZ(0);
    will-change: transform;
}

/* CTA Section Parallax */
.cta-section {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* Floating Elements Animation */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.parallax-float {
    animation: float 6s ease-in-out infinite;
}

.parallax-float-slow {
    animation: float 8s ease-in-out infinite;
}

/* Smooth Parallax Transition */
.parallax-smooth {
    transition: transform 0.5s cubic-bezier(0.33, 0.66, 0.66, 1);
}

/* Background Parallax Patterns */
.parallax-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.05;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(255, 255, 255, 0.1) 35px,
        rgba(255, 255, 255, 0.1) 70px
    );
    pointer-events: none;
}

/* Section Dividers with Parallax */
.parallax-divider {
    position: relative;
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-divider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 64, 128, 0.85),
        rgba(0, 139, 139, 0.85)
    );
    z-index: 1;
}

.parallax-divider .content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
}

/* Scroll-Based Animations */
.parallax-fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.parallax-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.parallax-slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.parallax-slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

.parallax-slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.parallax-slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

.parallax-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.parallax-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Multi-layer Parallax Background */
.parallax-bg-layer-1,
.parallax-bg-layer-2,
.parallax-bg-layer-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.parallax-bg-layer-1 {
    background: radial-gradient(
        circle at 20% 50%,
        rgba(255, 215, 0, 0.1) 0%,
        transparent 50%
    );
    transform: translateZ(0);
}

.parallax-bg-layer-2 {
    background: radial-gradient(
        circle at 80% 30%,
        rgba(0, 139, 139, 0.08) 0%,
        transparent 50%
    );
    transform: translateZ(0);
}

.parallax-bg-layer-3 {
    background: radial-gradient(
        circle at 50% 80%,
        rgba(0, 64, 128, 0.05) 0%,
        transparent 50%
    );
    transform: translateZ(0);
}

/* Performance Optimization */
.parallax-will-change {
    will-change: transform;
}

/* Mobile Optimization - Disable parallax on small screens */
@media (max-width: 768px) {
    /* Disable fixed backgrounds on mobile for performance */
    .parallax-section,
    .modern-hero,
    .stats-section,
    .cta-section,
    .parallax-divider {
        background-attachment: scroll !important;
    }

    /* Simplify animations on mobile */
    .parallax-layer-1,
    .parallax-layer-2,
    .parallax-layer-3 {
        transform: none !important;
    }

    /* Keep scroll-based animations */
    .parallax-fade-in,
    .parallax-slide-left,
    .parallax-slide-right,
    .parallax-scale {
        transition-duration: 0.5s;
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .parallax-section,
    .modern-hero,
    .stats-section,
    .cta-section,
    .parallax-divider {
        background-attachment: scroll !important;
    }

    .parallax-float,
    .parallax-float-slow {
        animation: none !important;
    }

    .parallax-fade-in,
    .parallax-slide-left,
    .parallax-slide-right,
    .parallax-scale {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Hardware Acceleration */
.parallax-gpu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}