*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:Arial,Helvetica,sans-serif;
      background:#000;
      color:#fff;
      overflow-x:hidden;
    }

    /* Only apply large min-height for animation pages that need parallax scrolling */
    body.animation-page {
      min-height:10000px;
    }

    /* ---------- UI ---------- */
    #startContainer{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;transition:opacity .5s ease-out}
    #startButton{padding:20px 40px;font-size:24px;background:#fff;color:#000;border:none;border-radius:50px;cursor:pointer;transition:transform .2s ease}
    #startButton:hover{transform:scale(1.1)}
    #audioPlayer{position:fixed;bottom:20px;left:20px;z-index:999;opacity:0;transition:opacity .5s}

    /* ---------- DEBUG ---------- */
    #debugInfo{position:fixed;top:20px;right:20px;background:rgba(0,0,0,.8);padding:10px;border-radius:5px;font:12px/1 monospace;z-index:999}
    #viewportIndicator{position:fixed;right:10px;top:50%;transform:translateY(-50%);width:4px;height:100px;background:rgba(255,255,255,.3);z-index:998}



    .content-element{opacity:0;transition:opacity 1s ease-out}
    .content-element.visible{opacity:1}

    .text-element{
      padding:20px;
      font-size:32px;
      text-align:center;
      min-width:80%;
    }

    /* keep existing kinetic word styles */
    .word-container{display:inline-block;margin:0 5px;position:relative}
    .word{display:inline-block;opacity:0;transform-origin:center}

    /* animation-element base (Three/D3/GSAP) */
    .animation-element{width:100vw;height:100vh;border-radius:10px;position:relative;perspective:1000px;overflow:visible}

.parallax-wrapper{
  position:absolute;
  left:50%;
  width:100vw;          /* NEW ➜ guarantees a canvas to draw on */
  transform-origin:top center;
  pointer-events:none;
  will-change:transform;
}

.image-element img{display:block;width:100%;height:auto;}


/* Kinetic Typography Animations - Dramatic Effects */

/* 1. Meteor Drop - Falls from way off screen with rotation */
@keyframes meteorDrop {
    0% {
        opacity: 0;
        transform: translateY(-100vh) translateX(-50vw) rotate(-720deg) scale(15);
    }
    40% {
        opacity: 1;
        transform: translateY(10vh) translateX(0) rotate(-180deg) scale(3);
    }
    60% {
        transform: translateY(-5vh) translateX(0) rotate(-90deg) scale(1.5);
    }
    80% {
        transform: translateY(2vh) translateX(0) rotate(-45deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
}

/* 2. Warp Speed - Stretches horizontally then snaps into place */
@keyframes warpSpeed {
    0% {
        opacity: 0;
        transform: scaleX(50) scaleY(0.1) translateX(-100vw);
        filter: blur(20px);
    }
    30% {
        opacity: 0.5;
        transform: scaleX(20) scaleY(0.5) translateX(-20vw);
        filter: blur(10px);
    }
    60% {
        opacity: 0.8;
        transform: scaleX(5) scaleY(0.8) translateX(0);
        filter: blur(5px);
    }
    80% {
        transform: scaleX(1.2) scaleY(1.1) translateX(0);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1) scaleY(1) translateX(0);
        filter: blur(0);
    }
}

/* 3. Quantum Phase - Appears in multiple places before settling */
@keyframes quantumPhase {
    0% {
        opacity: 0;
        transform: translate(-80vw, -80vh) scale(0.1);
    }
    15% {
        opacity: 0.3;
        transform: translate(80vw, -80vh) scale(2);
    }
    30% {
        opacity: 0.3;
        transform: translate(80vw, 80vh) scale(0.5);
    }
    45% {
        opacity: 0.3;
        transform: translate(-80vw, 80vh) scale(3);
    }
    60% {
        opacity: 0.6;
        transform: translate(0, 0) scale(5);
    }
    80% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1.5);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 4. Vortex Spin - Spirals in from off-screen */
@keyframes vortexSpin {
    0% {
        opacity: 0;
        transform: rotate(1440deg) translateX(100vw) scale(20);
    }
    25% {
        opacity: 0.3;
        transform: rotate(1080deg) translateX(50vw) scale(10);
    }
    50% {
        opacity: 0.6;
        transform: rotate(720deg) translateX(25vw) scale(5);
    }
    75% {
        opacity: 0.9;
        transform: rotate(360deg) translateX(10vw) scale(2);
    }
    90% {
        transform: rotate(180deg) translateX(0) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translateX(0) scale(1);
    }
}

/* 5. Shatter Assembly - Pieces come together */
@keyframes shatterAssembly {
    0% {
        opacity: 0;
        transform: translateX(-100vw) translateY(-100vh) rotate(180deg) scale(0.1);
        filter: hue-rotate(180deg);
    }
    20% {
        opacity: 0.4;
        transform: translateX(50vw) translateY(-50vh) rotate(90deg) scale(3);
    }
    40% {
        opacity: 0.6;
        transform: translateX(-30vw) translateY(30vh) rotate(-90deg) scale(2);
    }
    60% {
        opacity: 0.8;
        transform: translateX(10vw) translateY(-10vh) rotate(45deg) scale(1.5);
    }
    80% {
        transform: translateX(-5vw) translateY(5vh) rotate(-20deg) scale(1.2);
        filter: hue-rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        filter: hue-rotate(0deg);
    }
}

/* 6. Dimensional Fold - Appears to fold through dimensions */
@keyframes dimensionalFold {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(180deg) rotateX(180deg) translateZ(-500px) scale(10);
    }
    25% {
        opacity: 0.3;
        transform: perspective(1000px) rotateY(135deg) rotateX(135deg) translateZ(-250px) scale(5);
    }
    50% {
        opacity: 0.6;
        transform: perspective(1000px) rotateY(90deg) rotateX(90deg) translateZ(0px) scale(2);
    }
    75% {
        opacity: 0.9;
        transform: perspective(1000px) rotateY(45deg) rotateX(45deg) translateZ(100px) scale(1.5);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateZ(0px) scale(1);
    }
}

