/* CSS para Estrutura Cristalina Orgânica */
.placeholder-estrutura-cristalina {
    position: relative;
    width: 100%;
    /* height: 384px; */ /* h-96 from Tailwind. Will be set by parent or inline style */
    /* md:h-[500px] */
    background-color: #100510; /* Tom escuro, talvez com um leve matiz roxo ou magenta */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.placeholder-estrutura-cristalina::before {
    content: 
    /* Using SVG for a more complex loader shape if desired, or a simpler CSS one */
    /* For now, a pulsating dot loader */
    '111'; /* Font Awesome solid circle, if available, or use a div */
    font-family: 'Font Awesome 5 Free'; /* Example, ensure font is loaded or use CSS shapes */
    font-weight: 900;
    font-size: 20px;
    color: rgba(224, 170, 255, 0.7); /* Light purple */
    position: absolute;
    animation: cristal-loader-pulse 1.5s infinite ease-in-out;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* Fallback if FontAwesome not available, or prefer CSS shape */
.placeholder-estrutura-cristalina.css-loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(224, 170, 255, 0.7);
    box-shadow: 0 0 10px rgba(224, 170, 255, 0.5), 0 0 20px rgba(224, 170, 255, 0.3);
    animation: cristal-loader-pulse 1.5s infinite ease-in-out;
}


@keyframes cristal-loader-pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

.placeholder-estrutura-cristalina.loaded::before {
    opacity: 0;
    animation: none;
}

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

.placeholder-estrutura-cristalina.loaded .cristal-layer {
    opacity: 0;
}

.placeholder-estrutura-cristalina .facet {
    position: absolute;
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.15), rgba(120, 82, 255, 0.25)); /* purple-400 to purple-600 with alpha */
    border: 1px solid rgba(209, 196, 253, 0.2); /* purple-300 with alpha */
    opacity: 0;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

/* JS will generate facets with varying sizes, positions, and animation delays */
/* Example of how facets might animate in */
@keyframes facet-grow-reveal {
    0% { opacity: 0; transform: scale(0.5) rotateX(45deg) rotateY(30deg); }
    100% { opacity: 1; transform: scale(1) rotateX(0deg) rotateY(0deg); }
}

.placeholder-estrutura-cristalina:hover .facet {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.25), rgba(120, 82, 255, 0.35));
    border-color: rgba(209, 196, 253, 0.4);
    transform: scale(1.05) translateZ(5px); /* Slight 3D pop on hover */
}

/* Add a class to use the CSS loader if FontAwesome isn't available or desired */
/* The HTML should then use <div class="placeholder-estrutura-cristalina css-loader">...</div> */