Our Mission Dance Studio | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Mission - Dance Studio</title>
    
  
</head>
<body class="bg-gradient-to-br from-pink-50 via-orange-50 to-purple-50 min-h-screen">
    
    <div class="fixed inset-0 musical-pattern pointer-events-none"></div>
    
    
    <div class="absolute top-16 left-8 w-6 h-6 text-pink-500 dance-wave opacity-60">?</div>
    <div class="absolute top-32 right-12 w-6 h-6 text-orange-500 rhythm-bounce opacity-70" style="animation-delay: 0.5s;">?</div>
    <div class="absolute top-48 left-20 w-6 h-6 text-purple-500 dance-wave opacity-50" style="animation-delay: 1s;">?</div>
    <div class="absolute top-64 right-32 w-6 h-6 text-indigo-500 music-note-float opacity-60" style="animation-delay: 1.5s;">?</div>
    
    
    <section class="relative py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        
        <div class="absolute top-20 left-12 w-20 h-20 text-pink-300 spotlight-sweep opacity-30">
            <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
            </svg>
        </div>
        
        <div class="absolute top-40 right-16 w-16 h-16 text-orange-400 disco-ball opacity-25">
            <svg fill="currentColor" viewBox="0 0 24 24">
                <path d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M6.5,12.5L7.5,16.5L11.5,17.5L7.5,18.5L6.5,22.5L5.5,18.5L1.5,17.5L5.5,16.5L6.5,12.5M17.5,12.5L18.5,16.5L22.5,17.5L18.5,18.5L17.5,22.5L16.5,18.5L12.5,17.5L16.5,16.5L17.5,12.5Z"/>
            </svg>
        </div>

<div class="text-center mb-16 fade-in-up">
            <div class="inline-block mb-6">
                <div class="w-24 h-24 mx-auto mb-6 beat-pulse">
                    <svg class="w-full h-full text-pink-600" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M6.5,12.5L7.5,16.5L11.5,17.5L7.5,18.5L6.5,22.5L5.5,18.5L1.5,17.5L5.5,16.5L6.5,12.5M17.5,12.5L18.5,16.5L22.5,17.5L18.5,18.5L17.5,22.5L16.5,18.5L12.5,17.5L16.5,16.5L17.5,12.5Z"/>
                    </svg>
                </div>
            </div>
            <h2 class="text-6xl md:text-7xl font-bold dance-text mb-6 pacifico-font">Our Mission</h2>
            <div class="flex justify-center mb-8">
                <div class="w-8 h-1 bg-pink-500 rounded-full mx-1"></div>
                <div class="w-16 h-1 bg-orange-500 rounded-full mx-1"></div>
                <div class="w-8 h-1 bg-purple-500 rounded-full mx-1"></div>
            </div>
            <p class="text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-medium">
                ? Inspiring movement, creativity, and self-expression through the transformative art of dance for all ages and abilities ?
            </p>
        </div>

