/**
 * Zoom Scroll Animation Styles
 */

/* Wrapper */
.wml-zs-wrapper {
    position: relative;
    min-height: 400vh;
}

/* Grid Container */
.wml-zs-grid {
    display: grid;
    grid: repeat(4, 25dvh) / repeat(4, 25dvw);
    place-items: center;
    block-size: 100svh;
    perspective: 1000px;
    transform-style: preserve-3d;
    position: sticky;
    top: 0;
    overflow: clip;
}

/* Grid Items */
.wml-zs-item {
    transform-style: preserve-3d;
    font-size: 5vmin;
    font-weight: lighter;
    text-wrap: nowrap;
    white-space: nowrap;
    color: white;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

/* Special/Center Item */
.wml-zs-item.wml-zs-special {
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
}

.wml-zs-item.wml-zs-special b {
    font-size: 15vmin;
    font-weight: bold;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .wml-zs-item {
        font-size: 4vmin;
    }
    
    .wml-zs-item.wml-zs-special b {
        font-size: 12vmin;
    }
}

@media screen and (max-width: 480px) {
    .wml-zs-item {
        font-size: 3.5vmin;
    }
    
    .wml-zs-item.wml-zs-special b {
        font-size: 10vmin;
    }
}

/* Builder Preview - show items normally */
.bricks-is-builder .wml-zs-item {
    opacity: 1 !important;
    filter: none !important;
    transform: translateZ(0) !important;
}

.bricks-is-builder .wml-zs-grid {
    position: relative;
    block-size: auto;
    min-height: 100svh;
}

.bricks-is-builder .wml-zs-wrapper {
    min-height: auto !important;
}