/* --- Core Micro-Branding Style Tokens --- */
:root {
    --bg-cream: #fbf9f1;
    --panel-white: #fefefc;
    --text-charcoal: #1a1a19;
    --text-muted: #62625e;
    --border-clean: rgba(26, 26, 25, 0.09);
    
    /* Soft Retro Shapes Palette */
    --accent-peach: #ffb5a7;
    --accent-teal: #a8dadc;
    --accent-mint: #c7f9cc;
    --accent-chrome: #cbd5e1;
    --bubble-interior: #f4ebd0;

    /* Studio One Workspace Matrix Tokens (Inspired by image_a5c0cd.jpg) */
    --daw-slate: #181a1f;
    --daw-panel: #23272f;
    --daw-grid-line: rgba(255, 255, 255, 0.03);
    --daw-text: #b3b9c4;
    --daw-border: #2d333f;
    --neon-teal: #00ffd2;
    --neon-green: #39ff14;
    --neon-purple: #bd00ff;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-cream);
    color: var(--text-charcoal);
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    transition: background-color 0.8s cubic-bezier(0.25, 1, 0.5, 1), color 0.8s ease;
}

/* --- Studio One DAW Background Engine --- */
.studio-daw-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: var(--daw-slate);
    z-index: 0;
    opacity: 0; 
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

body:has(.btn-play:contains('Pause')) .studio-daw-bg,
body {
    --canvas-opacity-engine: 1;
}

#visualizer-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; 
}