<div class="vibrant-texture rounded-3xl shadow-2xl p-8 md:p-12 mb-16 fade-in-up spotlight-glow rhythm-grid">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="fade-in-left">
                    <h3 class="text-4xl font-bold text-gray-800 mb-6 pacifico-font">Dance Your Dreams! ?</h3>
                    <p class="text-xl text-gray-600 mb-6 leading-relaxed">
                        At our dance studio, we believe that dance is the universal language of the soul. Our mission is to create an inclusive, inspiring environment where dancers of all levels can discover their passion, build confidence, and express their unique artistry. From classical ballet to contemporary hip-hop, we nurture creativity, discipline, and joy through movement. Every step, every beat, every moment on our dance floor is an opportunity for growth, connection, and pure artistic expression.
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center">
                                <span class="text-2xl">?</span>
                            </div>
                            <span class="text-gray-700 font-semibold text-lg">Artistic Expression</span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                                <span class="text-2xl">?</span>
                            </div>
                            <span class="text-gray-700 font-semibold text-lg">Rhythm & Movement</span>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                                <span class="text-2xl">✨</span>
                            </div>
                            <span class="text-gray-700 font-semibold text-lg">Creative Growth</span>
                        </div>
                    </div>
                </div>
                <div class="fade-in-right">
                    <div class="relative">
                        <div class="stage-lights">
                            <svg class="w-full h-64 text-pink-500" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M6.5,12.5L7.5,16.5L11.5,17.5L7.5,18.5L6.5,22.5L5.5,18.5L1.5,17.5L5.5,16.5L6.5,12.5M17.5,12.5L18.5,16.5L22.5,17.5L18.5,18.5L17.5,22.5L16.5,18.5L12.5,17.5L16.5,16.5L17.5,12.5Z" opacity="0.8"/>
                                <circle cx="12" cy="9" r="2" fill="#ec4899" opacity="0.9"/>
                                <circle cx="8" cy="7" r="1.5" fill="#f97316" opacity="0.7"/>
                                <circle cx="16" cy="8" r="1.5" fill="#8b5cf6" opacity="0.8"/>
                                <circle cx="12" cy="13" r="2" fill="#06b6d4" opacity="0.6"/>
                                <rect x="10" y="11" width="4" height="1" fill="#ec4899" opacity="0.9"/>
                            </svg>
                        </div>
                        <div class="absolute inset-0 bg-gradient-to-r from-pink-300 via-orange-300 to-purple-300 rounded-full blur-3xl opacity-30"></div>
                    </div>
                </div>
            </div>
        </div>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
            
            <div class="dance-gradient rounded-2xl p-6 shadow-lg dance-hover fade-in-up" style="animation-delay: 0.2s;">
                <div class="w-16 h-16 bg-pink-200 rounded-2xl flex items-center justify-center mb-6 icon-dance">
                    <span class="text-3xl">?</span>
                </div>
                <h4 class="text-2xl font-bold text-gray-800 mb-4 pacifico-font">Ballet</h4>
                <p class="text-gray-600 leading-relaxed">
                    Classical ballet technique with grace, poise, and artistic expression for all skill levels.
                </p>
            </div>

<div class="dance-gradient rounded-2xl p-6 shadow-lg dance-hover fade-in-up" style="animation-delay: 0.4s;">
                <div class="w-16 h-16 bg-orange-200 rounded-2xl flex items-center justify-center mb-6 icon-dance">
                    <span class="text-3xl">?</span>
                </div>
                <h4 class="text-2xl font-bold text-gray-800 mb-4 pacifico-font">Hip-Hop</h4>
                <p class="text-gray-600 leading-relaxed">
                    Urban dance styles with high-energy moves, freestyle, and street dance culture.
                </p>
            </div>

<div class="dance-gradient rounded-2xl p-6 shadow-lg dance-hover fade-in-up" style="animation-delay: 0.6s;">
                <div class="w-16 h-16 bg-purple-200 rounded-2xl flex items-center justify-center mb-6 icon-dance">
                    <span class="text-3xl">?</span>
                </div>
                <h4 class="text-2xl font-bold text-gray-800 mb-4 pacifico-font">Contemporary</h4>
                <p class="text-gray-600 leading-relaxed">
                    Expressive modern dance combining technique with emotional storytelling and creativity.
                </p>
            </div>

<div class="dance-gradient rounded-2xl p-6 shadow-lg dance-hover fade-in-up" style="animation-delay: 0.8s;">
                <div class="w-16 h-16 bg-indigo-200 rounded-2xl flex items-center justify-center mb-6 icon-dance">
                    <span class="text-3xl">?</span>
                </div>
                <h4 class="text-2xl font-bold text-gray-800 mb-4 pacifico-font">Latin Dance</h4>
                <p class="text-gray-600 leading-relaxed">
                    Passionate salsa, bachata, and Latin rhythms with partner work and solo styling.
                </p>
            </div>
        </div>

