:root{
  --scene-size: clamp(260px, 46vmin, 680px); /* controla o tamanho do "sistema" */
  --center-size: clamp(64px, 12vmin, 140px);
  --icon-size: clamp(38px, 6.5vmin, 64px);
  --star-color: #0B2559;
  --bg: #ffffff;
  --orbit-border: 2px;
}

*{box-sizing: border-box}

.page{
  min-height:0vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* área da cena */
.scene{
  width:var(--scene-size);
  height:var(--scene-size);
  position:relative;
  display:block;
  isolation:isolate;
}

/* logo central */
.center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:var(--center-size);
  height:var(--center-size);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30;
  pointer-events:auto;
}
.center__img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:14px; /* opcional */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

/* órbitas (anel) */
.orbit{
  --speed: 20s;
  --dir: normal;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border: var(--orbit-border) solid rgba(0,0,0,var(--border-opacity, 0.07));
  display:block;
  z-index:10;
  animation: spin var(--speed) linear infinite;
  animation-direction: var(--dir);
  pointer-events:none;
}

/* tamanhos relativos das órbitas
   -> aumentei a orbit--1 pra ficar mais distante do centro */
.orbit--1{ width: 50%; height: 50%; }  /* aumentada */
.orbit--2{ width: 70%; height: 70%; }
.orbit--3{ width: 90%; height: 90%; }

/* o "orbiter" fica no topo da órbita (na borda superior) */
.orbiter{
  position:absolute;
  top:0;
  left:50%;
  transform: translate(-50%, -50%);
  width: max(var(--icon-size), 36px);
  height: max(var(--icon-size), 36px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ícones das redes */
.icon{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:50%;
  background:transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  cursor:pointer;
  transition: transform .24s ease;
  pointer-events:auto;
}
.icon:hover{ transform: scale(1.08); }

/* estrelas douradas geradas via JS */
.star{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: 50% 50%;
  background: var(--star-color);
  border-radius:50%;
  opacity: .95;
  pointer-events:none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  z-index:12;
}

/* bolinhas pretas (dots) */
.dot{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: 50% 50%;
  background: #0b0b0b;
  border-radius:50%;
  opacity: 1;
  pointer-events:none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
  z-index:14;
}

/* animação principal (mantém translate e aplica rotação) */
@keyframes spin{
  from{ transform: translate(-50%,-50%) rotate(0deg); }
  to  { transform: translate(-50%,-50%) rotate(360deg); }
}

/* animação simples para as bolinhas (pulsar) - caso queira pausar ao hover */
@keyframes dotTwinkle {
  from { transform: scale(0.9) rotate(var(--angle)) translateY(var(--r)); opacity: .9; }
  to   { transform: scale(1.15) rotate(var(--angle)) translateY(var(--r)); opacity: 1; }
}

/* responsividade: em telas estreitas deixamos o sistema menor */
@media (max-width:520px){
  :root{ --center-size: clamp(56px, 18vw, 96px); }
}

.orbit {
  /* ... */
  animation: spin var(--speed) linear infinite;
  animation-direction: var(--dir, normal); /* usa normal por padrão */
}

/* estrelinhas (fixas em cada órbita, orbitando junto) */
.star {
  width: 8px;
  height: 8px;
  background: var(--star-color);
  border-radius: 50%;
  position: absolute;
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
}

/* estrelas da órbita 1 */
.orbit--1 .star:nth-of-type(2) { top: -10%; left: 65%; }
.orbit--1 .star:nth-of-type(3) { top: 70%; left: -15%; }

/* estrelas da órbita 2 */
.orbit--2 .star:nth-of-type(2) { top: -15%; left: 30%; }
.orbit--2 .star:nth-of-type(3) { top: 40%; left: 85%; }

/* estrelas da órbita 3 */
.orbit--3 .star:nth-of-type(2) { top: -5%; left: 80%; }
.orbit--3 .star:nth-of-type(3) { top: 50%; left: -10%; }
.orbit--3 .star:nth-of-type(4) { top: 85%; left: 20%; }

ht {
 font-family: Garamond, serif;
 font-size: 2.75rem;;
  text-align: left;

  margin: 0;
  color: rgb(0, 0, 0);
  line-height: 110%;
  letter-spacing: -.02em;
}

hs {
  text-align: center;
}