/* ============================================
   loader.css — Elegant Monochromatic SVG Loader
   ============================================ */



/* ── Contenitore centrale ── */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ── Etichetta testo ── */
.label {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #9a9890;
  font-family: 'Georgia', serif;
}

/* ── Wrapper SVG ── */
.loader-wrap {
  position: relative;
  width: 160px;
  height: 160px;
}

/* ============================================
   ANIMAZIONI DEGLI ANELLI
   ============================================ */

/* Ring 1 – esterno lento */
#ring1 {
  animation: spin1 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-origin: 80px 80px;
}

/* Ring 2 – medio inverso */
#ring2 {
  animation: spin2 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-origin: 80px 80px;
}

/* Ring 3 – interno veloce */
#ring3 {
  animation: spin3 2s linear infinite;
  transform-origin: 80px 80px;
}

/* ============================================
   ANIMAZIONI DEGLI ARCHI (stroke-dashoffset)
   ============================================ */

#arc1 {
  stroke-dasharray: 180 220;
  stroke-dashoffset: 0;
  animation: dashSpin1 3s ease-in-out infinite;
}

#arc2 {
  stroke-dasharray: 100 200;
  stroke-dashoffset: 0;
  animation: dashSpin2 2.5s ease-in-out infinite;
}

#arc3 {
  stroke-dasharray: 60 180;
  stroke-dashoffset: 0;
  animation: dashSpin3 2s ease-in-out infinite;
}

/* ============================================
   PUNTI ORBITANTI
   ============================================ */

#dots-group {
  animation: spin1 6s linear infinite;
  transform-origin: 80px 80px;
}

/* ============================================
   PUNTO CENTRALE
   ============================================ */

#center-dot {
  animation: pulse 2.4s ease-in-out infinite;
  transform-origin: 80px 80px;
}

/* ============================================
   TACCHE (tick marks)
   ============================================ */

.tick {
  animation: tickFade 2.4s ease-in-out infinite;
  transform-origin: 80px 80px;
}

.tick:nth-child(1)  { animation-delay: 0s; }
.tick:nth-child(2)  { animation-delay: 0.2s; }
.tick:nth-child(3)  { animation-delay: 0.4s; }
.tick:nth-child(4)  { animation-delay: 0.6s; }
.tick:nth-child(5)  { animation-delay: 0.8s; }
.tick:nth-child(6)  { animation-delay: 1.0s; }
.tick:nth-child(7)  { animation-delay: 1.2s; }
.tick:nth-child(8)  { animation-delay: 1.4s; }
.tick:nth-child(9)  { animation-delay: 1.6s; }
.tick:nth-child(10) { animation-delay: 1.8s; }
.tick:nth-child(11) { animation-delay: 2.0s; }
.tick:nth-child(12) { animation-delay: 2.2s; }

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes spin1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes spin3 {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(200deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.6); }
}

@keyframes tickFade {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 1; }
}

@keyframes dashSpin1 {
  0%   { stroke-dashoffset: 0;    opacity: 1; }
  50%  { stroke-dashoffset: -220; opacity: 0.4; }
  100% { stroke-dashoffset: -440; opacity: 1; }
}

@keyframes dashSpin2 {
  0%   { stroke-dashoffset: 0;   opacity: 0.6; }
  50%  { stroke-dashoffset: 180; opacity: 1; }
  100% { stroke-dashoffset: 360; opacity: 0.6; }
}

@keyframes dashSpin3 {
  0%   { stroke-dashoffset: 0;    opacity: 1; }
  50%  { stroke-dashoffset: -120; opacity: 0.3; }
  100% { stroke-dashoffset: -240; opacity: 1; }
}