:root {
    --timing-function--ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --timing-function--ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);

    --transition--duration: 300ms;
    --transition--timing-function: var(--timing-function--ease-in-out-quint);

    --aos--transition--duration: 800ms;
    --aos--transition--timing-function: var(--timing-function--ease-out-quint);
}

.wp-block-tantrachair-two-column-block {
    p,
    .wp-block-heading,
    .wp-block-buttons {
        will-change: opacity, filter, translate, transform;
        opacity: var(--aos--opacity, 1);
        filter: var(--aos--filter, blur(0));
        translate: var(--aos--translate, 0 0);
        transition-delay: var(--aos--transition--delay, 0);
        transition-property: opacity, filter, translate;
        transition-duration: var(--aos--transition--duration) !important;
        transition-timing-function: var(--aos--transition--timing-function) !important;
    }

    .wp-block-heading { --aos--transition--delay: 400ms }
    p { --aos--transition--delay: 600ms }
    .wp-block-buttons { --aos--transition--delay: 800ms }
}

.wp-block-cover {
    p,
    .wp-block-heading,
    .wp-block-buttons {
        will-change: opacity, filter, translate, transform;
        opacity: var(--aos--opacity, 1);
        filter: var(--aos--filter, blur(0));
        translate: var(--aos--translate, 0 0);
        transition-delay: var(--aos--transition--delay, 0);
        transition-property: opacity, filter, translate;
        transition-duration: var(--aos--transition--duration) !important;
        transition-timing-function: var(--aos--transition--timing-function) !important;
    }

    .wp-block-heading { --aos--transition--delay: 400ms }
    p { --aos--transition--delay: 600ms }
    .wp-block-buttons { --aos--transition--delay: 800ms }
}

.aos-init {
    --aos--opacity: 0;
    --aos--filter: blur(2px);
    --aos--translate: 0 100px;
    --aos--transition--delay: 200ms;
    --_transition--duration: var(--transition--duration);
    --_transition--timing-function: var(--transition--timing-function);

    will-change: opacity, filter, translate, transform;
    opacity: var(--aos--opacity, 0);
    filter: var(--aos--filter, blur(2px));
    translate: var(--aos--translate, 0 100px);
    transition-delay: var(--aos--transition--delay, 0);
    transition-duration: var(--_transition--duration) !important;
    transition-property: opacity, filter, translate;
    transition-timing-function: var(--_transition--timing-function) !important;

    & > * {
        transition-property: opacity, filter, translate;
        transition-duration: var(--aos--transition--duration);
        transition-timing-function: var(--aos--transition--timing-function) !important;
    }

    p,
    .wp-block-heading,
    .wp-block-buttons {
        --aos--opacity: 0;
        --aos--filter: blur(2px);
        --aos--translate: 50px 0;
    }
}

.aos-animate {
    --aos--opacity: 1;
    --aos--filter: blur(0);
    --aos--translate: 0 0;
    --_transition--duration: var(--aos--transition--duration);
    --_transition--timing-function: var(--aos--transition--timing-function);

    * {
        --aos--opacity: 1 !important;
        --aos--filter: blur(0) !important;
        --aos--translate: 0 0 !important;
    }
}

@media screen and (min-width: 769px) {
    .wc-block-product:nth-child(3n+1) { transition-delay: 100ms }
    .wc-block-product:nth-child(3n+2) { transition-delay: 200ms }
    .wc-block-product:nth-child(3n+3) { transition-delay: 300ms }

    .wp-block-post:nth-child(3n+1) { transition-delay: 100ms }
    .wp-block-post:nth-child(3n+2) { transition-delay: 200ms }
    .wp-block-post:nth-child(3n+3) { transition-delay: 300ms }
}

@keyframes move-out {
    from {
        opacity: 1;
        translate: 0 0;
    }
    to {
        opacity: 0.5;
        translate: 0 -35%;
    }
}

@keyframes move-in {
    from {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
    }
}

::view-transition-old(root) {
    animation: .5s cubic-bezier(0.87, 0, 0.13, 1) both move-out;
}

::view-transition-new(root) {
    animation: .5s cubic-bezier(0.87, 0, 0.13, 1) both move-in;
}