/* ===== ELEGANT ANIMATIONS FOR ANDROID PWA ===== */
/* Premium animation library for Kampung Argomulyo */

/* ===== KEYFRAME DEFINITIONS ===== */

/* 1. FadeIn Variants */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* 2. Bounce Animation for FAB */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fabPulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    }

    50% {
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6), 0 0 0 8px rgba(99, 102, 241, 0.1);
    }
}

/* 3. Button Glow Effect */
@keyframes buttonGlow {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    }

    50% {
        box-shadow: 0 4px 24px rgba(99, 102, 241, 0.5), 0 0 0 4px rgba(99, 102, 241, 0.1);
    }
}

@keyframes submitPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* 4. Status Badge Pulse */
@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

/* 5. Card Hover Lift */
@keyframes cardLift {
    from {
        transform: translateY(0);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }

    to {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }
}

/* 6. Shimmer Loading Effect */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

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

/* 7. Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Animation Delays for Stagger Effect */
.anim-delay-1 {
    animation-delay: 0.1s;
}

.anim-delay-2 {
    animation-delay: 0.2s;
}

.anim-delay-3 {
    animation-delay: 0.3s;
}

.anim-delay-4 {
    animation-delay: 0.4s;
}

.anim-delay-5 {
    animation-delay: 0.5s;
}

.anim-delay-6 {
    animation-delay: 0.6s;
}

.anim-delay-7 {
    animation-delay: 0.7s;
}

.anim-delay-8 {
    animation-delay: 0.8s;
}

/* Animation Classes */
.animate-fadeInDown {
    animation: fadeInDown 0.5s ease-out forwards;
    opacity: 0;
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.5s ease-out forwards;
    opacity: 0;
}

.animate-fadeInRight {
    animation: fadeInRight 0.5s ease-out forwards;
    opacity: 0;
}

.animate-fadeInScale {
    animation: fadeInScale 0.4s ease-out forwards;
    opacity: 0;
}

.animate-bounceIn {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ===== COMPONENT ANIMATIONS ===== */

/* 1. Page Headers */
.page-header,
.hero-section,
.section-title {
    animation: fadeInDown 0.6s ease-out;
}

/* 2. Form Groups - Hover transitions only (no hidden state) */
.form-group {
    transition: all 0.3s ease-out;
}

/* 3. Submit Buttons - Transition Only (No Infinite Animation) */
.submit-btn,
button[type="submit"],
.btn-primary {
    /* OPTIMIZED: Removed infinite buttonGlow animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects only on desktop (not mobile) */
@media (hover: hover) {
    .submit-btn:hover,
    button[type="submit"]:hover,
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45);
    }
}

.submit-btn:active,
button[type="submit"]:active,
.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* 4. Cards - Hover Effects Only (always visible) */
.product-card,
.complaint-card,
.request-card,
.my-product-card,
.info-card,
.announcement-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Hover Effects */
.product-card:hover,
.complaint-card:hover,
.request-card:hover,
.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* 5. Menu Items - Scale & Shadow */
.menu-item,
.drawer-menu-item,
.action-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.menu-item:hover,
.drawer-menu-item:hover {
    transform: translateX(4px);
    background: rgba(99, 102, 241, 0.08);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 6. FAB Button - Static (No Infinite Pulse) */
.fab-btn {
    /* OPTIMIZED: Removed infinite fabPulse animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

@media (hover: hover) {
    .fab-btn:hover {
        transform: scale(1.1) rotate(90deg);
        box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);
    }
}

/* 7. Status Badges - Static (No Infinite Pulse) */
.status-badge.pending,
.status-badge[class*="warning"],
.badge.bg-warning {
    /* OPTIMIZED: Removed infinite badgePulse and badgeGlow animations */
    /* Badges are now static to save battery */
}

/* ===== MODE TOGGLE ANIMATION ===== */
.mode-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mode-btn:hover:not(.active) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mode-btn.active {
    animation: fadeInScale 0.3s ease-out;
}

/* ===== INPUT FOCUS ANIMATION ===== */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15), 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ===== UPLOAD BOX ANIMATION ===== */
.upload-box,
.file-upload-area {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-box:hover,
.file-upload-area:hover {
    transform: translateY(-2px);
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.1);
}

.upload-box:hover i,
.file-upload-area:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* ===== ALERT ANIMATIONS ===== */
.custom-alert,
.alert {
    animation: fadeInDown 0.4s ease-out;
}

/* ===== TAB CONTENT ANIMATION ===== */
.tab-content.active {
    animation: fadeInUp 0.4s ease-out;
}

/* ===== MODAL ENHANCED ANIMATION ===== */
.modal-sheet {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.show .modal-sheet {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CHAT MESSAGE ANIMATION ===== */
.chat-message {
    animation: fadeInUp 0.3s ease-out;
}

.chat-message.user {
    animation: fadeInRight 0.3s ease-out;
}

.chat-message.bot {
    animation: fadeInLeft 0.3s ease-out;
}

/* ===== OPTION BUTTON ANIMATION ===== */
.option-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
}

/* ===== BACK BUTTON ANIMATION ===== */
.back-btn {
    animation: fadeInLeft 0.5s ease-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-btn:hover {
    transform: translateX(-8px);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
}

/* ===== EMPTY STATE ANIMATION ===== */
.empty-state {
    animation: fadeInUp 0.6s ease-out;
}

.empty-icon i {
    /* OPTIMIZED: Removed infinite float animation */
    /* Icon is now static to save battery */
}

/* Float animation kept for reference but not used */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== STAT ITEMS - Hover Only (always visible) ===== */
.profile-stat-item,
.stat-item {
    transition: all 0.3s ease-out;
}

.profile-stat-item:hover,
.stat-item:hover {
    transform: translateY(-2px);
}

/* ===== REDUCE MOTION FOR ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {

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

/* ===== PERFORMANCE: Pause animations when not visible ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}