/* ================================================
   ORBITAL NAVIGATION
   ================================================ */
.orbital {
  position: relative;
  width: 460px;
  height: 460px;
  z-index: 2;
  /* Intro cinematografica */
  opacity: 0;
  animation: introOrbitalIn 1.8s ease forwards;
  animation-delay: 2.5s;
}

@keyframes introOrbitalIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* === CERCHIO CENTRALE === */
.orbital__center {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 20;
  cursor: pointer;
  overflow: hidden;
  /* STATO CHIUSO — bianco pieno */
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.15),
    0 0 0 20px rgba(255, 255, 255, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.12);
  transition:
    background 0.6s var(--ease),
    box-shadow 0.6s var(--ease),
    transform 0.6s var(--ease),
    border-color 0.6s var(--ease),
    width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: pulseClosed 3.5s ease-in-out infinite;
}

.orbital__center:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow:
    0 0 0 10px rgba(76, 175, 80, 0.05),
    0 0 0 24px rgba(76, 175, 80, 0.02),
    0 16px 48px rgba(0, 0, 0, 0.1);
}

.orbital__center:active {
  transform: translate(-50%, -50%) scale(0.97);
}

@keyframes pulseClosed {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0.15), 0 0 0 20px rgba(255,255,255,0.06), 0 16px 48px rgba(0,0,0,0.12); }
  50% { box-shadow: 0 0 0 12px rgba(255,255,255,0.2), 0 0 0 28px rgba(255,255,255,0.08), 0 20px 56px rgba(0,0,0,0.15); }
}

@keyframes pulseOpen {
  0%, 100% { box-shadow: 0 0 0 12px rgba(76,175,80,0.06), 0 0 0 28px rgba(76,175,80,0.03), 0 8px 32px rgba(76,175,80,0.12); }
  50% { box-shadow: 0 0 0 16px rgba(76,175,80,0.08), 0 0 0 34px rgba(76,175,80,0.04), 0 8px 40px rgba(76,175,80,0.16); }
}

/* --- Layer Brand (chiuso) --- */
.orbital__center-brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  opacity: 1;
  transform: scale(1);
  z-index: 3;
}

.orbital__center-logo {
  height: 52px;
  width: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.orbital__center-name {
  font-family: var(--font-h);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--verde-scuro);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.orbital__center-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--testo-m);
  margin-top: 3px;
}

.orbital__center-prov {
  font-size: 0.62rem;
  color: var(--testo-l);
  margin-top: 1px;
  letter-spacing: 0.02em;
}

/* --- Layer SVG (aperto) --- */
.orbital__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 14%;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  /* Chiuso: nascosto */
  opacity: 0;
  transform: scale(0.7);
  z-index: 2;
}

/* === STATO APERTO === */
.orbital.open .orbital__center {
  width: 180px;
  height: 180px;
  background: rgba(200, 230, 201, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(76, 175, 80, 0.15);
  box-shadow:
    0 0 0 12px rgba(76, 175, 80, 0.06),
    0 0 0 28px rgba(76, 175, 80, 0.03),
    0 8px 32px rgba(76, 175, 80, 0.12);
  animation: pulseOpen 4s ease-in-out infinite;
}

.orbital.open .orbital__center-brand {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.orbital.open .orbital__svg {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.15s;
}

/* === ORBITE === */
.orbital__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(76, 175, 80, 0.12);
  top: 50%;
  left: 50%;
  /* Chiuso: collassate al centro */
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orbital__ring--inner {
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) scale(0.3);
}

.orbital__ring--outer {
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%) scale(0.2);
  border-color: rgba(76, 175, 80, 0.07);
}

/* Aperto */
.orbital.open .orbital__ring--inner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.1s;
}

.orbital.open .orbital__ring--outer {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.15s;
}

/* === DOTS === */
.orbital__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--verde-accent);
  border-radius: 50%;
  z-index: 1;
  /* Chiuso */
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orbital__dot--1 { top: 20px; left: 50%; margin-left: -3px; transition-delay: 0s; }
.orbital__dot--2 { top: 80px; right: 30px; transition-delay: 0.05s; }
.orbital__dot--3 { bottom: 80px; right: 20px; transition-delay: 0.1s; }
.orbital__dot--4 { bottom: 20px; left: 50%; margin-left: -3px; transition-delay: 0.15s; }
.orbital__dot--5 { bottom: 80px; left: 20px; transition-delay: 0.2s; }
.orbital__dot--6 { top: 80px; left: 30px; transition-delay: 0.25s; }

/* Aperto */
.orbital.open .orbital__dot {
  opacity: 0.25;
  transform: scale(1);
  animation: dotPulse 3s ease-in-out infinite;
}

.orbital.open .orbital__dot--1 { transition-delay: 0.25s; animation-delay: 0s; }
.orbital.open .orbital__dot--2 { transition-delay: 0.3s; animation-delay: 0.5s; }
.orbital.open .orbital__dot--3 { transition-delay: 0.35s; animation-delay: 1s; }
.orbital.open .orbital__dot--4 { transition-delay: 0.4s; animation-delay: 1.5s; }
.orbital.open .orbital__dot--5 { transition-delay: 0.45s; animation-delay: 2s; }
.orbital.open .orbital__dot--6 { transition-delay: 0.5s; animation-delay: 2.5s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}

