/* animations.css - Soft Transitions and Elegant Hover Effects for LUNAYA */

/* General Transitions */
body, a, button, input, select, textarea, .card, .item {
    transition: all 0.3s ease-in-out;
}

/* Hover Effects for Buttons */
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* Hover Effects for Cards/Products */
.product-card:hover,
.category-card:hover,
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Image Hover Effects */
.product-card img,
.category-card img {
    transition: transform 0.5s ease;
}

.product-card:hover img,
.category-card:hover img {
    transform: scale(1.05);
}

/* Link Underline Effect */
.nav-menu ul li a {
    position: relative;
    display: inline-block;
}

.nav-menu ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-golden-champagne);
    transition: width 0.3s ease-in-out;
}

.nav-menu ul li a:hover::after {
    width: 100%;
}

/* Icon Hover Effects */
.nav-icons a {
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-icons a:hover {
    transform: scale(1.1);
    color: var(--color-golden-champagne);
}

/* Newsletter Popup Animation */
.newsletter-popup.show {
    animation: fadeIn 0.3s ease-out forwards;
}

.newsletter-popup.hide {
    animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.newsletter-content {
    transform: scale(0.9);
    opacity: 0;
    animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Scroll-triggered animations (example - will be handled by JS for more control) */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Parallax effect for hero (example - can be enhanced with JS) */
.hero-bg {
    background-attachment: fixed; /* This creates a simple parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Subtle background animations (optional, for very refined feel) */
/* Example: a very subtle gradient shift or shimmer */
/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--color-lavender-pastel), var(--color-rose-sand));
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite alternate;
    z-index: -2;
    opacity: 0.1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
*/