/*
====================================================
YoYo Real Estate
Animations & Interactive Effects
Brand: Copper | White | Charcoal
====================================================
*/


/* ==================================================
   GLOBAL TRANSITIONS
================================================== */

a,
button,
.card,
.service-card,
.resource-box,
.image-card,
.testimonial,
.btn-primary,
.btn-secondary,
.button-small {
    transition: var(--transition-normal);
}


/* ==================================================
   FADE ANIMATIONS
================================================== */

.fade-in {
    animation: fadeIn 1s ease forwards;
}

.fade-up {
    animation: fadeUp 0.8s ease forwards;
}

.fade-down {
    animation: fadeDown 0.8s ease forwards;
}

.fade-left {
    animation: fadeLeft 0.8s ease forwards;
}

.fade-right {
    animation: fadeRight 0.8s ease forwards;
}


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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==================================================
   HERO ANIMATION
================================================== */

.hero-content {
    animation: heroReveal 1.2s ease forwards;
}


@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.btn-primary,
.btn-secondary,
.button-small {
    position: relative;
    overflow: hidden;
}


.btn-primary::before,
.btn-secondary::before,
.button-small::before {
    content: "";
    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.18);

    transition: var(--transition-normal);

    pointer-events: none;
}


.btn-primary:hover::before,
.btn-secondary:hover::before,
.button-small:hover::before {
    left: 0;
}


.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-3px);
}


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

.card:hover,
.service-card:hover,
.image-card:hover,
.testimonial:hover {
    transform: translateY(-8px);
}


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

.image-card {
    overflow: hidden;
}


.image-card img {
    transition: transform 0.6s ease;
}


.image-card:hover img {
    transform: scale(1.05);
}


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

.logo img {
    transition: transform 0.35s ease;
}


.logo:hover img {
    transform: scale(1.05);
}


/* ==================================================
   COPPER UNDERLINE
================================================== */

.hover-underline {
    position: relative;
}


.hover-underline::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 2px;

    background: var(--copper);

    transition: width 0.35s ease;
}


.hover-underline:hover::after {
    width: 100%;
}


/* ==================================================
   FLOATING EFFECT
================================================== */

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


@keyframes floating {
    0% {
        transform: translateY(0);
    }

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

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


/* ==================================================
   PULSE EFFECT
================================================== */

.pulse {
    animation: pulse 2s infinite;
}


@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(184, 115, 51, 0.5);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(184, 115, 51, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(184, 115, 51, 0);
    }
}


/* ==================================================
   LOADING ANIMATION
================================================== */

.loading {
    animation: loading 1.2s infinite;
}


@keyframes loading {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}


/* ==================================================
   SCROLL REVEAL
   Controlled by animations.js
================================================== */

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


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


/* ==================================================
   STAGGERED REVEAL
   Optional
================================================== */

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}


/* ==================================================
   REDUCE MOTION ACCESSIBILITY
================================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}