/* =========================================
   CYBER-ORBIT VIZ (Luminous Constellation Edition)
   ========================================= */

.circle-viz-wrapper {
    max-width: 450px; 
    margin: 0 auto;
    aspect-ratio: 1 / 1; 
    position: relative;
    border-radius: 50%;
    overflow: visible; 
    transition: all 0.3s ease; 
}

/* The Faint Ambient Plasma Ring */
.circle-viz-wrapper::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: inset 0 0 30px rgba(14, 165, 233, 0.05),
                0 0 20px rgba(0, 0, 0, 0.5); 
    z-index: 1;
}

/* =========================================
   STATIONARY CENTRAL DESCRIPTION PANEL
   ========================================= */
.stationary-center-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 65%; 
    height: 65%;
    border-radius: 50%;
    
    background: radial-gradient(circle at 50% 50%, rgba(15, 15, 15, 0.8) 0%, rgba(5, 5, 5, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem;
    
    color: var(--text-muted);
    font-size: 0.95rem; 
    line-height: 1.7;
    text-align: center;
    font-weight: 500;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    z-index: 10;
    pointer-events: none; 
}

.stationary-center-panel.active {
    opacity: 1;
    visibility: visible;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 30px rgba(var(--accent-cyan-rgb), 0.15);
}

/* =========================================
   ROTATION PHYSICS
   ========================================= */
.rotating-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    transform-origin: center;
    animation: rotate 35s linear infinite; /* Slightly slower for elegance */
    z-index: 2;
}

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

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

.circle-viz-wrapper:hover .rotating-container,
.circle-viz-wrapper:hover .tech-node-circle {
    animation-play-state: paused;
}

/* =========================================
   CONSTELLATION STAR NODES
   ========================================= */
.tech-node-circle {
    position: absolute;
    width: 16%; 
    height: 16%;
    border-radius: 50%;
    
    /* NO BACKGROUNDS - Pure floating layout */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
    cursor: pointer; 
    
    transform: translate(-50%, -50%); 
    animation: counter-rotate 35s linear infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* THE PULSING STAR POINT */
.tech-node-circle::before {
    content: '';
    position: absolute;
    top: 0px; 
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px 2px var(--accent-cyan), 
                0 0 20px var(--accent-cyan);
    animation: star-pulse 2s infinite alternate;
    transition: all 0.4s ease;
}

@keyframes star-pulse {
    from { opacity: 0.5; transform: translateX(-50%) scale(0.8); }
    to { opacity: 1; transform: translateX(-50%) scale(1.5); }
}

/* Hovering the Constellation */
.tech-node-circle:hover {
    scale: 1.15;
    z-index: 15;
}

.tech-node-circle:hover::before {
    background: var(--accent-orange);
    box-shadow: 0 0 15px 4px var(--accent-orange), 
                0 0 35px var(--accent-orange);
    transform: translateX(-50%) scale(2);
    animation: none; /* Stop pulsing on hover, hold strong glow */
}

.node-content-visible-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px; /* Push below the star */
}

/* Floating Icon */
.node-icon-circle {
    font-size: 1.6rem; 
    color: rgba(255, 255, 255, 0.8); /* Muted default */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
    transition: all 0.4s ease;
}

.tech-node-circle:hover .node-icon-circle {
    color: var(--accent-orange);
    transform: translateY(-3px);
    filter: drop-shadow(0 0 12px var(--accent-orange));
}

/* Clean, Tracked-out Text */
.node-title-circle {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.65rem;
    margin-top: 6px; 
    margin-bottom: 0; 
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    transition: all 0.4s ease; 
}

.tech-node-circle:hover .node-title-circle {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    font-weight: 800;
}

/* Precise Node Orbital Anchors */
.tech-node-circle.N1 { top: 15%; left: 50%; } 
.tech-node-circle.N2 { top: 28.3%; left: 77.3%; } 
.tech-node-circle.N3 { top: 57.7%; left: 84.3%; } 
.tech-node-circle.N4 { top: 81.5%; left: 65.05%; } 
.tech-node-circle.N5 { top: 81.5%; left: 34.95%; } 
.tech-node-circle.N6 { top: 57.7%; left: 15.7%; } 
.tech-node-circle.N7 { top: 28.3%; left: 22.7%; } 

@media (max-width: 991px) {
    .circle-viz-wrapper { margin-top: 3rem; max-width: 350px; }
    .stationary-center-panel { font-size: 0.85rem; padding: 1.5rem; }
    .node-icon-circle { font-size: 1.3rem; }
    .node-title-circle { font-size: 0.55rem; letter-spacing: 1px; }
}


/* =========================================
   DYNAMIC MASTER BRAND (Logo & Name)
   ========================================= */
#master-brand-fixed {
    position: fixed;
    top: 25px; left: 25px;
    z-index: 2000; 
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
    pointer-events: none; 
}

@media (max-width: 991px) { #master-brand-fixed { display: none !important; } }

.brand-logo-fixed { width: 50px; height: 50px; transition: all 0.4s ease; }
.brand-logo-fixed .dynamic-sat-dot {
    fill: var(--accent-orange); 
    filter: drop-shadow(0 0 8px var(--accent-orange)); 
    animation: branding-glow 2s infinite alternate;
}
.brand-logo-fixed .dynamic-main-ring {
    stroke: var(--accent-orange); 
    filter: drop-shadow(0 0 10px var(--accent-orange)); 
    opacity: 0.9;
}
.brand-logo-fixed .dynamic-inner-ring {
    stroke: var(--accent-orange); 
    opacity: 0.3;
}
.brand-logo-fixed .logo-text-yk {
    fill: var(--accent-orange); 
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    text-anchor: middle;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 5px var(--accent-orange)); 
}
.brand-name-fixed {
    color: #ffffff; 
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-left: 20px;
    opacity: 0.9;
    text-rendering: optimizeLegibility;
}
@media (max-width: 1199px) { .brand-name-fixed { font-size: 1.3rem; letter-spacing: 2px; } }

@keyframes branding-glow {
    from { filter: drop-shadow(0 0 6px var(--accent-orange)); opacity: 0.8; }
    to { filter: drop-shadow(0 0 12px var(--accent-orange)); opacity: 1; }
}