/* ===== FONTS & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Exo 2', sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
}

/* ===== NEON TEXT EFFECTS ===== */
.neon-text {
    text-shadow: 
        0 0 5px #ff00de,
        0 0 10px #ff00de,
        0 0 15px #ff00de,
        0 0 20px #ff00de,
        0 0 35px #ff00de,
        0 0 40px #ff00de;
    animation: neon-flicker 2s infinite alternate;
}

.neon-blue {
    text-shadow: 
        0 0 5px #00eeff,
        0 0 10px #00eeff,
        0 0 15px #00eeff,
        0 0 20px #00eeff,
        0 0 35px #00eeff,
        0 0 40px #00eeff;
    animation: neon-flicker-blue 2.5s infinite alternate;
}

@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 5px #ff00de,
            0 0 10px #ff00de,
            0 0 15px #ff00de,
            0 0 20px #ff00de,
            0 0 35px #ff00de,
            0 0 40px #ff00de;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

@keyframes neon-flicker-blue {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 5px #00eeff,
            0 0 10px #00eeff,
            0 0 15px #00eeff,
            0 0 20px #00eeff,
            0 0 35px #00eeff,
            0 0 40px #00eeff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* ===== GRADIENT BACKGROUNDS ===== */
.gradient-bg {
    background: linear-gradient(135deg, #ff00de 0%, #9900ff 50%, #00eeff 100%);
}

.hero-pattern {
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 0, 222, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 238, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(153, 0, 255, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #000 0%, #1a0033 100%);
}

/* ===== GLOW EFFECTS ===== */
.glow-effect {
    box-shadow: 
        0 0 20px rgba(255, 0, 222, 0.5),
        0 0 40px rgba(255, 0, 222, 0.3),
        0 0 60px rgba(255, 0, 222, 0.1);
    transition: all 0.3s ease;
}

.glow-effect:hover {
    box-shadow: 
        0 0 30px rgba(255, 0, 222, 0.7),
        0 0 60px rgba(255, 0, 222, 0.5),
        0 0 90px rgba(255, 0, 222, 0.3);
    transform: translateY(-2px);
}

.can-shadow {
    filter: drop-shadow(0 10px 20px rgba(255, 0, 222, 0.3));
}

/* ===== NAVIGATION STYLES ===== */
nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: linear-gradient(90deg, #ff00de, #00eeff);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ===== HERO SECTION ANIMATIONS ===== */
.circle-1 {
    animation: float-1 6s ease-in-out infinite;
    top: 20%;
    left: 10%;
}

.circle-2 {
    animation: float-2 8s ease-in-out infinite;
    top: 60%;
    right: 10%;
}

.circle-3 {
    animation: float-3 7s ease-in-out infinite;
    top: 40%;
    left: 60%;
}

@keyframes float-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(-180deg); }
}

@keyframes float-3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(180deg); }
}

/* ===== DISCO LIGHT EFFECTS ===== */
.disco-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.disco-light {
    position: absolute;
    border-radius: 50%;
    animation: disco-bumbum 3s ease-in-out infinite;
    filter: blur(20px);
}

@keyframes disco-bumbum {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.2); 
    }
}

/* ===== LIGHT BEAM EFFECTS ===== */
.light-beam-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.light-beam {
    position: absolute;
    width: 4px;
    animation: light-sweep 8s linear infinite;
    filter: blur(2px);
}

@keyframes light-sweep {
    0% { 
        opacity: 0; 
        transform: translateX(-50px) rotate(-5deg); 
    }
    50% { 
        opacity: 1; 
        transform: translateX(0) rotate(0deg); 
    }
    100% { 
        opacity: 0; 
        transform: translateX(50px) rotate(5deg); 
    }
}

/* ===== LASER EFFECTS ===== */
.laser-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.laser {
    position: absolute;
    height: 2px;
    background: currentColor;
    animation: laser-scan 3 s linear infinite;
    filter: blur(1px);
    box-shadow: 0 0 10px currentColor;
}

@keyframes laser-scan {
    0% { 
        opacity: 0; 
        transform: scaleX(0); 
    }
    10% { 
        opacity: 1; 
        transform: scaleX(1); 
    }
    90% { 
        opacity: 1; 
        transform: scaleX(1); 
    }
    100% { 
        opacity: 0; 
        transform: scaleX(0); 
    }
}

/* ===== SPOTLIGHT EFFECTS ===== */
.spotlight {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: spotlight-move 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes spotlight-move {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.3; 
    }
    25% { 
        transform: translate(50px, -30px) scale(1.2); 
        opacity: 0.6; 
    }
    50% { 
        transform: translate(-30px, 40px) scale(0.8); 
        opacity: 0.4; 
    }
    75% { 
        transform: translate(40px, 20px) scale(1.1); 
        opacity: 0.5; 
    }
}

/* ===== STROBE EFFECTS ===== */
.strobe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    animation: strobe-flash 100s linear infinite;
}

@keyframes strobe-flash {
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { 
        background: transparent; 
    }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% { 
        background: rgba(255, 255, 255, 0.1); 
    }
}

/* ===== PRODUCT CARDS ===== */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 0, 222, 0.2);
}

