/* TG TERMINAL: TRANSITIONS & SKELETON UI 
    "The Phantom Structure" - Eliminates FOUC and Layout Shift
*/

/* --- 1. THE STAGE MANAGER (Animation Classes) --- */

/* The Container itself */
.module-container {
    opacity: 1;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-out;
    transform: translateY(0);
}

/* State: Leaving */
.module-container.fade-out {
    opacity: 0;
    transform: translateY(-5px); /* Subtle lift */
    pointer-events: none; /* Prevent clicks during transition */
}

/* State: Entering (Hidden) */
.module-container.fade-in-start {
    opacity: 0;
    transform: translateY(5px); /* Start slightly lower */
}

/* State: Entering (Visible) */
.module-container.fade-in-end {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. THE PHANTOM SKELETON (Universal Grid) --- */

.terminal-skeleton {
    display: grid;
    grid-template-rows: 60px 1fr; /* Header area + Content */
    gap: 20px;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-out;
}

.sk-header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sk-title {
    width: 250px;
    height: 32px;
    border-radius: 4px;
}

.sk-actions {
    width: 150px;
    height: 32px;
    border-radius: 4px;
}

.sk-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Standard Terminal Ratio */
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.sk-card {
    background-color: #16191f; /* Slightly lighter than bg */
    border-radius: 8px;
    border: 1px solid #2a2e35;
    position: relative;
    overflow: hidden;
}

.sk-card.large {
    grid-row: span 2;
}

/* --- 3. THE SHIMMER EFFECT (GPU Accelerated) --- */

.skeleton-pulse {
    background: #16191f;
    background: linear-gradient(
        110deg, 
        #16191f 8%, 
        #21252b 18%, 
        #16191f 33%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    to {
        background-position-x: -200%;
    }
}

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