/* 7. Lightning Strike - Zigzag motion with flash */
@keyframes lightningStrike {
    0% {
        opacity: 0;
        transform: translateX(-100vw) translateY(-100vh) scale(30);
        filter: brightness(10);
    }
    10% {
        opacity: 1;
        transform: translateX(50vw) translateY(-50vh) scale(20);
        filter: brightness(5);
    }
    20% {
        transform: translateX(-30vw) translateY(-20vh) scale(15);
        filter: brightness(8);
    }
    30% {
        transform: translateX(40vw) translateY(10vh) scale(10);
        filter: brightness(3);
    }
    40% {
        transform: translateX(-20vw) translateY(20vh) scale(8);
        filter: brightness(6);
    }
    50% {
        transform: translateX(30vw) translateY(30vh) scale(6);
        filter: brightness(2);
    }
    60% {
        transform: translateX(-10vw) translateY(10vh) scale(4);
        filter: brightness(4);
    }
    70% {
        transform: translateX(15vw) translateY(0) scale(2);
        filter: brightness(1.5);
    }
    85% {
        transform: translateX(0) translateY(0) scale(1.2);
        filter: brightness(1.2);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        filter: brightness(1);
    }
}

/* 8. Gravity Bounce - Falls and bounces like a ball */
@keyframes gravityBounce {
    0% {
        opacity: 0;
        transform: translateY(-150vh) scale(25);
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
    }
    25% {
        transform: translateY(-30vh) scale(1.5);
    }
    35% {
        transform: translateY(0) scale(0.9);
    }
    45% {
        transform: translateY(-15vh) scale(1.2);
    }
    55% {
        transform: translateY(0) scale(0.95);
    }
    65% {
        transform: translateY(-7vh) scale(1.1);
    }
    75% {
        transform: translateY(0) scale(0.98);
    }
    85% {
        transform: translateY(-3vh) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 9. Plasma Burst - Expands from center then contracts */
@keyframes plasmaBurst {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        filter: blur(50px) hue-rotate(0deg);
    }
    20% {
        opacity: 0.5;
        transform: scale(40) rotate(180deg);
        filter: blur(20px) hue-rotate(90deg);
    }
    40% {
        opacity: 0.8;
        transform: scale(20) rotate(360deg);
        filter: blur(10px) hue-rotate(180deg);
    }
    60% {
        opacity: 1;
        transform: scale(10) rotate(540deg);
        filter: blur(5px) hue-rotate(270deg);
    }
    80% {
        transform: scale(1.5) rotate(720deg);
        filter: blur(0) hue-rotate(360deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(720deg);
        filter: blur(0) hue-rotate(360deg);
    }
}

/* 10. Matrix Rain - Falls like digital rain */
@keyframes matrixRain {
    0% {
        opacity: 0;
        transform: translateY(-100vh) scaleY(20) scaleX(0.1);
        filter: brightness(0) contrast(5);
    }
    10% {
        opacity: 0.2;
        filter: brightness(2) contrast(5);
    }
    30% {
        opacity: 0.5;
        transform: translateY(-50vh) scaleY(10) scaleX(0.5);
        filter: brightness(1.5) contrast(3);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-20vh) scaleY(5) scaleX(0.8);
        filter: brightness(1.2) contrast(2);
    }
    70% {
        opacity: 1;
        transform: translateY(-5vh) scaleY(2) scaleX(1);
        filter: brightness(1.1) contrast(1.5);
    }
    85% {
        transform: translateY(2vh) scaleY(1.1) scaleX(1);
        filter: brightness(1) contrast(1.2);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1) scaleX(1);
        filter: brightness(1) contrast(1);
    }
}

