/* =========================================
   1. RESET Y BASE
   ========================================= */
html.lenis { 
    height: auto; 
}
.lenis.lenis-smooth { 
    scroll-behavior: auto; 
}

body {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0; 
    padding: 0;
    cursor: none;
    overflow-x: hidden;
}

/* =========================================
   2. CUSTOM SCROLLBAR
   ========================================= */
::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: #0a0a0a; 
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 99px; 
    border: 2px solid #0a0a0a; 
}

::-webkit-scrollbar-thumb:hover { 
    background: rgba(255, 255, 255, 0.4); 
}

/* =========================================
   3. CURSOR PERSONALIZADO
   ========================================= */
.cursor-dot {
    width: 5px; height: 5px; background-color: white;
    position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 9999; pointer-events: none; mix-blend-mode: difference;
    /* Empieza invisible hasta que se mueva el ratón */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cursor-outline {
    width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.5);
    position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 9998; pointer-events: none; mix-blend-mode: difference;
    /* Animamos tamaño, fondo y la opacidad para que aparezca suavemente */
    transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.3s ease;
    opacity: 0;
}

body.hovering .cursor-outline {
    width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.2); border-color: transparent;
}

/* Ocultar cursor en el reproductor de vídeo */
body.hide-custom-cursor .cursor-dot,
body.hide-custom-cursor .cursor-outline {
    opacity: 0 !important;
}

/* Ocultar el cursor personalizado completamente en móviles/pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }
    
    body {
        cursor: auto !important;
    }
}

/* =========================================
   4. TIPOGRAFÍA Y ENLACES (MENÚ EDITORIAL)
   ========================================= */
.menu-link { 
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    width: 112px; 
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Regla exclusiva para los enlaces de la Home en ordenador */    
/* Aumentamos el tamaño de la fuente solo en el hover de la portada */
.menu-link.enlace-index:hover {
        font-size: 22px; 
}

.menu-link:hover { 
    font-family: 'Playfair Display', serif; 
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 16px; 
    letter-spacing: 0.05em;
}

/* =========================================
   5. ANIMACIONES GSAP Y EFECTOS
   ========================================= */
.reveal-wrap {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.reveal-wrap-line {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
    width: 100%;
}

.reveal {
    display: inline-block;
    transform: translateY(120%);
}

.scramble-text { 
    display: inline-block; 
    transition: color 0.3s ease;
}

/* =========================================
   6. COMPONENTES: PROYECTOS (INTERIORES)
   ========================================= */
.project-media {
    clip-path: inset(100% 0% 0% 0%);
}

.project-media img, .project-media video {
    transform: scale(1.05);
    width: 100%; height: 100%; object-fit: cover;
}

/* =========================================
   7. COMPONENTES: HOME (INDEX)
   ========================================= */
#bg-slider {
    clip-path: inset(100% 0% 0% 0%);
}

.slider-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    filter: grayscale(0%);
    transform: scale(1.05); 
    transition: opacity 0s ease; 
}

.slider-item.active-slide {
    opacity: 1; 
    z-index: 1;
}

/* =========================================
   8. COMPONENTES: ARCHIVE (PÁGINA WORKS)
   ========================================= */
.active-filter {
    color: #ffffff !important;
    border-bottom: 1px solid white;
}

.work-img-wrapper {
    overflow: hidden;
    background-color: #000;
}

.work-img-wrapper img {
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.7s ease;
}

.group:hover .work-img-wrapper img {
    opacity: 0.7;
}