/* 
 * Gear Animation CSS
 * This file contains styles for the rotating gears animation
 */

/* Gear Animation Styles */
.gear-container {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.gear1, .gear2, .gear3, .gear4 {
  position: absolute;
  z-index: 0;
  will-change: transform;
  transform-origin: center center;
  transition: none;
}

.gear1 {
  width: 100px;
  height: 100px;
  right: -20px;
  top: -20px;
}

.gear2 {
  width: 130px;
  height: 130px;
  left: -30px;
  bottom: 15px;
}

.gear3 {
  width: 60px;
  height: 60px;
  right: 50px;
  top: 60px;
}

.gear4 {
  width: 50px;
  height: 50px;
  left: 40px;
  bottom: -20px;
}

/* Responsive scaling */
@media (max-width: 768px) {
  .gear1 {
    width: 80px;
    height: 80px;
  }
  
  .gear2 {
    width: 100px;
    height: 100px;
  }
  
  .gear3 {
    width: 40px;
    height: 40px;
  }
  
  .gear4 {
    width: 35px;
    height: 35px;
  }
}

/* Rotating Gears Animation */
.gears-container {
  position: absolute;
  right: 30px;
  top: 57%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.gear {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODk2IiBoZWlnaHQ9IjEwMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxnPiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0iLTEiIHg9Ii0xIi8+IDwvZz4gPGc+ICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+ICA8cGF0aCBmaWxsPSIjMDEyNjYzIiBpZD0ic3ZnXzEiIGQ9Im00NDcuOTM4LDM1MGMtODkuNDA3LDAgLTE2MS45MzgsNzIuNTMxIC0xNjEuOTM4LDE2MmMwLDg5LjM3NSA3Mi41MzEsMTYyLjA2MiAxNjEuOTM4LDE2Mi4wNjJjODkuNDM4LDAgMTYxLjQzOCwtNzIuNjg4IDE2MS40MzgsLTE2Mi4wNjJjLTAuMDAxLC04OS40NjkgLTcyLjAwMSwtMTYyIC0xNjEuNDM4LC0xNjJ6bTMyNC42ODcsMjU1LjA2MmwtMjkuMTg4LDcwLjMxMmw1Mi4wNjIsMTAyLjI1bDYuODc1LDEzLjVsLTcyLjE4OCw3Mi4xODhsLTExOC40MzYsLTU1LjkzN2wtNzAuMzEyLDI4Ljg3NWwtMzUuNjg4LDEwOS4yNWwtNC41NjIsMTQuNWwtMTAyLjAzMiwwbC00NC4xNTYsLTEyMy4zMTJsLTcwLjMxMiwtMjlsLTEwMi40MDQsNTEuOTM4bC0xMy41LDYuNzVsLTcyLjE1NiwtNzIuMTI1bDU1Ljg3NSwtMTE4LjVsLTI4Ljk2OSwtNzAuMjVsLTEwOS4wNjUsLTM1LjYyNmwtMTQuNDY5LC00LjY4N2wwLC0xMDEuOTY5bDEyMy40MDYsLTQ0LjIxOWwyOC45NjksLTcwLjE4OGwtNTEuOTA2LC0xMDIuNDY5bC02Ljg0NCwtMTMuNDM4bDcyLjA2MiwtNzIuMDYybDExOC41OTQsNTUuODQ0bDcwLjIxOSwtMjkuMDMxbDM1LjY1NiwtMTA5LjE4OGw0LjU5NCwtMTQuNDY4bDEwMiwwbDQ0LjE4OCwxMjMuNDY5bDcwLjEyNSwyOS4wMzFsMTAyLjQzNywtNTEuOTY5bDEzLjYyNSwtNi44NDRsNzIuMTI1LDcyLjA2MmwtNTUuODc1LDExOC40MDZsMjguODc1LDcwLjM0NWwxMDkuMzc1LDM1LjY1NmwxNC4zNzUsNC41OTRsMCwxMDEuOTM4bC0xMjMuMzc1LDQ0LjM3NHoiLz4gPC9nPjwvc3ZnPg==');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: none;
  transform-origin: center;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
  will-change: transform;
  opacity: 0.6;
  filter: brightness(1.2);
}

.gear1 {
  width: 150px;
  height: 150px;
  margin-bottom: 15px;
}

.gear2 {
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -23px;
}

.gear3 {
  width: 75px;
  height: 75px;
  margin-top: -109px;
  left: 5px;
}

.gear4 {
  width: 55px;
  height: 55px;
  bottom: -4px;
  left: 77px;
}

/* Make sure gears are visible on mobile */
@media (max-width: 768px) {
  .gears-container {
    right: -30px;
    top: 46%;
  }
  
  .gear1 {
    width: 200px;
    height: 200px;
    bottom: -148px;
    right: -48px
  }
  
  .gear2 {
    width: 120px;
    height: 120px;
    margin-top: -10px;
  }
  
  .gear3 {
    display: none;
  }
  
  .gear4 {
    display: none;
  }
}

/* Hide gears on very small screens */
@media (max-width: 480px) {
  .gears-container {
    top: 46%;
  }
}