/*==================================
    Animation Variables
==================================*/

:root{

    --ease:cubic-bezier(.22,1,.36,1);

    --fast:.25s var(--ease);
    --medium:.45s var(--ease);
    --slow:.8s var(--ease);
    --xslow:1.2s var(--ease);

}


/*==================================
    Base Reveal
==================================*/

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
    opacity var(--slow),
    transform var(--slow);
    will-change:transform,opacity;
}

.reveal.show{
    opacity:1;
    transform:none;
}


/*==================================
    Fade
==================================*/

.fade{
    opacity:0;
    transition:opacity var(--slow);
}

.fade.show{
    opacity:1;
}


/*==================================
    Directions
==================================*/

.fade-up{
    opacity:0;
    transform:translateY(80px);
    transition:var(--slow);
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}


.fade-down{
    opacity:0;
    transform:translateY(-80px);
    transition:var(--slow);
}

.fade-down.show{
    opacity:1;
    transform:none;
}


.fade-left{
    opacity:0;
    transform:translateX(-80px);
    transition:var(--slow);
}

.fade-left.show{
    opacity:1;
    transform:none;
}


.fade-right{
    opacity:0;
    transform:translateX(80px);
    transition:var(--slow);
}

.fade-right.show{
    opacity:1;
    transform:none;
}


/*==================================
    Scale
==================================*/

.scale{
    opacity:0;
    transform:scale(.9);
    transition:var(--slow);
}

.scale.show{
    opacity:1;
    transform:scale(1);
}


.scale-large{
    opacity:0;
    transform:scale(.8);
    transition:1s var(--ease);
}

.scale-large.show{
    opacity:1;
    transform:scale(1);
}


/*==================================
    Rotate
==================================*/

.rotate{
    opacity:0;
    transform:rotate(-8deg) scale(.9);
    transition:1s var(--ease);
}

.rotate.show{
    opacity:1;
    transform:none;
}


/*==================================
    Blur
==================================*/

.blur{
    opacity:0;
    filter:blur(20px);
    transition:
    opacity 1s var(--ease),
    filter 1s var(--ease);
}

.blur.show{
    opacity:1;
    filter:blur(0);
}


/*==================================
    Clip
==================================*/

.clip{
    clip-path:inset(0 100% 0 0);
    transition:1s var(--ease);
}

.clip.show{
    clip-path:inset(0);
}


/*==================================
    Image Reveal
==================================*/

.image-reveal{
    overflow:hidden;
}

.image-reveal img{
    transform:scale(1.25);
    transition:1.4s var(--ease);
}

.image-reveal.show img{
    transform:scale(1);
}


/*==================================
    Underline
==================================*/

.link-line{
    position:relative;
}

.link-line::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:100%;
    height:1px;

    background:currentColor;

    transform:scaleX(0);
    transform-origin:left;

    transition:var(--medium);

}

.link-line:hover::after{

    transform:scaleX(1);

}


/*==================================
    Lift
==================================*/

.lift{
    transition:var(--medium);
}

.lift:hover{

    transform:translateY(-10px);

}


/*==================================
    Zoom
==================================*/

.zoom{
    overflow:hidden;
}

.zoom img{

    transition:1s var(--ease);

}

.zoom:hover img{

    transform:scale(1.08);

}


/*==================================
    Arrow
==================================*/

.arrow{

    transition:var(--medium);

}

:hover>.arrow{

    transform:
    translate(6px,-6px);

}


/*==================================
    Float
==================================*/

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

.float{

    animation:float 5s ease-in-out infinite;

}


/*==================================
    Pulse
==================================*/

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}

.pulse{

animation:pulse 3s infinite;

}


/*==================================
    Marquee
==================================*/

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.marquee{

display:flex;
gap:4rem;
white-space:nowrap;

animation:marquee 25s linear infinite;

}


/*==================================
    Spin
==================================*/

@keyframes spin{

to{

transform:rotate(360deg);

}

}

.spin{

animation:spin 12s linear infinite;

}


/*==================================
    Text Gradient
==================================*/

.gradient{

background:linear-gradient(
90deg,
#fff,
#8ea7ff,
#fff);

background-size:200%;

-webkit-text-fill-color:transparent;

animation:gradientMove 8s linear infinite;

}

@keyframes gradientMove{

to{

background-position:200%;

}

}


/*==================================
    Hover Glow
==================================*/

.glow{

transition:var(--medium);

}

.glow:hover{

box-shadow:
0 0 40px rgba(75,123,255,.25);

}


/*==================================
    Reduce Motion
==================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}