/* Advanced Parallax Effects for Light and Dance VR */
/* Sophisticated scroll-based animations and multi-layer parallax */

/* Smooth Scrolling Base */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Parallax Container Setup */
.parallax-container {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Hero Parallax Layers */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    z-index: 1;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    will-change: transform;
}

.hero-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    will-change: transform;
}

.hero-content {
    position: relative;
    z-index: 4;
    will-change: transform;
}

/* Floating Elements Parallax */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.floating-element {
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.floating-element[data-speed="0.3"] {
    animation: floatSlow 20s ease-in-out infinite;
}

.floating-element[data-speed="0.5"] {
    animation: floatMedium 15s ease-in-out infinite;
}

.floating-element[data-speed="0.8"] {
    animation: floatFast 10s ease-in-out infinite;
}

/* Morphing Background Parallax */
.morphing-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.morph-shape {
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    filter: blur(40px);
    opacity: 0.1;
}

.morph-1 {
    top: -10%;
    left: -10%;
    animation: morphMove1 25s ease-in-out infinite;
}

.morph-2 {
    bottom: -10%;
    right: -10%;
    animation: morphMove2 30s ease-in-out infinite;
}

.morph-3 {
    top: 40%;
    left: 40%;
    animation: morphMove3 35s ease-in-out infinite;
}

/* Section Parallax Effects */
.features,
.gameplay,
.gallery,
.steam {
    position: relative;
    overflow: hidden;
}

.features-background,
.gameplay-background,
.steam-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform;
}

/* Gradient Orbs Parallax */
.gradient-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.orb {
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    filter: blur(60px);
}

.orb-1 {
    animation: orbFloat1 20s ease-in-out infinite;
}

.orb-2 {
    animation: orbFloat2 25s ease-in-out infinite;
}

.orb-3 {
    animation: orbFloat3 30s ease-in-out infinite;
}

/* Particle Layers */
.features-particles,
.steam-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 0, 110, 0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(108, 43, 217, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(0, 212, 255, 0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: particleMove 60s linear infinite;
    will-change: transform;
}

/* Scroll-triggered Parallax Classes */
.parallax-slow {
    will-change: transform;
    backface-visibility: hidden;
}

.parallax-medium {
    will-change: transform;
    backface-visibility: hidden;
}

.parallax-fast {
    will-change: transform;
    backface-visibility: hidden;
}

/* Advanced Scroll Effects */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-scale {
    transform: scale(0.8);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-scale.revealed {
    transform: scale(1);
}

.scroll-rotate {
    transform: rotate(10deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-rotate.revealed {
    transform: rotate(0deg);
}

/* Depth Layers */
.depth-layer-1 {
    transform: translateZ(0);
}

.depth-layer-2 {
    transform: translateZ(-10px);
}

.depth-layer-3 {
    transform: translateZ(-20px);
}

.depth-layer-4 {
    transform: translateZ(-30px);
}

/* Performance Optimizations */
.gpu-accelerated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Keyframe Animations */
@keyframes floatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(20px, -30px, 0) rotate(90deg);
    }
    50% {
        transform: translate3d(-15px, -20px, 0) rotate(180deg);
    }
    75% {
        transform: translate3d(-25px, -10px, 0) rotate(270deg);
    }
}

@keyframes floatMedium {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    33% {
        transform: translate3d(30px, -40px, 0) rotate(120deg) scale(1.1);
    }
    66% {
        transform: translate3d(-20px, -25px, 0) rotate(240deg) scale(0.9);
    }
}

@keyframes floatFast {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    20% {
        transform: translate3d(40px, -50px, 0) rotate(72deg) scale(1.2);
    }
    40% {
        transform: translate3d(-30px, -35px, 0) rotate(144deg) scale(0.8);
    }
    60% {
        transform: translate3d(25px, -15px, 0) rotate(216deg) scale(1.1);
    }
    80% {
        transform: translate3d(-35px, -45px, 0) rotate(288deg) scale(0.9);
    }
}

@keyframes morphMove1 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate3d(100px, -50px, 0) scale(1.2) rotate(90deg);
    }
    50% {
        transform: translate3d(50px, -100px, 0) scale(0.8) rotate(180deg);
    }
    75% {
        transform: translate3d(-50px, -75px, 0) scale(1.1) rotate(270deg);
    }
}

@keyframes morphMove2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    30% {
        transform: translate3d(-80px, 60px, 0) scale(1.3) rotate(108deg);
    }
    60% {
        transform: translate3d(-40px, 120px, 0) scale(0.7) rotate(216deg);
    }
    90% {
        transform: translate3d(60px, 80px, 0) scale(1.2) rotate(324deg);
    }
}

@keyframes morphMove3 {
    0%, 100% {
        transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
    }
    20% {
        transform: translate3d(-40%, -60%, 0) scale(1.4) rotate(72deg);
    }
    40% {
        transform: translate3d(-60%, -40%, 0) scale(0.6) rotate(144deg);
    }
    60% {
        transform: translate3d(-45%, -55%, 0) scale(1.2) rotate(216deg);
    }
    80% {
        transform: translate3d(-55%, -45%, 0) scale(0.8) rotate(288deg);
    }
}

@keyframes orbFloat1 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate3d(-100px, -50px, 0) scale(1.3);
        opacity: 0.2;
    }
}

@keyframes orbFloat2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate3d(80px, 60px, 0) scale(0.7);
        opacity: 0.15;
    }
}

@keyframes orbFloat3 {
    0%, 100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate3d(-60%, -40%, 0) scale(1.1);
        opacity: 0.18;
    }
}

@keyframes particleMove {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-200px, -200px, 0);
    }
}

/* Responsive Parallax */
@media (max-width: 768px) {
    .hero-video-container {
        width: 100%;
        height: 100%;
    }

    .floating-element {
        display: none;
    }

    .morph-shape {
        filter: blur(20px);
    }

    .features-particles,
    .steam-particles {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-element,
    .morph-shape,
    .orb,
    .features-particles,
    .steam-particles {
        animation: none !important;
    }

    .parallax-slow,
    .parallax-medium,
    .parallax-fast {
        transform: none !important;
    }
}