body {
    font-family: 'Poppins', sans-serif;
    background-color: #F8FAFC;
    overflow-x: hidden;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden;
        width: 100%;
    }
    /* Navbar: only a thin line on mobile, like desktop */
    .glass-nav {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#FF0099, #FF512F);
    border-radius: 5px;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #FF0099 0%, #FF512F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Video Play Button Pulse */
:root {
    --plyr-color-main: #FF0099;
}

.plyr {
    border-radius: 0.75rem;
    z-index: 10;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 30s linear infinite;
    width: fit-content;
}
.marquee-content:hover {
    animation-play-state: paused;
}

.play-pulse {
    box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.7);
    animation: pulse-pink 2s infinite;
}

@keyframes pulse-pink {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 0, 153, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 0, 153, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 0, 153, 0);
    }
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for children */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }

/* Hero Halo Effect */
#hero-halo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 0, 153, 0.1), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Video Halo Pulse (subtle, around entire video) */
.video-halo {
    box-shadow:
        0 0 40px rgba(255, 0, 153, 0.18),
        0 0 80px rgba(255, 81, 47, 0.14);
    animation: video-halo-pulse 7s ease-in-out infinite;
}

@keyframes video-halo-pulse {
    0%, 100% {
        box-shadow:
            0 0 32px rgba(255, 0, 153, 0.14),
            0 0 70px rgba(255, 81, 47, 0.10);
    }
    50% {
        box-shadow:
            0 0 50px rgba(255, 0, 153, 0.23),
            0 0 100px rgba(255, 81, 47, 0.18);
    }
}