/* --- SIDE CLOCK GEARS --- */
#side-gears {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; /* Above backgrounds, below interactive UI */
  overflow: hidden;
}

.side-gear-col {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 40px 0;
  gap: 0;
}

.side-gear-left {
  left: -50px;
}

.side-gear-right {
  right: -50px;
}

.side-gear {
  flex-shrink: 0;
  opacity: 0.8; /* Higher opacity for the detailed images */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  will-change: transform;
}

/* Dark mode adjustment (for admin side or if dark theme is detected) */
body.admin-page .side-gear {
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 15px rgba(255, 215, 0, 0.2));
  opacity: 0.7;
}

/* Base sizes for Desktop */
.side-gear.gear-large { 
  width: 180px; height: 180px; 
  background-image: url('../assets/gears/gear-large.png');
}
.side-gear.gear-medium { 
  width: 130px; height: 130px; 
  background-image: url('../assets/gears/gear-medium.png');
}
.side-gear.gear-small { 
  width: 100px; height: 100px; 
  background-image: url('../assets/gears/gear-small.png');
}

.side-gear svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sg-inner {
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Updated Responsive styling for Side Gears */
@media (max-width: 900px) {
  #side-gears {
    z-index: 5;
  }
  .side-gear-left {
    left: -70px; /* Hide more of the gear on narrow screens */
  }
  .side-gear-right {
    right: -70px;
  }
  /* Smaller gears on mobile */
  .side-gear.gear-large { width: 100px; height: 100px; }
  .side-gear.gear-medium { width: 75px; height: 75px; }
  .side-gear.gear-small { width: 60px; height: 60px; }
  
  .side-gear {
    opacity: 0.15; /* Even more subtle on mobile */
  }
}