/*
 * Nitya Dharma - UI micro-interactions
 * CSS-only animations. Respects prefers-reduced-motion.
 * Uses existing palette: --home-primary-red, --accent-theme, etc.
 */

/* Accent for glow (existing palette) */
:root {
    --nd-accent: var(--home-primary-red, var(--accent-theme, #E11D48));
    --nd-accent-glow: 0 0 20px rgba(225, 29, 72, 0.35);
}

/* ---- 1) Button hover: scale 1.03 + accent glow ---- */
@media (prefers-reduced-motion: no-preference) {
    .btn:not(:disabled):not(.disabled):hover,
    .navbar .btn-primary:hover,
    .navbar .btn[href*="add"]:hover,
    .search-hero-form .btn-primary:hover,
    .listing-card .btn-primary.primary-cta:hover,
    .listing-card .btn-danger.primary-cta:hover,
    button.btn-primary:hover,
    a.btn-primary:hover {
        transform: scale(1.03);
        box-shadow: var(--nd-accent-glow);
    }

    .btn:not(:disabled):not(.disabled),
    .navbar .btn-primary,
    .navbar .btn[href*="add"],
    .search-hero-form .btn-primary,
    .listing-card .btn-primary.primary-cta,
    .listing-card .btn-danger.primary-cta,
    button.btn-primary,
    a.btn-primary {
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }
}

/* ---- 2) Card hover: translateY(-6px) ---- */
@media (prefers-reduced-motion: no-preference) {
    .listing-card,
    .listing-card-cinematic,
    .premium-card,
    .temple-card,
    .account-content .profile-card,
    .profile-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .listing-card:hover,
    .listing-card-cinematic:hover,
    .premium-card:hover,
    .temple-card:hover,
    .account-content .profile-card:hover,
    .profile-card:hover {
        transform: translateY(-6px);
    }
}

/* ---- 3) Fade-in sections on scroll (CSS fade-up) ---- */
@media (prefers-reduced-motion: no-preference) {
    .animate-fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .animate-fade-up.in-view {
        opacity: 1;
        transform: translateY(0);
    }
}

/* When user prefers reduced motion: no animations */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    .listing-card,
    .listing-card-cinematic,
    .premium-card,
    .temple-card,
    .account-content .profile-card,
    .profile-card {
        transition: none;
    }
}