.daw-grid-overlay {
    width: 100%; height: 100%;
    background-image: 
        linear-gradient(to right, var(--daw-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--daw-grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

body.studio-mode .studio-daw-bg { 
    opacity: 1; 
}

/* --- Dynamic Global Frame Draw-Down System --- */
.daw-frame-left, .daw-frame-right {
    position: fixed;
    top: 0; bottom: 0;
    width: 15px;
    background-color: var(--daw-panel);
    border-right: 1px solid var(--daw-border);
    z-index: 90;
    transform: translateY(-100%); 
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.daw-frame-right {
    right: 0; left: auto;
    border-right: none;
    border-left: 1px solid var(--daw-border);
}

.daw-indicator {
    width: 4px; height: 30px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.4s ease 0.6s;
}
.neon-teal { background-color: var(--neon-teal); box-shadow: 0 0 8px var(--neon-teal); }
.neon-green { background-color: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); }
.neon-purple { background-color: var(--neon-purple); box-shadow: 0 0 8px var(--neon-purple); }

/* --- Studio Mode Global Interface Shifts --- */
body.studio-mode {
    background-color: var(--daw-slate);
    color: var(--daw-text);
}

body.studio-mode .studio-daw-bg { opacity: 1; }
body.studio-mode .ambient-canvas { opacity: 0; transition: opacity 0.6s ease; }

body.studio-mode .daw-frame-left, 
body.studio-mode .daw-frame-right {
    transform: translateY(0);
}

body.studio-mode .daw-indicator { opacity: 0.8; }

body.studio-mode header {
    background: rgba(24, 26, 31, 0.85);
    border-bottom: 1px solid var(--daw-border);
}

body.studio-mode .logo, body.studio-mode nav a { color: var(--daw-text); }

/* --- Interactivity & Kinetic Micro-Animations --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

/* Parallax Shape Fields */
.ambient-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; }
.shape { position: absolute; opacity: 0.65; transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.3, 1); filter: drop-shadow(6px 12px 24px rgba(26, 26, 25, 0.05)); }
.sphere-teal { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, var(--accent-teal) 50%, #457b9d); top: 10%; left: 5%; }
.sphere-peach { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, var(--accent-peach) 50%, #e63946); bottom: 10%; right: 5%; }
.pyramid-mint { width: 90px; height: 90px; background: linear-gradient(135deg, #ffffff, var(--accent-mint) 60%, #52b788); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); top: 35%; left: 85%; }
.torus-chrome { width: 120px; height: 120px; border-radius: 50%; border: 28px solid transparent; background: linear-gradient(var(--bg-cream), var(--bg-cream)) padding-box, linear-gradient(135deg, #ffffff, var(--accent-chrome) 40%, #475569) border-box; bottom: 35%; left: -30px; }

/* --- Navigation Header & Social Integrations --- */
header { 
    position: fixed; 
    top: 0; width: 100%; 
    padding: 2rem 4rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 100; 
    background: rgba(251, 249, 241, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border-bottom: 1px solid var(--border-clean); 
    transition: all 0.5s ease; 
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem; 
}

.logo { font-weight: 800; letter-spacing: 3px; font-size: 1.1rem; }

/* Clickable Instagram Vector Properties */
.instagram-header-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-charcoal);
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.5s ease;
}

.instagram-icon {
    width: 20px;
    height: 20px;
}

.instagram-header-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

body.studio-mode .instagram-header-link {
    color: var(--daw-text); 
}

nav a { text-decoration: none; color: var(--text-charcoal); margin-left: 3rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.5; transition: opacity 0.3s ease; }
nav a:hover, nav a.active-link { opacity: 1; }

main { position: relative; z-index: 10; }
.section-container { min-height: 100vh; padding: 8rem 6rem; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }

/* --- Hero Layout Parameters --- */
.hero { min-height: 100vh; display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 6rem; }
.eyebrow-tag { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--text-muted); margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800; line-height: 1.05; letter-spacing: -2.5px; margin-bottom: 2rem; }
.hero p { font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--text-muted); max-width: 750px; margin-bottom: 3.5rem; }

/* --- Floating Hero Foreground Portrait Avatar --- */
.hero-foreground-avatar {
    position: fixed;
    bottom: 0; right: 0;
    width: 35vw;         
    max-width: 550px;    
    height: auto;
    z-index: 5;          
    pointer-events: none; 
    opacity: 0.45;       
    transition: transform 0.1s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.2s ease;
    will-change: transform, opacity;
    display: flex;
    align-items: flex-end;
}
.hero-foreground-avatar img { width: 100%; height: auto; display: block; object-fit: contain; }

/* --- Biography Profile Grid System (500px Frame) --- */
.bio-layout { 
    display: grid; 
    grid-template-columns: 0.6fr 1.4fr; 
    gap: 4rem; 
    align-items: center; 
}

.bio-accent-frame { 
    width: 500px;  
    height: 500px; 
    margin: 0 auto;
    position: relative; 
    border: 4px solid var(--accent-peach);
    box-shadow: 0 15px 30px rgba(0,0,0,0.03);
    overflow: visible; 
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.bio-profile-img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; filter: grayscale(15%) contrast(102%); }

body.studio-mode .bio-accent-frame { 
    border-color: var(--neon-purple);
    box-shadow: 0 0 20px rgba(189, 0, 255, 0.2);
}

.bio-glitch-box { 
    position: absolute; bottom: -15px; right: -15px; 
    background: var(--text-charcoal); color: var(--bg-cream); 
    padding: 0.8rem 1.5rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 2px; 
    border-radius: 2px; z-index: 2; transition: all 0.5s ease; 
}

body.studio-mode .bio-glitch-box { 
    background: var(--daw-panel); border: 1px solid var(--daw-border); color: var(--daw-text); 
    box-shadow: 3px 3px 0px var(--neon-teal);
}

/* --- Soundboard Workspace Grid & Channel Strips --- */
.section-header { margin-bottom: 4rem; }
.section-header h2 { font-size: 3rem; font-weight: 800; letter-spacing: -1px; }
.section-tagline { font-size: 1.1rem; color: var(--text-muted); }
body.studio-mode .section-tagline { color: #8e96a3; }

.dashboard-grid { display: grid; gap: 3.5rem; }
.layout-2col { grid-template-columns: 1.1fr 0.9fr; }

.panel { background-color: var(--panel-white); border: 1px solid var(--border-clean); border-radius: 12px; transition: all 0.5s ease; }
body.studio-mode .panel { background-color: var(--daw-panel); border-color: var(--daw-border); }

.player-panel { padding: 1.5rem 2.5rem; }

.track-row { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    padding: 1.75rem 0; 
    border-bottom: 1px solid var(--border-clean); 
    cursor: pointer; 
    transition: all 0.2s ease; 
    gap: 1rem;
}
body.studio-mode .track-row { border-bottom-color: var(--daw-border); }
.track-row:last-child { border-bottom: none; }
.track-row:hover { transform: translateX(5px); }

.track-meta-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.track-info h4 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.3px; transition: color 0.2s ease; }
body.studio-mode .track-info h4 { color: var(--daw-text); }
.track-info span { font-size: 0.85rem; color: var(--text-muted); }
.track-row.active-track h4 { color: var(--neon-teal) !important; }

/* Slider Array Formatting Block */
.track-controls-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    margin-top: 0.25rem;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.play-slider-container { flex: 1; }
.volume-container { width: 160px; }

.time-stamp {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 32px;
}
body.studio-mode .time-stamp { color: #707a8a; }

.vol-icon {
    width: 14px; height: 14px;
    color: var(--text-muted);
}
body.studio-mode .vol-icon { color: #707a8a; }

/* --- Machined HTML5 Fader Rails Customisation --- */
.daw-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 4px; 
    border-radius: 2px;
    background: rgba(26, 26, 25, 0.1);
    outline: none; cursor: pointer;
    transition: background 0.3s ease;
}
body.studio-mode .daw-slider { background: #2d333f; }

.daw-slider:hover { background: rgba(26, 26, 25, 0.18); }
body.studio-mode .daw-slider:hover { background: #3d4554; }

/* Webkit / Chrome Knob Architecture */
.daw-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--text-charcoal); border: none;
    transition: transform 0.1s ease, background 0.3s ease;
}
body.studio-mode .daw-slider::-webkit-slider-thumb { 
    background: var(--neon-teal); 
    box-shadow: 0 0 6px var(--neon-teal);
}
.daw-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Gecko / Firefox Knob Architecture */
.daw-slider::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--text-charcoal); border: none;
    transition: transform 0.1s ease, background 0.3s ease;
}
body.studio-mode .daw-slider::-moz-range-thumb { 
    background: var(--neon-teal); 
    box-shadow: 0 0 6px var(--neon-teal);
}
.daw-slider::-moz-range-thumb:hover { transform: scale(1.2); }

/* --- Fluid Kinetic Tracking Bubble --- */
.retro-bubble {
    background-color: var(--bubble-interior);
    border: 2px solid var(--text-charcoal);
    border-radius: 20px; padding: 2rem;
    display: flex; flex-direction: column;
    box-shadow: 6px 6px 0px var(--text-charcoal);
    position: sticky; 
    top: 140px;       
    height: fit-content; 
    min-height: auto;    
    align-self: start;   
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

body.studio-mode .retro-bubble { 
    background-color: #1c1f26; border-color: var(--daw-border); box-shadow: 6px 6px 0px var(--neon-purple); 
}

.bubble-header { display: flex; align-items: center; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(26,26,25,0.1); padding-bottom: 0.75rem; }
body.studio-mode .bubble-header { border-bottom-color: var(--daw-border); }

.bubble-status-light { width: 10px; height: 10px; background-color: var(--neon-green); border-radius: 50%; margin-right: 10px; animation: pulse 2s infinite; box-shadow: 0 0 8px var(--neon-green); }
.bubble-title { font-family: monospace; font-weight: 800; font-size: 0.8rem; letter-spacing: 1px; }

.bubble-content { display: block; }
#story-display { font-size: 1.05rem; color: var(--text-charcoal); font-weight: 500; line-height: 1.5; opacity: 1; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; }
body.studio-mode #story-display { color: #a5b0c2; }

.bubble-footer { font-family: monospace; font-size: 0.7rem; color: var(--text-muted); margin-top: 1.5rem; text-align: right; border-top: 1px solid rgba(26,26,25,0.04); padding-top: 0.5rem; }
body.studio-mode .bubble-footer { border-top-color: var(--daw-border); }

@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } }

/* --- Mechanical Control Triggers --- */
.btn-primary { display: inline-block; padding: 1rem 2.5rem; background: var(--text-charcoal); color: var(--bg-cream); text-decoration: none; font-weight: 700; border-radius: 6px; font-size: 0.95rem; letter-spacing: 0.5px; transition: all 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); background: #333; }

.btn-play { padding: 0.5rem 1.5rem; background: transparent; border: 2px solid var(--text-charcoal); color: var(--text-charcoal); font-weight: 700; border-radius: 24px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; }
body.studio-mode .btn-play { border-color: var(--daw-text); color: var(--daw-text); }
.btn-play:hover { background: var(--text-charcoal); color: var(--bg-cream); }
body.studio-mode .btn-play:hover { background: var(--daw-text); color: var(--daw-slate); }

/* --- Responsive Media Constraints --- */
@media (max-width: 1024px) {
    .bio-layout, .layout-2col { grid-template-columns: 1fr; gap: 3rem; }
    .bio-accent-frame { width: 320px; height: 320px; }
    header { padding: 1.5rem 2rem; }
    .section-container, .hero { padding: 4rem 2rem; }
    .daw-frame-left, .daw-frame-right { display: none; } 
    .hero-foreground-avatar { width: 55vw; opacity: 0.25; }
}

/* ==========================================================================
   UPDATED MOBILE OPTIMIZATION ENGINE (Calibrated for Touch Interface)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Global Spacing & Layout Constraints */
    header {
        padding: 1rem 1.25rem;
    }
    
    /* Shrinks navbar link spacing so the menu doesn't overflow on small viewports */
    nav a {
        margin-left: 1.25rem;
        font-size: 0.75rem;
    }
    
    .logo-wrapper {
        gap: 0.75rem;
    }
    
    .logo {
        font-size: 0.95rem;
        letter-spacing: 1.5px;
    }

    .section-container {
        padding: 4rem 1.25rem;
        min-height: auto;
    }
    
    .hero {
        padding: 0 1.25rem;
    }
    
    .hero h1 {
        font-size: 2.2rem;
        letter-spacing: -1px;
        max-width: 90%;
    }
    
    .hero p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    /* 2. Biography Component Stack */
    .bio-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bio-accent-frame {
        width: 100%;
        max-width: 280px;
        height: 280px;
    }

    /* 3. Re-Engineered Soundboard Channel Strips (Fixes the overlapping faders) */
    .dashboard-grid.layout-2col {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .player-panel {
        padding: 1rem 0.75rem;
    }
    
    .track-row {
        padding: 1.5rem 0;
        gap: 1.25rem;
    }

    /* Forces the mixer controls to cleanly break into individual lines */
    .track-controls-block {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem; /* Adds concrete breathing room between controls */
        margin-top: 0.5rem;
    }

    .slider-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    /* Gives the timeline slider a wide track layout with predictable spacing */
    .play-slider-container {
        flex: none;
        width: 100%;
    }

    /* Forces volume to its own line entirely so it can't squash the timestamps */
    .volume-container {
        width: 100%;
        padding-left: 2rem; /* Aligns slider track visually with the top slider */
    }

    /* Expands thumb hitbox size to make tracking effortless with fingers */
    .daw-slider {
        height: 8px;
        background: rgba(26, 26, 25, 0.15);
    }
    body.studio-mode .daw-slider { background: #2d333f; }

    .daw-slider::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }
    .daw-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    .time-stamp {
        min-width: 38px;
        font-size: 0.8rem;
    }

    /* 4. Non-sticky Context Panel Switch */
    .retro-bubble {
        position: relative;
        top: 0;
        padding: 1.25rem;
        border-radius: 12px;
    }

    /* 5. Landscape Mode Form Factor Safe Guards */
    @media (orientation: landscape) {
        .hero {
            padding-top: 6rem;
            min-height: 120vh; /* Adds scroll depth so content doesn't collide */
        }
        /* Lowers background avatar opacity when rotated so content remains clear */
        .hero-foreground-avatar {
            width: 30vw;
            opacity: 0.15;
        }
    }
}