/* =========================================
   KREVIA - Animations
   ========================================= */

:root {
    --ease-enter: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Dynamically set by Anim.stagger() — defaults are fallbacks */
    --anim-duration: 200ms;
    --anim-stagger: 0ms;
}

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

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

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

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

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

@keyframes slideDown {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

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

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pageEnter {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pageExit {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.98); opacity: 0; }
}

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

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

@keyframes slideOut {
    to { transform: translateX(100%); opacity: 0; }
}

/* Utility Classes */
.anim-fade-in { animation: fadeIn var(--anim-duration) var(--ease-enter) both; }
.anim-fade-out { animation: fadeOut var(--anim-duration) var(--ease-exit) both; }
.anim-scale-in { animation: scaleIn var(--anim-duration) var(--ease-enter) both; }
.anim-scale-out { animation: scaleOut var(--anim-duration) var(--ease-exit) both; }
.anim-slide-up { animation: slideUp var(--anim-duration) var(--ease-enter) both; }
.anim-slide-down { animation: slideDown var(--anim-duration) var(--ease-enter) both; }
.anim-slide-left { animation: slideLeft var(--anim-duration) var(--ease-enter) both; }
.anim-slide-right { animation: slideRight var(--anim-duration) var(--ease-enter) both; }
.anim-pop { animation: pop var(--anim-duration) var(--ease-spring) both; }
.anim-page-enter { animation: pageEnter var(--anim-duration) var(--ease-enter) both; }
.anim-page-exit { animation: pageExit var(--anim-duration) var(--ease-exit) both; }

/* Stagger System — duration & delay set per-element by Anim.stagger() */
.anim-stagger > * {
    animation: slideUp var(--anim-dur, var(--anim-duration)) var(--ease-enter) both;
    animation-delay: var(--anim-del, 0ms);
}

/* Button Feedback */
.btn:active { transform: scale(0.97); }
.btn-primary:active { transform: scale(0.97); }

/* Modal Animations */
.modal-overlay {
    animation: fadeIn var(--anim-duration) var(--ease-enter) both;
}

.modal-container {
    animation: scaleIn var(--anim-duration) var(--ease-spring) both;
}

/* Toast Animations */
.toast {
    animation: slideIn 0.3s var(--ease-enter);
}

.toast.fade-out {
    animation: slideOut 0.3s var(--ease-exit) forwards;
}