/* ==========================================================
   The Gift Shop - Coming Soon
   Premium Animation Styles
========================================================== */

/* -----------------------------
   Page Fade In
----------------------------- */

body{
    animation:pageFade 1.2s ease forwards;
}

@keyframes pageFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* -----------------------------
   Loader
----------------------------- */

.loader-logo{

    animation:
        pulseGlow 2s infinite,
        rotateBorder 8s linear infinite;

}

@keyframes pulseGlow{

    0%{
        transform:scale(1);
        box-shadow:0 0 20px rgba(212,175,55,.25);
    }

    50%{
        transform:scale(1.08);
        box-shadow:
            0 0 45px rgba(212,175,55,.70),
            0 0 90px rgba(212,175,55,.35);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 20px rgba(212,175,55,.25);
    }

}

@keyframes rotateBorder{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* -----------------------------
   Hero Card
----------------------------- */

.glass-card{

    animation:
        heroEntrance 1.5s ease forwards,
        floatingCard 7s ease-in-out infinite;

}

@keyframes heroEntrance{

    from{

        opacity:0;

        transform:
            translateY(80px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

@keyframes floatingCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* -----------------------------
   Logo Animation
----------------------------- */

.logo img{

    animation:
        logoSpin 25s linear infinite;

}

@keyframes logoSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* -----------------------------
   Logo Title
----------------------------- */

.logo h2{

    animation:
        slideRight 1.2s ease;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* -----------------------------
   Gold Title Glow
----------------------------- */

.glass-card h1{

    animation:
        titleGlow 3s infinite alternate;

}

@keyframes titleGlow{

    from{

        text-shadow:

        0 0 10px rgba(255,255,255,.20);

    }

    to{

        text-shadow:

        0 0 20px rgba(212,175,55,.45),

        0 0 50px rgba(212,175,55,.25);

    }

}

/* -----------------------------
   Small Heading
----------------------------- */

.glass-card h3{

    animation:
        fadeDown 1.5s ease;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* -----------------------------
   Paragraph
----------------------------- */

.glass-card p{

    animation:
        fadeText 2s ease;

}

@keyframes fadeText{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* -----------------------------
   Countdown Boxes
----------------------------- */

.time-box{

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

}

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

    animation-delay:.3s;

}

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

    animation-delay:.6s;

}

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

    animation-delay:.9s;

}

@keyframes boxFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* -----------------------------
   Notify Button
----------------------------- */

#notify-form button{

    position:relative;

    overflow:hidden;

}

#notify-form button::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

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

    transform:skewX(-30deg);

    transition:.7s;

}

#notify-form button:hover::before{

    left:140%;

}

/* -----------------------------
   Social Icons
----------------------------- */

.social a{

    transition:

        transform .4s,

        box-shadow .4s,

        background .4s;

}

.social a:hover{

    box-shadow:

        0 0 25px rgba(212,175,55,.55);

    transform:

        translateY(-8px)

        rotate(8deg)

        scale(1.08);

}

/* -----------------------------
   WhatsApp
----------------------------- */

.whatsapp{

    animation:

        whatsappPulse 2.5s infinite;

}

@keyframes whatsappPulse{

    0%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:

        0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:

        0 0 0 0 rgba(37,211,102,0);

    }

}

/* -----------------------------
   Music Button
----------------------------- */

#music-btn{

    animation:

        fadeLeft 1.5s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* -----------------------------
   Footer
----------------------------- */

footer{

    animation:

        footerFade 2s ease;

}

@keyframes footerFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* -----------------------------
   Mouse Hover Glow
----------------------------- */

button:hover,

input:hover,

.whatsapp:hover,

.social a:hover{

    filter:brightness(1.08);

}

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

#bg-video{

    animation:

        slowZoom 40s linear infinite alternate;

}

@keyframes slowZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

/* -----------------------------
   Gold Shine Line
----------------------------- */

.glass-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:40%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transform:skewX(-20deg);

    animation:

        shine 8s infinite;

    pointer-events:none;

}

@keyframes shine{

    0%{

        left:-120%;

    }

    100%{

        left:150%;

    }

}

/* ==========================================
   Reveal Animation
========================================== */

.glass-card,
.time-box,
.social a{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.visible{

    opacity:1;

    transform:translateY(0);

}