/* 

    ------------------------------------
    ---------- STB-ANIMATIONS ----------
    ------------------------------------

    classes to control animation states: 
    
    .stb-animation-active
    .stb-animation-exit
*/

.stb-animation--scroll-to-next-frame-trigger{
    position: absolute; 
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* 
    ------------------------------------
    ---------- INTRO-ANIMATIONS --------
    ------------------------------------
*/

/* FADE-IN-UP */
.stb-animation--fade-in-up {
    transition: 1s ease;
    opacity: 0;
    transform: translateY(100px);
    pointer-events: none;
}

.stb-animation--fade-in-up.stb-animation-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* MASK SLIDE-OUT */
.stb-animation--mask-slide-out {
    transition: 2.25s ease;
    clip-path: inset(0 0 0 0);
}

.stb-animation--mask-slide-out.stb-animation-active {
    clip-path: inset(0 100% 0 0);
}

/* CLOSEUP ZOOM-OUT */
.stb-animation--closeup-zoom-out {
    transition: 1s ease;
    transform: scale(2);
}

.stb-animation--closeup-zoom-out.stb-animation-active {
    transform: scale(1.5);
    height: 50%;
}

/* OBJECT-POSITION-SHIFT TOP */
.stb-animation--object-position-shift-top {
    transition: 1s;
}

.stb-animation--object-position-shift-top.stb-animation-active {
    object-position: top;
}

/* FADE-IN */
.stb-animation--fade-in {
    transition: all 1s ease;
    opacity: 0;
    pointer-events: none;
}

.stb-animation--fade-in.stb-animation-active {
    opacity: 1;
    pointer-events: all;
}

/* ZOOM-IN */
.stb-animation--zoom-in {
    transition: 1s ease;
}

.stb-animation--zoom-in.stb-animation-active {
    transform: scale(3);
    opacity: 0;
    pointer-events: none;

}

/* MAGNIFY */
.stb-animation--magnify {
    transition: 1s ease;
    transform: scale(0.5) translateY(300px);
    opacity: 0;
    pointer-events: none;
}

.stb-animation--magnify.stb-animation-active {
    transform: scale(1) translateY(0);
    pointer-events: all;
    opacity: 1;
}

/* FADE-IN-GROW */
.stb-animation--fade-in-grow {
    transition: opacity 2s ease, max-height 2s ease, margin .5s ease, padding .5s ease;
    max-height: 0px;
    overflow: hidden;
    height: fit-content;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.stb-animation--fade-in-grow.stb-animation-active {
    max-height: 300px;
    opacity: 1;
}

.stb-animation--fade-in-grow.stb-animation-active.mt1{margin-top: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.mb1{margin-bottom: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.ml1{margin-left: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.mr1{margin-right: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.mt2{margin-top: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.mb2{margin-bottom: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.ml2{margin-left: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.mr2{margin-right: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.mt3{margin-top: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.mb3{margin-bottom: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.ml3{margin-left: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.mr3{margin-right: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.mt4{margin-top: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.mb4{margin-bottom: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.ml4{margin-left: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.mr4{margin-right: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.pt1{padding-top: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.pb1{padding-bottom: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.pl1{padding-left: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.pr1{padding-right: var(--space-1);}
.stb-animation--fade-in-grow.stb-animation-active.pt2{padding-top: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.pb2{padding-bottom: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.pl2{padding-left: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.pr2{padding-right: var(--space-2);}
.stb-animation--fade-in-grow.stb-animation-active.pt3{padding-top: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.pb3{padding-bottom: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.pl3{padding-left: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.pr3{padding-right: var(--space-3);}
.stb-animation--fade-in-grow.stb-animation-active.pt4{padding-top: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.pb4{padding-bottom: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.pl4{padding-left: var(--space-4);}
.stb-animation--fade-in-grow.stb-animation-active.pr4{padding-right: var(--space-4);}

/* WIDTH-ZOOM-IN */
.stb-animation--width-zoom-in {
    transition: 1.5s ease;
    width: 100%;
    height: 100vh;
    object-position: top;
}

.stb-animation--width-zoom-in.stb-animation-active {
    width: 200%;
    left: -50%;
}

/* ACCORDION-GROW */
.stb-animation--accordion-grow {
    transition: max-height 3s ease, margin .8s ease, padding .8s ease;
    overflow: hidden;
    /* transform: translateY(100%); */
    max-height: 0vh;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.stb-animation--accordion-grow.stb-animation-active {
    max-height: 100vh;

}
.stb-animation--accordion-grow.stb-animation-active.mt1{margin-top: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.mb1{margin-bottom: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.ml1{margin-left: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.mr1{margin-right: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.mt2{margin-top: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.mb2{margin-bottom: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.ml2{margin-left: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.mr2{margin-right: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.mt3{margin-top: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.mb3{margin-bottom: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.ml3{margin-left: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.mr3{margin-right: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.mt4{margin-top: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.mb4{margin-bottom: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.ml4{margin-left: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.mr4{margin-right: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.pt1{padding-top: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.pb1{padding-bottom: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.pl1{padding-left: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.pr1{padding-right: var(--space-1);}
.stb-animation--accordion-grow.stb-animation-active.pt2{padding-top: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.pb2{padding-bottom: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.pl2{padding-left: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.pr2{padding-right: var(--space-2);}
.stb-animation--accordion-grow.stb-animation-active.pt3{padding-top: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.pb3{padding-bottom: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.pl3{padding-left: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.pr3{padding-right: var(--space-3);}
.stb-animation--accordion-grow.stb-animation-active.pt4{padding-top: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.pb4{padding-bottom: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.pl4{padding-left: var(--space-4);}
.stb-animation--accordion-grow.stb-animation-active.pr4{padding-right: var(--space-4);}

/* FADE-OUT */
.stb-animation--fade-out.stb-animation-active {
    transition: 1s ease;
    opacity: 0;
    pointer-events: none;
}

/* FADE-OUT-UP */
.stb-animation--fade-out-up.stb-animation-active {
    transition: 2s ease;
    transform: translateY(-100px);
    opacity: 0;
    pointer-events: none;
}

/* CLOSEUP-ZOOM-OUT */
.stb-animation--closeup-zoom-out.stb-animation-active {
    transition: 1s ease;
    transform: scale(0.9);
    height: 100%;
    object-position: top;
}

/* ZOOM-IN FADE-OUT */
.stb-animation--zoom-in.stb-animation-active {
    transition: 1s ease;
    transform: scale(3);
    opacity: 0;
    pointer-events: none;
}

/* TALL-IMG-SLIDE-UP */
.stb-animation--tall-img-slide-up {
    height: 200vh;
}

.stb-animation--tall-img-slide-up.stb-animation--width-zoom-in {
    height: 100vh;
}

.stb-animation--tall-img-slide-up.stb-animation-active {
    height: 200vh;
    transition: 2s ease;
    transform: translateY(-100vh);
}

.stb-animation--tall-img-slide-up.stb-animation-active.stb-animation--width-zoom-in {
    transform: translateY(0);
    bottom: 0;
    top: auto;
}


/* 
    ------------------------------------
    ---------- EXIT-ANIMATIONS ---------
    ------------------------------------
*/


/* FADE-OUT */
.stb-exit-animation--fade-out.stb-exit-animation-active {
    transition: 1s ease;
    opacity: 0;
    pointer-events: none;
}

/* FADE-OUT-UP */
.stb-exit-animation--fade-out-up.stb-exit-animation-active {
    transition: 2s ease;
    transform: translateY(-100px);
    opacity: 0;
    pointer-events: none;
}

/* CLOSEUP-ZOOM-OUT */
.stb-exit-animation--closeup-zoom-out.stb-exit-animation-active {
    transition: 1s ease;
    transform: scale(0.9);
    height: 100%;
    object-position: top;
}

.stb-exit-animation--zoom-in.stb-exit-animation-active.stb-animation--object-position-shift-top{
    object-position: center !important;
}

/* ZOOM-IN FADE-OUT */
.stb-exit-animation--zoom-in.stb-exit-animation-active {
    transition: 1s ease;
    transform: scale(5);
    opacity: 0;
    pointer-events: none;
}

/* TALL-IMG-SLIDE-UP */
.stb-exit-animation--tall-img-slide-up {
    height: 200vh;
}

.stb-exit-animation--tall-img-slide-up.stb-animation--width-zoom-in {
    height: 100vh;
}

.stb-exit-animation--tall-img-slide-up.stb-exit-animation-active {
    height: 200vh;
    transition: 2s ease;
    transform: translateY(-100vh);
}

.stb-exit-animation--tall-img-slide-up.stb-exit-animation-active.stb-animation--width-zoom-in {
    transform: translateY(0);
    bottom: 0;
    top: auto;
}


/* 
    ------------------------------------
    ----- CONTINUOUS ANIMATIONS --------
    ------------------------------------
*/


/* MASK-CROP */
.stb-animation--mask-zoom {
    transition: all .3s ease;
    clip-path: inset(0% 0% 0% 0%);
}

/* FADE OUT */
*[data-stb-animationtype="con-fade-out"]{
    transition: .35s linear;
}

/* FADE OUT & ZOOM IN  */
*[data-stb-animationtype="con-fade-out-zoom-in"]{
    transition: .35s linear;
}

/* FADE IN UP */
*[data-stb-animationtype="con-fade-in-up"]{
    transition: .35s linear;
    opacity: 0;
    transform: translateY(100px);
    /* pointer-events: none; */
}


*[data-stb-animationtype="con-fade-out-up"]{
    transition: .35s linear;
    /* pointer-events: none; */
}

*[data-stb-animationtype="con-mask-clip-hide"]{
    transition: .35s linear;
}

*[data-stb-animationtype="con-fade-in"]{
    opacity: 0;
    transition: .35s linear;
}

*[data-stb-animationtype="con-shift-up"]{
    transform: translateY(100px);
    transition: .35s linear;
}

*[data-stb-animationtype="con-offset-left-25"]{
    transform: translateX(25%);
    transition: .35s linear;
}
*[data-stb-exit-animationtype="con-offset-left-25"]{
    transform: translateX(25%);
    transition: .35s linear;
}

*[data-stb-animationtype="con-parallax"]{
    transition: .35s linear;
    height: 200%;
}
*[data-stb-exit-animationtype="con-parallax"]{
    transition: .35s linear;
    height: 200%;
}
*[data-stb-exit-animationtype="con-parallax"]>img,
*[data-stb-exit-animationtype="con-parallax"]>video
{
    height: 200%;
}
*[data-stb-animationtype="con-zoom-out"]{
    transition: .35s linear;
}

*[data-stb-animationtype="shift-down-400"], 
*[data-stb-animationtype="shift-up-400"]{
    transition: .35s linear;
}

*[data-stb-animationtype="con-fade-in-scale-up"]{
    transition: .35s linear; 
    opacity: 0;
    transform: scale(0.5)
}

*[data-stb-animationtype="con-fade-in-up-scale-up"]{
    transition: .35s linear; 
    opacity: 0;
    transform: translateY(250px) scale(0.5);
}

/* 
    ------------------------------------
    ---------- ANIMATION-DELAYS --------
    ------------------------------------
*/


.stb-animation--delay-02.stb-animation-active {
    transition-delay: 0.2s;
}

.stb-animation--delay-04.stb-animation-active {
    transition-delay: 0.4s;
}

.stb-animation--delay-06.stb-animation-active {
    transition-delay: 0.6s;
}

.stb-animation--delay-08.stb-animation-active {
    transition-delay: 0.8s;
}

.stb-animation--delay-10.stb-animation-active {
    transition-delay: 1s;
}

.stb-animation--delay-12.stb-animation-active {
    transition-delay: 1.2s;
}

.stb-animation--delay-14.stb-animation-active {
    transition-delay: 1.4s;
}

.stb-animation--delay-16.stb-animation-active {
    transition-delay: 1.6s;
}

.stb-animation--delay-18.stb-animation-active {
    transition-delay: 1.8s;
}

.stb-animation--delay-20.stb-animation-active {
    transition-delay: 2s;
}

.stb-exit-animation--delay-02.stb-exit-animation-active {
    transition-delay: 0.2s;
}

.stb-exit-animation--delay-04.stb-exit-animation-active {
    transition-delay: 0.4s;
}

.stb-exit-animation--delay-06.stb-exit-animation-active {
    transition-delay: 0.6s;
}

.stb-exit-animation--delay-08.stb-exit-animation-active {
    transition-delay: 0.8s;
}

.stb-exit-animation--delay-10.stb-exit-animation-active {
    transition-delay: 1s;
}

.stb-exit-animation--delay-12.stb-exit-animation-active {
    transition-delay: 1.2s;
}

.stb-exit-animation--delay-14.stb-exit-animation-active {
    transition-delay: 1.4s;
}

.stb-exit-animation--delay-16.stb-exit-animation-active {
    transition-delay: 1.6s;
}

.stb-exit-animation--delay-18.stb-exit-animation-active {
    transition-delay: 1.8s;
}

.stb-exit-animation--delay-20.stb-exit-animation-active {
    transition-delay: 2s;
}