/* Compiz-style Desktop Effects */

/* ===== WOBBLY WINDOWS ===== */
.window {
    transition: transform 0.1s ease-out, box-shadow 0.2s ease;
}

.window.wobble {
    animation: wobble 0.4s ease-out;
}

@keyframes wobble {
    0% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.02, 0.98) rotate(1deg); }
    40% { transform: scale(0.98, 1.02) rotate(-1deg); }
    60% { transform: scale(1.01, 0.99) rotate(0.5deg); }
    80% { transform: scale(0.99, 1.01) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.window.dragging {
    transition: none !important;
    cursor: grabbing !important;
}

.window.dragging.wobbly-active {
    animation: jellyDrag 0.15s ease infinite;
}

@keyframes jellyDrag {
    0% { transform: skewX(0deg) skewY(0deg); }
    25% { transform: skewX(2deg) skewY(1deg); }
    50% { transform: skewX(0deg) skewY(0deg); }
    75% { transform: skewX(-2deg) skewY(-1deg); }
    100% { transform: skewX(0deg) skewY(0deg); }
}

/* ===== WINDOW OPEN/CLOSE EFFECTS ===== */
.window.zoom-open {
    animation: zoomOpen 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoomOpen {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.window.closing {
    animation: zoomClose 0.2s ease-in forwards;
    pointer-events: none;
}

@keyframes zoomClose {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
}

/* ===== WINDOW SHADOWS & GLOW ===== */
.window.glow-effect {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(135, 167, 82, 0.3),
        0 0 20px rgba(135, 167, 82, 0.15);
}

.window:not(.inactive).glow-effect {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(135, 167, 82, 0.5),
        0 0 40px rgba(135, 167, 82, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ===== EXPO MODE ===== */
#expo-overlay {
    position: fixed;
    top: 28px;
    left: 0;
    right: 0;
    bottom: 28px;
    background: rgba(0, 0, 0, 0.92);
    z-index: 8500;
    display: none;
    padding: 40px;
    overflow: auto;
}

#expo-overlay.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    align-content: start;
}

.expo-window {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #444;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    aspect-ratio: 16/10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.expo-window:hover {
    border-color: var(--accent, #87a752);
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(135, 167, 82, 0.2);
}

.expo-window-title {
    color: #fff;
    font-size: 13px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    border-bottom: 1px solid #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expo-window-preview {
    flex: 1;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}