/* ========================================== */
/* LU MUSIC PORTAL STYLES                     */
/* ========================================== */

/* Base page styling */
body {
    background-color: #050505;
    margin: 0;
    overflow-x: hidden;
}

/* 1. HERO SECTION: Holds the 3D Canvas */
/* This forces the glass to take up exactly one screen height */
.hero-section {
    width: 100%;
    height: 94vh; 
    position: relative; 
    display: block;
    z-index: 15;
}

/* 2. VIEWER CONTAINER: Absolute positioning inside Hero Section */
#viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
}

/* 3. TITLE OVERLAY */
#ui-title {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    color: #fff;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    font-family: sans-serif;
    font-size: 2rem;
    display: none; /* Hidden per your design preference */
}

/* 4. INTERVAL TEXT SECTION */
.interval {
    position: relative;
    z-index: 10;
    background-color: #050505; 
    padding: 100px 20px;
}

/* 5. FOOTER STYLING */
footer {
    position: relative;
    z-index: 10;
    background-color: #000; 
}

/* 6. NEON TRAIL CLIPPER (Fixes the text bleed without breaking 3D zoom) */
.trail-clipper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden; 
    z-index: 5;
    pointer-events: none;
}

/* 7. NEON TRAIL CANVAS STYLING */
#lumusic_trail_canvas {
    /* ========================================== */
    /* 🛠�EASY MASK CONTROLS: CHANGE THESE NUMBERS */
    /* ========================================== */
    --mask-width: 25%;   /* How wide the invisible hole is */
    --mask-height: 45%;  /* How tall the invisible hole is */
    --mask-fade: 100%;   /* 100% = ultra-soft fade, 60% = harder edge */
    /* ========================================== */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: screen; 
    filter: saturate(0.9) contrast(1.5) brightness(1.0);
    
    /* The dynamic mask powered by your controls above */
    -webkit-mask-image: radial-gradient(ellipse var(--mask-width) var(--mask-height) at center, transparent 20%, black var(--mask-fade));
    mask-image: radial-gradient(ellipse var(--mask-width) var(--mask-height) at center, transparent 20%, black var(--mask-fade));
}

/* ========================================== */
/* 8. COMPACT SCROLL DOWN BUTTON              */
/* ========================================== */
.scroll-down {
    position: absolute !important; /* Forces the button to position relative to the screen/section */
    left: 50% !important;          /* Moves the left edge to the middle */
    bottom: -5% !important;         /* Anchors it to the bottom of the section */
    z-index: 20 !important;        /* Ensures it sits on top of the 3D canvas */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 1. Shrinks the gap between the mouse icon and the "SCROLL DOWN" text */
    gap: 4px !important; 
    
    /* 2. Shrinks the top/bottom and left/right size of the glass pad itself */
    padding: 12px 30px !important; 
    
    /* Removes old margins */
    margin: 0 !important; 

    /* 3. Pulls it exactly to the center horizontally (-50%) */
    transform: translateX(-50%) !important;
    cursor: pointer;
}

/* Force removal of any hidden margins inside the button */
.scroll-down svg {
    margin: 0 !important; 
}

.scroll-down .scroll-label {
    margin: 0 !important;
    font-size: 0.85rem !important; 
}