<div class="bg-gradient-to-r from-pink-600 via-orange-600 to-purple-600 rounded-3xl p-8 md:p-12 text-white scale-in mb-16">
            <div class="text-center mb-10">
                <h3 class="text-4xl font-bold mb-4 pacifico-font">Dance Community! ?</h3>
                <p class="text-xl text-pink-100">Where passion meets movement and dreams take flight</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
                <div class="fade-in-up" style="animation-delay: 0.2s;">
                    <div class="text-4xl mb-2">?</div>
                    <div class="text-4xl md:text-5xl font-bold mb-2" data-count="300">0</div>
                    <div class="text-pink-100 text-lg">Active Dancers</div>
                </div>
                <div class="fade-in-up" style="animation-delay: 0.4s;">
                    <div class="text-4xl mb-2">?</div>
                    <div class="text-4xl md:text-5xl font-bold mb-2" data-count="12">0</div>
                    <div class="text-pink-100 text-lg">Dance Styles</div>
                </div>
                <div class="fade-in-up" style="animation-delay: 0.6s;">
                    <div class="text-4xl mb-2">?</div>
                    <div class="text-4xl md:text-5xl font-bold mb-2" data-count="25">0</div>
                    <div class="text-pink-100 text-lg">Awards Won</div>
                </div>
                <div class="fade-in-up" style="animation-delay: 0.8s;">
                    <div class="text-4xl mb-2">✨</div>
                    <div class="text-4xl md:text-5xl font-bold mb-2" data-count="10">0</div>
                    <div class="text-pink-100 text-lg">Years of Excellence</div>
                </div>
            </div>
        </div>

