/* Filter button and image transition styling */
.gallery-filter-button {
    position: relative;
    overflow: hidden;
}

.gallery-filter-button.is-active {
    background: #fff;
    color: #17130a;
    box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.25), 0 12px 28px rgba(0,0,0,0.25);
}

.gallery-filter-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.25);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}

.gallery-filter-button.filter-clicked::after {
    animation: filterButtonSweep 520ms ease;
}

.tile-link {
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
    transform-origin: center top;
}

.tile-link.is-filter-hiding {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(3px) saturate(0.75);
    pointer-events: none;
}

.tile-link.is-hidden-by-filter {
    display: none;
}

.tile-link.is-filter-showing .tile {
    animation: filterImageIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.gallery.is-filtering .tile-link:not(.is-hidden-by-filter) .tile {
    will-change: transform, opacity, filter;
}

@keyframes filterImageIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
        filter: blur(4px) saturate(0.75);
    }
    65% {
        opacity: 1;
        transform: translateY(-3px) scale(1.015);
        filter: blur(0) saturate(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes filterButtonSweep {
    0% {
        transform: translateX(-120%) skewX(-20deg);
    }
    100% {
        transform: translateX(140%) skewX(-20deg);
    }
}