/* Exploded View Panel (Fixed) */
.exploded-view-container {
    position: relative;
    width: 100%;
    height: 600px;
    /* Fixed height for canvas */
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a2332 0%, #0a0e17 100%);
    margin: 40px auto;
    max-width: 1000px;
}

#exploded-canvas-container {
    width: 100%;
    height: 100%;
}

.panel-label {
    position: absolute;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--primary-cyan);
    border: 1px solid var(--primary-cyan);
    border-radius: 20px;
    font-size: 0.9rem;
    font-family: 'Exo 2', sans-serif;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(20px);
}

.panel-label.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Specific Label Positions (Adjusted via JS usually, but defaults here) */
#label-glass {
    top: 20%;
    right: 20%;
}

#label-cell {
    top: 45%;
    right: 20%;
}

#label-backsheet {
    top: 70%;
    right: 20%;
}

.scroll-instruction {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.8;
}

.scroll-instruction i {
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}