/*@keyframes grow-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

#progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: .25em;
    background: red;
    transform-origin: 0 50%;
    animation: grow-progress auto linear;
    animation-timeline: scroll();
    opacity: .5;
    z-index: 3;
}
}*/

@keyframes translate-off-screen{
    from{
        transform: translateX(-2000px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .translate-off-screen {
        animation: translate-off-screen linear both;
        animation-timeline: view(90vh 0vh);
        animation-range: 5vh 75vh;
    }
}


@keyframes scale-a-lil {
    from {
        scale: .7;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .scale-a-lil {
        animation: scale-a-lil linear both;
        animation-timeline: view(90vh 0vh);
        animation-range: 25vh 75vh;
    }
}

@keyframes scale-more {
    from {
        scale: .8;
    }
    to {
        scale: 1.2;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .scale-more {
        animation: scale-more linear both;
        animation-timeline: view(90vh 0vh);
        animation-range: 15vh 50vh;
    }
}




[data-ssc] {
    transition-property: opacity, transform;
    transition-duration: 1s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-timeline: view();
}

[data-ssc-exit] {
    animation-range: exit;
}

[data-ssc-instant] {
    animation-timeline: unset;
}



[data-ssc="fade-in"] {
    animation-name: fadeIn;
    
}

[data-ssc="fade-out"] {
    animation-name: fadeOut;
}

[data-ssc="fade-up"] {
    animation-name: fadeUp;
}

[data-ssc="fade-down"] {
    animation-name: fadeDown;
}

[data-ssc="fade-left"] {
    animation-name: fadeLeft;
}

[data-ssc="fade-right"] {
    animation-name: fadeRight;
}

[data-ssc="fade-up-left"] {
    animation-name: fadeUpLeft;
}

[data-ssc="fade-up-right"] {
    animation-name: fadeUpRight;
}

[data-ssc="fade-down-left"] {
    animation-name: fadeDownLeft;
}

[data-ssc="fade-down-right"] {
    animation-name: fadeDownRight;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeUp {
    from {
        transform: translate3d(0, 100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeDown {
    from {
        transform: translate3d(0, -100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeRight {
    from {
        transform: translate3d(-100px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeLeft {
    from {
        transform: translate3d(100px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeUpLeft {
    from {
        transform: translate3d(100px, 100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeUpRight {
    from {
        transform: translate3d(-100px, 100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeDownLeft {
    from {
        transform: translate3d(100px, -100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeDownRight {
    from {
        transform: translate3d(-100px, -100px, 0);
        opacity: 0;
    }

    to {
        transform: translateZ(0);
        opacity: 1;
    }
}



[data-ssc="flip-"] {
    transform: perspective(2500px) rotate(0);
    backface-visibility: hidden;
    transition-property: transform;
}

[data-ssc="flip-left"] {
    animation-name: flipLeft;
}

[data-ssc="flip-right"] {
    animation-name: flipRight;
}

[data-ssc="flip-up"] {
    animation-name: flipUp;
}

[data-ssc="flip-down"] {
    animation-name: flipDown;
}


@keyframes flipLeft {
    from {
        transform: perspective(2500px) rotateY(-100deg);
    }

    to {
        transform: perspective(2500px) rotateY(0);
    }
}

@keyframes flipRight {
    from {
        transform: perspective(2500px) rotateY(100deg);
    }

    to {
        transform: perspective(2500px) rotateY(0);
    }
}

@keyframes flipUp {
    from {
        transform: perspective(2500px) rotateX(-100deg);
    }

    to {
        transform: perspective(2500px) rotateX(0);
    }
}

@keyframes flipDown {
    from {
        transform: perspective(2500px) rotateX(100deg);
    }

    to {
        transform: perspective(2500px) rotateX(0);
    }
}



[data-ssc^="zoom"] {
    transition-property: opacity, transform;
}

[data-ssc="zoom-in"] {
    animation-name: zoomIn;
}

[data-ssc="zoom-in-up"] {
    animation-name: zoomInUp;
}

[data-ssc="zoom-in-down"] {
    animation-name: zoomInDown;
}

[data-ssc="zoom-in-left"] {
    animation-name: zoomInLeft;
}

[data-ssc="zoom-in-right"] {
    animation-name: zoomInRight;
}


[data-ssc="zoom-out"] {
    animation-name: zoomOut;
}

[data-ssc="zoom-out-up"] {
    animation-name: zoomOutUp;
}

[data-ssc="zoom-out-down"] {
    animation-name: zoomOutDown;
}

[data-ssc="zoom-out-left"] {
    animation-name: zoomOutLeft;
}

[data-ssc="zoom-out-right"] {
    animation-name: zoomOutRight;
}

[data-ssc="scroll-in-right"] {
    animation-name: scrollInRight;
    animation-timing-function: linear;
    animation-timeline: view(70vh 0);
}

[data-ssc="scroll-in-left"] {
    animation-name: scrollInLeft;
    animation-timing-function: linear;
    animation-timeline: view(70vh 0);
}


@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100px, 0) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: translate3d(300px, 0, 0) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: translate3d(-300px, 0, 0) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}


@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomOutUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0) scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomOutDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100px, 0) scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomOutLeft {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0) scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes zoomOutRight {
    from {
        opacity: 0;
        transform: translate3d(-100px, 0, 0) scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes scrollInLeft {
    from {
        transform: translate3d(400px, 0, 0);
    }

    to {
        transform: translateZ(0);
    }
}

@keyframes scrollInRight {
    from {        
        transform: translate3d(-300px, 0, 0);
    }

    to {
        transform: translateZ(0);
    }
}