/**
 * 🤖 AiLydian Cyborg Orbital Hero System
 * Dr. Lydia Sentinel with AI Ecosystem Orbitals
 * Version: 1.0.0 PRODUCTION
 * Date: 2025-10-07
 * Pure CSS - Zero Dependencies - Ultra Performance
 */

/* ========== HERO CONTAINER ========== */

.hero-cyborg-orbital {
    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding: 120px 40px 80px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);
}

.hero-cyborg-orbital::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(64, 156, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(16, 163, 127, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-cyborg-content {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ========== LEFT SIDE - TEXT CONTENT ========== */

.cyborg-text-content {
    max-width: 600px;
    position: relative;
    z-index: 10;
}

.cyborg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(64, 156, 255, 0.1);
    border: 1px solid rgba(64, 156, 255, 0.3);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64fcff;
    margin-bottom: 24px;
    animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(64, 156, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(64, 156, 255, 0.5), 0 0 30px rgba(64, 156, 255, 0.3);
    }
}

.cyborg-hero-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #64fcff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shine 8s ease-in-out infinite;
}

@keyframes title-shine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.cyborg-typewriter-wrapper {
    margin-bottom: 30px;
    min-height: 60px;
}

.cyborg-typewriter {
    font-family: 'Caveat', cursive;
    font-size: 2.5rem;
    font-weight: 700;
    color: #64fcff;
    text-shadow: 0 0 20px rgba(100, 252, 255, 0.5);
}

.cyborg-hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 40px;
}

.cyborg-hero-subtitle strong {
    color: #64fcff;
    font-weight: 700;
}

.cyborg-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cyborg-btn {
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cyborg-btn-primary {
    background: linear-gradient(135deg, #10A37F 0%, #0D8F6E 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(16, 163, 127, 0.3);
}

.cyborg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(16, 163, 127, 0.4);
}

.cyborg-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.cyborg-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========== RIGHT SIDE - CYBORG ORBITAL SYSTEM ========== */

.cyborg-orbital-container {
    position: relative;
    width: 100%;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========== CYBORG CHARACTER CENTER ========== */

.cyborg-character-center {
    position: absolute;
    width: 180px;
    height: 550px;
    z-index: 20;
    animation: cyborg-float 6s ease-in-out infinite;
}

@keyframes cyborg-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

/* Cyborg Aura */
.cyborg-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 650px;
    background: radial-gradient(ellipse,
        rgba(64, 156, 255, 0.3) 0%,
        rgba(64, 156, 255, 0.15) 30%,
        rgba(16, 163, 127, 0.1) 60%,
        transparent 80%
    );
    animation: aura-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes aura-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

/* Hair (behind head) */
.cyborg-hair {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 300px;
    z-index: -1;
}

.hair-strand {
    position: absolute;
    width: 40px;
    height: 280px;
    background: linear-gradient(180deg,
        #e8e8e8 0%,
        #d0d0d0 30%,
        #b8b8b8 70%,
        #a0a0a0 100%
    );
    border-radius: 50%;
    transform-origin: top center;
}

.hair-strand:nth-child(1) {
    left: 0;
    animation: hair-wave1 4s ease-in-out infinite;
}

.hair-strand:nth-child(2) {
    left: 35px;
    animation: hair-wave2 4.5s ease-in-out infinite;
}

.hair-strand:nth-child(3) {
    left: 70px;
    animation: hair-wave3 5s ease-in-out infinite;
}

.hair-strand:nth-child(4) {
    left: 105px;
    animation: hair-wave4 4.2s ease-in-out infinite;
}

.hair-strand:nth-child(5) {
    left: 140px;
    animation: hair-wave5 4.8s ease-in-out infinite;
}

@keyframes hair-wave1 {
    0%, 100% { transform: rotate(-2deg) scaleY(1); }
    50% { transform: rotate(-5deg) scaleY(1.02); }
}

@keyframes hair-wave2 {
    0%, 100% { transform: rotate(-1deg) scaleY(1); }
    50% { transform: rotate(2deg) scaleY(1.03); }
}

@keyframes hair-wave3 {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    50% { transform: rotate(-3deg) scaleY(1.02); }
}

@keyframes hair-wave4 {
    0%, 100% { transform: rotate(1deg) scaleY(1); }
    50% { transform: rotate(4deg) scaleY(1.03); }
}

@keyframes hair-wave5 {
    0%, 100% { transform: rotate(2deg) scaleY(1); }
    50% { transform: rotate(-2deg) scaleY(1.02); }
}

/* Head */
.cyborg-head {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 220px;
    z-index: 10;
}

/* Split Face - Human Side (Left) */
.cyborg-face-human {
    position: absolute;
    width: 90px;
    height: 220px;
    left: 0;
    background: linear-gradient(135deg,
        #f5d6c6 0%,
        #e8baa8 40%,
        #d4a18f 100%
    );
    border-radius: 50% 0 0 40%;
    box-shadow:
        inset -15px 0 30px rgba(0, 0, 0, 0.2),
        inset 10px 10px 20px rgba(255, 255, 255, 0.1);
}

/* Split Face - Mechanical Side (Right) */
.cyborg-face-mech {
    position: absolute;
    width: 90px;
    height: 220px;
    right: 0;
    background: linear-gradient(225deg,
        #2c3e50 0%,
        #34495e 30%,
        #4a5f7f 60%,
        #5d7a9e 100%
    );
    border-radius: 0 50% 40% 0;
    box-shadow:
        inset 15px 0 30px rgba(0, 0, 0, 0.4),
        inset -5px -5px 20px rgba(100, 180, 255, 0.3),
        0 0 30px rgba(64, 156, 255, 0.4);
    overflow: hidden;
}

/* Mechanical circuits */
.cyborg-circuits {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 10px,
            rgba(64, 156, 255, 0.15) 10px,
            rgba(64, 156, 255, 0.15) 11px
        ),
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 10px,
            rgba(64, 156, 255, 0.15) 10px,
            rgba(64, 156, 255, 0.15) 11px
        );
    animation: circuit-pulse 3s ease-in-out infinite;
}

