/* =========================================
   ADVANCED AI & 3D VISUAL EFFECTS
   ========================================= */

:root {
    --ai-mesh-color: rgba(50, 140, 193, 0.1);
    --ai-node-glow: rgba(50, 140, 193, 0.4);
}

/* --- 3D Wireframe Mesh Background --- */
.wireframe-mesh {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12; /* Lower opacity to avoid title overlap clutters */
    background-image: 
        linear-gradient(rgba(50, 140, 193, 0.4) 0.125rem, transparent 0.125rem),
        linear-gradient(90deg, rgba(50, 140, 193, 0.4) 0.125rem, transparent 0.125rem),
        radial-gradient(circle at center, rgba(50, 140, 193, 0.5) 0.125rem, transparent 0.125rem); /* Adding node dots */
    background-size: 5rem 5rem, 5rem 5rem, 5rem 5rem;
    background-position: center;
    transform: perspective(62.5rem) rotateX(65deg) scale(2.5) translateY(-3.125rem);
    animation: meshScroll 120s linear infinite; /* Deep, slow cinematic motion */
    mask-image: radial-gradient(circle at center, black, transparent 85%);
}

@keyframes meshScroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 50rem; }
}

/* --- Floating AI Shapes --- */
.floating-element {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    filter: blur(2px);
}

/* Light Streaks */
.light-streak {
    width: 0.125rem;
    height: 6.25rem;
    background: linear-gradient(to bottom, transparent, var(--sky-blue), transparent);
    animation: streakDrop 8s linear infinite;
}

@keyframes streakDrop {
    0% { transform: translateY(-120vh) translateX(-50px) scaleY(1); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translateY(120vh) translateX(50px) scaleY(2); opacity: 0; }
}

/* --- 3D Container Float --- */
.cube-container, .pyramid-container {
    animation: containerFloat 6s ease-in-out infinite;
}

@keyframes containerFloat {
    0%, 100% { transform: translateY(0) scale(1.0); }
    50% { transform: translateY(-15px) scale(1.05); }
}

/* --- 3D Cubes --- */
.cube-container {
    perspective: 800px;
    width: 60px;
    height: 60px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(11, 60, 93, 0.8);
    border: 1px solid var(--sky-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
}

.front  { transform: translateZ(30px); }
.back   { transform: rotateY(180deg) translateZ(30px); }
.right  { transform: rotateY(90deg) translateZ(30px); }
.left   { transform: rotateY(-90deg) translateZ(30px); }
.top    { transform: rotateX(90deg) translateZ(30px); }
.bottom { transform: rotateX(-90deg) translateZ(30px); }

.cube-container:hover .cube {
    transform: rotateX(90deg) rotateY(90deg);
}

/* --- 3D Pyramid --- */
.pyramid-container {
    perspective: 800px;
    width: 80px;
    height: 80px;
}

.pyramid {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotatePyramid 15s linear infinite;
}

.pyramid-face {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(217, 179, 16, 0.6);
    transform-origin: 50% 100%;
}

.p-front  { transform: translateZ(20px) rotateX(30deg); }
.p-back   { transform: translateZ(-20px) rotateX(-30deg) rotateY(180deg); }
.p-right  { transform: translateX(20px) rotateZ(30deg) rotateY(90deg); }
.p-left   { transform: translateX(-20px) rotateZ(-30deg) rotateY(-90deg); }

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

/* --- Glowing Particles --- */
.glow-particle {
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    background: var(--sky-blue);
    border-radius: 50%;
    box-shadow: 0 0 0.625rem var(--sky-blue);
    animation: pulseGlow 4s ease-in-out infinite;
}

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

/* --- 3D Footer Globe --- */
.footer-globe-container {
    position: absolute;
    top: 50%;
    left: 85%; /* Slightly offset to the right */
    width: clamp(400px, 60vw, 900px);
    height: clamp(400px, 60vw, 900px);
    transform: translate(-50%, -50%);
    z-index: 2; /* Increased z-index */
    pointer-events: none;
    perspective: 2000px;
}

.sphere {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotateGlobe 45s linear infinite; /* Slightly faster for energy */
}

.sphere-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 1.5px solid rgba(50, 140, 193, 0.65); /* Thinner border but higher contrast */
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(50, 140, 193, 0.35); /* Glow boost */
}

/* Horizontal Rings */
.ring-h-1 { transform: rotateX(90deg) translateZ(0); }
.ring-h-2 { transform: rotateX(90deg) translateZ(150px) scale(0.85); }
.ring-h-3 { transform: rotateX(90deg) translateZ(-150px) scale(0.85); }
.ring-h-4 { transform: rotateX(90deg) translateZ(280px) scale(0.6); }
.ring-h-5 { transform: rotateX(90deg) translateZ(-280px) scale(0.6); }

/* Vertical Rings */
.ring-v-1 { transform: rotateY(0deg); }
.ring-v-2 { transform: rotateY(45deg); }
.ring-v-3 { transform: rotateY(90deg); }
.ring-v-4 { transform: rotateY(135deg); }

/* Glowing Nodes */
.sphere-node {
    position: absolute;
    width: 8px; /* Slightly larger */
    height: 8px;
    background: #328CC1; /* Hardcoded fallback to match */
    border-radius: 50%;
    box-shadow: 0 0 16px #328CC1;
    animation: nodePulse 3s ease-in-out infinite; /* Pulse rhythm */
}


@keyframes rotateGlobe {
    from { transform: rotateX(-15deg) rotateY(0deg); }
    to { transform: rotateX(-15deg) rotateY(360deg); }
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* --- Moving Gradients --- */
.moving-gradient-bg {
    background: linear-gradient(270deg, #0B3C5D, #1D2731, #0B3C5D);
    background-size: 200% 200%;
    animation: movingGradient 15s ease infinite;
}

@keyframes movingGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}