<div class="text-center fade-in-up">
            <div class="bg-gradient-to-r from-gray-800 via-slate-700 to-gray-900 rounded-3xl p-10 shadow-2xl">
                <h3 class="text-4xl font-bold text-white mb-6 pacifico-font">Start Dancing Today! ?</h3>
                <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                    Ready to move to the rhythm of your dreams? Join our vibrant dance community where every step is a celebration of creativity, passion, and artistic expression. From beginner to advanced, we have the perfect class for you!
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <button class="bg-gradient-to-r from-pink-500 to-orange-500 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 pacifico-font">
                        Join Our Classes ?
                    </button>
                    <button class="bg-transparent border-3 border-pink-400 text-pink-400 hover:bg-pink-400 hover:text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 pacifico-font">
                        Free Trial Class ?
                    </button>
                </div>
            </div>
        </div>
    </section>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Pacifico:wght@400&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
        }
        
        .pacifico-font {
            font-family: 'Pacifico', cursive;
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        .fade-in-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-right {
            opacity: 0;
            transform: translateX(30px);
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .fade-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }
        
        .scale-in {
            opacity: 0;
            transform: scale(0.85);
            transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .scale-in.animate {
            opacity: 1;
            transform: scale(1);
        }
        
        .dance-spin {
            animation: danceSpin 4s ease-in-out infinite;
        }
        
        @keyframes danceSpin {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(90deg) scale(1.1); }
            50% { transform: rotate(180deg) scale(1.05); }
            75% { transform: rotate(270deg) scale(1.15); }
        }
        
        .rhythm-bounce {
            animation: rhythmBounce 2s ease-in-out infinite;
        }
        
        @keyframes rhythmBounce {
            0%, 100% { transform: translateY(0px) scale(1); }
            25% { transform: translateY(-15px) scale(1.05); }
            50% { transform: translateY(-25px) scale(1.1); }
            75% { transform: translateY(-10px) scale(1.03); }
        }
        
        .music-note-float {
            animation: musicNoteFloat 6s ease-in-out infinite;
        }
        
        @keyframes musicNoteFloat {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.8; }
            33% { transform: translateY(-20px) rotate(10deg); opacity: 1; }
            66% { transform: translateY(-15px) rotate(-5deg); opacity: 0.9; }
        }
        
        .dance-text {
            background: linear-gradient(135deg, #ec4899, #f97316, #8b5cf6, #06b6d4);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: danceFlow 3s ease-in-out infinite;
        }
        
        @keyframes danceFlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .spotlight-glow {
            animation: spotlightGlow 5s ease-in-out infinite;
        }
        
        @keyframes spotlightGlow {
            0%, 100% { 
                box-shadow: 0 0 40px rgba(236, 72, 153, 0.3),
                           0 0 80px rgba(249, 115, 22, 0.2);
            }
            50% { 
                box-shadow: 0 0 60px rgba(236, 72, 153, 0.5),
                           0 0 120px rgba(249, 115, 22, 0.3);
            }
        }
        
        .dance-hover {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .dance-hover:hover {
            transform: translateY(-10px) scale(1.05) rotate(2deg);
            box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2);
        }
        
        .icon-dance {
            transition: all 0.4s ease;
        }
        
        .icon-dance:hover {
            transform: scale(1.3) rotate(20deg);
        }
        
        .musical-pattern {
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(249, 115, 22, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
        }
        
        .spotlight-sweep {
            animation: spotlightSweep 8s ease-in-out infinite;
        }
        
        @keyframes spotlightSweep {
            0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
            25% { transform: translateX(30px) translateY(-10px) rotate(5deg); }
            50% { transform: translateX(50px) translateY(-20px) rotate(0deg); }
            75% { transform: translateX(20px) translateY(-8px) rotate(-5deg); }
        }
        
        .beat-pulse {
            animation: beatPulse 1.5s ease-in-out infinite;
        }
        
        @keyframes beatPulse {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.12); opacity: 1; }
        }
        
        .dance-gradient {
            background: linear-gradient(135deg, rgba(252, 231, 243, 0.9), rgba(254, 235, 200, 0.8));
            backdrop-filter: blur(10px);
        }
        
        .disco-ball {
            animation: discoBall 10s linear infinite;
        }
        
        @keyframes discoBall {
            0% { transform: rotate(0deg) scale(1); opacity: 0.7; }
            50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
            100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
        }
        
        .choreography-flow {
            animation: choreographyFlow 7s ease-in-out infinite;
        }
        
        @keyframes choreographyFlow {
            0%, 100% { transform: translateX(0px) rotate(0deg); }
            25% { transform: translateX(15px) rotate(3deg); }
            50% { transform: translateX(25px) rotate(0deg); }
            75% { transform: translateX(10px) rotate(-3deg); }
        }
        
        .stage-lights {
            animation: stageLights 4s ease-in-out infinite;
        }
        
        @keyframes stageLights {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-15px) scale(1.08); }
        }
        
        .dance-wave {
            animation: danceWave 6s ease-in-out infinite;
        }
        
        @keyframes danceWave {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.8; }
            25% { transform: translateY(-12px) rotate(4deg); opacity: 1; }
            50% { transform: translateY(-18px) rotate(0deg); opacity: 0.9; }
            75% { transform: translateY(-8px) rotate(-4deg); opacity: 0.85; }
        }
        
        .rhythm-grid {
            background-image: 
                linear-gradient(rgba(236, 72, 153, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(236, 72, 153, 0.08) 1px, transparent 1px);
            background-size: 25px 25px;
        }
        
        .vibrant-texture {
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.95) 0%, 
                rgba(252, 231, 243, 0.9) 25%, 
                rgba(254, 235, 200, 0.9) 50%, 
                rgba(243, 232, 255, 0.9) 75%, 
                rgba(255, 255, 255, 0.95) 100%);
        }
        
        .energy-burst {
            animation: energyBurst 2s ease-in-out infinite;
        }
        
        @keyframes energyBurst {
            0%, 100% { opacity: 0.8; transform: scale(1) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.15) rotate(10deg); }
        }
        
        .passion-flow {
            animation: passionFlow 5s ease-in-out infinite;
        }
        
        @keyframes passionFlow {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
            33% { transform: scale(1.05) rotate(3deg); opacity: 1; }
            66% { transform: scale(1.1) rotate(0deg); opacity: 0.9; }
        }
        
        .movement-trail {
            animation: movementTrail 3s ease-in-out infinite;
        }
        
        @keyframes movementTrail {
            0%, 100% { transform: translateX(0px) scaleX(1); opacity: 0.6; }
            50% { transform: translateX(20px) scaleX(1.2); opacity: 1; }
        }

JavaScript

// Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all animated elements
        document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right, .scale-in').forEach(el => {
            observer.observe(el);
        });

// Counter animation for statistics
        function animateCounter(element, target, duration = 2000) {
            let start = 0;
            const increment = target / (duration / 16);
            
            const timer = setInterval(() => {
                start += increment;
                if (start >= target) {
                    element.textContent = target;
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(start);
                }
            }, 16);
        }

// Animate statistics when they come into view
        const statsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const statElements = entry.target.querySelectorAll('[data-count]');
                    statElements.forEach((el, index) => {
                        setTimeout(() => {
                            const target = parseInt(el.getAttribute('data-count'));
                            animateCounter(el, target);
                        }, index * 200);
                    });
                    statsObserver.unobserve(entry.target);
                }
            });
        }, observerOptions);

