/* =====================================================
   INITIAL STATE
===================================================== */

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

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

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

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

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

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* =====================================================
   SCALE IN
===================================================== */

.scale{

    opacity:0;

    transform:scale(.85);

    transition:1s;

}

.scale.show{

    opacity:1;

    transform:scale(1);

}

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

.hero-content{

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

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

/* =====================================================
   GOLD SHIMMER
===================================================== */

.hero-badge{

    position:relative;

    overflow:hidden;

}

.hero-badge::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.85),

    transparent

    );

    transform:skewX(-25deg);

}

.hero-badge:hover::before{

    animation:shine 1.2s;

}

@keyframes shine{

0%{

left:-150%;

}

100%{

left:180%;

}

}

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

.service-card{

    transition:

    transform .45s,

    box-shadow .45s,

    border-color .45s;

}

.service-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    box-shadow:

    0 18px 45px

    rgba(0,0,0,.35);

}

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

.service-card .icon{

    display:inline-block;

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

}

@keyframes iconFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary,
.btn-secondary{

    transition:

    .4s;

}

.btn-primary:hover{

    transform:

    translateY(-5px);

    box-shadow:

    0 12px 35px

    rgba(212,160,23,.45);

}

.btn-secondary:hover{

    transform:

    translateY(-5px);

}

/* =====================================================
   MUSIC BUTTON
===================================================== */

.music-player{

    animation:

    musicPulse

    3s infinite;

}

@keyframes musicPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.music-icon{

    animation:

    rotateMusic

    6s linear infinite;

}

@keyframes rotateMusic{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* =====================================================
   PROGRESS BAR
===================================================== */

.progress-fill{

    position:relative;

}

.progress-fill::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.65),

    transparent

    );

    animation:

    progressGlow

    2s linear infinite;

}

@keyframes progressGlow{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(120%);

}

}

/* =====================================================
   CONTACT BOX
===================================================== */

.contact-boxes div{

    transition:.4s;

}

.contact-boxes div:hover{

    transform:

    translateY(-10px);

}

/* =====================================================
   FOOTER
===================================================== */

footer{

    animation:

    footerFloat

    6s ease-in-out infinite;

}

@keyframes footerFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}

/* =====================================================
   LOADER
===================================================== */

.loader-progress{

    animation:

    loading

    3s linear forwards;

}

@keyframes loading{

0%{

width:0;

}

100%{

width:100%;

}

}

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

.page{

    animation:

    pageAppear

    1.2s ease;

}

@keyframes pageAppear{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* =====================================================
   SCROLL INDICATOR
===================================================== */

.scroll-down{

    animation:

    bounce

    2s infinite;

}

@keyframes bounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(12px);

}

100%{

transform:translateY(0);

}

}

/* =====================================================
   GOLD TEXT GLOW
===================================================== */

.gold-glow{

    animation:

    goldGlow

    2.5s infinite alternate;

}

@keyframes goldGlow{

from{

text-shadow:

0 0 8px rgba(212,160,23,.3);

}

to{

text-shadow:

0 0 22px rgba(212,160,23,.8);

}

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071b45;

}

::-webkit-scrollbar-thumb{

background:#d4a017;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ffd56d;

}