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


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

.fade-up {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s cubic-bezier(.16,1,.3,1),
        transform 0.8s cubic-bezier(.16,1,.3,1);
}


.fade-up.show {

    opacity: 1;

    transform: translateY(0);
}


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

.scale-in {

    opacity: 0;

    transform: scale(0.92);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.16,1,.3,1);
}


.scale-in.show {

    opacity: 1;

    transform: scale(1);
}


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

.gold-glow {

    transition:
        box-shadow var(--transition),
        transform var(--transition);
}


.gold-glow:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 60px rgba(243, 189, 24, 0.14);
}


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

.hover-card {

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);
}


.hover-card:hover {

    transform: translateY(-8px);

    border-color:
        rgba(243, 189, 24, 0.25);

    background:
        rgba(243, 189, 24, 0.035);
}


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

.image-zoom {
    overflow: hidden;
}


.image-zoom img {

    transition:
        transform 0.8s cubic-bezier(.16,1,.3,1);
}


.image-zoom:hover img {

    transform: scale(1.06);
}


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

@keyframes floating {

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

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


.floating {
    animation: floating 4s ease-in-out infinite;
}


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

.shimmer {

    background:
        linear-gradient(
            110deg,
            var(--gold) 20%,
            #fff2b0 40%,
            var(--gold) 60%
        );

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        shimmer 4s linear infinite;
}


@keyframes shimmer {

    to {
        background-position: 200% center;
    }
}