/* ================================================================
 * MŌRA MOOD CLIENT PORTAL — Sistema de Animaciones Premium (EI-005)
 * ================================================================
 * Archivo único de animaciones CSS nativas de alto rendimiento.
 * Utilizar únicamente transform, opacity y filter.
 */

:root {
    --anim-duration-fast: 120ms;
    --anim-duration-base: 250ms;
    --anim-duration-slow: 300ms;
    --anim-duration-shine: 10s;
    --anim-duration-flip: 300ms;
    --anim-ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1. Base Keyframes */
@keyframes mmFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes mmFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes mmSlideUp {
    0% { transform: translateY(20px); }
    100% { transform: translateY(0); }
}

@keyframes mmSlideRight {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

@keyframes mmShine {
    0% { transform: translate(-30%, -30%); }
    50% { transform: translate(30%, 30%); }
    100% { transform: translate(-30%, -30%); }
}

@keyframes mmGlow {
    0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: brightness(1.05) drop-shadow(0 4px 15px rgba(255,255,255,0.1)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

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

/* 2. Utility Classes */
.anim-fade-in {
    animation: mmFadeIn var(--anim-duration-base) var(--anim-ease-premium) forwards;
}

.anim-fade-out {
    animation: mmFadeOut var(--anim-duration-base) var(--anim-ease-premium) forwards;
}

.anim-slide-up {
    animation: mmSlideUp var(--anim-duration-slow) var(--anim-ease-premium) forwards;
}

/* 3. Skeleton Loader Premium */
.skeleton {
    background-color: #f1f5f9;
    border-radius: 8px;
    animation: mmSkeleton 1.5s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.6) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: mmShine 2s infinite ease-in-out;
}

/* 4. Sequence Engine (Entrada escalonada de Dashboard y otros) */
.sequence-item {
    opacity: 0;
    will-change: opacity, transform;
}
.sequence-item.is-visible {
    animation: mmFadeIn var(--anim-duration-base) var(--anim-ease-premium) forwards,
               mmSlideUp var(--anim-duration-slow) var(--anim-ease-premium) forwards;
}
/* Retrasos escalonados generados vía JS o clases base */
.delay-100 { animation-delay: 100ms, 100ms !important; }
.delay-200 { animation-delay: 200ms, 200ms !important; }
.delay-300 { animation-delay: 300ms, 300ms !important; }
.delay-400 { animation-delay: 400ms, 400ms !important; }
.delay-500 { animation-delay: 500ms, 500ms !important; }

/* 5. Hover Premium & Click Feedback */
[data-hover="premium"] {
    transition: transform 0.2s var(--anim-ease-premium), box-shadow 0.2s var(--anim-ease-premium) !important;
    will-change: transform, box-shadow;
}
[data-hover="premium"]:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
}

[data-click="feedback"] {
    transition: transform var(--anim-duration-fast) var(--anim-ease-premium) !important;
}
[data-click="feedback"]:active, .is-clicked {
    transform: scale(0.98) !important;
}

/* 6. Animaciones de Wallet (Shine y Glow) */
.anim-wallet-shine {
    animation: mmShine var(--anim-duration-shine) infinite linear;
}
.anim-wallet-glow {
    animation: mmGlow 4s infinite ease-in-out;
}

/* 7. Flip Text Classes */
.flip-text-item {
    transition: transform var(--anim-duration-flip) var(--anim-ease-premium), opacity var(--anim-duration-flip) var(--anim-ease-premium);
    opacity: 0;
    transform: translateY(20px);
    position: absolute;
    width: 100%;
}
.flip-text-item.is-active {
    opacity: 1;
    transform: translateY(0);
}
.flip-text-item.is-exit {
    opacity: 0;
    transform: translateY(-20px);
}

/* 8. Cinematic Level Up Experience (EI-006) */
.cinematic-overlay {
    transition: opacity 400ms ease;
    opacity: 0;
}
.cinematic-overlay.is-active {
    opacity: 1;
}
.cinematic-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(124, 92, 191, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
    opacity: 0;
    transition: opacity 1s ease;
}
.cinematic-light.is-active {
    opacity: 1;
}

.cinematic-wallet-old {
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}
.cinematic-wallet-old.is-morphing {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(10px);
}

.cinematic-wallet-new {
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
}
.cinematic-wallet-new.is-morphing {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}

.cinematic-text-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cinematic-text-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 9. Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .anim-wallet-shine, .anim-wallet-glow, .skeleton::after {
        animation: none !important;
        display: none !important;
    }
    
    [data-hover="premium"]:hover {
        transform: none !important;
    }
    
    .flip-text-item {
        transition: opacity var(--anim-duration-base) ease !important;
        transform: none !important;
    }
    .flip-text-item.is-exit {
        transform: none !important;
    }
    
    /* Reduce Motion overrides for Cinematic */
    .cinematic-wallet-old, .cinematic-wallet-old.is-morphing,
    .cinematic-wallet-new, .cinematic-wallet-new.is-morphing {
        transform: none !important;
        filter: none !important;
        transition: opacity 1s ease !important;
    }
    
    .cinematic-text-slide, .cinematic-text-slide.is-visible {
        transform: none !important;
        transition: opacity 800ms ease !important;
    }
}