/* ====================================
   DRUMMER JUNKIE - GLOBAL STYLESHEET
   ==================================== */

/* =====================================
   1. GLOBAL RESETS & BASE STYLES
   ===================================== */

body { 
    background-color: #0a0a0a; 
    color: #ffffff; 
    overflow-x: hidden; 
    font-family: 'Open Sans', sans-serif;
}

/* =====================================
   2. TYPOGRAPHY UTILITIES
   ===================================== */

/* Extra Large Headings */
.heading-xl { 
    font-weight: 800; 
    letter-spacing: -0.025em; 
    line-height: 1.1; 
}

/* Large Headings */
.heading-lg { 
    font-weight: 700; 
    letter-spacing: -0.015em; 
}

/* Navigation Links */
.nav-link { 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-size: 0.85rem; 
}

/* Primary Buttons */
.btn-primary { 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    border-radius: 9999px; 
}

/* Body Text */
.text-body { 
    font-weight: 400; 
    line-height: 1.75; 
}

/* =====================================
   3. UTILITY CLASSES
   ===================================== */

/* Remove Scrollbar */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Cursor States */
.cursor-zoom-in { 
    cursor: zoom-in; 
}

.cursor-zoom-out { 
    cursor: zoom-out; 
}

/* Visual Effects */
.mad-tilt { 
    transform: rotate(-2deg); 
}

/* =====================================
   4. ANIMATIONS
   ===================================== */

/* Screen Shake Animation */
@keyframes shake { 
    0% { transform: translate(1px, 1px); } 
    10% { transform: translate(-1px, -2px); } 
    50% { transform: translate(-1px, 2px); } 
    100% { transform: translate(0, 0); } 
}

.screen-shake { 
    animation: shake 0.2s; 
}

/* Cymbal Wobble Animation */
@keyframes cymbalShake { 
    0% { transform: rotate(0deg) scale(1); } 
    25% { transform: rotate(-5deg) scale(0.95); } 
    50% { transform: rotate(5deg) scale(1.02); } 
    75% { transform: rotate(-2deg) scale(0.98); } 
    100% { transform: rotate(0deg) scale(1); } 
}

.cymbal-wobble { 
    animation: cymbalShake 0.4s ease-out; 
}

/* Drum Hit Animation */
@keyframes drumHit { 
    0% { transform: scale(1); } 
    50% { transform: scale(0.96); filter: brightness(0.9); } 
    100% { transform: scale(1); filter: brightness(1); } 
}

.drum-thud { 
    animation: drumHit 0.1s ease-out; 
}

/* Marquee Scrolling Animation (Slowed) */
@keyframes scroll { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
}

.marquee-container { 
    overflow: hidden; 
    white-space: nowrap; 
}

.marquee-content { 
    display: inline-block; 
    animation: scroll 150s linear infinite; 
}

/* =====================================
   5. DRUM KIT STYLES
   ===================================== */

/* Drum Kit Grid Layout */
.drum-kit-grid {
    display: grid;
    grid-template-areas: 
        "hihat crash"
        "snare kick";
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
}

/* Gold Cymbal Texture */
.cymbal-gold {
    background: radial-gradient(circle, #FCD34D 0%, #D97706 40%, #92400E 100%);
    border: 2px solid #78350F;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 5px 5px 15px rgba(0,0,0,0.5);
    position: relative;
}

.cymbal-gold::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%; 
    height: 20%;
    background: #451a03;
    border-radius: 50%;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}

