/**
 * 🌪️ MANGO KINETIC V21.0 (HARDWARE ACCELERATED)
 * Leyes de movimiento, inercia y feedback háptico.
 */

:root {
    --k-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --k-ease-flow: cubic-bezier(0.16, 1, 0.3, 1);
    --k-time-micro: 150ms;
    --k-time-macro: 500ms;
}

/* 1. FEEDBACK HÁPTICO (BOTONES) */
.k-btn-press {
    transition: transform var(--k-time-micro) var(--k-ease-spring), opacity var(--k-time-micro) linear;
    will-change: transform;
    cursor: pointer;
}
.k-btn-press:active {
    transform: scale(0.92);
    opacity: 0.8;
}

/* 2. COREOGRAFÍA DE ENTRADA (FADE UP) */
.animate-fade-in {
    animation: k-fade-up var(--k-time-macro) var(--k-ease-flow) forwards;
    opacity: 0;
}
@keyframes k-fade-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 3. ESTADOS DE CARGA (SKELETON) */
.k-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: k-shimmer 2s infinite linear;
    border-radius: 8px;
}
@keyframes k-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 4. ANIMACIONES Z-STACK (PRISM ENGINE) */
.tm-view-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform var(--k-time-macro) var(--k-ease-flow), opacity var(--k-time-macro) var(--k-ease-flow), filter var(--k-time-macro) var(--k-ease-flow);
    will-change: transform, opacity, filter;
}

.is-entering-z { transform: translate3d(0, 0, -1000px); opacity: 0; }
.is-entering-x { transform: translate3d(100%, 0, 0); opacity: 0; }
.is-active { transform: translate3d(0, 0, 0); opacity: 1; }

.is-frozen {
    transform: translate3d(0, 0, -300px) scale(0.85);
    filter: brightness(0.2) blur(10px);
    pointer-events: none; /* Deshabilita clics en capas inferiores */
}