/* ========================================
   SCROLL LAYERS SYSTEM
   Litl Studio Website
   
   - Secciones en capas fijas con z-index
   - Blur cuando una sección solapa a otra
   - Smooth scroll entre secciones
   ======================================== */

/* ==================
   HTML & BODY SETUP
   ================== */

   html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

/* Ocultar scrollbar visualmente pero mantener funcionalidad */
/* Firefox */
html {
    scrollbar-width: none;
}

/* Chrome, Safari, Edge */
html::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* IE y Edge legacy */
body {
    -ms-overflow-style: none;
}

/* ==================
   WRAPPER PARA SCROLL
   ================== */

main {
    position: relative;
}

/* ==================
   SLIDER - CAPA BASE (FIXED)
   ================== */

.slider {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100 !important;
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease;
}

/* Slider con blur cuando se solapa */
.slider.blurred {
    filter: blur(8px);
    opacity: 0.7;
}

/* ==================
   SECCIÓN ABOUT - SEGUNDA CAPA
   ================== */

.section--about {
    position: relative !important;
    margin-top: 100vh !important; /* Empieza después del viewport del slider */
    z-index: 200 !important;
    background: var(--color-bg) !important;
    min-height: 100vh !important;
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease;
}

/* About con blur cuando Contact la solapa */
.section--about.blurred {
    filter: blur(8px);
    opacity: 0.7;
}

/* ==================
   SECCIÓN CONTACT - TERCERA CAPA
   ================== */

.section--contact {
    position: relative !important;
    z-index: 300 !important;
    background: var(--color-bg) !important;
    min-height: 100vh !important;
}

/* ==================
   DOTS - FADE OUT AL SCROLL
   ================== */

.slider__dots {
    position: fixed !important;
    right: 3% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    
    z-index: 150 !important;
    
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

/* Dots ocultos cuando se hace scroll fuera del slider */
.slider__dots.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 767px) {
    .slider__dots {
        right: 5% !important;
        gap: 1rem;
    }
}