/* Geometric Animation CSS */
.geometric-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 1200px;
    z-index: 0; /* Behind content */
    pointer-events: none; /* Let clicks pass through */
}

.shape {
    position: absolute;
    transform-style: preserve-3d;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Common face styles for wireframe look */
.face {
    position: absolute;
    border: 1px solid rgba(200, 200, 200, 0.4); /* Light Gray, thin, transparent */
    background: transparent; /* No background color */
    box-sizing: border-box;
}

/* --- CUBE XL (The Giant) - Left Side --- */
.cube-xl {
    width: 280px;
    height: 280px;
    top: 20%;
    left: 5%;
    animation: rotate3d 35s infinite linear, float 12s infinite ease-in-out;
}
.cube-xl .face { width: 280px; height: 280px; }
.cube-xl .front  { transform: rotateY(0deg) translateZ(140px); }
.cube-xl .back   { transform: rotateY(180deg) translateZ(140px); }
.cube-xl .right  { transform: rotateY(90deg) translateZ(140px); }
.cube-xl .left   { transform: rotateY(-90deg) translateZ(140px); }
.cube-xl .top    { transform: rotateX(90deg) translateZ(140px); }
.cube-xl .bottom { transform: rotateX(-90deg) translateZ(140px); }

/* --- CUBE MD 1 - Right Side --- */
.cube-md-1 {
    width: 100px;
    height: 100px;
    top: 60%;
    right: 10%;
    animation: rotateComplex 25s infinite linear reverse, floatDelayed 10s infinite ease-in-out;
}
.cube-md-1 .face { width: 100px; height: 100px; }
.cube-md-1 .front  { transform: rotateY(0deg) translateZ(50px); }
.cube-md-1 .back   { transform: rotateY(180deg) translateZ(50px); }
.cube-md-1 .right  { transform: rotateY(90deg) translateZ(50px); }
.cube-md-1 .left   { transform: rotateY(-90deg) translateZ(50px); }
.cube-md-1 .top    { transform: rotateX(90deg) translateZ(50px); }
.cube-md-1 .bottom { transform: rotateX(-90deg) translateZ(50px); }

/* --- CUBE MD 2 - Right Side --- */
.cube-md-2 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 5%;
    animation: rotate3d 28s infinite linear, float 11s infinite ease-in-out;
}
.cube-md-2 .face { width: 80px; height: 80px; }
.cube-md-2 .front  { transform: rotateY(0deg) translateZ(40px); }
.cube-md-2 .back   { transform: rotateY(180deg) translateZ(40px); }
.cube-md-2 .right  { transform: rotateY(90deg) translateZ(40px); }
.cube-md-2 .left   { transform: rotateY(-90deg) translateZ(40px); }
.cube-md-2 .top    { transform: rotateX(90deg) translateZ(40px); }
.cube-md-2 .bottom { transform: rotateX(-90deg) translateZ(40px); }

/* --- CUBE SM 1 - Left Side --- */
.cube-sm-1 {
    width: 50px;
    height: 50px;
    top: 80%;
    left: 15%;
    animation: rotateComplex 20s infinite linear, floatDelayed 8s infinite ease-in-out;
}
.cube-sm-1 .face { width: 50px; height: 50px; }
.cube-sm-1 .front  { transform: rotateY(0deg) translateZ(25px); }
.cube-sm-1 .back   { transform: rotateY(180deg) translateZ(25px); }
.cube-sm-1 .right  { transform: rotateY(90deg) translateZ(25px); }
.cube-sm-1 .left   { transform: rotateY(-90deg) translateZ(25px); }
.cube-sm-1 .top    { transform: rotateX(90deg) translateZ(25px); }
.cube-sm-1 .bottom { transform: rotateX(-90deg) translateZ(25px); }

/* --- CUBE SM 2 - Right Side --- */
.cube-sm-2 {
    width: 40px;
    height: 40px;
    top: 40%;
    right: 15%;
    animation: rotate3d 18s infinite linear reverse, float 9s infinite ease-in-out;
}
.cube-sm-2 .face { width: 40px; height: 40px; }
.cube-sm-2 .front  { transform: rotateY(0deg) translateZ(20px); }
.cube-sm-2 .back   { transform: rotateY(180deg) translateZ(20px); }
.cube-sm-2 .right  { transform: rotateY(90deg) translateZ(20px); }
.cube-sm-2 .left   { transform: rotateY(-90deg) translateZ(20px); }
.cube-sm-2 .top    { transform: rotateX(90deg) translateZ(20px); }
.cube-sm-2 .bottom { transform: rotateX(-90deg) translateZ(20px); }

/* --- CUBE XS (Tiny) - Left Side --- */
.cube-xs {
    width: 20px;
    height: 20px;
    top: 5%;
    left: 20%;
    animation: rotateComplex 15s infinite linear, floatDelayed 7s infinite ease-in-out;
}
.cube-xs .face { width: 20px; height: 20px; }
.cube-xs .front  { transform: rotateY(0deg) translateZ(10px); }
.cube-xs .back   { transform: rotateY(180deg) translateZ(10px); }
.cube-xs .right  { transform: rotateY(90deg) translateZ(10px); }
.cube-xs .left   { transform: rotateY(-90deg) translateZ(10px); }
.cube-xs .top    { transform: rotateX(90deg) translateZ(10px); }
.cube-xs .bottom { transform: rotateX(-90deg) translateZ(10px); }


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

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

@keyframes float {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -30px; }
}

@keyframes floatDelayed {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -40px; }
}