/* Reset & layout */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: #0b0e14;
  color: #fff;
}

.stage {
  position: relative;
  width: min(90vmin, 700px);
  height: min(90vmin, 700px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Centered logo */
.stage .logo-wrap {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.stage .logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* SVG ring container */
.ring {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  --outer-fill: #0047FF;
  --inner-fill: #0b0e14;
  --ring-text-fill: #ffffff;
  --ring-font-size: 10px;  /* starting font size from config */
}

/* Donut band + centre */
.ring .bg-outer { fill: var(--outer-fill); stroke: none; }
.ring .bg-inner { fill: var(--inner-fill); stroke: none; }

/* Rotating group */
.rotator {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: spin 12s linear infinite; /* duration overridden inline/JS */
}
.rotator.ccw { animation-direction: reverse; }

/* Text styling (centred on the band) */
.ring text {
  font-size: var(--ring-font-size);
  /* letter-spacing will be auto-adjusted via 'textLength' (spacing) or font-size via JS */
  text-transform: uppercase;
  fill: var(--ring-text-fill);
  opacity: 0.96;
  dominant-baseline: middle;  /* centre glyphs vertically on the path */
  alignment-baseline: middle;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rotator { animation-duration: 0s !important; }
}