/* ==========================================================
   ARMENIA CRYSTAL
   Design System v1.0
   animations.css
========================================================== */


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

/* Fade */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* Fade Down */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* Zoom */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* Slide Left */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* Slide Right */

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* Luxury Glow */

@keyframes goldGlow{

    0%{

        box-shadow:none;

    }

    50%{

        box-shadow:0 0 35px rgba(200,164,93,.22);

    }

    100%{

        box-shadow:none;

    }

}


/* Floating */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   UTILITIES
========================================================== */


.fade-in{

    animation:fadeIn .8s ease forwards;

}


.fade-up{

    animation:fadeUp .8s ease forwards;

}


.fade-down{

    animation:fadeDown .8s ease forwards;

}


.zoom-in{

    animation:zoomIn .8s ease forwards;

}


.slide-left{

    animation:slideLeft .9s ease forwards;

}


.slide-right{

    animation:slideRight .9s ease forwards;

}


.floating{

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

}



/* ==========================================================
   HOVER EFFECTS
========================================================== */


.hover-scale{

    transition:transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.03);

}


.hover-lift{

    transition:all .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


.hover-glow{

    transition:all .35s ease;

}

.hover-glow:hover{

    box-shadow:0 20px 70px rgba(200,164,93,.18);

}


.hover-gold:hover{

    color:var(--color-gold);

}


.hover-image{

    overflow:hidden;

}

.hover-image img{

    transition:transform .8s ease;

}

.hover-image:hover img{

    transform:scale(1.08);

}



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


.btn{

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}

.btn:hover{

    transform:translateY(-2px);

}



/* ==========================================================
   CARD EFFECTS
========================================================== */


.card{

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.card:hover{

    transform:translateY(-8px);

}



/* ==========================================================
   PAGE TRANSITION
========================================================== */


.page-enter{

    animation:fadeIn .8s ease;

}



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


.loading{

    animation:goldGlow 2.5s infinite;

}



/* ==========================================================
   PERFORMANCE
========================================================== */


.fade-in,

.fade-up,

.fade-down,

.slide-left,

.slide-right,

.zoom-in,

.card,

.btn,

.hover-image img{

    will-change:transform, opacity;

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */


@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* =========================================================
   CLICKABLE GOOGLE MAPS
========================================================= */
.google-map-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.google-map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open-google-map {
    display: inline-block;
    margin-top: 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .16em;
}