:root {
  --bg: #2b2b2e;
  --text: #d6d3cc;
  --diameter: 60vmin;
  --grow: 1.18;
  --spin-seconds: 38s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Georgia", "Times New Roman", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer wrapper: handles the hover grow only */
.circle-scale {
  width: var(--diameter);
  height: var(--diameter);
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.circle-scale:hover {
  transform: scale(var(--grow));
}

/* Inner wrapper: handles the continuous rotation */
.circle-rotate {
  position: relative;
  width: 100%;
  height: 100%;
  animation: spin var(--spin-seconds) linear infinite;
}

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

/* Each character is absolutely positioned at the center,
   then rotated + pushed outward by JS. */
.char {
  position: absolute;
  top: 0;
  left: 50%;
  height: 50%;
  transform-origin: bottom center;
  font-size: clamp(0.8rem, 2.6vmin, 1.6rem);
  letter-spacing: 0.04em;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .circle-rotate { animation: none; }
}