const statsSection = document.querySelector('.bg-gradient-to-r.from-pink-600');
        if (statsSection) {
            statsObserver.observe(statsSection);
        }

// Create floating dance elements effect
        function createDanceEffect() {
            const danceItems = ['?', '?', '?', '?', '✨', '?', '?', '?'];
            const item = document.createElement('div');
            item.textContent = danceItems[Math.floor(Math.random() * danceItems.length)];
            item.style.position = 'fixed';
            item.style.left = Math.random() * window.innerWidth + 'px';
            item.style.top = '-50px';
            item.style.fontSize = '20px';
            item.style.pointerEvents = 'none';
            item.style.zIndex = '1000';
            item.style.transition = 'all 5s ease-out';
            item.style.opacity = '0.7';
            
            document.body.appendChild(item);
            
            setTimeout(() => {
                item.style.top = window.innerHeight + 'px';
                item.style.transform = `rotate(${Math.random() * 720}deg) translateX(${(Math.random() - 0.5) * 200}px)`;
            }, 100);
            
            setTimeout(() => {
                item.remove();
            }, 5000);
        }

// Create dance effects periodically
        setInterval(createDanceEffect, 2500);

// Enhanced hover effects for dance cards
        document.querySelectorAll('.dance-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px) scale(1.05) rotate(2deg)';
                this.style.boxShadow = '0 20px 40px rgba(236, 72, 153, 0.25)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1) rotate(0deg)';
                this.style.boxShadow = '';
            });
        });

// Add dance spin effect on scroll
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const danceElements = document.querySelectorAll('.dance-spin');
            
            danceElements.forEach((element, index) => {
                const speed = 0.1 + (index * 0.05);
                const spin = Math.sin(scrolled * 0.01 + index) * 10;
                element.style.transform = `translateY(${scrolled * speed}px) rotate(${scrolled * 0.2 + spin}deg)`;
            });
        });

// Interactive dance effect on click
        document.querySelectorAll('.icon-dance').forEach(icon => {
            icon.addEventListener('click', function() {
                this.style.transform = 'scale(1.5) rotate(360deg)';
                this.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
                
                // Create burst of dance items
                for (let i = 0; i < 8; i++) {
                    setTimeout(() => {
                        const rect = this.getBoundingClientRect();
                        const danceBurst = document.createElement('div');
                        const danceItems = ['✨', '?', '?', '?', '?', '?', '?', '?'];
                        danceBurst.textContent = danceItems[i];
                        danceBurst.style.position = 'fixed';
                        danceBurst.style.left = rect.left + rect.width/2 + 'px';
                        danceBurst.style.top = rect.top + rect.height/2 + 'px';
                        danceBurst.style.fontSize = '18px';
                        danceBurst.style.pointerEvents = 'none';
                        danceBurst.style.zIndex = '1001';
                        danceBurst.style.transition = 'all 1.2s ease-out';
                        
                        document.body.appendChild(danceBurst);
                        
                        setTimeout(() => {
                            danceBurst.style.transform = `translate(${(Math.random() - 0.5) * 160}px, ${-80 - Math.random() * 80}px) rotate(${Math.random() * 720}deg)`;
                            danceBurst.style.opacity = '0';
                        }, 50);
                        
                        setTimeout(() => {
                            danceBurst.remove();
                        }, 1200);
                    }, i * 60);
                }
                
                setTimeout(() => {
                    this.style.transform = 'scale(1) rotate(0deg)';
                    this.style.transition = 'all 0.4s ease';
                }, 600);
            });
        });

// Rhythm bounce effect on mouse movement
        document.addEventListener('mousemove', (e) => {
            const rhythmElements = document.querySelectorAll('.rhythm-bounce');
            const mouseX = e.clientX / window.innerWidth;
            const mouseY = e.clientY / window.innerHeight;
            
            rhythmElements.forEach((element, index) => {
                const intensity = 0.2 + (index * 0.1);
                const bounceX = (mouseX - 0.5) * intensity * 8;
                const bounceY = (mouseY - 0.5) * intensity * 6;
                element.style.transform += ` translate(${bounceX}px, ${bounceY}px)`;
            });
        });

