/* ======================================================
   animation.css
   Animasi Garuda4D Promo
======================================================*/


/* ===========================
   MARQUEE
===========================*/

.marquee-content{
    animation:marquee 25s linear infinite;
}

.marquee:hover .marquee-content{
    animation-play-state:paused;
}

@keyframes marquee{

    0%{
        transform:translateX(0%);
    }

    100%{
        transform:translateX(-100%);
    }

}


/* ===========================
   FADE UP
===========================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

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

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


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

.promo-card{

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}

.promo-card:hover{

    transform:
    translateY(-8px);

    border-color:#22a8ff;

    box-shadow:

    0 0 20px rgba(0,140,255,.45),

    0 0 50px rgba(0,140,255,.18);

}


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

.promo-image img{

    transition:
    transform .5s ease;

}

.promo-card:hover img{

    transform:scale(1.08);

}


/* ===========================
   OVERLAY
===========================*/

.overlay{

    transition:
    opacity .35s ease;

}

.overlay button{

    transition:
    transform .3s ease,
    background .3s ease;

}

.overlay button:hover{

    transform:scale(1.08);

}


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

.btn-read{

    transition:

    background .3s,

    transform .3s,

    box-shadow .3s;

}

.btn-read:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 20px rgba(0,140,255,.5);

}


/* ===========================
   SHINE BUTTON
===========================*/

.btn-read{

    position:relative;

    overflow:hidden;

}

.btn-read::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

    transform:skewX(-25deg);

}

.btn-read:hover::before{

    animation:shine .7s linear;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}


/* ===========================
   LOGO
===========================*/

.logo{

    transition:

    transform .35s ease;

}

.logo:hover{

    transform:scale(1.05);

}


/* ===========================
   BANNER
===========================*/

.banner{

    overflow:hidden;

}

.banner img{

    transition:
    transform .8s ease;

}

.banner:hover img{

    transform:scale(1.04);

}


/* ===========================
   SCROLL TOP
===========================*/

#scrollTop{

    transition:

    opacity .3s,

    transform .3s,

    background .3s;

}

#scrollTop:hover{

    transform:translateY(-5px);

}


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

#lightbox{

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

#lightbox.active{

    opacity:1;

    visibility:visible;

}

#lightbox img{

    animation:zoomIn .35s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ===========================
   CLOSE BUTTON
===========================*/

#closeLightbox{

    transition:

    transform .3s ease,

    color .3s ease;

}

#closeLightbox:hover{

    transform:rotate(90deg);

    color:#22a8ff;

}


/* ===========================
   LOADING IMAGE
===========================*/

img{

    animation:fadeImage .6s ease;

}

@keyframes fadeImage{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ===========================
   TITLE
===========================*/

.hero h1{

    animation:titleGlow 3s infinite alternate;

}

@keyframes titleGlow{

    from{

        text-shadow:

        0 0 10px #0094ff;

    }

    to{

        text-shadow:

        0 0 20px #00b7ff,

        0 0 40px #0094ff;

    }

}


/* ===========================
   SECTION TITLE
===========================*/

.section-title h2{

    animation:sectionGlow 2.5s infinite alternate;

}

@keyframes sectionGlow{

    from{

        text-shadow:

        0 0 8px #008cff;

    }

    to{

        text-shadow:

        0 0 18px #00b7ff;

    }

}


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

.fa-calendar-days{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}


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

.logo{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ===========================
   SPINNER
===========================*/

.loading{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


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

.detail-image{

    overflow:hidden;

    border-radius:12px;

}

.detail-image img{

    transition:transform .6s ease;

}

.detail-image:hover img{

    transform:scale(1.05);

}


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

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-10px);

    }

    60%{

        transform:translateY(-5px);

    }

}


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

.promo-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:15px;

    border:1px solid rgba(0,140,255,.15);

    pointer-events:none;

    animation:borderPulse 3s infinite;

}

@keyframes borderPulse{

    0%{

        opacity:.2;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.2;

    }

}