/* ZOVANTE Micro-Interactions */

:root {
    --animate-duration: 0.8s;
    --animate-delay: 0.1s;
}

/* Base Classes */
.animate-enter {
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ease Out Expo */
}

/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utilities */
.fade-in {
    animation-name: fadeIn;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.scale-in {
    animation-name: scaleIn;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Component Specific */
.stat-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.loyalty-badge {
    transition: all 0.3s ease;
}

.loyalty-badge:hover {
    background: rgba(255, 215, 0, 0.25) !important;
    transform: scale(1.05);
    cursor: default;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Page Transitions */
main {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Premium Micro-Interactions --- */

/* 1. Lift & Shadow */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

/* 2. Button Press */
.btn-press {
    transition: transform 0.1s ease;
}

.btn-press:active {
    transform: scale(0.97);
}

/* 3. Subtle Scale */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* 4. Gold Shimmer (Premium Highlight) */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.shimmer-text {
    background: linear-gradient(90deg, #C9A24D 0%, #FFE5B4 50%, #C9A24D 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* 5. Staggered Delays (More) */
.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}