@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Outfit:wght@400;700;900&display=swap');

:root {
    --royal-purple: #7000FF;
    --fresh-white: #F8F9FA;
    --neon-pink: #FF107A;
    --dark-bg: #0A0A0A;
}

body {
    background-color: var(--dark-bg); /* Locked to Dark Mode */
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

.font-action {
    font-family: 'Outfit', sans-serif;
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--royal-purple);
}

.snoop-gradient {
    background: linear-gradient(90deg, #7000FF 0%, #B829FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vhs-grid {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 16, 122, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(112, 0, 255, 0.05) 1px, transparent 1px);
}

/* ========================================= */
/* THE FLOATY AESTHETIC                      */
/* ========================================= */
.floaty {
    animation: float 6s ease-in-out infinite;
}

.floaty-delay {
    animation: float 6s ease-in-out infinite 3s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* MARQUEE ANIMATION FOR REVIEWS */
.animate-marquee { animation: marquee 25s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

/* THE X-FACTOR: CIGAR SMOKE ANIMATION */
.smoke {
    position: absolute; width: 20px; height: 20px;
    background: radial-gradient(circle, rgba(255,16,122,0.8) 0%, rgba(112,0,255,0) 70%);
    border-radius: 50%; filter: blur(15px); opacity: 0; pointer-events: none;
}
.smoke-1 { animation: rise 4s ease-in infinite; left: 30%; bottom: 30%; }
.smoke-2 { animation: rise 5s ease-in infinite 1s; left: 28%; bottom: 30%; }
.smoke-3 { animation: rise 6s ease-in infinite 2s; left: 32%; bottom: 30%; }
@keyframes rise {
    0% { transform: translateY(0) scale(1) translateX(0); opacity: 0.8; }
    50% { transform: translateY(-150px) scale(3) translateX(-20px); opacity: 0.4; }
    100% { transform: translateY(-300px) scale(6) translateX(40px); opacity: 0; }
}