/* CSS para Painéis Futuristas Translúcidos Animados */
.placeholder-paineis-futuristas {
    position: relative;
    width: 100%;
    height: 192px; /* h-48 from Tailwind */
    background-color: #0f0f23; /* Azul escuro/Roxo como base */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.placeholder-paineis-futuristas::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid transparent;
    border-top-color: #6366f1; /* indigo-500 */
    border-right-color: #6366f1;
    border-radius: 50%;
    animation: paineis-loader-spin 0.8s ease infinite;
    z-index: 10;
    transition: opacity 0.3s ease;
}

@keyframes paineis-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.placeholder-paineis-futuristas.loaded::before {
    opacity: 0;
    animation: none;
}

.placeholder-paineis-futuristas .painel-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.5s ease 0.2s;
}

.placeholder-paineis-futuristas.loaded .painel-layer {
    opacity: 0;
}

.placeholder-paineis-futuristas .painel {
    position: absolute;
    background-color: rgba(167, 139, 250, 0.1); /* violet-400 com alpha */
    border: 1px solid rgba(196, 181, 253, 0.3); /* violet-300 com alpha */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    animation: painel-drift 10s infinite alternate ease-in-out;
}

/* Example panels, JS would generate these dynamically */
.placeholder-paineis-futuristas .painel-1 {
    width: 60%; height: 40%; top: 10%; left: 5%;
    transform: rotate(-5deg);
    animation-delay: -2s;
}
.placeholder-paineis-futuristas .painel-2 {
    width: 50%; height: 50%; top: 40%; left: 35%;
    transform: rotate(8deg);
    animation-delay: -5s;
}
.placeholder-paineis-futuristas .painel-3 {
    width: 40%; height: 30%; top: 25%; left: 50%;
    transform: rotate(-12deg);
    animation-delay: -8s;
}

@keyframes painel-drift {
    0% { transform: translate(0px, 0px) rotate(var(--initial-rotate, 0deg)); }
    100% { transform: translate(calc(var(--drift-x, 0) * 5px), calc(var(--drift-y, 0) * 5px)) rotate(calc(var(--initial-rotate, 0deg) + var(--drift-rotate, 0deg))); }
}

.placeholder-paineis-futuristas:hover .painel {
    background-color: rgba(167, 139, 250, 0.2);
    border-color: rgba(196, 181, 253, 0.5);
}