/* ======== 3D Skills Cube CSS ======== */
.preserve-3d {
    transform-style: preserve-3d;
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Basic border and shadow for all faces to look like glass/solid */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.dark .cube-face {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Ensure only the front face (or all faces if desired) has the backdrop blur for glassmorphism */
.cube-front {
    transform: translateZ(64px);
    /* Half of 128px (w-32) */
}

/* Other faces rotated appropriately */
.cube-back {
    transform: rotateY(180deg) translateZ(64px);
}

.cube-right {
    transform: rotateY(90deg) translateZ(64px);
}

.cube-left {
    transform: rotateY(-90deg) translateZ(64px);
}

.cube-top {
    transform: rotateX(90deg) translateZ(64px);
}

.cube-bottom {
    transform: rotateX(-90deg) translateZ(64px);
}

/* Add specialized glow effects for the cube faces */
.cube-face.bg-accentPurple\/10 {
    background-color: rgba(168, 85, 247, 0.1);
}

.cube-face.bg-accentPurple\/5 {
    background-color: rgba(168, 85, 247, 0.05);
}

.cube-face.border-accentPurple\/20 {
    border-color: rgba(168, 85, 247, 0.2);
}

/* ======== Dust Particles CSS ======== */
.dust-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background-color: #60a5fa;
    /* bright blue */
    border-radius: 50%;
    /* Bright blue glow */
    box-shadow: 0 0 10px 2px rgba(96, 165, 250, 0.8), 0 0 20px rgba(96, 165, 250, 0.4);
    pointer-events: none;
    transform-style: preserve-3d;
}