/* ============================================================
   TAKEAWAY — Orbit
   ============================================================ */

/* ── Token — cambia solo questi ── */
:root {
  --orbit-label-size:            clamp(14px, 1.5vw, 21px); /* nodi: Intelligence, Strategy… */
  --orbit-center-label-desktop:  21px;                      /* "Our Creative Framework" desktop */
  --orbit-ring-radius-desktop:   245px;                     /* raggio ring desktop */
}

@media (max-width: 768px) {
  :root {
    --orbit-label-size:           15px;   /* nodi mobile */
    --orbit-center-label-mobile:  18px;   /* "Our Creative Framework" mobile */
    --orbit-ring-radius-mobile:   150px;  /* raggio ring mobile */
  }
}

/* ── Layout ── */
#orbit {
  height: 100vh;
  background: var(--c-bg);
  overflow-x: hidden;
}

.orbit-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#orbit-stage {
  position: relative;
  width: min(48vw, 78vh);
  height: min(48vw, 78vh);
  opacity: 0;
  will-change: opacity, transform;
}

#orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#orbit-ring {
  fill: none;
  stroke: rgba(255,255,255,0.35);
  stroke-width: 1;
  /* stroke-dasharray, dashoffset e transition gestiti dal JS */
}

/* ── Centro: frase unica ── */
#orbit-center-lbl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-center-label {
  font-family: var(--font);
  font-size: var(--orbit-center-label-desktop);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-md);
  color: var(--c-text);
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  max-width: 12ch;
  display: block;
}

/* ── Nodi ── */
.orbit-node-label {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  fill: rgba(255, 255, 255, 1);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #orbit {
    height: auto;
    padding: 112px 0;
    overflow: hidden;
  }

  .orbit-sticky {
    height: auto;
    position: static;
  }

  #orbit-stage {
    width: 98vw;
    height: 98vw;
  }

  .orbit-center-label {
    font-size: var(--orbit-center-label-mobile);
    max-width: 10ch;
  }

  .orbit-node-label {
    fill: rgba(255, 255, 255, 0.9);
  }
}