/*==========================================================
ENTITY ENTERPRISES
Animations
==========================================================*/


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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .9s cubic-bezier(.16,1,.3,1),

    transform .9s cubic-bezier(.16,1,.3,1);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


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

.fade{

    opacity:0;

    transition:opacity .8s ease;

}

.fade.active{

    opacity:1;

}


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

.scale{

    opacity:0;

    transform:scale(.92);

    transition:

    opacity .8s,

    transform .8s cubic-bezier(.16,1,.3,1);

}

.scale.active{

    opacity:1;

    transform:scale(1);

}


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

.blur{

    opacity:0;

    filter:blur(18px);

    transition:

    filter .8s,

    opacity .8s;

}

.blur.active{

    opacity:1;

    filter:blur(0);

}


/*==========================================
Hero Title
==========================================*/

.hero-title span{

    display:block;

    overflow:hidden;

}

.hero-title span>*{

    display:block;

}


/*==========================================
Floating
==========================================*/

.float{

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

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}


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

.rotate-slow{

    animation:rotateSlow 50s linear infinite;

}

@keyframes rotateSlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}


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

.pulse{

    animation:pulse 4s ease infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

}


/*==========================================
Blueprint Drift
==========================================*/

.blueprint-drift{

    animation:blueprintDrift 25s ease-in-out infinite;

}

@keyframes blueprintDrift{

0%{

transform:translate(0,0);

}

25%{

transform:translate(-8px,-4px);

}

50%{

transform:translate(-18px,8px);

}

75%{

transform:translate(8px,4px);

}

100%{

transform:translate(0,0);

}

}


/*==========================================
Glass Reflection
==========================================*/

.glass-shine{

    position:relative;

    overflow:hidden;

}

.glass-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:320%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transform:rotate(22deg);

    animation:glassSweep 8s ease-in-out infinite;

}

@keyframes glassSweep{

0%{

left:-60%;

}

100%{

left:170%;

}

}


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

.link-underline{

    position:relative;

}

.link-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:1px;

    background:currentColor;

    transform:scaleX(0);

    transform-origin:left;

    transition:.5s cubic-bezier(.16,1,.3,1);

}

.link-underline:hover::after{

    transform:scaleX(1);

}


/*==========================================
Scroll Indicator
==========================================*/

.scroll-indicator{

    animation:scrollFloat 2.5s ease-in-out infinite;

}

@keyframes scrollFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(8px);

}

}


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

.btn{

    transition:

    transform .45s cubic-bezier(.16,1,.3,1),

    color .45s,

    background .45s,

    border-color .45s,

    box-shadow .45s;

}

.btn:hover{

    transform:translateY(-4px);

}


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

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .8s cubic-bezier(.16,1,.3,1);

}

.image-hover:hover img{

    transform:scale(1.08);

}


/*==========================================
Section Divider
==========================================*/

.section-divider{

    position:relative;

}

.section-divider::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:rgba(0,0,0,.08);

}


/*==========================================
Cursor Hover
==========================================*/

#cursor{

    transition:

    width .35s,

    height .35s,

    transform .2s,

    background .3s,

    border-color .3s;

}

#cursor.cursor-hover{

    width:60px;

    height:60px;

    background:rgba(13,35,70,.08);

    border-color:rgba(13,35,70,.2);

}


/*==========================================
Page Loader
==========================================*/

body{

    opacity:0;

    transition:opacity .8s ease;

}

body.loaded{

    opacity:1;

}


/*==========================================
Progress Bar
==========================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    background:var(--clr-primary);

    z-index:999999;

}


/*==========================================
Performance
==========================================*/

.hero-building,

.hero-blueprint,

.hero-light,

.hero-grid,

img{

    will-change:transform;

    backface-visibility:hidden;

    transform:translateZ(0);

}
/*==========================================================

Loader Pulse

==========================================================*/

.loader-logo{

animation:loaderPulse 2s ease-in-out infinite;

}

@keyframes loaderPulse{

0%,100%{

letter-spacing:.45em;

opacity:.85;

}

50%{

letter-spacing:.65em;

opacity:1;

}

}
/*==========================================================

Timeline

==========================================================*/

.timeline-item{

opacity:0;

transform:translateY(60px);

transition:

opacity .8s,

transform .8s;

}

.timeline-item.active{

opacity:1;

transform:none;

}

.timeline-item.active .timeline-dot{

box-shadow:

0 0 0 14px rgba(13,35,70,.08);

}
/*==========================================================

Pause Marquee

==========================================================*/

.logo-marquee:hover .logo-track{

animation-play-state:paused;

}
/*==========================================================

Contact

==========================================================*/

.info-box{

opacity:0;

transform:translateY(30px);

animation:fadeCard .8s forwards;

}

.info-box:nth-child(2){

animation-delay:.1s;

}

.info-box:nth-child(3){

animation-delay:.2s;

}

.info-box:nth-child(4){

animation-delay:.3s;

}

@keyframes fadeCard{

to{

opacity:1;

transform:none;

}

}

/*==========================================================

Footer Animation

==========================================================*/

.footer-grid{

animation:gridMove 25s linear infinite;

}

@keyframes gridMove{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}

.footer-background{

animation:footerFloat 12s ease-in-out infinite;

}

@keyframes footerFloat{

0%,100%{

transform:translate(-50%,-50%);

}

50%{

transform:translate(-50%,-46%);

}

}
/*==========================================================

CTA

==========================================================*/

.cta-overlay{

animation:gridAnimation 20s linear infinite;

}

@keyframes gridAnimation{

0%{

transform:translateY(0);

}

100%{

transform:translateY(60px);

}

}
.reveal{

opacity:0;

transform:translateY(70px);

}

.revealed{

opacity:1;

transform:none;

transition:

opacity .9s ease,

transform .9s ease;

}
/*==========================================================

PAGE TRANSITIONS

==========================================================*/

body{

opacity:0;

transition:

opacity .45s ease,

transform .45s ease;

}

body.page-loaded{

opacity:1;

}

body.page-exit{

opacity:0;

transform:translateY(25px);

}
body::before{

content:"";

position:fixed;

inset:0;

background-image:url("../assets/illustrations/noise.png");

opacity:.03;

pointer-events:none;

z-index:9999;

}
img{

transition:transform 1s ease;

}

section:hover img{

transform:scale(1.03);

}