/* =================== 3D Hero Section Animation Styles =================
========================================================================= */

/* 3D Product Showcase */
.product-3d-showcase {
   position: relative;
   width: 400px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   perspective: 1000px;
   transform-style: preserve-3d;
}

.center-product {
   position: absolute;
   z-index: 10;
   animation: centerFloat 3s ease-in-out infinite;
   cursor: pointer;
   transition: all 0.3s ease;
}

.center-product:hover {
   transform: translateY(-8px) scale(1.05);
}

.center-bulb {
   width: 150px;
   height: 150px;
   object-fit: cover;
   border-radius: 50%;
   box-shadow: 
      0 0 20px rgba(18, 115, 235, 0.6), 
      0 0 40px rgba(18, 115, 235, 0.4),
      0 0 60px rgba(18, 115, 235, 0.2);
   border: 3px solid var(--primary-light-color);
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.center-bulb::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.15),
      transparent
   );
   animation: shimmer 4s linear infinite;
   transform: rotate(45deg);
}

.center-bulb::after {
   content: '';
   position: absolute;
   top: 15%;
   left: 15%;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.1) 30%,
      transparent 60%
   );
   animation: lightReflection 3s ease-in-out infinite alternate;
}

.rotating-products {
   position: relative;
   width: 100%;
   height: 100%;
   animation: rotate 20s linear infinite;
   transform-style: preserve-3d;
}

.rotating-products.paused {
   animation-play-state: paused;
}

.orbit-product {
   position: absolute;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   transition: all 0.3s ease;
   cursor: pointer;
   transform-style: preserve-3d;
}

.orbit-product:hover {
   transform: scale(1.3) translateZ(20px);
   box-shadow: 0 0 25px rgba(18, 115, 235, 0.9);
   border-color: var(--primary-light-color);
}

.orbit-product.active {
   transform: scale(1.2);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
   border-color: #fff;
}

.orbit-product img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 50%;
   transition: all 0.3s ease;
}

.orbit-product:hover img {
   transform: scale(1.1);
   filter: brightness(1.2);
}

/* Orbit Positions - Perfect Circle Layout */
.orbit-1 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) translateY(-150px);
   animation: orbit1 20s linear infinite;
}

.orbit-2 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg) translateY(-150px) rotate(-45deg);
   animation: orbit2 20s linear infinite;
}

.orbit-3 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(90deg) translateY(-150px) rotate(-90deg);
   animation: orbit3 20s linear infinite;
}

.orbit-4 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(135deg) translateY(-150px) rotate(-135deg);
   animation: orbit4 20s linear infinite;
}

.orbit-5 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(180deg) translateY(-150px) rotate(-180deg);
   animation: orbit5 20s linear infinite;
}

.orbit-6 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(225deg) translateY(-150px) rotate(-225deg);
   animation: orbit6 20s linear infinite;
}

.orbit-7 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(270deg) translateY(-150px) rotate(-270deg);
   animation: orbit7 20s linear infinite;
}

.orbit-8 {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(315deg) translateY(-150px) rotate(-315deg);
   animation: orbit8 20s linear infinite;
}

/* Glow Effects */
.glow-effect {
   position: absolute;
   width: 300px;
   height: 300px;
   background: radial-gradient(
      circle, 
      rgba(18, 115, 235, 0.3) 0%, 
      rgba(18, 115, 235, 0.1) 50%, 
      transparent 70%
   );
   border-radius: 50%;
   animation: glowPulse 4s ease-in-out infinite;
   z-index: 1;
}

.glow-effect::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   height: 200px;
   background: radial-gradient(
      circle, 
      rgba(255, 255, 255, 0.1) 0%, 
      transparent 70%
   );
   border-radius: 50%;
   transform: translate(-50%, -50%);
   animation: innerGlow 3s ease-in-out infinite reverse;
}

/* Particle Effects */
.particle {
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(18, 115, 235, 0.8);
   border-radius: 50%;
   animation: particle 8s linear infinite;
}

