/* Scroll
   ========================================================================== */
@supports (animation-timeline: view(block)) {
    /* Fade-in up */
    .sym-scroll-fade-in-up {
        will-change: transform, opacity, filter;
        animation: sym-scroll-fade-in-up 1ms linear both;
        animation-timeline: view(block);
        animation-range: entry 0% entry calc(30% + var(--wp--preset--spacing--xxx-large));
    }
    @keyframes sym-scroll-fade-in-up {
        0% {
            opacity: 0;
            transform: translateY(60px);
            filter: blur(3px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* Clip */
    .sym-scroll-clip {
        clip-path: inset(0);
        will-change: clip-path;
        animation: sym-scroll-clip 1ms linear both;
        animation-timeline: view(block);
        animation-range: exit calc(90% - var(--wp--preset--spacing--xxx-large)) exit 90%;
    }
    @keyframes sym-scroll-clip {
        100% {
            clip-path: inset(0px var(--wp--preset--spacing--x-small) round var(--wp--preset--border-radius--large));
        }
    }

    /* Unclip */
    .sym-scroll-unclip {
        clip-path: inset(var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--x-small) round var(--wp--preset--border-radius--large));
        will-change: clip-path;
        animation: sym-scroll-unclip 1ms linear both;
        animation-timeline: view(block);
        animation-range: entry 50% entry calc(50% + var(--wp--preset--spacing--xxx-large));
    }
    @keyframes sym-scroll-unclip {
        100% {
            clip-path: inset(0);
        }
    }
}

/* Scroll card stack
   ========================================================================== */
*:has(>.sym-scroll-card-stack) {
    position: relative;
}

.sym-scroll-card-stack {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0);
    transition: transform 0.3s ease-out;
}

/* Scale on hover
   ========================================================================== */
.sym-scale-on-hover {
    transition: transform 0.15s ease;
    &:hover {
        transform: scale(1.0075);
    }
}

.sym-scale-on-hover-large {
    transition: transform 0.15s ease;
    &:hover {
        transform: scale(1.02);
    }
}