/* =========================================
   GLOBAL BACKGROUND STYLES (Common)
   ========================================= */

:root {
    /* JSが動かない場合のフォールバック用 */
    --cube-color: rgba(255, 255, 255, 0.1);
}

/* --- Background Layer --- */
#bg-layer {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -100; overflow: hidden; pointer-events: none;
}

/* --- Orbs --- */
.orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6;
    mix-blend-mode: screen; will-change: transform; transform-origin: center center;
}
.orb-1 { width: 35vw; height: 35vw; background: radial-gradient(circle, #ff4b1f, #ff9068); top: -10%; left: -5%; }
.orb-2 { width: 30vw; height: 30vw; background: radial-gradient(circle, #00c6ff, #0072ff); bottom: -5%; right: -5%; }
.orb-3 { width: 25vw; height: 25vw; background: radial-gradient(circle, #f09819, #edde5d); opacity: 0.4; top: 40%; left: 40%; }

/* --- Cube Container & Animation --- */
.cube-container {
    position: fixed; top: 50%; left: 50%;
    /* レスポンシブサイズ計算 (clamp) */
    width: clamp(250px, 40vw, 400px); height: clamp(250px, 40vw, 400px);
    margin-top: calc(clamp(250px, 40vw, 400px) / -2);
    margin-left: calc(clamp(250px, 40vw, 400px) / -2);
    perspective: 1000px; z-index: -50; pointer-events: none;
}

.cube {
    width: 100%; height: 100%; position: absolute;
    transform-style: preserve-3d; animation: spinCube 40s infinite linear;
}

.face {
    position: absolute; width: 100%; height: 100%;
    border: 1px solid var(--cube-color); background: transparent;
    transition: border-color 0.1s;
}

/* Faces Positioning */
.f1 { transform: rotateY(0deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }
.f3 { transform: rotateY(180deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }
.f5 { transform: rotateX(90deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }
.f6 { transform: rotateX(-90deg) translateZ(calc(clamp(250px, 40vw, 400px) / 2)); }

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