/* =========================================================
   MILLERTECH ANIMATIONS
========================================================= */

/* ---------- Fade Up ---------- */

.reveal{

opacity:0;

transform:translateY(45px);

transition:
opacity .8s ease,
transform .8s ease;

will-change:opacity,transform;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ---------- Fade Left ---------- */

.reveal-left{

opacity:0;

transform:translateX(-60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-left.active{

opacity:1;

transform:none;

}

/* ---------- Fade Right ---------- */

.reveal-right{

opacity:0;

transform:translateX(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-right.active{

opacity:1;

transform:none;

}

/* ---------- Zoom ---------- */

.reveal-zoom{

opacity:0;

transform:scale(.92);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-zoom.active{

opacity:1;

transform:scale(1);

}

/* ---------- Delay Helpers ---------- */

.delay-1{transition-delay:.10s;}

.delay-2{transition-delay:.20s;}

.delay-3{transition-delay:.30s;}

.delay-4{transition-delay:.40s;}

.delay-5{transition-delay:.50s;}


/* =========================================================
   FLOAT
========================================================= */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.float{

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

}


/* =========================================================
   GLOW
========================================================= */

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(57,196,255,0);

}

50%{

box-shadow:0 0 35px rgba(57,196,255,.22);

}

100%{

box-shadow:0 0 0 rgba(57,196,255,0);

}

}

.glow{

animation:glow 3s ease-in-out infinite;

}


/* =========================================================
   CARD HOVER
========================================================= */

.card,

.feature-card,

.process-card,

.glass-card{

transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

}

.card:hover,

.feature-card:hover,

.process-card:hover,

.glass-card:hover{

transform:translateY(-8px);

}


/* =========================================================
   BUTTON HOVER
========================================================= */

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:50%;

left:-120%;

width:120%;

height:220%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:translateY(-50%) rotate(25deg);

transition:left .8s ease;

}

.btn:hover::before{

left:130%;

}


/* =========================================================
   UNDERLINE
========================================================= */

.link-hover{

position:relative;

}

.link-hover::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:var(--primary);

transition:.35s ease;

}

.link-hover:hover::after{

width:100%;

}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-glow{

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(57,196,255,.14),

transparent 70%

);

filter:blur(40px);

pointer-events:none;

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

}


/* =========================================================
   PAGE FADE
========================================================= */

body{

animation:pageFade .45s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}