/* ===== REVIEWS CAROUSEL ===== */
.review-indicator.active {
    background-color: #ff00de !important;
    transform: scale(1.2);
}

/* ===== MEDIA PLAYER DRAWER ===== */
.drawer {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(100%);
    border-left: 2px solid #374151;
}

.drawer.drawer-open {
    transform: translateX(0);
}

.drawer-tab {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 80px;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid #374151;
    border-right: none;
}

.drawer-tab:hover {
    left: -45px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ===== TURNTABLE ANIMATION ===== */
.turntable-icon {
    animation: spin 3s linear infinite;
    transition: animation-play-state 0.3s ease;
}

.turntable-icon.paused {
    animation-play-state: paused;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== EQUALIZER VISUALIZATION ===== */
.equalizer-container {
    display: flex;
    align-items: end;
    justify-content: center;
    height: 40px;
    gap: 2px;
}

.equalizer-bar {
    width: 3px;
    background: linear-gradient(to top, #ff00de, #00eeff);
    border-radius: 2px;
    transition: height 0.1s ease;
    animation: equalizer-dance 0.5s ease-in-out infinite alternate;
}

.equalizer-bar:nth-child(1) { animation-delay: 0s; }
.equalizer-bar:nth-child(2) { animation-delay: 0.1s; }
.equalizer-bar:nth-child(3) { animation-delay: 0.2s; }
.equalizer-bar:nth-child(4) { animation-delay: 0.3s; }
.equalizer-bar:nth-child(5) { animation-delay: 0.4s; }
.equalizer-bar:nth-child(6) { animation-delay: 0.2s; }
.equalizer-bar:nth-child(7) { animation-delay: 0.1s; }

@keyframes equalizer-dance {
    0% { height: 5px; }
    100% { height: 25px; }
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    width: 100%;
    height: 4px;
    background-color: #374151;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff00de, #00eeff);
    border-radius: 2px;
    transition: width 0.1s ease;
}

/* ===== VOLUME SLIDER ===== */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #374151;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff00de, #00eeff);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff00de, #00eeff);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===== CONTROL BUTTONS ===== */
.control-button {
    transition: all 0.2s ease;
}

.control-button:hover {
    transform: scale(1.1);
}

.close-button {
    transition: all 0.3s ease;
}

.close-button:hover {
    transform: rotate(90deg);
}

/* ===== PLAYLIST STYLES ===== */
.playlist-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.playlist-item:hover {
    background-color: rgba(55, 65, 81, 0.5);
    border-left-color: #ff00de;
}

.playlist-item.active {
    background-color: rgba(255, 0, 222, 0.1);
    border-left-color: #ff00de;
}

.playlist-item.active h4 {
    color: #ff00de;
}

/* ===== PRODUCTS SECTION STYLES ===== */
/* Products Section Custom Background */
.products-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.products-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url('../img/img1.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.35; /* Adjust for desired overlay effect */
    z-index: 0;
}

/* Ensure content is above background */
.products-section > .container {
    position: relative;
    z-index: 1;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-pattern {
        min-height: 100vh;
        padding-top: 80px;
    }
    
    .neon-text {
        font-size: 2.5rem;
    }
    
    .drawer {
        width: 100vw;
    }
    
    .drawer-tab {
        left: -60px;
        width: 60px;
        height: 100px;
    }
    
    .drawer-tab:hover {
        left: -55px;
    }
    
    .product-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .disco-light {
        width: 150px !important;
        height: 150px !important;
    }
    
    .spotlight {
        width: 60px;
        height: 60px;
    }

    /* Add top padding to "UNLEASH YOUR ENERGY" heading on mobile */
    #home h1 {
        padding-top: 100px;
    }
}

/* Add 40px left and right padding to main sections on mobile */
@media (max-width: 768px) {
    #home,
    #products,
    #about,
    #reviews,
    #news,
    #contact {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .neon-text {
        font-size: 2rem;
    }
    
    .hero-pattern h1 {
        font-size: 2.5rem;
    }
    
    .disco-light {
        width: 100px !important;
        height: 100px !important;
    }
    
    .light-beam {
        width: 2px;
    }
    
    .laser {
        height: 1px;
    }
}

/* Hide video container and parent on mobile screens */
@media (max-width: 768px) {
    .video-container,
    .video-container audio,
    .video-container video,
    .md\:w-1\/2.flex.justify-center {
        display: none !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .neon-text,
    .neon-blue,
    .disco-light,
    .light-beam,
    .laser,
    .spotlight,
    .strobe-container,
    .turntable-icon,
    .equalizer-bar,
    .circle-1,
    .circle-2,
    .circle-3 {
        animation: none;
    }
    
    .glow-effect:hover {
        transform: none;
    }
    
    .product-card:hover {
        transform: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .drawer,
    .disco-container,
    .light-beam-container,
    .laser-container,
    .spotlight,
    .strobe-container {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .neon-text,
    .neon-blue {
        text-shadow: none;
        color: black;
    }
}

/* ===== UTILITY CLASSES ===== */
.transition-all {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 0, 222, 0.5);
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff00de, #00eeff);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff00de, #9900ff);
}

/* ===== SELECTION STYLES ===== */
::selection {
    background: rgba(255, 0, 222, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(255, 0, 222, 0.3);
    color: white;
}