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

/* ==========================
GLOBAL TRANSITIONS
========================== */

*{
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

/* ==========================
SCROLL REVEAL
========================== */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all .9s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================
FADE LEFT
========================== */

.fade-left{
    opacity:0;
    transform:translateX(-80px);
    transition:.9s ease;
}

.fade-left.active{
    opacity:1;
    transform:translateX(0);
}

/* ==========================
FADE RIGHT
========================== */

.fade-right{
    opacity:0;
    transform:translateX(80px);
    transition:.9s ease;
}

.fade-right.active{
    opacity:1;
    transform:translateX(0);
}

/* ==========================
ZOOM
========================== */

.zoom{
    opacity:0;
    transform:scale(.85);
    transition:.8s ease;
}

.zoom.active{
    opacity:1;
    transform:scale(1);
}

/* ==========================
FLOATING
========================== */

.float{
    animation:float 5s ease-in-out infinite;
}

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/* ==========================
IMAGE HOVER
========================== */

img{
    transition:.45s;
}

.hover-zoom{
    overflow:hidden;
}

.hover-zoom img:hover{
    transform:scale(1.08);
}

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

.hover-card{
    transition:.35s ease;
}

.hover-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow-lg);
}

/* ==========================
BUTTON RIPPLE
========================== */

.btn{
    position:relative;
    overflow:hidden;
}

.btn::before{

content:"";

position:absolute;

top:50%;

left:50%;

width:0;

height:0;

border-radius:50%;

background:rgba(255,255,255,.25);

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

transition:.6s;

}

.btn:hover::before{

width:320px;

height:320px;

}

/* ==========================
ROTATE ICON
========================== */

.rotate-hover i{
    transition:.35s;
}

.rotate-hover:hover i{
    transform:rotate(12deg);
}

/* ==========================
SOCIAL ICONS
========================== */

.social-icons a:hover{
    animation:pop .35s;
}

@keyframes pop{

0%{
transform:scale(1);
}

50%{
transform:scale(1.18);
}

100%{
transform:scale(1);
}

}

/* ==========================
BOUNCE
========================== */

.bounce{
    animation:bounceY 2s infinite;
}

@keyframes bounceY{

0%,100%{
transform:translateY(0);
}

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

}

/* ==========================
PULSE
========================== */

.pulse{
    animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(212,175,55,.5);
}

70%{
box-shadow:0 0 0 20px rgba(212,175,55,0);
}

100%{
box-shadow:0 0 0 0 rgba(212,175,55,0);
}

}

/* ==========================
SPIN
========================== */

.spin{
    animation:spin 8s linear infinite;
}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}

/* ==========================
STAGGER DELAYS
========================== */

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

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

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

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

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

/*====================================================
LIGHTBOX
====================================================*/

#lightbox{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

}

#lightbox.show{

opacity:1;

visibility:visible;

}

.lightbox-image{

max-width:90%;

max-height:85%;

border-radius:12px;

box-shadow:0 25px 60px rgba(0,0,0,.4);

}

.lightbox-close{

position:absolute;

top:25px;

right:35px;

font-size:42px;

color:#fff;

cursor:pointer;

transition:.3s;

}

.lightbox-close:hover{

color:var(--secondary);

}

.lightbox-prev,
.lightbox-next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

color:#fff;

font-size:28px;

cursor:pointer;

transition:.3s;

}

.lightbox-prev:hover,
.lightbox-next:hover{

background:var(--secondary);

color:#222;

}

.lightbox-prev{

left:30px;

}

.lightbox-next{

right:30px;

}

@media(max-width:768px){

.lightbox-prev,
.lightbox-next{

width:48px;

height:48px;

font-size:22px;

}

.lightbox-close{

font-size:34px;

top:20px;

right:20px;

}

}