@keyframes circuit-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Human Eye (Left) */
.cyborg-eye-human {
    position: absolute;
    top: 80px;
    left: 35px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle,
        #ffffff 0%,
        #4a90e2 40%,
        #2c5f99 60%,
        #1a3d6b 80%
    );
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: human-eye-blink 5s ease-in-out infinite;
}

@keyframes human-eye-blink {
    0%, 48%, 52%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Mechanical Eye (Right) */
.cyborg-eye-mech {
    position: absolute;
    top: 76px;
    right: 35px;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle,
        #ffffff 0%,
        #64fcff 20%,
        #409cff 50%,
        #2c3e50 80%
    );
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(100, 252, 255, 0.8),
        0 0 40px rgba(64, 156, 255, 0.6),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: mech-eye-glow 2s ease-in-out infinite;
}

@keyframes mech-eye-glow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(100, 252, 255, 0.8),
            0 0 40px rgba(64, 156, 255, 0.6);
    }
    50% {
        box-shadow:
            0 0 30px rgba(100, 252, 255, 1),
            0 0 60px rgba(64, 156, 255, 0.9),
            0 0 90px rgba(64, 156, 255, 0.5);
    }
}

/* Scanner Ring */
.cyborg-eye-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-top-color: rgba(64, 156, 255, 0.8);
    border-right-color: rgba(64, 156, 255, 0.6);
    border-radius: 50%;
    animation: scanner-rotate 3s linear infinite;
}

@keyframes scanner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Nose */
.cyborg-nose {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 20px;
    background: linear-gradient(180deg,
        rgba(212, 161, 143, 0.6) 0%,
        rgba(180, 140, 125, 0.8) 100%
    );
    border-radius: 0 0 8px 8px;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mouth */
.cyborg-mouth {
    position: absolute;
    top: 165px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(180, 100, 100, 0.6) 0%,
        rgba(120, 120, 140, 0.6) 100%
    );
    border-radius: 0 0 20px 20px;
}

