/* --- Advanced Logic Core 3D Animation (Contact Section) --- */
.contact-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    perspective: 1200px;
}

.logic-core-container {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: containerFloat 6s ease-in-out infinite;
}

/* Central Glowing Core */
.logic-core-center {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #fff, var(--primary));
    border-radius: 50%;
    box-shadow:
        0 0 30px var(--primary),
        0 0 60px var(--primary-light),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    z-index: 10;
    position: relative;
    animation: coreBreathing 4s ease-in-out infinite;
}

/* Core Shockwave Effect */
.logic-core-center::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: shockwave 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.logic-core-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(42, 140, 166, 0.15) 0%, transparent 60%);
    z-index: 0;
    animation: glowExpand 5s infinite alternate;
}

/* Orbital Rings - 3D Gyroscope Effect */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 0 10px rgba(42, 140, 166, 0.1);
}

.ring-1 {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(42, 140, 166, 0.4);
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    animation: rotate3D-1 10s linear infinite;
}

.ring-2 {
    width: 220px;
    height: 220px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-left: 2px solid var(--primary-light);
    border-right: 2px solid var(--primary-light);
    animation: rotate3D-2 15s linear infinite reverse;
}

.ring-3 {
    width: 280px;
    height: 280px;
    border: 1px dashed rgba(42, 140, 166, 0.3);
    animation: rotate3D-3 20s linear infinite;
}

/* Floating Tech Icons - Orbiting Satellites */
.float-icon {
    position: absolute;
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    font-size: 1.2rem;
    z-index: 15;
    backface-visibility: hidden;
    /* Hide when behind */
}

/* Positions using 3D transforms to orbit */
.icon-web {
    animation: orbitIcon1 12s linear infinite;
}

.icon-ai {
    animation: orbitIcon2 16s linear infinite;
}

.icon-cloud {
    animation: orbitIcon3 14s linear infinite;
}

.icon-app {
    animation: orbitIcon4 18s linear infinite;
}

/* Text Below Visual */
.visual-text {
    margin-top: 50px;
    text-align: center;
    position: relative;
    z-index: 20;
}

.visual-text h3 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.visual-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Keyframes */

@keyframes rotate3D-1 {
    0% {
        transform: rotateX(70deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(70deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes rotate3D-2 {
    0% {
        transform: rotateX(120deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(120deg) rotateY(360deg) rotateZ(-180deg);
    }
}

@keyframes rotate3D-3 {
    0% {
        transform: rotateX(45deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(45deg) rotateY(360deg);
    }
}

@keyframes coreBreathing {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 30px var(--primary);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 60px var(--primary-light);
    }
}

@keyframes shockwave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes glowExpand {
    0% {
        transform: scale(0.8);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes containerFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Orbit Animations for Icons - Calculating paths */
/* We simulate orbits by transforming rotateY/Z and then counter-rotating index to keep icon upright */
@keyframes orbitIcon1 {
    0% {
        transform: rotateY(0deg) translateZ(180px) rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg) translateZ(180px) rotateY(-360deg);
    }
}

@keyframes orbitIcon2 {
    0% {
        transform: rotateX(60deg) rotateZ(0deg) translateZ(200px) rotateZ(0deg) rotateX(-60deg);
    }

    100% {
        transform: rotateX(60deg) rotateZ(360deg) translateZ(200px) rotateZ(-360deg) rotateX(-60deg);
    }
}

@keyframes orbitIcon3 {
    0% {
        transform: rotateY(90deg) rotateX(0deg) translateZ(170px) rotateX(0deg) rotateY(-90deg);
    }

    100% {
        transform: rotateY(90deg) rotateX(360deg) translateZ(170px) rotateX(-360deg) rotateY(-90deg);
    }
}

@keyframes orbitIcon4 {
    0% {
        transform: rotateZ(0deg) translateZ(250px) rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-360deg) translateZ(250px) rotateZ(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .logic-core-container {
        transform: scale(0.7);
    }

    .contact-visual {
        min-height: 350px;
    }
}