/* 3D Cube Styles */
   .cube-3d {
       position: absolute;
       width: 2.5rem;
       height: 2.5rem;
       transform-style: preserve-3d;
       transform: rotateX(-20deg) rotateY(45deg);
       z-index: 10;
   }

   .cube-face {
       position: absolute;
       width: 50px;
       height: 50px;
   }

   .cube-face.front {
       background-color: #f0f0f0;
       transform: translateZ(25px);
   }

   .cube-face.back {
       background-color: #d0d0d0;
       transform: translateZ(-25px) rotateY(180deg);
   }

   .cube-face.right {
       background-color: #b0b0b0;
       transform: rotateY(90deg) translateZ(25px);
   }

   .cube-face.left {
       background-color: #c0c0c0;
       transform: rotateY(-90deg) translateZ(25px);
   }

   .cube-face.top {
       background-color: #ffffff;
       transform: rotateX(90deg) translateZ(25px);
   }

   .cube-face.bottom {
       background-color: #909090;
       transform: rotateX(-90deg) translateZ(25px);
   }

   /* Position 3D cubes */
   .cube1 {
       /* top: calc((var(--chain-gap))*3 + 10px);
       left: 180px; */
       top: -40px;
       left: -20px;
   }

  .cube2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 14 + 10px);
    left: calc(30rem + 2.5rem); */
    
    /* New positioning - should be near path1-11 (end of path1) */
    /* path1-11 ends at: top: calc(20px + (var(--chain-gap) * 10) - 1.9rem); left: calc(50px + 19.3rem); */
    
    top: -50px;
    left: calc(50px + 14rem);
}

.cube3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 30 + 10px);
    left: 13rem; */
    top: calc(20px + (var(--chain-gap) * 14) + 1.9rem); /* Between multiplier 9 and 11 */
    left: calc(50px - 12rem);  /* Approximately 13rem from original */
}

.cube4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 111 + 2rem);
    left: 56rem; */
    
    /* New positioning - should be at the end of path11 */
    /* path11-6 ends at: top: calc(20px + (var(--chain-gap) * 97) - 2rem); left: calc(50px + 40.4rem); */
    
    top: calc(20px + (var(--chain-gap) * 98) + 0.5rem);
    left: calc(50px + 29rem);
}




   /* Responsive adjustments */
   @media (max-width: 768px) {
    

       .cube-3d {
           width: 40px;
           height: 40px;
       }

       .cube-face {
           width: 40px;
           height: 40px;
       }

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

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

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

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

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

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

     
   }

   @media (max-width: 480px) {
       .cube-3d {
           width: 30px;
           height: 30px;
       }

       .cube-face {
           width: 30px;
           height: 30px;
       }

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

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

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

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

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

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


   }

/* Add to your existing CSS */
.cube-3d {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cube-3d.visible {
    opacity: 1;
}