// Music note cascade effect
        function createMusicNotes() {
            const notes = document.createElement('div');
            notes.textContent = '?';
            notes.style.position = 'fixed';
            notes.style.left = Math.random() * window.innerWidth + 'px';
            notes.style.top = '-30px';
            notes.style.fontSize = '16px';
            notes.style.pointerEvents = 'none';
            notes.style.zIndex = '999';
            notes.style.transition = 'all 4s ease-out';
            notes.style.opacity = '0.8';
            notes.classList.add('music-note-float');
            
            document.body.appendChild(notes);
            
            setTimeout(() => {
                notes.style.top = window.innerHeight + 'px';
                notes.style.transform = `rotate(${Math.random() * 360}deg) translateX(${(Math.random() - 0.5) * 100}px)`;
            }, 100);
            
            setTimeout(() => {
                notes.remove();
            }, 4000);
        }

// Create music notes periodically
        setInterval(createMusicNotes, 2000);

// Beat pulse effect
        function createBeatPulse() {
            const beat = document.createElement('div');
            beat.textContent = '?';
            beat.style.position = 'fixed';
            beat.style.top = Math.random() * (window.innerHeight * 0.3) + 'px';
            beat.style.right = '15px';
            beat.style.fontSize = '14px';
            beat.style.pointerEvents = 'none';
            beat.style.zIndex = '999';
            beat.style.transition = 'all 1.5s ease-out';
            beat.classList.add('beat-pulse');
            
            document.body.appendChild(beat);
            
            setTimeout(() => {
                beat.style.opacity = '0';
                beat.style.transform = 'translateX(60px) scale(1.5)';
            }, 100);
            
            setTimeout(() => {
                beat.remove();
            }, 1500);
        }

// Create beat pulses periodically
        setInterval(createBeatPulse, 1500);

// Spotlight sweep effect
        function createSpotlight() {
            const spotlight = document.createElement('div');
            spotlight.style.position = 'fixed';
            spotlight.style.bottom = '40px';
            spotlight.style.left = '50%';
            spotlight.style.transform = 'translateX(-50%)';
            spotlight.style.width = '80px';
            spotlight.style.height = '4px';
            spotlight.style.background = 'linear-gradient(90deg, #ec4899, #f97316, #8b5cf6)';
            spotlight.style.borderRadius = '2px';
            spotlight.style.opacity = '0.8';
            spotlight.style.pointerEvents = 'none';
            spotlight.style.zIndex = '999';
            spotlight.classList.add('movement-trail');
            
            document.body.appendChild(spotlight);
            
            setTimeout(() => {
                spotlight.remove();
            }, 3000);
        }

// Create spotlight effects periodically
        setInterval(createSpotlight, 3500);

// Energy burst effect
        function createEnergyBurst() {
            const energy = document.createElement('div');
            energy.textContent = '✨';
            energy.style.position = 'fixed';
            energy.style.top = Math.random() * (window.innerHeight * 0.4) + 'px';
            energy.style.left = '5px';
            energy.style.fontSize = '12px';
            energy.style.pointerEvents = 'none';
            energy.style.zIndex = '999';
            energy.style.transition = 'all 2s ease-out';
            energy.classList.add('energy-burst');
            
            document.body.appendChild(energy);
            
            setTimeout(() => {
                energy.style.opacity = '0';
                energy.style.transform = 'translateX(120px) rotate(360deg) scale(2)';
            }, 100);
            
            setTimeout(() => {
                energy.remove();
            }, 2000);
        }

// Create energy bursts periodically
        setInterval(createEnergyBurst, 2800);

// Dance wave scroll effect
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const waveElements = document.querySelectorAll('.dance-wave');
            
            waveElements.forEach((element, index) => {
                const speed = 0.06 + (index * 0.02);
                const wave = Math.sin(scrolled * 0.004 + index) * 8;
                element.style.transform = `translateY(${scrolled * speed + wave}px) rotate(${wave * 0.8}deg)`;
            });
        });

// Passion flow effect on window resize
        window.addEventListener('resize', () => {
            const passionElements = document.querySelectorAll('.passion-flow');
            passionElements.forEach((element, index) => {
                element.style.animationDelay = `${index * 0.3}s`;
            });
        });

Our Mission Dance Studio Preview

Download Options