/* ============================================
   Animations & Transitions
   ============================================ */

/* ---- Fade In ---- */
.fade-in {
    animation: fadeIn var(--transition-slow) ease forwards;
}

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

/* ---- Slide Up ---- */
.slide-up {
    animation: slideUp var(--transition-slow) ease forwards;
}

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

/* ---- Slide In from Left ---- */
.slide-in-left {
    animation: slideInLeft var(--transition-slow) ease forwards;
}

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

/* ---- Scale In ---- */
.scale-in {
    animation: scaleIn var(--transition-base) ease forwards;
}

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

/* ---- Staggered Children ---- */
/* Uses simple CSS transitions instead of keyframe animations to prevent
   elements becoming invisible if animations don't play properly. */
.stagger-children > * {
    opacity: 1;
}

/* ---- Pulse (for notifications) ---- */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ---- Shake (for errors) ---- */
.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-4px); }
    30%, 70% { transform: translateX(4px); }
}

/* ---- Toast Notification ---- */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-md));
    right: var(--space-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 300px;
    max-width: 450px;
    animation: toastIn var(--transition-slow) ease forwards;
    font-size: var(--font-size-sm);
}

.toast.removing {
    animation: toastOut var(--transition-base) ease forwards;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error { border-left: 3px solid var(--color-danger); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info { border-left: 3px solid var(--color-info); }

.toast__close {
    margin-left: auto;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: var(--space-xs);
}

.toast__close:hover {
    color: var(--color-text);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ---- XP Notification ---- */
.xp-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    z-index: var(--z-toast);
    animation: xpPop 1.5s ease forwards;
    pointer-events: none;
}

@keyframes xpPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    40% {
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -80%) scale(1);
    }
}

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