/* 11. Supernova - Explodes outward then implodes */
@keyframes supernova {
    0% {
        opacity: 0;
        transform: scale(0);
        filter: brightness(0);
    }
    15% {
        opacity: 1;
        transform: scale(50);
        filter: brightness(10) blur(20px);
    }
    30% {
        transform: scale(30);
        filter: brightness(5) blur(10px);
    }
    45% {
        transform: scale(40);
        filter: brightness(8) blur(15px);
    }
    60% {
        transform: scale(5);
        filter: brightness(3) blur(5px);
    }
    75% {
        transform: scale(0.5);
        filter: brightness(1.5) blur(2px);
    }
    90% {
        transform: scale(1.2);
        filter: brightness(1.2) blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
}

/* 12. Tessaract Twist - 4D rotation effect */
@keyframes tessaractTwist {
    0% {
        opacity: 0;
        transform: perspective(500px) rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(-1000px) scale(15);
    }
    20% {
        opacity: 0.3;
        transform: perspective(500px) rotateX(270deg) rotateY(270deg) rotateZ(270deg) translateZ(-500px) scale(10);
    }
    40% {
        opacity: 0.6;
        transform: perspective(500px) rotateX(180deg) rotateY(180deg) rotateZ(180deg) translateZ(-200px) scale(5);
    }
    60% {
        opacity: 0.8;
        transform: perspective(500px) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translateZ(0px) scale(2);
    }
    80% {
        opacity: 0.9;
        transform: perspective(500px) rotateX(45deg) rotateY(45deg) rotateZ(45deg) translateZ(100px) scale(1.5);
    }
    100% {
        opacity: 1;
        transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) scale(1);
    }
}

/* 13. Particle Swarm - Multiple positions before convergence */
@keyframes particleSwarm {
    0% {
        opacity: 0;
        transform: translate(-100vw, -100vh) scale(0.1);
    }
    8% {
        opacity: 0.2;
        transform: translate(100vw, -50vh) scale(0.5);
    }
    16% {
        opacity: 0.2;
        transform: translate(50vw, 100vh) scale(0.3);
    }
    24% {
        opacity: 0.3;
        transform: translate(-80vw, 50vh) scale(0.8);
    }
    32% {
        opacity: 0.3;
        transform: translate(30vw, -80vh) scale(0.6);
    }
    40% {
        opacity: 0.4;
        transform: translate(-50vw, -30vh) scale(1.2);
    }
    48% {
        opacity: 0.5;
        transform: translate(70vw, 20vh) scale(0.9);
    }
    56% {
        opacity: 0.6;
        transform: translate(-20vw, 60vh) scale(1.5);
    }
    64% {
        opacity: 0.7;
        transform: translate(10vw, -10vh) scale(2);
    }
    72% {
        opacity: 0.8;
        transform: translate(-5vw, 5vh) scale(1.8);
    }
    80% {
        opacity: 0.9;
        transform: translate(2vw, -2vh) scale(1.4);
    }
    90% {
        transform: translate(0, 0) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* 14. Rubber Band - Stretches and snaps */
@keyframes rubberBand {
    0% {
        opacity: 0;
        transform: scale(0.1, 0.1);
    }
    10% {
        opacity: 1;
        transform: scale(1.5, 0.5);
    }
    20% {
        transform: scale(0.8, 1.3);
    }
    30% {
        transform: scale(1.2, 0.8);
    }
    40% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    60% {
        transform: scale(0.95, 1.05);
    }
    70% {
        transform: scale(1.05, 0.95);
    }
    80% {
        transform: scale(0.98, 1.02);
    }
    90% {
        transform: scale(1.02, 0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

/* 15. Cyclone Sweep - Circular sweep from off-screen */
@keyframes cycloneSweep {
    0% {
        opacity: 0;
        transform: translateX(100vw) translateY(100vh) rotate(0deg);
    }
    25% {
        opacity: 0.5;
        transform: translateX(0) translateY(100vh) rotate(90deg);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-100vw) translateY(0) rotate(180deg);
    }
    75% {
        opacity: 0.9;
        transform: translateX(0) translateY(-100vh) rotate(270deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(360deg);
    }
}

/* 16. Glitch Appear - Digital glitch effect */
@keyframes glitchAppear {
    0% {
        opacity: 0;
        transform: translateX(-200vw) skew(45deg);
        filter: brightness(0);
    }
    10% {
        opacity: 1;
        transform: translateX(0) skew(-30deg);
        filter: brightness(5) contrast(5);
    }
    20% {
        transform: translateX(50vw) skew(20deg);
        filter: brightness(0.5) contrast(2);
    }
    30% {
        transform: translateX(-30vw) skew(-15deg);
        filter: brightness(3) contrast(3);
    }
    40% {
        transform: translateX(20vw) skew(10deg);
        filter: brightness(0.8) contrast(1.5);
    }
    50% {
        transform: translateX(-10vw) skew(-5deg);
        filter: brightness(2) contrast(2);
    }
    60% {
        transform: translateX(5vw) skew(3deg);
        filter: brightness(0.9) contrast(1.2);
    }
    70% {
        transform: translateX(-2vw) skew(-2deg);
        filter: brightness(1.5) contrast(1.5);
    }
    80% {
        transform: translateX(1vw) skew(1deg);
        filter: brightness(0.95) contrast(1.1);
    }
    90% {
        transform: translateX(0) skew(-0.5deg);
        filter: brightness(1.1) contrast(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skew(0deg);
        filter: brightness(1) contrast(1);
    }
}

/* 17. Atomic Split - Splits and reforms */
@keyframes atomicSplit {
    0% {
        opacity: 0;
        transform: scale(1);
        filter: blur(0);
    }
    20% {
        opacity: 0.5;
        transform: scale(30) translateX(-50vw);
        filter: blur(20px);
    }
    40% {
        opacity: 0.5;
        transform: scale(30) translateX(50vw);
        filter: blur(20px);
    }
    60% {
        opacity: 0.8;
        transform: scale(10) translateX(0);
        filter: blur(10px);
    }
    80% {
        opacity: 0.9;
        transform: scale(1.5) translateX(0);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
        filter: blur(0);
    }
}

/* 18. Time Warp - Distortion effect */
@keyframes timeWarp {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg) scaleX(0.1) translateZ(-500px);
        filter: blur(20px);
    }
    20% {
        opacity: 0.3;
        transform: perspective(1000px) rotateY(72deg) scaleX(5) translateZ(-300px);
        filter: blur(15px);
    }
    40% {
        opacity: 0.6;
        transform: perspective(1000px) rotateY(45deg) scaleX(3) translateZ(-100px);
        filter: blur(10px);
    }
    60% {
        opacity: 0.8;
        transform: perspective(1000px) rotateY(20deg) scaleX(1.5) translateZ(0px);
        filter: blur(5px);
    }
    80% {
        opacity: 0.9;
        transform: perspective(1000px) rotateY(5deg) scaleX(1.1) translateZ(50px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) scaleX(1) translateZ(0px);
        filter: blur(0);
    }
}

/* 19. Helix Spin - DNA-like spiral entrance */
@keyframes helixSpin {
    0% {
        opacity: 0;
        transform: translateY(-100vh) translateZ(-500px) rotateX(720deg) rotateY(360deg);
    }
    20% {
        opacity: 0.3;
        transform: translateY(-60vh) translateZ(-300px) rotateX(540deg) rotateY(270deg);
    }
    40% {
        opacity: 0.6;
        transform: translateY(-30vh) translateZ(-100px) rotateX(360deg) rotateY(180deg);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-10vh) translateZ(0px) rotateX(180deg) rotateY(90deg);
    }
    80% {
        opacity: 0.9;
        transform: translateY(-2vh) translateZ(50px) rotateX(90deg) rotateY(45deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg);
    }
}

/* 20. Cosmic Zoom - Zooms from infinite distance */
@keyframes cosmicZoom {
    0% {
        opacity: 0;
        transform: scale(0.001) translateZ(-5000px);
        filter: brightness(10) blur(50px);
    }
    10% {
        opacity: 0.1;
        transform: scale(0.01) translateZ(-3000px);
        filter: brightness(5) blur(40px);
    }
    20% {
        opacity: 0.2;
        transform: scale(0.1) translateZ(-2000px);
        filter: brightness(3) blur(30px);
    }
    30% {
        opacity: 0.4;
        transform: scale(0.5) translateZ(-1000px);
        filter: brightness(2) blur(20px);
    }
    40% {
        opacity: 0.6;
        transform: scale(2) translateZ(-500px);
        filter: brightness(1.5) blur(15px);
    }
    50% {
        opacity: 0.8;
        transform: scale(5) translateZ(-200px);
        filter: brightness(1.2) blur(10px);
    }
    60% {
        opacity: 0.9;
        transform: scale(10) translateZ(-50px);
        filter: brightness(1.1) blur(5px);
    }
    70% {
        opacity: 1;
        transform: scale(20) translateZ(0px);
        filter: brightness(1.05) blur(3px);
    }
    80% {
        transform: scale(10) translateZ(0px);
        filter: brightness(1.02) blur(2px);
    }
    90% {
        transform: scale(2) translateZ(0px);
        filter: brightness(1.01) blur(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0px);
        filter: brightness(1) blur(0);
    }
}


        /* Kinetic typography animations */
        @keyframes wordDrop {
            0% {
                opacity: 0;
                transform: translateY(-100px) rotate(-180deg) scale(2);
            }
            50% {
                opacity: 1;
                transform: translateY(10px) rotate(-90deg) scale(1.2);
            }
            100% {
                opacity: 1;
                transform: translateY(0) rotate(0deg) scale(1);
            }
        }

        @keyframes wordSlide {
            0% {
                opacity: 0;
                transform: translateX(-50px) scale(0.5);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes wordSpiral {
            0% {
                opacity: 0;
                transform: rotate(720deg) scale(0);
            }
            100% {
                opacity: 1;
                transform: rotate(0deg) scale(1);
            }
        }

        @keyframes wordBounce {
            0% {
                opacity: 0;
                transform: translateY(-50px) scale(1.5);
            }
            25% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-20px) scale(1.1);
            }
            75% {
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

          .animation-element {
            /* Remove or adjust these properties since we're setting them in JS */
            /* width: 400px; */
            /* height: 400px; */
            border-radius: 10px;
            /* display: flex; */
            /* align-items: center; */
            /* justify-content: center; */
            font-style: italic;
            position: relative;
            perspective: 1000px;
        }

        /* 3D floating squares animation */
        .floating-squares-container {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: rotateContainer 20s linear infinite;
        }

        @keyframes rotateContainer {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }

        .floating-square {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            opacity: 0.8;
        }

/*# sourceMappingURL=with_animations.b0d0aadc2a40b5140c66.css.map*/