/* Base container for the Turbovault icon */
.icon-turbovault {
  width: 1em;
  height: 1em;
  position: relative;
  border-radius: 0.172em; /* 38px / 220px */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: icon-fade-in 0.5s ease-out;
}

/* Dark circular background */
.icon-turbovault .turbovault-bg {
  width: 100%;
  height: 100%;
  background: var(--color-icon-background);
  border-radius: none;
  position: absolute;
}

/* --- Node Containers & Elements --- */
.icon-turbovault .node-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  animation: node-enlarge-default 9s ease-in-out infinite;
}

.icon-turbovault .node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.12em;
  height: 0.12em;
  margin: -0.06em;
  border-radius: 50%;
  background: var(--color-scalefree-teal);
  box-shadow: var(--box-shadow);
}

.icon-turbovault .node-center { z-index: 15; width: 0.16em; height: 0.16em; margin: -0.08em;}

.icon-turbovault .node-outer-1 { transform: translateY(-0.35em); }
.icon-turbovault .node-outer-2 { transform: rotate(120deg) translateY(-0.35em); }
.icon-turbovault .node-outer-3 { transform: rotate(240deg) translateY(-0.35em); }

/* --- Spokes/Lines --- */
.icon-turbovault .spoke-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: turbovault-rotate-default 9s linear infinite;
  z-index: 5;
}
.icon-turbovault .spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0.05em;
  width: 0.3em;
  margin-top: -0.02em;
  background: var(--color-scalefree-teal);
  transform-origin: left center;
}
.icon-turbovault .spoke-1 { transform: rotate(90deg); }
.icon-turbovault .spoke-2 { transform: rotate(210deg); }
.icon-turbovault .spoke-3 { transform: rotate(-30deg); }

/* --- Segmented Ring --- */
.icon-turbovault .segment-ring { position: absolute; width: 0.4em; height: 0.4em; border-radius: 50%; }
.icon-turbovault .segment { position: absolute; width: 100%; height: 100%; border: 0.06em solid var(--color-scalefree-red); border-radius: 50%; clip-path: polygon(50% 50%, 0% 0%, 100% 0%); }
.icon-turbovault .segment-1 { transform: rotate(60deg); }
.icon-turbovault .segment-2 { transform: rotate(180deg); }
.icon-turbovault .segment-3 { transform: rotate(300deg); }

.navItem:is(:hover, :focus-within) .icon-turbovault:not(.clicked) .spoke-container {
  animation: none; /* Stop the default animation */
  transform: rotate(60deg); /* Hold position */
}
.navItem:is(:hover, :focus-within) .icon-turbovault:not(.clicked) .node-container {
  animation: nodes-orbit 4s linear infinite; /* Start orbit animation */
}

/* --- CLICK STATE --- */
/* The .clicked class (added by JS) now takes precedence */
.icon-turbovault.clicked .spoke-container {
  animation: spokes-reset 0.35s ease-out;
  animation-delay: 0.3s;
}
.icon-turbovault.clicked .node-container {
  animation: nodes-reset 0.3s ease-out;
}

/* --- ANIMATIONS --- */
@keyframes icon-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Default Animations */
@keyframes turbovault-rotate-default {
  0%, 22% { transform: rotate(60deg); }
  33.3%, 55% { transform: rotate(180deg); }
  66.6%, 88% { transform: rotate(300deg); }
  100% { transform: rotate(420deg); }
}
@keyframes node-enlarge-default {
  0%, 22% { transform: scale(1.1); }
  22.1%, 33.2% { transform: scale(1); }
  33.3%, 55% { transform: scale(1.1); }
  55.1%, 66.5% { transform: scale(1); }
  66.6%, 88% { transform: scale(1.1); }
  88.1%, 100% { transform: scale(1); }
}

/* Hover/Focus Animation */
@keyframes nodes-orbit {
  from { transform: rotate(0deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* Click/Active Animations */
@keyframes spokes-reset {
  from { transform: rotate(60deg); }
  to { transform: rotate(-300deg); } /* Counter-rotates to start */
}
@keyframes nodes-reset {
  from { transform: scale(1.1) rotate(0deg); }
  to { transform: scale(1) rotate(0deg); } /* Resets scale and rotation */
}