/* ============================================
   BAND OF MEN - Base Styles
   ============================================
   Reset, typography, and utility classes
   ============================================ */

/* --- Reset --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
}

html { 
    scroll-behavior: smooth; 
    width: 100%;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    min-height: 100vh;
}

/* Preloading State */
body.preloading {
    overflow: hidden;
}

body.preloading > *:not(#preloader) {
    visibility: hidden;
}

/* No-Scroll State (Mobile Menu) */
body.noscroll {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none;
}

/* --- Typography --- */
h1, h2, h3, h4 { 
    font-family: var(--font-heading); 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

h1 { 
    font-size: clamp(2.5rem, 6vw, 5rem); 
    line-height: 1.1; 
    color: var(--accent-light); 
    margin-bottom: 20px;
}

h2 { 
    font-size: clamp(2rem, 4vw, 3.5rem); 
    color: var(--accent-light); 
    margin-bottom: 1.5rem; 
}

.subtitle {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--accent-gold);
    margin-bottom: 1rem;
    position: relative;
    padding-left: 40px;
}

.subtitle::before {
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 50%;
    width: 30px; 
    height: 1px; 
    background: var(--accent-gold);
}

/* --- Utility Classes --- */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 100%; 
}

.text-gold { color: var(--accent-gold); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.section-padding { padding: var(--spacing-section) 0; }

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lineExpandLeft {
    from { left: 24px; width: 0; }
    to { left: 5px; width: 38px; }
}

@keyframes lineExpandRight {
    from { right: 24px; width: 0; }
    to { right: 5px; width: 38px; }
}