.particle:nth-child(odd) {
   background: rgba(255, 255, 255, 0.6);
   animation-duration: 12s;
}

/* Animation Keyframes */
@keyframes rotate {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

@keyframes centerFloat {
   0%, 100% {
      transform: translateY(0px) scale(1);
   }
   50% {
      transform: translateY(-10px) scale(1.02);
   }
}

@keyframes shimmer {
   0% {
      transform: translateX(-100%) translateY(-100%) rotate(45deg);
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      transform: translateX(100%) translateY(100%) rotate(45deg);
      opacity: 0;
   }
}

@keyframes lightReflection {
   0% {
      opacity: 0.2;
      transform: scale(0.9);
   }
   100% {
      opacity: 0.4;
      transform: scale(1.05);
   }
}

@keyframes glowPulse {
   0%, 100% {
      opacity: 0.5;
      transform: scale(1) rotate(0deg);
   }
   50% {
      opacity: 0.8;
      transform: scale(1.1) rotate(180deg);
   }
}

@keyframes innerGlow {
   0%, 100% {
      opacity: 0.3;
      transform: translate(-50%, -50%) scale(1);
   }
   50% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1.2);
   }
}

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

@keyframes orbit2 {
   from {
      transform: translate(-50%, -50%) rotate(45deg) translateY(-150px) rotate(-45deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(405deg) translateY(-150px) rotate(-405deg);
   }
}

@keyframes orbit3 {
   from {
      transform: translate(-50%, -50%) rotate(90deg) translateY(-150px) rotate(-90deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(450deg) translateY(-150px) rotate(-450deg);
   }
}

@keyframes orbit4 {
   from {
      transform: translate(-50%, -50%) rotate(135deg) translateY(-150px) rotate(-135deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(495deg) translateY(-150px) rotate(-495deg);
   }
}

@keyframes orbit5 {
   from {
      transform: translate(-50%, -50%) rotate(180deg) translateY(-150px) rotate(-180deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(540deg) translateY(-150px) rotate(-540deg);
   }
}

@keyframes orbit6 {
   from {
      transform: translate(-50%, -50%) rotate(225deg) translateY(-150px) rotate(-225deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(585deg) translateY(-150px) rotate(-585deg);
   }
}

@keyframes orbit7 {
   from {
      transform: translate(-50%, -50%) rotate(270deg) translateY(-150px) rotate(-270deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(630deg) translateY(-150px) rotate(-630deg);
   }
}

@keyframes orbit8 {
   from {
      transform: translate(-50%, -50%) rotate(315deg) translateY(-150px) rotate(-315deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(675deg) translateY(-150px) rotate(-675deg);
   }
}

@keyframes particle {
   0% {
      transform: translateY(400px) translateX(0px) scale(0);
      opacity: 0;
   }
   10% {
      opacity: 1;
   }
   90% {
      opacity: 1;
   }
   100% {
      transform: translateY(-400px) translateX(200px) scale(1);
      opacity: 0;
   }
}

/* Responsive Design */
@media (max-width: 768px) {
   .product-3d-showcase {
      width: 300px;
      height: 300px;
   }
   
   .center-bulb {
      width: 130px;
      height: 130px;
   }
   
   .orbit-product {
      width: 80px;
      height: 80px;
   }
   
   .orbit-product img {
      width: 65px;
      height: 65px;
   }
   
   .glow-effect {
      width: 250px;
      height: 250px;
   }
}

@media (max-width: 576px) {
   .product-3d-showcase {
      width: 250px;
      height: 250px;
   }
   
   .center-bulb {
      width: 110px;
      height: 110px;
   }
   
   .orbit-product {
      width: 70px;
      height: 70px;
   }
   
   .orbit-product img {
      width: 55px;
      height: 55px;
   }
   
   .glow-effect {
      width: 200px;
      height: 200px;
   }
   
   .glow-effect::before {
      width: 150px;
      height: 150px;
   }
}

/* Performance Optimizations */
.product-3d-showcase * {
   will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
   .product-3d-showcase * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}