/* ===== ANIMATIONS & MICRO-INTERACTIONS ===== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Glow Effect */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 40, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 40, 0, 0.6);
    }
}

/* Shake (for errors) */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Apply Animations on Load */
.app {
    animation: fadeIn 0.5s ease-out;
}

.sidebar {
    animation: slideInFromLeft 0.4s ease-out;
}

.main {
    animation: slideInFromRight 0.4s ease-out;
}

/* Stagger folder items */
.folder-item:nth-child(1) {
    animation: fadeIn 0.3s ease-out 0.1s both;
}

.folder-item:nth-child(2) {
    animation: fadeIn 0.3s ease-out 0.15s both;
}

.folder-item:nth-child(3) {
    animation: fadeIn 0.3s ease-out 0.2s both;
}

.folder-item:nth-child(4) {
    animation: fadeIn 0.3s ease-out 0.25s both;
}

/* Stagger note items */
.note-item:nth-child(1) {
    animation: fadeIn 0.3s ease-out 0.1s both;
}

.note-item:nth-child(2) {
    animation: fadeIn 0.3s ease-out 0.15s both;
}

.note-item:nth-child(3) {
    animation: fadeIn 0.3s ease-out 0.2s both;
}

.note-item:nth-child(4) {
    animation: fadeIn 0.3s ease-out 0.25s both;
}

.note-item:nth-child(5) {
    animation: fadeIn 0.3s ease-out 0.3s both;
}

/* Slash Menu Animation */
.slash-menu {
    animation: fadeInScale 0.2s ease-out;
    transform-origin: top left;
}

.slash-menu-item:nth-child(1) {
    animation: fadeIn 0.15s ease-out 0.05s both;
}

.slash-menu-item:nth-child(2) {
    animation: fadeIn 0.15s ease-out 0.08s both;
}

.slash-menu-item:nth-child(3) {
    animation: fadeIn 0.15s ease-out 0.11s both;
}

.slash-menu-item:nth-child(4) {
    animation: fadeIn 0.15s ease-out 0.14s both;
}

.slash-menu-item:nth-child(5) {
    animation: fadeIn 0.15s ease-out 0.17s both;
}

.slash-menu-item:nth-child(6) {
    animation: fadeIn 0.15s ease-out 0.2s both;
}

/* Loading States */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Hover Glow for Interactive Elements */
.action-btn:hover,
.toggle-btn:hover {
    animation: glow 2s ease-in-out infinite;
}

/* Focus States */
.title-input:focus,
.search-input:focus {
    animation: fadeIn 0.3s ease-out;
}

/* Error State */
.error {
    animation: shake 0.5s ease-out;
}

/* Success State */
@keyframes successPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 40, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 40, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 40, 0, 0);
    }
}

.success {
    animation: successPulse 0.6s ease-out;
}

/* Smooth Content Transitions */
.content > * {
    transition: all 0.3s ease-out;
}

/* Micro-interaction: Button Press */
button:active {
    transform: scale(0.95);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}