/**
 * Scroll Snap Home - Estilos
 * @description Estilos para el sistema de scroll snap en la página home
 * @version 1.1.0
 * @note Solo activo en desktop (>= 992px)
 */

/* ========================================
   SCROLLBAR PERSONALIZADA (GLOBAL)
   ======================================== */

/* Scrollbar siempre visible */
html {
    overflow-y: scroll;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

::-webkit-scrollbar-thumb:active {
    background: #666666;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #c4c4c4 #f5f5f5;
}

/* ========================================
   SCROLL SNAP - SOLO DESKTOP (>= 992px)
   ======================================== */

@media (min-width: 992px) {

    /* ----------------------------------------
       ESTADO DE SNAPPING
       ---------------------------------------- */

    /**
     * Clase aplicada durante la animación de snap
     * Previene scroll involuntario durante la transición
     * NOTA: html mantiene overflow-y: scroll para que la scrollbar sea siempre visible
     */
    html.is-snapping:not(.no-scroll) {
        /* Mantener scrollbar visible, bloquear solo touch */
        overflow-y: scroll !important;
        touch-action: none !important;
    }

    body.is-snapping {
        overflow: hidden !important;
        touch-action: none !important;
        pointer-events: none;
        user-select: none;
    }

    /* Restaurar pointer-events en elementos críticos durante snap */
    body.is-snapping #header,
    body.is-snapping .bookNowBtn {
        pointer-events: auto;
    }

    /* ----------------------------------------
       SECCIONES SNAP
       ---------------------------------------- */

    /* Asegurar altura completa en secciones snap */
    #slider {
        min-height: 100dvh;
    }

    #welcomeSec {
        min-height: 100vh;
    }

    #skySec {
        min-height: 100vh;
    }

    #locationSec {
        min-height: 100vh;
    }

    /* ----------------------------------------
       TRANSICIONES SUAVES
       ---------------------------------------- */

    /* Transición suave para elementos durante snap */
    body.is-snapping #slider,
    body.is-snapping #apartmentsSec,
    body.is-snapping #apartmentThumbSec,
    body.is-snapping #skySec {
        will-change: transform;
    }

    /* ----------------------------------------
       INDICADOR DE SCROLL (OPCIONAL)
       ---------------------------------------- */

    /**
     * Indicador visual de que hay más contenido
     * Puede activarse añadiendo clase .show-scroll-indicator
     */
    .scroll-indicator {
        position: fixed;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 10;
    }

    body.home .scroll-indicator.visible {
        opacity: 1;
    }
}

/* ========================================
   DESKTOP PEQUEÑO (992px - 1920px)
   ======================================== */

@media (min-width: 992px) and (max-width: 1920px) {
    /* Ajustes específicos si son necesarios */
}

/* ========================================
   DESKTOP GRANDE (> 1920px)
   ======================================== */

@media (min-width: 1921px) {
    /* Ajustes específicos si son necesarios */
}