/* Drum Head Texture */
.drum-head {
    background: radial-gradient(circle at 30% 30%, #ffffff, #e2e2e2);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 
                0 0 0 8px #silver, 
                0 10px 20px rgba(0,0,0,0.5);
    position: relative;
}

/* Drum Rim Styles */
.drum-rim-silver {
    border: 6px solid #d1d5db; /* gray-300 */
    outline: 2px solid #6b7280; /* gray-500 */
}

.drum-rim-red {
    border: 6px solid #991b1b; /* red-800 */
    outline: 2px solid #ef4444; /* red-500 */
}

/* =====================================
   6. RATING SYSTEM
   ===================================== */

.drum-rating i.active-drum { 
    color: #FFD700; 
}

/* =====================================
   7. CUSTOM CHECKBOX STYLING
   (Calculator Page)
   ===================================== */

.checkbox-wrapper:hover .checkbox-box { 
    border-color: #39ff14; 
}

.checkbox-wrapper input:checked + .checkbox-content {
    background-color: #222;
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.checkbox-wrapper input:checked ~ .checkbox-label .checkbox-box {
    background-color: #39ff14;
    border-color: #39ff14;
    color: #000;
}

/* =====================================
   8. RESPONSIVE HELPERS
   ===================================== */

/* Ensure smooth scrolling on all devices */
html {
    scroll-behavior: smooth;
}

/* Prevent text selection on UI elements */
.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =====================================
   9. ACCESSIBILITY
   ===================================== */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #39ff14;
    outline-offset: 2px;
}

/* =====================================
   10. VERTICAL WAVE ANIMATION
   ===================================== */

.wave-lines {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.15;
    pointer-events: none;
    overflow: hidden;
}

.wave-lines span {
    display: inline-block;
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, #39ff14, #FFD700);
    border-radius: 2px;
    animation: wave 2s ease-in-out infinite;
    transform-origin: center;
}

/* Individual delays for each line (works on all browsers) */
.wave-lines span:nth-child(1) { animation-delay: 0.1s; }
.wave-lines span:nth-child(2) { animation-delay: 0.2s; }
.wave-lines span:nth-child(3) { animation-delay: 0.3s; }
.wave-lines span:nth-child(4) { animation-delay: 0.4s; }
.wave-lines span:nth-child(5) { animation-delay: 0.5s; }
.wave-lines span:nth-child(6) { animation-delay: 0.6s; }
.wave-lines span:nth-child(7) { animation-delay: 0.7s; }
.wave-lines span:nth-child(8) { animation-delay: 0.8s; }
.wave-lines span:nth-child(9) { animation-delay: 0.9s; }
.wave-lines span:nth-child(10) { animation-delay: 1.0s; }
.wave-lines span:nth-child(11) { animation-delay: 1.1s; }
.wave-lines span:nth-child(12) { animation-delay: 1.2s; }
.wave-lines span:nth-child(13) { animation-delay: 1.3s; }
.wave-lines span:nth-child(14) { animation-delay: 1.4s; }
.wave-lines span:nth-child(15) { animation-delay: 1.5s; }
.wave-lines span:nth-child(16) { animation-delay: 1.6s; }
.wave-lines span:nth-child(17) { animation-delay: 1.7s; }
.wave-lines span:nth-child(18) { animation-delay: 1.8s; }
.wave-lines span:nth-child(19) { animation-delay: 1.9s; }
.wave-lines span:nth-child(20) { animation-delay: 2.0s; }
.wave-lines span:nth-child(21) { animation-delay: 2.1s; }
.wave-lines span:nth-child(22) { animation-delay: 2.2s; }
.wave-lines span:nth-child(23) { animation-delay: 2.3s; }
.wave-lines span:nth-child(24) { animation-delay: 2.4s; }
.wave-lines span:nth-child(25) { animation-delay: 2.5s; }
.wave-lines span:nth-child(26) { animation-delay: 2.6s; }
.wave-lines span:nth-child(27) { animation-delay: 2.7s; }
.wave-lines span:nth-child(28) { animation-delay: 2.8s; }
.wave-lines span:nth-child(29) { animation-delay: 2.9s; }
.wave-lines span:nth-child(30) { animation-delay: 3.0s; }

@keyframes wave {
    0%, 100% {
        transform: scaleY(0.3);
        opacity: 0.3;
    }
    50% {
        transform: scaleY(1.8);
        opacity: 1;
    }
}

/* =====================================
   11. PRINT STYLES
   ===================================== */

@media print {
    body {
        background-color: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
}