/*
    Resonance Studio Stylesheet
    Theme: Midnight Neon (80s Synthwave)
*/

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    
    /* 1. TRUE BLACK BACKGROUND */
    background-color: #000000; 
    
    /* 2. RETRO GRID PATTERN */
    /* This grid will show through any transparent section */
    background-image: 
        linear-gradient(rgba(240, 37, 124, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(240, 37, 124, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    
    scroll-padding-top: 80px; 
    color: #e5e5e5; /* Default text color is light gray */
}

/* Headings use 'Outfit' */
h1, h2, h3, h4, h5, h6, nav, .font-display {
    font-family: 'Outfit', sans-serif;
    font-weight: 300; 
    letter-spacing: 0.02em; 
    color: #ffffff; /* Headings are pure white */
}

/* Make Hero Titles slightly bolder */
#hero h1, #about-hero h1, #gear-hero h1, #contact-hero h1, #gallery-hero h1 {
    font-weight: 600;
    letter-spacing: 0.05em;
}

html {
    scroll-behavior: smooth;
}

/* --- Colors & Glows --- */
.text-accent { 
    color: #f0257c; 
    text-shadow: 0 0 10px rgba(240, 37, 124, 0.5);
}
.bg-accent { 
    background-color: #f0257c; 
    box-shadow: 0 0 15px rgba(240, 37, 124, 0.4);
}
.border-accent { border-color: #f0257c; }

.hover\:bg-pink-300:hover { 
    background-color: #f472b6; 
    box-shadow: 0 0 25px rgba(240, 37, 124, 0.8);
}
.bg-accent\/20 { background-color: rgba(240, 37, 124, 0.15); }


/* --- Cards --- */
.card {
    transition: all 0.3s ease;
    transform: scale(1);
    border: 1px solid #333; /* Dark Gray Border (No Indigo) */
    background-color: #050505; /* Nearly black */
}
.card:hover {
    box-shadow: 0 0 20px rgba(240, 37, 124, 0.3);
    border-color: #f0257c;
    transform: scale(1.02);
}
.card-gallery {
    transition: all 0.3s ease;
    transform: scale(1);
    border: 1px solid #333;
    background-color: #000;
}
.card-gallery:hover {
    box-shadow: 0 0 20px rgba(240, 37, 124, 0.3);
    border-color: #f0257c;
    transform: scale(1.03);
}

/* --- Hero Carousel --- */
.hero-slide {
    background-size: cover;
    background-position: center;
    /* Ensure slides are stacked correctly */
    position: absolute;
    inset: 0;
    /* Default state is hidden */
    opacity: 0;
    /* Instant switch (no transition) as requested previously */
    transition: none; 
    will-change: opacity;
}

/* Active class to show slide */
.hero-slide.active-slide {
    opacity: 1;
    z-index: 10;
}

.hero-slide-1 { background-image: url('images/hero-record.jpg'); }
.hero-slide-2 { background-image: url('images/hero-refine.jpg'); }
.hero-slide-3 { background-image: url('images/hero-release.jpg'); }


/* --- Page Hero Backgrounds --- */
.gear-hero-bg {
    background-image: url('images/gear-hero-background.jpg'); 
    background-size: cover;
    background-position: center;
}
.contact-hero-bg {
    background-image: url('images/contact-hero-background.jpg'); 
    background-size: cover;
    background-position: center;
}
.gallery-hero-bg {
    background-image: url('images/gallery-hero-background.jpg'); 
    background-size: cover;
    background-position: center;
}

.about-hero-bg {
    background-image: url('images/carlos-studio-photo.jpg'); 
    background-size: cover;
    background-position: 25% center; 
}
@media (max-width: 768px) { 
    .about-hero-bg {
        background-position: 35% center; 
    }
}

/* --- General Image Placeholders --- */
.img-placeholder-1 { background-image: url('images/production-suite.jpg'); background-size: cover; background-position: center; }
.img-placeholder-2 { background-image: url('images/live-suite.jpg'); background-size: cover; background-position: center; }
.img-placeholder-3 { background-image: url('images/vocal-suite.jpg'); background-size: cover; background-position: center; }


/* --- Gear List Styles --- */
.gear-item {
    background-color: #050505; 
    border-radius: 0.75rem;
    border: 1px solid #333; /* Dark Gray Border */
    border-left: 4px solid #f0257c; 
    overflow: hidden;
    transition: all 0.3s ease;
}
.gear-item:hover {
    box-shadow: 0 0 15px rgba(240, 37, 124, 0.2);
}

.gear-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    cursor: pointer;
    background-color: #050505;
    transition: background-color 0.2s ease;
}
.gear-toggle:hover { background-color: #1a1a1a; }

.gear-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    color: #d4d4d4;
    background-color: #050505;
    border-top: 1px solid #333;
}
.gear-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}
.toggle-icon { transition: transform 0.3s ease; }
.toggle-icon.rotate-180 { transform: rotate(180deg); }