.ruota { position:relative; margin-inline:auto; }
.ruota *, .ruota *::before, .ruota *::after { box-sizing:border-box; }

.ruota-giostra {
  position:relative; margin:0 auto; width:100%;
  max-width:min(760px, 92vw); aspect-ratio:1;
}
.ruota-svg { display:block; width:100%; height:100%; }

.ruota-svg .anelli,
.ruota-svg .raggi,
.ruota-svg .marcatori { stroke:var(--accent); fill:none; }

.ruota-svg text {
  font-family:var(--font-body); fill:var(--accent);
  text-transform:uppercase; font-size:13px; font-weight:500; letter-spacing:2.2px;
  opacity:.4; transition:opacity .6s var(--ease), fill .6s var(--ease);
  transform-box:fill-box; transform-origin:center;
}
.ruota-svg .tacca {
  fill:var(--accent); fill-opacity:.07; stroke-opacity:.28; stroke-width:1.1;
  transition:fill-opacity .6s var(--ease), stroke-opacity .6s var(--ease);
}
.ruota-svg .alone {
  fill:var(--accent); fill-opacity:0;
  transform-box:fill-box; transform-origin:center;
}

.ruota-svg .sabbat.attivo .tacca { fill-opacity:.9; stroke-opacity:1; stroke-width:1.6; }
.ruota-svg .sabbat.attivo .alone { fill-opacity:.1; }
.ruota-svg .sabbat.attivo text {
  opacity:1; fill:var(--accent-viva); font-weight:600; font-size:14px; letter-spacing:2.6px;
}

.ruota-centro {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:62%; max-width:340px; text-align:center; pointer-events:none; z-index:2;
}
.ruota-icona {
  width:clamp(88px, 14vw, 148px); aspect-ratio:1; margin:0 auto clamp(14px, 2vw, 22px);
  display:block; object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(194,160,91,.42));
}
.ruota-nome {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem, 3.6vw, 2.5rem); line-height:1.08;
  color:var(--accent); text-transform:uppercase; letter-spacing:.16em;
  text-shadow:0 0 26px rgba(194,160,91,.28);
}
.ruota-sotto {
  margin:10px 0 0; font-size:clamp(.78rem, 1.4vw, .94rem);
  color:var(--ink-soft); letter-spacing:.02em;
}
.ruota-data {
  display:block; margin-top:clamp(14px, 2vw, 22px);
  font-size:clamp(.95rem, 1.8vw, 1.18rem); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ruota-manca {
  margin:8px 0 0; font-size:clamp(.72rem, 1.3vw, .84rem);
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:.16em;
}
.ruota-manca.oggi {
  color:var(--accent-viva); font-weight:600;
  text-shadow:0 0 14px rgba(212,178,108,.4);
}

.ruota-tema {
  margin:clamp(30px, 4vw, 48px) auto 0; text-align:center;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 2vw, 1.32rem); line-height:1.5; color:var(--ink-soft);
}

.ruota-fascia {
  padding-block:var(--sezione); background:var(--srf-1);
  border-block:1px solid var(--line); overflow:hidden;
}
.ruota-fascia-int { text-align:center; }
.ruota-fascia-testo { margin:0 auto clamp(28px, 4vw, 48px); }
.ruota-fascia-testo .occhiello { color:var(--accent); margin-bottom:16px; }
.ruota-fascia-testo h2 {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.9rem); line-height:1.1;
}
.ruota-fascia-testo p { margin:20px 0 0; color:var(--ink-soft); }
.ruota-fascia .filo { margin-top:clamp(30px, 4vw, 46px); }

.calendario { margin-top:var(--sezione); }
.calendario-griglia {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.sabbat-scheda {
  background:var(--srf-0); padding:clamp(20px, 2.6vw, 30px);
  transition:background .4s var(--ease);
}
.sabbat-scheda.attivo { background:var(--srf-1); }
.sabbat-scheda h3 {
  margin:0; font-family:var(--font-display); font-weight:500; font-size:1.3rem;
  line-height:1.1; color:var(--ink);
}
.sabbat-scheda.attivo h3 { color:var(--accent); }
.sabbat-scheda .sotto {
  margin:6px 0 0; font-size:.78rem; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.12em;
}
.sabbat-scheda time {
  display:block; margin-top:14px; font-size:.95rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.sabbat-scheda .tema { margin:12px 0 0; font-size:.9rem; color:var(--ink-faint); line-height:1.5; }

.ruota-scintille { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.ruota-scintilla {
  position:absolute; border-radius:50%; background:var(--accent);
  opacity:0; box-shadow:0 0 6px 1px rgba(194,160,91,.4);
}

@media (prefers-reduced-motion: no-preference) {
  .ruota-svg .anelli,
  .ruota-svg .raggi,
  .ruota-svg .marcatori {
    animation:ruota-gira 150s linear infinite;
    transform-box:view-box; transform-origin:300px 300px;
  }
  @keyframes ruota-gira { to { transform:rotate(360deg); } }

  .ruota-svg text {
    animation:ruota-contro 150s linear infinite;
  }
  @keyframes ruota-contro { to { transform:rotate(-360deg); } }

  .ruota-svg .sabbat.attivo .alone { animation:ruota-respiro 3s ease-in-out infinite; }
  @keyframes ruota-respiro {
    0%, 100% { fill-opacity:.07; transform:scale(1); }
    50%      { fill-opacity:.17; transform:scale(1.22); }
  }

  .ruota-scintilla { animation:ruota-sale linear infinite; }
  @keyframes ruota-sale {
    0%   { opacity:0; transform:translateY(0) scale(0); }
    15%  { opacity:.55; transform:scale(1); }
    85%  { opacity:.14; }
    100% { opacity:0; transform:translateY(-120px) scale(.5); }
  }
}

@media (max-width: 900px) {
  .calendario-griglia { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ruota-svg text { font-size:16px; letter-spacing:1.4px; }
  .ruota-svg .sabbat.attivo text { font-size:18px; letter-spacing:1.8px; }
  .ruota-centro { width:66%; }
}
@media (max-width: 480px) {
  .calendario-griglia { grid-template-columns:1fr; }
}