@font-face {
    src: url("https://fonts.cdnfonts.com/css/pp-neue-montreal") format("woff2");
    font-family: "PP Neue Montreal", sans-serif;
    font-weight: 400;
}

#xp-discover-section,
#xp-discover-section *,
#xp-discover-section *::before,
#xp-discover-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Variables propias de la sección */
#xp-discover-section {
    --warm-off-black: #000000;
    --warm-off-white: #ffffff;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: "PP Neue Montreal", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--warm-off-white);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--warm-off-black);
}

/* Efecto de ruido encapsulado */
#xp-discover-section::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent
    /* Texture Noise */
    /* url("https://traumaxp.com/good/img/noise-transparent.png") repeat 0 0; */;
    background-size: 300px 300px;
    animation: xp-discover-noise 0.3s steps(5) infinite;
    opacity: 0.9;
    will-change: transform;
    z-index: 1;
    pointer-events: none;
}

/* Keyframes renombrados */
@keyframes xp-discover-noise {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-2%, -3%);
    }

    20% {
        transform: translate(-4%, 2%);
    }

    30% {
        transform: translate(2%, -4%);
    }

    40% {
        transform: translate(-2%, 5%);
    }

    50% {
        transform: translate(-4%, 2%);
    }

    60% {
        transform: translate(3%, 0);
    }

    70% {
        transform: translate(0, 3%);
    }

    80% {
        transform: translate(-3%, 0);
    }

    90% {
        transform: translate(2%, 2%);
    }

    100% {
        transform: translate(1%, 0);
    }
}

/* Fondo principal */
#xp-discover-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

#xp-discover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

/* Contenedor principal */
.xp-discover-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor de proyectos */
.xp-discover-projects {
    width: 100%;
    position: relative;
    z-index: 2;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: none;

    /* Firefox */
    -ms-overflow-style: none;

    /* IE y Edge */
}

.xp-discover-projects::-webkit-scrollbar {
    display: none;
}

/* Ítems del proyecto */
.xp-discover-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(248, 245, 242, 0.1);
    cursor: pointer;
}

.xp-discover-title,
.xp-discover-year {
    font-size: 1.8rem;
    position: relative;
    z-index: 3;
    mix-blend-mode: exclusion;
}

/* Animación hover */
.xp-discover-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--warm-off-white);
    z-index: 1;
    transition: height 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
    pointer-events: none;
}

.xp-discover-item:hover::before {
    height: 100%;
}

.xp-discover-item:not(:hover)::before {
    transition-duration: 0.8s;
}

/* Responsivo */
@media (max-width: 768px) {
    .xp-discover-title,
    .xp-discover-year {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .xp-discover-item {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Ajustes mobile para la sección discover */
@media (max-width: 480px) {
    /* Contenedor de cada proyecto */
    #xp-discover-section .xp-discover-item {
        flex-direction: row;

        /* Mantener texto y año en la misma línea */
        justify-content: space-between;
        padding: 0.5rem 1rem;

        /* Evita que toque los bordes */
        gap: 0.5rem;
    }

    /* Título y año mobile */
    #xp-discover-section .xp-discover-title,
    #xp-discover-section .xp-discover-year {
        font-size: 1.2rem;

        /* Ajusta el tamaño para mobile */
        white-space: nowrap;

        /* Evita que los números bajen de línea */
        overflow: hidden;
        text-overflow: ellipsis;

        /* Recorta si es demasiado largo */
        line-height: 1.6;
    }

    /* Ajuste del contenedor de proyectos para que tenga padding lateral */
    #xp-discover-section .xp-discover-projects {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Antes 1.2-1.4, ahora más aire */
#xp-discover-section .xp-discover-title,
#xp-discover-section .xp-discover-year {
    line-height: 1.8;
}