/* Active (visible in viewport) */
.image-tile-item.in-view {
    opacity: 1;
    /*transform: translateX(0);*/
}

/* Stagger delays for smoother reveal */
.image-tile-item:nth-child(1).in-view { transition-delay: 0.1s; }
.image-tile-item:nth-child(2).in-view { transition-delay: 0.3s; }
.image-tile-item:nth-child(3).in-view { transition-delay: 0.5s; }
.image-tile-item:nth-child(4).in-view { transition-delay: 0.7s; }

/* On mobile, fade in from bottom instead of right */
/*@media (max-width: 768px) {
    .image-tile-item {
        transform: translateY(20px);
    }
    .image-tile-item.in-view {
        transform: translateY(0);
    }
}*/

/* Remove blue highlight / tap flash on mobile */
.image-tile-item,
.image-tile-item img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

.image-tile-item:focus,
.image-tile-item img:focus {
    outline: none !important;
    box-shadow: none !important;
}

.image-tile-widget {
    display: flex;
    gap: 24px;
    overflow: hidden;
    width: 100%;
    height: 400px;
    --inactive-width: 15%;
    --inactive-height: 15%;
    --active-height: 400px;
    transition: all 0.5s ease;
}

.image-tile-item {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    /*opacity: 0;*/
    /*transform: translateX(20px);*/
    transition:
            /*opacity 0.8s ease,*/
            flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
            transform 0.6s ease,
            max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
}

.image-tile-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.image-tile-item.active {
    flex: calc((100% - (var(--inactive-width) * 3)) / 1); /* 3 other images */
}


@media (max-width: 768px) {
    .image-tile-widget {
        flex-direction: column;
        height: 100% !important;
    }

    .image-tile-item {
        flex: unset;
        transition: all 0.6s ease;
        max-height: 400px !important;
        height: 100%;
    }

    .image-tile-item.active {
        flex: unset;
        max-height: 400px;
    }

    .image-tile-widget:hover .image-tile-item:not(:hover) {
        max-height: 400px !important;
    }
}