/* Neck */
.cyborg-neck {
    position: absolute;
    top: 265px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 60px;
    background: linear-gradient(90deg,
        #e8baa8 0%,
        #d4a18f 30%,
        #4a5f7f 70%,
        #34495e 100%
    );
    border-radius: 40% 40% 50% 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Collar */
.cyborg-collar {
    position: absolute;
    top: 315px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 50px;
    background: linear-gradient(135deg,
        #2c3e50 0%,
        #34495e 50%,
        #2c3e50 100%
    );
    border-radius: 50% 50% 0 0;
    border: 2px solid rgba(64, 156, 255, 0.3);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

/* Shoulders */
.cyborg-shoulders {
    position: absolute;
    top: 355px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 80px;
    background: linear-gradient(135deg,
        #34495e 0%,
        #2c3e50 50%,
        #34495e 100%
    );
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Human Arm (Left) */
.cyborg-arm-human {
    position: absolute;
    top: 365px;
    left: 5px;
    width: 60px;
    height: 180px;
    background: linear-gradient(180deg,
        #e8baa8 0%,
        #d4a18f 50%,
        #c79080 100%
    );
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: human-arm-wave 6s ease-in-out infinite;
}

@keyframes human-arm-wave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg); }
}

.cyborg-hand-human {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 50px;
    background: linear-gradient(135deg,
        #e8baa8 0%,
        #d4a18f 100%
    );
    border-radius: 50% 50% 30% 30%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Mechanical Arm (Right) */
.cyborg-arm-mech {
    position: absolute;
    top: 365px;
    right: 5px;
    width: 70px;
    height: 200px;
    background: linear-gradient(180deg,
        #4a5f7f 0%,
        #34495e 50%,
        #2c3e50 100%
    );
    border-radius: 30px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4),
        inset -5px -5px 20px rgba(64, 156, 255, 0.2);
    animation: mech-arm-move 5s ease-in-out infinite;
}

@keyframes mech-arm-move {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}

.mech-joint {
    position: absolute;
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg,
        rgba(64, 156, 255, 0.3) 0%,
        rgba(64, 156, 255, 0.6) 50%,
        rgba(64, 156, 255, 0.3) 100%
    );
    border-top: 1px solid rgba(64, 156, 255, 0.8);
    border-bottom: 1px solid rgba(64, 156, 255, 0.8);
}

.mech-joint-1 {
    top: 60px;
}

.mech-joint-2 {
    top: 130px;
}

.cyborg-hand-mech {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg,
        #34495e 0%,
        #2c3e50 100%
    );
    border-radius: 40% 40% 20% 20%;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(64, 156, 255, 0.3);
}

.mech-finger {
    position: absolute;
    bottom: -18px;
    width: 8px;
    height: 20px;
    background: linear-gradient(180deg,
        #34495e 0%,
        #2c3e50 100%
    );
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.mech-finger:nth-child(1) { left: 5px; }
.mech-finger:nth-child(2) { left: 15px; height: 24px; }
.mech-finger:nth-child(3) { left: 25px; height: 22px; }
.mech-finger:nth-child(4) { right: 5px; }

/* Tech Particles */
.tech-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #64fcff, #409cff);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(100, 252, 255, 0.8);
    opacity: 0;
    animation: particle-float 8s ease-in-out infinite;
}

.tech-particle:nth-child(1) {
    top: 100px;
    left: -30px;
    animation-delay: 0s;
}

.tech-particle:nth-child(2) {
    top: 250px;
    right: -30px;
    animation-delay: 2.5s;
}

.tech-particle:nth-child(3) {
    bottom: 150px;
    left: -20px;
    animation-delay: 5s;
}

@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0.8;
    }
}

/* ========== AI ORBITAL NODES ========== */

