/*==================================================
THE WHITE WOOD HOMESTAY
effects.css
VERSION 2.1
==================================================*/


/*==================================================
LOADING SCREEN
==================================================*/

#loader{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    background:#111;

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

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-logo{

    width:170px;

    margin-bottom:30px;

    animation:logoFade 1.4s ease infinite alternate;

}

.loader-title{

    color:#fff;

    font-family:"Playfair Display",serif;

    font-size:1.5rem;

    letter-spacing:2px;

    margin-bottom:12px;

}

.loader-subtitle{

    color:#bdbdbd;

    font-size:.9rem;

    letter-spacing:4px;

    text-transform:uppercase;

}

.loader-line{

    width:180px;

    height:3px;

    margin-top:30px;

    overflow:hidden;

    border-radius:999px;

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

}

.loader-progress{

    width:0;

    height:100%;

    background:var(--gold);

    animation:loadingBar 2s ease forwards;

}



/*==================================================
SCROLL PROGRESS
==================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(

        90deg,

        var(--gold-dark),

        var(--gold)

    );

    z-index:999999;

}



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

.button{

    overflow:hidden;

    position:relative;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .6s linear;

    pointer-events:none;

}



/*==================================================
GLASS EFFECT
==================================================*/

.glass{

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

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}



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

.glow{

    position:relative;

}

.glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    opacity:0;

    transition:.35s ease;

    background:

    radial-gradient(

        circle,

        rgba(184,134,11,.28),

        transparent 70%

    );

    z-index:-1;

}

.glow:hover::after{

    opacity:1;

}



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

.image-hover{

    overflow:hidden;

    border-radius:var(--radius);

}

.image-hover img{

    transition:transform .8s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}



/*==================================================
ICON HOVER
==================================================*/

.icon-hover{

    transition:.35s ease;

}

.icon-hover:hover{

    transform:translateY(-6px) scale(1.08);

}



/*==================================================
TEXT SHIMMER
==================================================*/

.shimmer{

    background:

    linear-gradient(

        90deg,

        #ffffff,

        #e6d1a0,

        #ffffff

    );

    background-size:200%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:shimmer 5s linear infinite;

}



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

.float{

    animation:floating 4s ease-in-out infinite;

}



/*==================================================
HOVER LIFT
==================================================*/

.hover-lift{

    transition:.35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}



/*==================================================
GOLD BORDER
==================================================*/

.gold-border{

    border:1px solid rgba(184,134,11,.35);

}



/*==================================================
KEYFRAMES
==================================================*/

@keyframes loadingBar{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}



@keyframes logoFade{

    from{

        transform:scale(.96);

        opacity:.75;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}



@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}



@keyframes shimmer{

    from{

        background-position:0%;

    }

    to{

        background-position:200%;

    }

}



@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==================================================
LOADED
==================================================*/

body.loaded .hero{

    animation:heroFade 1s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==================================================
END
==================================================*/