/* Stili specifici per la pagina home.html */

.main-nav {
    display: flex;
    gap: 40px; /* Spazio tra i link */
    font-size: 1.425rem; /* Ridotto del 5% */
    text-transform: lowercase;
    position: relative; /* Necessario per posizionare il cubo */
}

.main-nav a {
    opacity: 0; /* Opacità iniziale per l'animazione di fade-in */
    filter: blur(5px); /* Sfocatura iniziale */
    transition: color 0.3s ease-in-out, filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    position: relative; /* Per posizionare il cubo rispetto al link */
}

.main-nav a:hover {
    color: #B8B8B8;
    filter: blur(1px);
}

/* --- FORME 3D WIREFRAME --- */
.shape-container {
    position: absolute;
    width: 33px;
    height: 33px;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    perspective: 400px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.shape-container.visible {
    opacity: 0.4;
}

.shape-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateShape 8s infinite linear;
}

@keyframes rotateShape {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

/* --- PARALLELEPIPEDO 3D (PRODUCTS) --- */
.cube-container {
    position: absolute;
    width: 33px;
    height: 15px;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    perspective: 400px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.cube-container.visible {
    opacity: 0.7;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 8s infinite linear;
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

.cube-face {
    position: absolute;
    border: 1px solid #080808;
    background: transparent;
}

.cube-face.front,
.cube-face.back {
    width: 33px;
    height: 15px;
}

.cube-face.front {
    transform: translateZ(16.5px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(16.5px);
}

.cube-face.right,
.cube-face.left {
    width: 33px;
    height: 15px;
}

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

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

.cube-face.top,
.cube-face.bottom {
    width: 33px;
    height: 33px;
}

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

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

/* --- SFERA E PIRAMIDE --- */
.shape-line {
    position: absolute;
    background: #080808;
    transform-style: preserve-3d;
}

.shape-edge {
    position: absolute;
    width: 1px;
    background: #080808;
    transform-origin: bottom center;
    transform-style: preserve-3d;
}