.lock-container { 
  position: relative; 
  width: 160px; /* Increased by 10px as requested */
  height: 67px; 
  transform-style: preserve-3d; 
  transition: transform 0.3s ease;
  display: inline-block;
  z-index: 1;
} 

.lock-container:hover { 
  transform: rotateY(15deg) rotateX(5deg); 
} 

.lock-body { 
  position: absolute; 
  top: 50%;
  left: 50%; 
  transform: var(--center-transform); 
  width: 27px; 
  height: 33px; 
  background: linear-gradient(145deg, var(--color-gray-dark), var(--color-gray-darker)); 
  border-radius: 4px; 
  box-shadow: 0 5px 13px rgba(0,0,0,0.4), inset 0 1px 2px var(--white-10), inset 0 -1px 2px rgba(0,0,0,0.3); 
  z-index: 2; 
  transform-style: preserve-3d; 
  cursor: pointer; 
  transition: transform 0.3s ease; 
} 

.lock-body:hover { 
  transform: translate(-50%, -50%) translateZ(3px); 
} 

.lock-body::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: linear-gradient(145deg, #5a6478, var(--color-gray-medium)); 
  border-radius: 4px; 
  transform: translateZ(-3px); 
  opacity: var(--opacity-08); 
} 

.lock-shackle { 
  position: absolute; 
  top: 3px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 13px; 
  height: 13px; 
  border: 2px solid var(--color-gray-dark); 
  border-bottom: none; 
  border-radius: 7px 7px 0 0; 
  transition: all 0.5s ease; 
  z-index: 1; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
  transform-style: preserve-3d; 
} 

.lock-shackle::before { 
  content: ''; 
  position: absolute; 
  top: -2px; 
  left: -2px; 
  right: -2px; 
  bottom: 0; 
  border: 2px solid var(--color-gray-medium); 
  border-bottom: none; 
  border-radius: 7px 7px 0 0; 
  transform: translateZ(-2px); 
  opacity: 0.6; 
} 

.lock-shackle.open { 
  transform: translateX(-50%) rotate(-45deg) translateX(2px); 
  border-color: var(--color-green-light); 
} 

.lock-shackle.open::before { 
  border-color: var(--color-teal-light); 
} 

.shackle-hinge-left { 
  position: absolute; 
  bottom: 5px; 
  left: -1px; 
  width: 2px; 
  height: 3px; 
  background: var(--gradient-gray); 
  border-radius: 1px; 
  transition: all 0.5s ease; 
} 

.shackle-hinge-right { 
  position: absolute; 
  bottom: 5px; 
  right: -1px; 
  width: 2px; 
  height: 3px; 
  background: var(--gradient-gray); 
  border-radius: 1px; 
  transition: all 0.5s ease; 
} 

.shackle-hinge-left.open { 
  transform: rotate(-45deg) translateX(0.3px); 
  background: var(--gradient-green); 
} 

.shackle-hinge-right.open { 
  transform: rotate(-45deg) translateX(-0.3px); 
  background: var(--gradient-green); 
} 

.keyhole { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: var(--center-transform); 
  width: 3px; 
  height: 3px; 
  background: var(--color-gray-darkest); 
  border-radius: 50%; 
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); 
  transition: all 0.3s ease; 
} 

.keyhole:hover { 
  transform: translate(-50%, -50%) scale(1.1); 
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 0 3px rgba(255,215,0,0.3); 
} 

.keyhole::after { 
  content: ''; 
  position: absolute; 
  top: 2px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 1px; 
  height: 3px; 
  background: var(--color-gray-darkest); 
  border-radius: 0 0 1px 1px; 
} 

.key { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: var(--center-transform); 
  width: 20px; 
  height: 2px; 
  background: var(--gradient-gold); 
  border-radius: 1px; 
  transform-origin: 4px center; 
  z-index: 3; 
  animation: keySequence 6s infinite; 
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3), 0 0 7px rgba(255, 215, 0, 0.2); 
  transform-style: preserve-3d; 
  cursor: pointer; 
} 

.key:hover { 
  animation-play-state: paused; 
  transform: translate(-50%, -50%) translateZ(17px) scale(1.1) !important; 
  z-index: 100 !important; 
} 

.key::before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 8px; 
  height: 8px; 
  background: var(--gradient-gold); 
  border-radius: 50%; 
  border: 1px solid #e6c200; 
  box-shadow: 0 1px 5px rgba(255, 215, 0, 0.4), inset 0 1px 1px var(--white-30), inset 0 -1px 1px rgba(0,0,0,0.2); 
} 

.key::after { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top: -1px; 
  width: 4px; 
  height: 4px; 
  background: var(--gradient-gold); 
  clip-path: polygon(0 0, 100% 0, 100% 50%, 80% 50%, 80% 100%, 0 100%); 
  box-shadow: 0 1px 2px rgba(255, 215, 0, 0.3); 
} 

.sparkle { 
  position: absolute; 
  width: 4px; 
  height: 4px; 
  background: var(--color-white); 
  border-radius: 50%; 
  animation: sparkle 2s infinite; 
  opacity: 0; 
} 

.sparkle:nth-child(1) { 
  top: 20%; 
  left: 20%; 
  animation-delay: 0s; 
} 

.sparkle:nth-child(2) { 
  top: 30%; 
  right: 20%; 
  animation-delay: 0.5s; 
} 

.sparkle:nth-child(3) { 
  bottom: 20%; 
  left: 30%; 
  animation-delay: 1s; 
} 

.sparkle:nth-child(4) { 
  bottom: 30%; 
  right: 30%; 
  animation-delay: 1.5s; 
} 

@keyframes keySequence { 
  0% { transform: translate(-50%, -50%) translateX(-30px) rotate(0deg); } 
  15% { transform: var(--transform-spin-720); } 
  25% { transform: var(--transform-spin-720); } 
  35% { transform: var(--transform-spin-810); } 
  45% { transform: var(--transform-spin-810); } 
  55% { transform: var(--transform-spin-720); } 
  65% { transform: var(--transform-spin-720); } 
  75% { transform: translate(-50%, -50%) translateX(-30px) rotate(720deg); } 
  85% { transform: translate(-50%, -50%) translateX(-30px) rotate(1080deg); } 
  100% { transform: translate(-50%, -50%) translateX(-30px) rotate(1440deg); } 
} 

@keyframes sparkle { 
  0%, 100% { opacity: 0; transform: scale(0); } 
  50% { opacity: var(--opacity-1); transform: scale(1); } 
} 

.lock-container::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: radial-gradient(circle at center, transparent 60%, rgba(255, 215, 0, 0.1) 100%); 
  border-radius: 50%; 
  animation: glow 6s infinite; 
} 

@keyframes glow { 
  0%, 100% { opacity: var(--opacity-03); } 
  50% { opacity: var(--opacity-08); } 
}