/* --- Basic Page Setup (UNCOMMENTED) --- */
body, html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Background is black, matching the canvas fill */
    background-color: #00000000; 
    
    /* These lines center the logo container */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}

/* This old rule is no longer needed */
/*
body {
    overflow: hidden;
    margin: 0;  
}
*/

/* --- NEW RULE TO FIX THE CANVAS --- */
#canvas {
    position: fixed; /* Takes it out of the document flow */
    top: 0;
    left: 0;
    z-index: -1;     /* Puts it behind all other content */
}

/* --- The Logo Container --- */
.logo-container {
    position: relative; 
    width: 900px; /* Canvas width */
    height: 900px; /* Canvas height */
    background-color: rgba(0, 0, 0, 0);
    
    /* This margin:auto now works because body is a flex container */
    margin: auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* We give it a z-index to ensure it's on top of the background */
    z-index: 10;
}

/* --- Base style for all logo items --- */
.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* --- STYLES FOR ORBITING LOGOS --- */
    background-color: #ffffff;
    border-radius: 50%; /* Make them perfectly circular */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55); /* Your shadow */
    text-decoration: none;
    
    --scale: 1; 
    /* NOTE: The 'transform' transition is removed to allow smooth JS animation */
    transition: box-shadow 0.3s ease, z-index 0s;

    width: 190px; 
    height: 190px; 
    
    position: absolute; /* Essential for precise placement */
    z-index: 1; /* Default layer */
    
    top: 50%;
    left: 50%;
    
    /* This base transform is used by #logo0 and as a starting point */
    transform: translate(-50%, -50%) scale(var(--scale));
}

.logo-item img {
    display: block;
    width: 70%; /* Use width/height to control size */
    height: 70%;
    object-fit: contain;
    
    /* NEW: We use a CSS variable for rotation, set by JS */
    transform: rotate(var(--counter-angle, 0deg));
    /* NEW: No transition on the rotation, we want it to be instant */
    transition: none; 
}

/* --- The "Glow on Hover" Effect --- */
.logo-item:hover {
    --scale: 1.15; /* Update the scale variable on hover */
    box-shadow: 0 0 35px 8px rgba(0, 123, 255, 0.6); /* Blue glow */
    z-index: 10; /* Bring hovered item to front */
}


/* --- STYLES FOR THE CENTER LOGO --- */
/* CHANGED: This section is updated to match the other logos */
#logo0 { 
    width: 250px; 
    height: 250px;
    z-index: 5; 

    /* Overrides are changed to match the .logo-item style */
    background-color: #ffffff; /* ADDED white circle */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55); /* ADDED default shadow */
    border-radius: 50%; /* ADDED circular shape */
    
    /* ADDED transition for smooth glow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
}

#logo0 img {
    /* Set to 70% to match the other logos' padding */
    width: 90%;
    height: 90%;
    object-fit: contain; /* ADDED to ensure logo fits */
    transform: none; /* Center logo image does not counter-rotate */
}

/* Custom hover for center logo (NOW with glow) */
#logo0:hover {
    --scale: 1.08; /* Make it a bit bigger */
    
    /* CHANGED: Added the blue glow */
    box-shadow: 0 0 35px 8px rgba(0, 123, 255, 0.6); 
    
    z-index: 20; 
}




/* --- ALL STATIC POSITIONS AND COUNTER-ROTATIONS ARE REMOVED --- */
/* JavaScript will handle this now */