/* === NODI === */
.orbital__node {
  position: absolute;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-width: 96px;
  /* Chiuso: tutti al centro, invisibili */
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
  /* Posizioni finali (sovrascriviamo in .open) */
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -48px;
  transition:
    opacity 0.4s var(--ease),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    right 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    bottom 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* Delay sfalsato per effetto raggi (chiusura) */
.orbital__node--0 { transition-delay: 0.25s; }
.orbital__node--1 { transition-delay: 0.2s; }
.orbital__node--2 { transition-delay: 0.15s; }
.orbital__node--3 { transition-delay: 0.1s; }
.orbital__node--4 { transition-delay: 0.05s; }
.orbital__node--5 { transition-delay: 0s; }

/* === STATO APERTO — NODI === */
.orbital.open .orbital__node {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  /* Reset margins per posizionamento finale */
  margin-top: 0;
}

/* Posizioni finali + delay sfalsato apertura */
.orbital.open .orbital__node--0 {
  top: -10px; left: 50%; right: auto; bottom: auto; margin-left: -48px;
  transition-delay: 0.1s;
  animation: nodeFloat 5s ease-in-out infinite 0s;
}
.orbital.open .orbital__node--1 {
  top: 72px; right: -20px; left: auto; bottom: auto; margin-left: 0;
  transition-delay: 0.16s;
  animation: nodeFloat 5s ease-in-out infinite 0.8s;
}
.orbital.open .orbital__node--2 {
  bottom: 72px; right: -20px; top: auto; left: auto; margin-left: 0;
  transition-delay: 0.22s;
  animation: nodeFloat 5s ease-in-out infinite 1.6s;
}
.orbital.open .orbital__node--3 {
  bottom: -10px; left: 50%; top: auto; right: auto; margin-left: -48px;
  transition-delay: 0.28s;
  animation: nodeFloat 5s ease-in-out infinite 2.4s;
}
.orbital.open .orbital__node--4 {
  bottom: 72px; left: -20px; top: auto; right: auto; margin-left: 0;
  transition-delay: 0.34s;
  animation: nodeFloat 5s ease-in-out infinite 3.2s;
}
.orbital.open .orbital__node--5 {
  top: 72px; left: -20px; right: auto; bottom: auto; margin-left: 0;
  transition-delay: 0.4s;
  animation: nodeFloat 5s ease-in-out infinite 4s;
}

@keyframes nodeFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1) translateY(-6px); }
}

/* Hover nodi (solo quando aperto) */
.orbital.open .orbital__node:hover {
  transform: scale(1.1) !important;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(76, 175, 80, 0.3);
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.18), 0 0 0 4px rgba(76, 175, 80, 0.06);
  z-index: 10;
  animation-play-state: paused;
}

.orbital.open .orbital__node:active {
  transform: scale(1.02) !important;
}

/* Icone e label nodi */
.orbital__node-icon {
  width: 36px;
  height: 36px;
  background: var(--verde-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease);
}

.orbital.open .orbital__node:hover .orbital__node-icon {
  background: var(--verde-chiaro);
}

.orbital__node-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--verde-medio);
  transition: stroke 0.3s var(--ease);
}

.orbital.open .orbital__node:hover .orbital__node-icon svg {
  stroke: var(--bianco);
}

.orbital__node span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--testo-m);
  text-align: center;
  line-height: 1.2;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .orbital {
    width: 360px;
    height: 360px;
  }

  .orbital__center {
    width: 180px;
    height: 180px;
  }

  .orbital.open .orbital__center {
    width: 140px;
    height: 140px;
  }

  .orbital__center-logo { height: 40px; }
  .orbital__center-name { font-size: 0.72rem; }
  .orbital__center-sub { font-size: 0.64rem; }
  .orbital__center-prov { font-size: 0.56rem; }

  .orbital__ring--inner { width: 160px; height: 160px; }
  .orbital__ring--outer { width: 330px; height: 330px; }

  .orbital__node {
    min-width: 82px;
    padding: 10px 8px;
  }

  .orbital__node-icon { width: 30px; height: 30px; }
  .orbital__node-icon svg { width: 15px; height: 15px; }
  .orbital__node span { font-size: 0.65rem; }

  /* Posizioni aperte tablet */
  .orbital.open .orbital__node--0 { top: -8px; left: 50%; margin-left: -41px; }
  .orbital.open .orbital__node--1 { top: 55px; right: -15px; }
  .orbital.open .orbital__node--2 { bottom: 55px; right: -15px; }
  .orbital.open .orbital__node--3 { bottom: -8px; left: 50%; margin-left: -41px; }
  .orbital.open .orbital__node--4 { bottom: 55px; left: -15px; }
  .orbital.open .orbital__node--5 { top: 55px; left: -15px; }
}

@media (max-width: 550px) {
  .orbital {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1;
  }

  .orbital__center {
    width: 150px;
    height: 150px;
  }

  .orbital.open .orbital__center {
    width: 100px;
    height: 100px;
  }

  .orbital__center-logo { height: 34px; margin-bottom: 6px; }
  .orbital__center-name { font-size: 0.64rem; }
  .orbital__center-sub { font-size: 0.56rem; }
  .orbital__center-prov { font-size: 0.5rem; }

  .orbital__ring--inner { width: 130px; height: 130px; }
  .orbital__ring--outer { width: 290px; height: 290px; }

  .orbital__node {
    min-width: 70px;
    padding: 8px 6px;
  }

  .orbital__node-icon { width: 26px; height: 26px; }
  .orbital__node-icon svg { width: 13px; height: 13px; }
  .orbital__node span { font-size: 0.6rem; }

  /* Posizioni aperte mobile */
  .orbital.open .orbital__node--0 { top: -6px; left: 50%; margin-left: -35px; }
  .orbital.open .orbital__node--1 { top: 44px; right: -10px; }
  .orbital.open .orbital__node--2 { bottom: 44px; right: -10px; }
  .orbital.open .orbital__node--3 { bottom: -6px; left: 50%; margin-left: -35px; }
  .orbital.open .orbital__node--4 { bottom: 44px; left: -10px; }
  .orbital.open .orbital__node--5 { top: 44px; left: -10px; }
}