/* ======================================================================================================================================================
Wall
====================================================================================================================================================== */
#top div .wall {
    position: relative;
    width: 100%;
    height: var(--size);
    display: block;
    overflow: hidden;
    perspective: calc( var( --perspective, 1200 ) * 1px );
    perspective-origin: 50% 50%;
    -webkit-mask-image:
        radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--edge), transparent 100%),
        linear-gradient(to top, #000 var(--edge), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--edge), transparent 100%),
        linear-gradient(to top, #000 var(--edge), transparent 100%);
    mask-composite: intersect;
}
#top div .wall .plane {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: row;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform;
}

#top div .wall .col {
    position: relative;
    width: calc( ( var( --width ) + var( --gap ) ) * 1px );
    transform-style: preserve-3d;
}

#top div .wall .track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform-style: preserve-3d;
}

#top div .wall .tile {
    position: relative;
    display: block;
    width: 100%;
    height: calc( ( var( --height ) + var( --gap ) ) * 1px );
    flex: 0 0 auto;
    outline: none;
    transform-style: preserve-3d;
}

#top div .wall .inner {
    position: absolute;
    inset: calc( ( var( --gap ) / 2 ) * 1px );
    display: block;
    border-radius: calc( var( --corner ) * 1px );
    overflow: hidden;
    background: #0b0b12;
    opacity: var( --dim );
    transform: translateZ(0);
    pointer-events: none;
    transition:
        transform 0.42s cubic-bezier( 0.22, 1, 0.36, 1 ),
        opacity 0.42s cubic-bezier( 0.22, 1, 0.36, 1 ),
        box-shadow 0.42s cubic-bezier( 0.22, 1, 0.36, 1 );
}

#top div .wall .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale( var( --gray ) ) saturate( 0.92 );
    transition: filter 0.42s cubic-bezier( 0.22, 1, 0.36, 1 );
    user-select: none;
    -webkit-user-drag: none;
}

#top div .wall .overlay {
    position: absolute;
    inset: 0;
    background: var( --overlay );
    opacity: 0.42;
    pointer-events: none;
    transition: opacity 0.42s cubic-bezier( 0.22, 1, 0.36, 1 );
}

#top div .wall .tile.is-active .inner {
    opacity: 1;
    transform: translateZ( calc( var( --lift ) * 1px ) );
    box-shadow: 0 24px 60px -18px rgba( 0, 0, 0, 0.7 );
}

#top div .wall .tile.is-active img {
    filter: grayscale( 0 ) saturate( 1.05 );
}

#top div .wall .tile.is-active .overlay {
    opacity: 0;
}