/* Tech Animation Styles */
.hero-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.animation-container {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbit rings (separate from icons) */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--text-color);
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
    /* reduce blur to lower paint cost */
    filter: blur(0.15px);
}

[data-theme="dark"] .orbit-ring {
    border-color: #ffffff;
    opacity: 0.12;
    filter: blur(0.25px);
}

.orbit-ring-1 { width: 250px; height: 250px; border-color: var(--text-color); opacity: 0.3; }
[data-theme="dark"] .orbit-ring-1 { border-color: #ffffff; opacity: 0.15; }
.orbit-ring-2 { width: 375px; height: 375px; border-color: var(--text-color); opacity: 0.25; }
[data-theme="dark"] .orbit-ring-2 { border-color: #ffffff; opacity: 0.12; }
.orbit-ring-3 { width: 500px; height: 500px; border-color: var(--text-color); opacity: 0.2; }
[data-theme="dark"] .orbit-ring-3 { border-color: #ffffff; opacity: 0.1; }

/* Orbit containers (for icons only) */
.orbit {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    transform-origin: 50% 50%;
}

.orbit-1 { width: 250px; height: 250px; animation: orbit-rotate 12s linear infinite; }
.orbit-2 { width: 375px; height: 375px; animation: orbit-rotate 18s linear infinite reverse; }
.orbit-3 { width: 500px; height: 500px; animation: orbit-rotate 24s linear infinite; }

.tech-icon { position: absolute; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 1; z-index: 5; }
.tech-icon img { width: 50px; height: 50px; object-fit: contain; filter: brightness(0.9); transition: filter 0.3s ease; opacity: 1; }
.tech-icon:hover { transform: scale(1.15); }
.tech-icon:hover img { filter: brightness(1.1); }

/* Center Logo */
.center-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; z-index: 10; }
.center-logo img { width: 76px; height: 76px; object-fit: contain; border-radius: 8px; }

/* Icon positioning */
.git-icon { top: -30px; left: 50%; transform: translateX(-50%); }
.code-icon { bottom: -30px; left: 50%; transform: translateX(-50%); }
.arch-icon { top: 50%; left: -30px; transform: translateY(-50%); }
.github-icon { top: 50%; right: -30px; transform: translateY(-50%); }

/* Animations */
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Responsive Design */
@media (max-width: 768px) {
  .hero-animation { min-height: 450px; }
  .animation-container { width: 450px; height: 450px; }
  .orbit-ring { border-width: 1px; filter: blur(0.2px); }
  [data-theme="dark"] .orbit-ring { filter: blur(0.3px); }
  .orbit-ring-1 { width: 190px; height: 190px; }
  .orbit-ring-2 { width: 280px; height: 280px; }
  .orbit-ring-3 { width: 370px; height: 370px; }
  .orbit-1 { width: 190px; height: 190px; }
  .orbit-2 { width: 280px; height: 280px; }
  .orbit-3 { width: 370px; height: 370px; }
  .tech-icon { width: 45px; height: 45px; }
  .tech-icon img { width: 45px; height: 45px; }
  .center-logo { width: 80px; height: 80px; }
  .center-logo img { width: 60px; height: 60px; }
}

@media (max-width: 576px) {
  .hero-animation { min-height: 400px; }
  .animation-container { width: 400px; height: 400px; }
  .orbit-ring { border-width: 0.5px; filter: blur(0.1px); }
  [data-theme="dark"] .orbit-ring { filter: blur(0.2px); }
  .orbit-ring-1 { width: 170px; height: 170px; }
  .orbit-ring-2 { width: 250px; height: 250px; }
  .orbit-ring-3 { width: 330px; height: 330px; }
  .orbit-1 { width: 170px; height: 170px; }
  .orbit-2 { width: 250px; height: 250px; }
  .orbit-3 { width: 330px; height: 330px; }
  .tech-icon { width: 40px; height: 40px; }
  .tech-icon img { width: 40px; height: 40px; }
  .center-logo { width: 75px; height: 75px; }
  .center-logo img { width: 55px; height: 55px; }
}