/* nuVision Loading Animation - Teal & Complementary Colors with Position Swapping */

.cabinet-container {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
    perspective: 1500px;
    position: relative;
}

.cabinet-door {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 8px;
    /* Static teal border */
    border: 3px solid #20B2AA;
    /* Teal to complementary colors gradient */
    background: linear-gradient(270deg, #20B2AA, #FF6347, #FFD700, #9370DB, #20B2AA);
    background-size: 500% 500%;
    box-shadow: 
        3px 3px 8px rgba(0, 0, 0, 0.15),
        -3px -3px 8px rgba(255, 255, 255, 0.6),
        inset 1px 1px 2px rgba(255, 255, 255, 0.4);

    /* Animation will be defined per door for coordinated sliding */
}

/* Position swapping animations for 2x2 grid with literal sliding */
.cabinet-door-1 { 
    grid-area: 1 / 1;
    animation: 
        teal-gradient-cycle 8s infinite linear,
        door-1-slide-sequence 13.3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-delay: 0s, 0s;
}
.cabinet-door-2 { 
    grid-area: 1 / 2;
    animation: 
        teal-gradient-cycle 8s infinite linear,
        door-2-slide-sequence 13.3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-delay: -3s, 0s; /* Synchronized exchange timing */
}
.cabinet-door-3 { 
    grid-area: 2 / 1;
    animation: 
        teal-gradient-cycle 8s infinite linear,
        door-3-slide-sequence 13.3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-delay: -6s, -10s;
}
.cabinet-door-4 { 
    grid-area: 2 / 2;
    animation: 
        teal-gradient-cycle 8s infinite linear,
        door-4-slide-sequence 13.3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-delay: -9s, -10s; /* Synchronized exchange timing */
}

@keyframes teal-gradient-cycle {
    0% { background-position: 0% 50%; }
    25% { background-position: 25% 50%; }
    50% { background-position: 50% 50%; }
    75% { background-position: 75% 50%; }
    100% { background-position: 100% 50%; }
}

/* Door 1 (Top-Left) Sliding Sequence with 360° Spinning - Beat-like Timing */
@keyframes door-1-slide-sequence {
    0%, 12% { transform: translate(0, 0) scale(1) rotateY(0deg); }
    16% { transform: translate(50px, 0) scale(1.05) rotateY(180deg); } /* Mid-slide with spin */
    20% { transform: translate(100px, 0) scale(1.05) rotateY(360deg); } /* Complete slide to top-right */
    24%, 36% { transform: translate(0, 0) scale(1) rotateY(0deg); } /* Back to position */
    40% { transform: translate(50px, 50px) scale(1.05) rotateX(180deg); } /* Mid-slide with different axis spin */
    44% { transform: translate(100px, 100px) scale(1.05) rotateX(360deg); } /* Complete slide to bottom-right */
    48%, 100% { transform: translate(0, 0) scale(1) rotateX(0deg); } /* Back to position */
}

/* Door 2 (Top-Right) Sliding Sequence - Exchanges with Door 1 - Beat-like Timing */
@keyframes door-2-slide-sequence {
    0%, 12% { transform: translate(0, 0) scale(1) rotateZ(0deg); }
    16% { transform: translate(-50px, 0) scale(1.05) rotateZ(180deg); } /* Mid-slide with Z-axis spin */
    20% { transform: translate(-100px, 0) scale(1.05) rotateZ(360deg); } /* Exchange to top-left */
    24%, 36% { transform: translate(0, 0) scale(1) rotateZ(0deg); } /* Back to position */
    40% { transform: translate(0, 50px) scale(1.05) rotateY(180deg); } /* Mid-slide with Y-axis spin */
    44% { transform: translate(0, 100px) scale(1.05) rotateY(360deg); } /* Slide to bottom-right */
    48%, 100% { transform: translate(0, 0) scale(1) rotateY(0deg); } /* Back to position */
}

/* Door 3 (Bottom-Left) Sliding Sequence - Exchanges with Door 4 - Beat-like Timing */
@keyframes door-3-slide-sequence {
    0%, 12% { transform: translate(0, 0) scale(1) rotateX(0deg); }
    16% { transform: translate(50px, 0) scale(1.05) rotateX(180deg); } /* Mid-slide with X-axis spin */
    20% { transform: translate(100px, 0) scale(1.05) rotateX(360deg); } /* Exchange to bottom-right */
    24%, 36% { transform: translate(0, 0) scale(1) rotateX(0deg); } /* Back to position */
    40% { transform: translate(0, -50px) scale(1.05) rotateZ(180deg); } /* Mid-slide with Z-axis spin */
    44% { transform: translate(0, -100px) scale(1.05) rotateZ(360deg); } /* Slide to top-left */
    48%, 100% { transform: translate(0, 0) scale(1) rotateZ(0deg); } /* Back to position */
}

/* Door 4 (Bottom-Right) Sliding Sequence - Exchanges with Door 3 - Beat-like Timing */
@keyframes door-4-slide-sequence {
    0%, 12% { transform: translate(0, 0) scale(1) rotateY(0deg); }
    16% { transform: translate(-50px, 0) scale(1.05) rotateY(180deg); } /* Mid-slide with Y-axis spin */
    20% { transform: translate(-100px, 0) scale(1.05) rotateY(360deg); } /* Exchange to bottom-left */
    24%, 36% { transform: translate(0, 0) scale(1) rotateY(0deg); } /* Back to position */
    40% { transform: translate(0, -50px) scale(1.05) rotateX(180deg); } /* Mid-slide with X-axis spin */
    44% { transform: translate(0, -100px) scale(1.05) rotateX(360deg); } /* Slide to top-right */
    48%, 100% { transform: translate(0, 0) scale(1) rotateX(0deg); } /* Back to position */
}

/* Sparkle Animation with Gradient Color Cycling */
.loading-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* Ensure doors maintain proper layering during animations */
.cabinet-door {
    z-index: 2;
}

.cabinet-door:hover {
    z-index: 3;
}

.sparkle {
    position: absolute;
    font-size: 1.1rem;
    opacity: 0;
    /* Gradient color cycling animation */
    animation: 
        sparkle-twinkle 2.7s infinite,
        sparkle-color-cycle 8s infinite linear;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    25% { opacity: 1; transform: scale(1.1); }
    50% { opacity: 0.7; transform: scale(0.8); }
    75% { opacity: 1; transform: scale(1.1); }
}

@keyframes sparkle-color-cycle {
    0% { color: #20B2AA; text-shadow: 0 0 8px #20B2AA; }
    25% { color: #FF6347; text-shadow: 0 0 8px #FF6347; }
    50% { color: #FFD700; text-shadow: 0 0 8px #FFD700; }
    75% { color: #9370DB; text-shadow: 0 0 8px #9370DB; }
    100% { color: #20B2AA; text-shadow: 0 0 8px #20B2AA; }
}

/* Hide/Show animations for the whole container */
.flipping-out { 
    animation: flip-out 0.4s forwards ease-in-out; 
}
.flipping-in { 
    animation: flip-in 0.4s forwards ease-in-out; 
}

/* Ensure loading animation hides completely when generation is complete */
.loading-animation.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

@keyframes flip-out {
    from { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; }
    to { transform: perspective(1000px) rotateY(90deg) scale(0.9); opacity: 0; visibility: hidden; }
}

@keyframes flip-in {
    from { transform: perspective(1000px) rotateY(90deg) scale(0.9); opacity: 0; visibility: hidden; }
    to { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; visibility: visible; }
}

/* Remove static sparkle positioning - now handled dynamically in HTML */

/* Ensure processing animation is properly hidden when complete */
#processingState.hidden,
.processing-container.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}