.loader-container {
    /* Your sizing logic */
    width: min(100vw, 300px); /* Give it a definite size */
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-svg {
    max-width: 80%;
    max-height: 80%;
    overflow: visible;
}

/* Ensure the animations are linked */
.inner-hex-spin, .outer-hex-spin { transform-origin: 110px 110px; }
.inner-hex-spin {
  animation: rotate-ccw 4s linear infinite; /* 'infinite' is key here */
  transform-origin: 110px 110px;
}

.outer-hex-spin {
  animation: rotate-cw 3s linear infinite;
  transform-origin: 110px 110px;
}
@keyframes rotate-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-ccw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }