/* ===== TRANSITIONS ===== */
.product-card,
.why-card,
.blog-card,
.client-box {
    transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover,
.why-card:hover,
.blog-card:hover,
.client-box:hover {
    will-change: transform;
}

.main-btn,
.hero-btn2 {
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.gallery-item img,
.product-card img,
.blog-card img {
    transition: transform var(--transition-slow);
}

/* ===== FADE UP ===== */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeUp 1s forwards;
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== REVEAL (scroll) ===== */
.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== MENU UNDERLINE ===== */
.menu a { position: relative; }
.menu a::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width var(--transition);
}
.menu a:hover::after { width: 100%; }

/* ===== GOLD SHINE (buttons) ===== */
.main-btn { position: relative; overflow: hidden; }
.main-btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    transition: left 1s;
}
.main-btn:hover::before { left: 100%; }

/* =====================================================
   Continuous / infinite decorative animations.
   Disabled for prefers-reduced-motion, and only applied
   to elements likely to be in view (hero, preloader, logo)
   to avoid animating off-screen content forever.
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    .float { animation: float 5s ease-in-out infinite; }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }

    .glow { animation: glow 3s infinite alternate; }
    @keyframes glow {
        0% { box-shadow: 0 0 10px rgba(214,177,95,.1); }
        100% { box-shadow: 0 0 40px rgba(214,177,95,.4), 0 0 80px rgba(214,177,95,.2); }
    }

    .gold-light { animation: goldLight 8s linear infinite; }
    @keyframes goldLight {
        0%, 100% { transform: translate(0,0); }
        50% { transform: translate(50px,-50px); }
    }

    .logo-box img { animation: pulseLogo 2s infinite; }
    @keyframes pulseLogo {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.06); }
    }

    .logo img { animation: logoFloat 6s ease-in-out infinite; }
    @keyframes logoFloat {
        50% { transform: translateY(-5px); }
    }

    .about-home-image img { animation: floatImage 8s ease-in-out infinite; }
    @keyframes floatImage {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    .gold-particle {
        position: absolute;
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--gold);
        opacity: .4;
        animation: particleMove 10s linear infinite;
    }
    @keyframes particleMove {
        0% { transform: translateY(0); opacity: .4; }
        100% { transform: translateY(-600px); opacity: 0; }
    }
}