/* ========================================
   SLIDER DE PROYECTOS
   Litl Studio Website
   
   - Slider fullscreen FIXED
   - Transiciones suaves desde abajo
   - Dots de navegación vertical
   - Responsive con imágenes adaptativas
   ======================================== */

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

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

.slider__container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ==================
   SLIDES
   ================== */

.slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Estado inicial: fuera de vista (abajo) */
    opacity: 0;
    transform: translateY(100%);
    
    /* Transición suave */
    transition: transform var(--timing-slow) var(--ease-smooth),
                opacity var(--timing-slow) ease;
    
    /* Optimización */
    will-change: transform, opacity;
}

/* Slide activo */
.slider__slide.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 10;
}

/* Slide anterior (para transición suave) */
.slider__slide.previous {
    opacity: 1;
    transform: translateY(0);
    z-index: 5;
}

/* ==================
   IMAGEN DE FONDO
   ================== */

.slider__bg {
    width: 100%;
    height: 100%;
}

.slider__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==================
   CONTENIDO DEL SLIDE
   ================== */

.slider__content {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 500px;
    z-index: 20;
    
    /* Spacing interno */
    padding: 2rem 0;
}

.slider__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: var(--line-height-tight);
    
    /* Animación de entrada */
    animation: fadeInUp 0.8s var(--ease-smooth) 0.2s both;
}

.slider__subtitle {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-light);
    margin-bottom: 2rem;
    line-height: var(--line-height-normal);
    
    /* Animación de entrada */
    animation: fadeInUp 0.8s var(--ease-smooth) 0.4s both;
}

/* ==================
   BOTÓN VER PROYECTO
   ================== */

.slider__button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 2px solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    text-transform: lowercase;
    letter-spacing: 0.05em;
    
    transition: all var(--timing-medium) var(--ease-smooth);
    cursor: none; /* Cursor personalizado */
    
    /* Animación de entrada */
    animation: fadeInUp 0.8s var(--ease-smooth) 0.6s both;
}

.slider__button:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    transform: translateY(-2px);
}

/* ==================
   DOTS DE NAVEGACIÓN
   ================== */

.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) !important;
    pointer-events: auto;
}

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

.slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(51, 51, 51, 0.3);
    border: none;
    padding: 0;
    cursor: none;
    
    transition: all var(--timing-medium) var(--ease-smooth);
}

.slider__dot.active {
    background: var(--color-accent);
    transform: scale(1.3);
}

.slider__dot:hover {
    background: var(--color-accent);
    opacity: 0.7;
}

/* ==================
   ANIMACIONES
   ================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Tablet */
@media (max-width: 1024px) {
    .slider__content {
        left: 5%;
        max-width: 450px;
        padding: 1.5rem 0;
    }
    
    .slider__button {
        padding: 0.875rem 2rem;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .slider__content {
        left: 5%;
        right: 5%;
        max-width: none;
        padding: 2rem 1rem;
    }
    
    .slider__title {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .slider__subtitle {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    
    .slider__button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
    
    /* Dots más pequeños en mobile */
    .slider__dots {
        right: 5% !important;
        gap: 1rem;
    }
    
    .slider__dot {
        width: 8px;
        height: 8px;
    }
}

/* Mobile muy pequeño */
@media (max-width: 375px) {
    .slider__content {
        padding: 1.5rem 0.5rem;
    }
    
    .slider__title {
        font-size: 1.75rem;
    }
    
    .slider__subtitle {
        font-size: 1.1rem;
    }
}