/* CSS 3D Crystal Octahedron */
.crystal-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Start centered */
    width: 300px;
    height: 450px;
    /* Increased size (+50%) */
    perspective: 1000px;
    z-index: 5;
    pointer-events: none;
    /* Let clicks pass through */
}

.crystal-obj {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spinCrystal 15s infinite linear;
}

.face {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    /* Increased (+50%) */
    border-right: 150px solid transparent;
    /* Increased (+50%) */
    opacity: 0.7;
    /* Glass Effect */
    background: linear-gradient(135deg, rgba(0, 243, 255, 0.2), rgba(157, 0, 255, 0.2));
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Define Pyramid shapes */
.top-1,
.top-2,
.top-3,
.top-4 {
    border-bottom: 225px solid rgba(0, 243, 255, 0.15);
    /* Increased (+50%) */
    transform-origin: bottom center;
}

.bottom-1,
.bottom-2,
.bottom-3,
.bottom-4 {
    border-top: 225px solid rgba(157, 0, 255, 0.15);
    /* Increased (+50%) */
    border-bottom: none;
    transform-origin: top center;
    top: 225px;
    /* Shift down to meet top half (+50%) */
}

/* Transform Faces into Octahedron */
/* Top Pyramid */
.top-1 {
    transform: translateZ(150px) rotateX(30deg);
}

.top-2 {
    transform: rotateY(90deg) translateZ(150px) rotateX(30deg);
}

.top-3 {
    transform: rotateY(180deg) translateZ(150px) rotateX(30deg);
}

.top-4 {
    transform: rotateY(-90deg) translateZ(150px) rotateX(30deg);
}

/* Bottom Pyramid */
.bottom-1 {
    transform: translateZ(150px) rotateX(-30deg);
}

.bottom-2 {
    transform: rotateY(90deg) translateZ(150px) rotateX(-30deg);
}

.bottom-3 {
    transform: rotateY(180deg) translateZ(150px) rotateX(-30deg);
}

.bottom-4 {
    transform: rotateY(-90deg) translateZ(150px) rotateX(-30deg);
}


/* Animations */
@keyframes spinCrystal {
    0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(180deg);
    }
}

/* Remove old settings if they interfere */
.hero-3d-obj {
    display: none;
}