/**
 * Micro-Interactions & Animations
 * Subtle visual feedback for user interactions
 */

/* ===================================
   HOVER EFFECTS
   =================================== */

/* Card lift effect */
.card:hover,
.stat-card:hover,
.product-card:hover,
.account-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 243, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover lift */
.btn:not(:disabled):hover,
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 243, 255, 0.3);
    transition: all 0.2s ease;
}

/* Icon hover pulse */
.icon-btn:hover i,
.nav-icon:hover i {
    transform: scale(1.15);
    transition: transform 0.2s ease;
}

/* ===================================
   CHECKBOX ANIMATIONS
   =================================== */

/* Checkbox bounce on check */
input[type="checkbox"]:checked {
    animation: checkbounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkbounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

/* Checkmark appearance */
input[type="checkbox"]:checked::after {
    animation: checkmark 0.3s ease forwards;
}

@keyframes checkmark {
    0% {
        opacity: 0;
        transform: scale(0) rotate(45deg);
    }

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

/* ===================================
   BUTTON RIPPLE EFFECT
   =================================== */

.btn,
.action-btn,
.speed-dial-action {
    position: relative;
    overflow: hidden;
}

.btn::before,
.action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before,
.action-btn:active::before {
    width: 300px;
    height: 300px;
    transition: width 0s, height 0s;
}

/* ===================================
   ICON ANIMATIONS
   =================================== */

/* Icon pulse on hover */
@keyframes iconPulse {

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

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

.icon-pulse:hover {
    animation: iconPulse 0.6s ease infinite;
}

/* Icon spin */
@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-spin {
    animation: iconSpin 1s linear infinite;
}

/* Icon bounce */
@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.icon-bounce {
    animation: iconBounce 0.5s ease;
}

/* ===================================
   INPUT FOCUS EFFECTS
   =================================== */

/* Input glow on focus */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.3),
        0 0 10px rgba(0, 243, 255, 0.2);
    border-color: #00f3ff;
    transition: all 0.3s ease;
}

/* Label float animation */
.input-group:focus-within label {
    transform: translateY(-20px) scale(0.85);
    color: #00f3ff;
    transition: all 0.3s ease;
}

/* ===================================
   LOADING STATE
   =================================== */

/* Button spinner */
.btn.loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   SUCCESS & ERROR STATES
   =================================== */

/* Success checkmark */
.btn.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    pointer-events: none;
}

.btn.success::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 20px;
    color: white;
    animation: successPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes successPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Error shake */
.btn.error,
.input-error {
    animation: errorShake 0.4s ease;
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* ===================================
   MODAL ANIMATIONS
   =================================== */

/* Modal entrance */
.modal.show {
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

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

/* Modal exit */
.modal.hide {
    animation: modalFadeOut 0.2s ease forwards;
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
}

/* ===================================
   NOTIFICATION TOAST
   =================================== */

/* Toast slide in */
.toast {
    animation: toastSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

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

/* ===================================
   NUMBER INCREMENT ANIMATION
   =================================== */

/* Counter animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.stat-value {
    animation: countUp 0.5s ease;
}

/* ===================================
   BADGE PULSE
   =================================== */

/* Badge notification pulse */
.badge.pulse {
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* ===================================
   SKELETON SHIMMER
   =================================== */

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

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

/* ===================================
   SMOOTH SCROLL
   =================================== */

html {
    scroll-behavior: smooth;
}

/* ===================================
   ACCESSIBILITY - REDUCED MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {

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