/* ============================================
   Teranet - 3D Cube Animation Styles
   Proper 6-face 3D cube
   ============================================ */

/* Base Keyframes */
@keyframes shadowPulse {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) translateY(100px) scale(0.9);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) translateY(120px) scale(1);
    }
}

@keyframes particleFloat {
    0%, 100% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Cube Shadow */
.cube-shadow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.35) 0%,
        transparent 60%
    );
    border-radius: 50%;
    filter: blur(20px);
    animation: shadowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Glow Rings */
.cube-ring {
    position: absolute;
    border: 2px solid rgba(41, 182, 246, 0.4);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px rgba(41, 182, 246, 0.3);
    pointer-events: none;
}

.cube-ring--top {
    top: -200px;
    left: -200px;
    width: 800px;
    height: 800px;
    animation: pulseRing 3s ease-in-out infinite;
}

.cube-ring--bottom {
    top: -200px;
    left: -200px;
    width: 800px;
    height: 800px;
    animation: pulseRing 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes pulseRing {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.05) rotate(180deg);
    }
}

/* Cube Particle */
.cube-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--neon-blue);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 10px var(--neon-blue);
    pointer-events: none;
}

/* Cube Container */
#cube-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
    overflow: hidden;
}

/* 3D Cube Container - The parent that handles rotation */
.cube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    width: 400px;
    height: 400px;
    margin: 50px;
    will-change: transform;
}

/* Individual Cube Faces */
.cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    backface-visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    transition: opacity 1s ease-in-out;
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1);
}

/* TOP FACE - Lighter blue, facing upward */
.cube__face--top {
    background: linear-gradient(135deg, #29b6f6 0%, #00d4ff 100%);
    transform: translateZ(200px);
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 40%,
        rgba(255, 255, 255, 0.1) 100%
    );
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.3);
}

.cube__face--top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(41, 182, 246, 0.3) 0%,
        transparent 60%
    );
}

/* BOTTOM FACE - Darker, facing downward */
.cube__face--bottom {
    background: linear-gradient(135deg, #1a3a5c 0%, #0a1628 100%);
    transform: translateZ(-200px);
    opacity: 0.9;
}

.cube__face--bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(41, 182, 246, 0.1) 0%,
        transparent 60%
    );
}

/* RIGHT FACE - Dark blue, facing right */
.cube__face--right {
    background: linear-gradient(
        135deg,
        #1a3a5c 0%,
        #2a5075 30%,
        #1a3a5c 60%,
        #0a1628 100%
    );
    transform: translateX(200px);
}

.cube__face--right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(41, 182, 246, 0.15) 30%,
        rgba(41, 182, 246, 0.25) 50%,
        rgba(41, 182, 246, 0.15) 70%,
        transparent 100%
    );
}

/* LEFT FACE - Darker blue, facing left */
.cube__face--left {
    background: linear-gradient(
        135deg,
        #1a3a5c 0%,
        #0a1628 30%,
        #1a3a5c 60%,
        #2a5075 100%
    );
    transform: translateX(-200px);
}

.cube__face--left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        -90deg,
        transparent 0%,
        rgba(41, 182, 246, 0.15) 30%,
        rgba(41, 182, 246, 0.25) 50%,
        rgba(41, 182, 246, 0.15) 70%,
        transparent 100%
    );
}

/* FRONT FACE - Medium blue, facing forward */
.cube__face--front {
    background: linear-gradient(
        135deg,
        #29b6f6 0%,
        #1a3a5c 50%,
        #0a1628 100%
    );
    transform: translateY(-200px);
}

.cube__face--front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        transparent 0%,
        rgba(41, 182, 246, 0.1) 40%,
        rgba(41, 182, 246, 0.2) 50%,
        rgba(41, 182, 246, 0.1) 60%,
        transparent 100%
    );
}

/* BACK FACE - Dark blue, facing backward */
.cube__face--back {
    background: linear-gradient(
        135deg,
        #0a1628 0%,
        #1a3a5c 50%,
        #0a1628 100%
    );
    transform: translateY(200px);
}

.cube__face--back::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        transparent 0%,
        rgba(41, 182, 246, 0.05) 40%,
        rgba(41, 182, 246, 0.1) 50%,
        rgba(41, 182, 246, 0.05) 60%,
        transparent 100%
    );
}

/* Particles on each face */
.cube__face--top .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--top .cube-particle:nth-child(2) { animation-delay: 1.5s; }

.cube__face--bottom .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--bottom .cube-particle:nth-child(2) { animation-delay: 1.5s; }

.cube__face--right .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--right .cube-particle:nth-child(2) { animation-delay: 1.5s; }

.cube__face--left .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--left .cube-particle:nth-child(2) { animation-delay: 1.5s; }

.cube__face--front .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--front .cube-particle:nth-child(2) { animation-delay: 1.5s; }

.cube__face--back .cube-particle {
    animation: particleFloat 3s ease-in-out infinite;
}
.cube__face--back .cube-particle:nth-child(2) { animation-delay: 1.5s; }

/* Glow effects for each face */
.cube__face::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 60%
    );
    opacity: 0.5;
    pointer-events: none;
}

.cube__face--top::before {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 60%
    );
    opacity: 0.7;
}

.cube__face--right::before,
.cube__face--left::before,
.cube__face--back::before {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 60%
    );
    opacity: 0.3;
}

/* Ring effects for top and bottom */
.cube__face--top::before,
.cube__face--bottom::before {
    background: radial-gradient(
        circle at center,
        rgba(41, 182, 246, 0.2) 0%,
        transparent 50%
    );
}

/* Responsive sizes */
@media (max-width: 1024px) {
    .cube {
        width: 350px;
        height: 350px;
        margin: 35px;
    }

    .cube__face--top,
    .cube__face--bottom {
        transform: translateZ(175px);
    }

    .cube__face--right,
    .cube__face--left {
        transform: translateX(175px);
    }

    .cube__face--front,
    .cube__face--back {
        transform: translateY(-175px);
    }

    .cube-ring--top,
    .cube-ring--bottom {
        top: -175px;
        left: -175px;
        width: 700px;
        height: 700px;
    }
}

@media (max-width: 768px) {
    .cube {
        width: 300px;
        height: 300px;
        margin: 25px;
    }

    .cube__face--top,
    .cube__face--bottom {
        transform: translateZ(150px);
    }

    .cube__face--right,
    .cube__face--left {
        transform: translateX(150px);
    }

    .cube__face--front,
    .cube__face--back {
        transform: translateY(-150px);
    }

    .cube-ring--top,
    .cube-ring--bottom {
        top: -150px;
        left: -150px;
        width: 600px;
        height: 600px;
    }
}