/* ==========================================================
   Portfolio "Mosaic": tutti i lavori insieme, selezione una ad una
   ========================================================== */

.works-grid[data-pf="mosaic"] {
    display: block;
}

.ms {
    position: relative;
    height: max(320px, calc(100vh - 420px));
    height: max(320px, calc(100dvh - 420px));
    perspective: 1200px;
}

.ms-tile {
    position: absolute;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(203, 211, 231, 0.1);
    border-radius: 8px;
    background: rgb(2, 8, 20);
    cursor: pointer;
    opacity: 0;
    animation: ms-in 0.7s var(--ease-out) forwards;
    animation-delay: calc(var(--n, 0) * 45ms);
    transition:
        transform 0.5s var(--ease-out),
        filter 0.5s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        left 0.6s var(--ease-out), top 0.6s var(--ease-out),
        width 0.6s var(--ease-out), height 0.6s var(--ease-out);
}

@keyframes ms-in {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}

.ms-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.8s var(--ease-out);
}

/* Mentre ne selezioni una, le altre si attenuano */
.ms:has(.ms-tile:hover) .ms-tile:not(:hover),
.ms:has(.ms-tile:focus-visible) .ms-tile:not(:focus-visible) {
    filter: brightness(0.45) saturate(0.6);
}

.ms-tile:hover,
.ms-tile:focus-visible {
    z-index: 2;
    border-color: rgba(110, 225, 255, 0.75);
    box-shadow:
        0 0 0 1px rgba(110, 225, 255, 0.35),
        0 0 40px rgba(110, 225, 255, 0.28),
        0 24px 50px rgba(0, 0, 0, 0.6);
    transform: scale(1.04);
    outline: none;
}

.ms-tile:hover img,
.ms-tile:focus-visible img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .ms {
        height: max(360px, calc(100dvh - 330px));
    }

    .ms-tile {
        border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-tile {
        animation-duration: 0.01s;
        transition-duration: 0.2s;
    }
}

/* Dispositivi touch: scorrendo non si "seleziona" nessuna anteprima e le altre non si scuriscono */
@media (hover: none) {
    .ms:has(.ms-tile:hover) .ms-tile:not(:hover),
    .ms:has(.ms-tile:focus-visible) .ms-tile:not(:focus-visible) {
        filter: none;
    }

    .ms-tile:hover,
    .ms-tile:focus-visible {
        border-color: rgba(203, 211, 231, 0.1);
        box-shadow: none;
        transform: none;
    }

    .ms-tile:hover img,
    .ms-tile:focus-visible img {
        transform: none;
    }
}