.ai-orbital-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    z-index: 5;
}

/* Orbital rings */
.orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(64, 156, 255, 0.2);
    border-radius: 50%;
    animation: ring-rotate 40s linear infinite;
}

.orbital-ring-1 {
    width: 400px;
    height: 400px;
}

.orbital-ring-2 {
    width: 520px;
    height: 520px;
    animation-duration: 50s;
    animation-direction: reverse;
}

@keyframes ring-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* AI Nodes */
.ai-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    animation: node-orbit 20s linear infinite;
}

.ai-node-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 163, 127, 0.8), rgba(13, 143, 110, 0.9));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow:
        0 0 20px rgba(16, 163, 127, 0.5),
        0 0 40px rgba(16, 163, 127, 0.3);
    animation: node-pulse 3s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ai-node-inner:hover {
    transform: scale(1.2);
}

@keyframes node-orbit {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

@keyframes node-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(16, 163, 127, 0.5),
            0 0 40px rgba(16, 163, 127, 0.3);
    }
    50% {
        box-shadow:
            0 0 30px rgba(16, 163, 127, 0.8),
            0 0 60px rgba(16, 163, 127, 0.5);
    }
}

/* Individual node colors and positions */
.ai-node:nth-child(1) { animation-delay: 0s; }
.ai-node:nth-child(1) .ai-node-inner {
    background: linear-gradient(135deg, #10A37F, #0D8F6E);
}

.ai-node:nth-child(2) { animation-delay: -5s; }
.ai-node:nth-child(2) .ai-node-inner {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.ai-node:nth-child(3) { animation-delay: -10s; }
.ai-node:nth-child(3) .ai-node-inner {
    background: linear-gradient(135deg, #1a73e8, #1557b0);
}

.ai-node:nth-child(4) { animation-delay: -15s; }
.ai-node:nth-child(4) .ai-node-inner {
    background: linear-gradient(135deg, #9333ea, #7928ca);
}

/* ========== RESPONSIVE DESIGN ========== */

@media (max-width: 1024px) {
    .hero-cyborg-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .cyborg-text-content {
        max-width: 100%;
    }

    .cyborg-hero-title {
        font-size: 3rem;
    }

    .cyborg-typewriter {
        font-size: 2rem;
    }

    .cyborg-orbital-container {
        height: 500px;
    }

    .cyborg-character-center {
        transform: scale(0.8);
    }

    .ai-orbital-system {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 768px) {
    .hero-cyborg-orbital {
        padding: 100px 20px 60px;
    }

    .cyborg-hero-title {
        font-size: 2.5rem;
    }

    .cyborg-typewriter {
        font-size: 1.75rem;
    }

    .cyborg-hero-subtitle {
        font-size: 1rem;
    }

    .cyborg-orbital-container {
        height: 400px;
    }

    .cyborg-character-center {
        transform: scale(0.6);
    }

    .ai-orbital-system {
        transform: translate(-50%, -50%) scale(0.6);
    }

    .ai-node {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }

    .ai-node-inner {
        font-size: 1.5rem;
    }

    @keyframes node-orbit {
        from {
            transform: rotate(0deg) translateX(150px) rotate(0deg);
        }
        to {
            transform: rotate(360deg) translateX(150px) rotate(-360deg);
        }
    }
}

@media (max-width: 480px) {
    .cyborg-hero-title {
        font-size: 2rem;
    }

    .cyborg-typewriter {
        font-size: 1.5rem;
    }

    .cyborg-orbital-container {
        height: 350px;
    }

    .cyborg-character-center {
        transform: scale(0.5);
    }

    .ai-orbital-system {
        transform: translate(-50%, -50%) scale(0.5);
    }

    .cyborg-hero-cta {
        flex-direction: column;
    }

    .cyborg-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== PERFORMANCE OPTIMIZATIONS ========== */

.cyborg-character-center,
.ai-orbital-system,
.ai-node,
.hair-strand,
.cyborg-aura {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}