/* components/work-carousel/work-carousel.css
   Medidas tomadas de la vista /work de resn.co.nz (lienzo de 1920×1080). */

/* --z, --rx y --ry los actualiza el JS: profundidad e inclinación 3D del póster */
.work-carousel {
    --z: 0px;
    --rx: 0deg;
    --ry: 0deg;
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    perspective: 500px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}

.work-carousel.is-dragging {
    cursor: grabbing;
}

/* ---------- Póster ---------- */

.work-poster {
    --scrim: 0.3;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(78.125vw, 145vh);
    aspect-ratio: 2.2 / 1;
    margin: 0;
    background: #111;
    outline: 1px solid transparent; /* suaviza los bordes al inclinarse en 3D */
    transform: translate(-50%, -50%) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    will-change: transform;
    transition: background-color 0.7s 0.1s var(--ease);
}

.work-poster__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
    pointer-events: none;
}

.work-poster__img.is-active {
    visibility: visible;
}

/* Velo que oscurece el póster: más oscuro cuanto más clara es la captura
   (lo calcula sampleScrim en el JS), para que el título blanco siempre se lea. */
.work-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / var(--scrim));
    pointer-events: none;
}

.work-poster__img,
.work-poster::after {
    transition: opacity 0.7s 0.1s var(--ease);
}

/* Al arrastrar, el póster desaparece y vuelve al elegir un proyecto (clase is-away).
   La opacidad va en la imagen y el velo, no en el figure, que ya tiene la animación de entrada. */
.work-carousel.is-away .work-poster {
    background-color: transparent;
    transition-duration: 0.35s;
    transition-delay: 0s;
}

.work-carousel.is-away .work-poster__img,
.work-carousel.is-away .work-poster::after {
    opacity: 0;
    transition-duration: 0.35s;
    transition-delay: 0s;
}

/* ---------- Tira de títulos ---------- */

.work-track {
    position: absolute;
    inset: 0;
    z-index: 2;
    list-style: none;
    pointer-events: none;
}

/* Ocultos hasta que el JS arma el carrusel (y sin JS, para que no queden flechas sueltas) */
.work-carousel:not(.is-ready) .work-track,
.work-carousel:not(.is-ready) .work-controls {
    visibility: hidden;
}

/* --x lo actualiza el JS: posición horizontal de cada título */
.work-item {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 3.125rem;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    transform: translate3d(calc(-50% + var(--x, 0px)), -50%, 0);
    will-change: transform, opacity;
}

/* El título activo no captura el mouse: el click cae en el póster y abre el proyecto */
.work-item.is-active {
    pointer-events: none;
}

.work-title {
    position: relative;
    padding: 0 0.1em;
    font-size: clamp(2.5rem, 3.385vw, 7.5rem);
    font-weight: 200;
    line-height: 1.415;
    letter-spacing: -0.02em;
    transition: opacity 0.4s var(--ease);
}

.work-title a {
    color: #fff;
    text-decoration: none;
}

/* Efecto de texto: mientras se ve el canvas, el texto real queda transparente */
.work-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.work-title.has-fx a {
    color: transparent;
}

.work-client {
    position: absolute;
    right: 0;
    bottom: 1.5rem;
    left: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

/* Reposo: solo el título. Con el cursor encima (o el foco del teclado) aparece el cliente
   y los títulos vecinos se atenúan. Mientras se arrastra se ve el cliente de todos, en gris. */
@media (hover: hover) {
    .work-carousel:hover:not(.is-dragging) .work-item:not(.is-active) .work-title {
        opacity: 0.3;
    }

    .work-carousel:hover:not(.is-dragging) .work-item.is-active .work-client {
        opacity: 1;
    }
}

.work-carousel:focus-within:not(.is-dragging) .work-item.is-active .work-client {
    opacity: 1;
}

.work-carousel.is-dragging .work-client {
    opacity: 0.55;
}

/* En táctil no hay hover: el cliente del proyecto activo queda siempre visible */
@media (hover: none) {
    .work-item.is-active .work-client {
        opacity: 1;
    }
}

/* ---------- Flechas (indican el arrastre y también son botones) ---------- */

.work-controls {
    position: absolute;
    z-index: 3;
    top: 90%;
    left: 50%;
    display: flex;
    transform: translate(-50%, -50%);
}

.work-arrow {
    position: relative;
    width: 3rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    opacity: 0.5; /* mínimo para cumplir el contraste de controles (WCAG 1.4.11) */
    cursor: pointer;
    transition: opacity 0.4s var(--ease);
}

.work-arrow:hover,
.work-arrow:focus-visible {
    opacity: 1;
}

/* ::before es la línea y ::after la punta de la flecha */
.work-arrow::before,
.work-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
}

.work-arrow::before {
    width: 31px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}

.work-arrow::after {
    width: 9px;
    height: 9px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
}

.work-arrow--prev::before {
    right: 0;
}

.work-arrow--prev::after {
    left: 18.9px;
    transform: translateY(-50%) rotate(-45deg);
}

.work-arrow--next::before {
    left: 0;
}

.work-arrow--next::after {
    left: 20.1px;
    transform: translateY(-50%) rotate(135deg);
}

/* Al arrastrar solo queda la flecha del sentido en que se arrastra */
.work-carousel.is-dragging .work-arrow {
    opacity: 0;
}

.work-carousel.is-dragging[data-dir="left"] .work-arrow--prev,
.work-carousel.is-dragging[data-dir="right"] .work-arrow--next {
    opacity: 1;
}

/* ---------- Contador ---------- */

.work-count {
    position: absolute;
    z-index: 3;
    bottom: 2.2rem;
    left: 3vw;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Entrada ---------- */

@keyframes work-poster-in {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes work-rise-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes work-fade-in {
    from { opacity: 0; }
}

.work-carousel.is-ready .work-poster {
    animation: work-poster-in 1.1s var(--ease) both;
}

.work-carousel.is-ready .work-title {
    animation: work-rise-in 1s 0.35s var(--ease) both;
}

.work-carousel.is-ready .work-controls,
.work-carousel.is-ready .work-count {
    animation: work-fade-in 1s 0.8s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .work-poster,
    .work-poster__img,
    .work-poster::after,
    .work-title,
    .work-client,
    .work-arrow {
        transition: none;
    }

    .work-carousel.is-ready .work-poster,
    .work-carousel.is-ready .work-title,
    .work-carousel.is-ready .work-controls,
    .work-carousel.is-ready .work-count {
        animation: none;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
    .work-poster {
        width: min(84vw, 145vh);
    }
}

@media (max-width: 768px) {
    /* Con poco ancho el póster apaisado queda diminuto: se hace más alto y se recorta al centro */
    .work-poster {
        width: 92vw;
        aspect-ratio: 1.45 / 1;
    }

    .work-title {
        font-size: clamp(2.5rem, 11vw, 4rem);
    }

    .work-controls {
        top: 86%;
    }

    .work-count {
        bottom: 1.4rem;
        left: 5vw;
    }
}

/* Pantallas bajas (celular apaisado): se achica todo para que no se tape con los controles */
@media (max-height: 520px) {
    .work-poster {
        width: min(70vw, 120vh);
    }

    .work-title {
        font-size: clamp(1.75rem, 6vh, 3rem);
    }

    .work-controls {
        top: 88%;
    }
}