/* CS Repair — esfera de vidro + órbitas 3D (Dashboard + TechBase) */
.cs-orbital {
  --cs-orbital-size: 160px;
  --cs-orbital-logo: 72px;
  --cs-orbital-r: 68px;
  --cs-orbital-sphere: 92px;
  --cs-orbital-icon: 18px;
  --cs-orbital-scale: 1;
  --cs-orbital-blue: #1565c0;
  --cs-orbital-orange: #ff6a00;
  --cs-orbital-rz: calc(var(--cs-orbital-r) * var(--cs-orbital-scale));
  /* Raios distintos por órbita (não sincronizados visualmente) */
  --cs-orbital-rz-eq: calc(var(--cs-orbital-rz) * 1.08);
  --cs-orbital-rz-vert: calc(var(--cs-orbital-rz) * 0.94);
  --cs-orbital-rz-tilt: calc(var(--cs-orbital-rz) * 0.8);
  /* Velocidades: exterior 13s · intermédia 16s · interior 19s */
  --cs-orbital-dur-eq: 13s;
  --cs-orbital-dur-vert: 16s;
  --cs-orbital-dur-tilt: 19s;
  position: relative;
  width: var(--cs-orbital-size);
  height: var(--cs-orbital-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 900px;
  perspective-origin: 50% 45%;
}

.cs-orbital__shadow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 44%;
  height: 9%;
  transform: translate3d(-50%, 0, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(13, 71, 161, .16) 0%, rgba(13, 71, 161, .05) 50%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}

.cs-orbital__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 1;
}

.cs-orbital__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  transform-style: preserve-3d;
  pointer-events: none;
  backface-visibility: visible;
}

.cs-orbital__ring--eq {
  width: calc(var(--cs-orbital-rz-eq) * 2);
  height: calc(var(--cs-orbital-rz-eq) * 2);
  margin: calc(var(--cs-orbital-rz-eq) * -1) 0 0 calc(var(--cs-orbital-rz-eq) * -1);
  border: 1px solid rgba(21, 101, 192, .28);
  opacity: .55;
  transform: rotateX(78deg);
  animation: csOrbRingEq 40s linear infinite;
}

.cs-orbital__ring--vert {
  width: calc(var(--cs-orbital-rz-vert) * 2);
  height: calc(var(--cs-orbital-rz-vert) * 2);
  margin: calc(var(--cs-orbital-rz-vert) * -1) 0 0 calc(var(--cs-orbital-rz-vert) * -1);
  border: 1px solid rgba(255, 106, 0, .22);
  opacity: .42;
  transform: rotateY(88deg) rotateZ(6deg);
  animation: csOrbRingVert 48s linear infinite reverse;
}

.cs-orbital__ring--tilt {
  width: calc(var(--cs-orbital-rz-tilt) * 2);
  height: calc(var(--cs-orbital-rz-tilt) * 2);
  margin: calc(var(--cs-orbital-rz-tilt) * -1) 0 0 calc(var(--cs-orbital-rz-tilt) * -1);
  border: 1px dashed rgba(21, 101, 192, .2);
  opacity: .36;
  transform: rotateX(48deg) rotateY(42deg);
  animation: csOrbRingTilt 56s linear infinite;
}

/* Site público — compacto na sidebar; menos ícones densos */
.cs-orbital--public .cs-orbital__ico--dense {
  display: none;
}
.cs-orbital--public .cs-orbital__shadow {
  bottom: 2%;
  opacity: .85;
}

/* Início (hero): mesma animação completa da Área Restrita */
.cs-orbital--public_inicio .cs-orbital__ico--dense {
  display: grid;
}

.cs-orbital__sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cs-orbital-sphere);
  height: var(--cs-orbital-sphere);
  margin: calc(var(--cs-orbital-sphere) / -2) 0 0 calc(var(--cs-orbital-sphere) / -2);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 16%, transparent 40%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .62) 0%, rgba(227, 242, 253, .5) 36%, rgba(187, 222, 251, .32) 66%, rgba(144, 202, 249, .2) 100%);
  box-shadow:
    inset 0 -12px 20px rgba(13, 71, 161, .08),
    inset 0 10px 16px rgba(255, 255, 255, .58),
    0 12px 24px rgba(21, 101, 192, .11),
    0 1px 0 rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .6);
}

.cs-orbital__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(152deg, rgba(255, 255, 255, .5) 0%, transparent 40%, transparent 64%, rgba(21, 101, 192, .05) 100%);
  pointer-events: none;
}

.cs-orbital__glare {
  position: absolute;
  left: 16%;
  top: 12%;
  width: 36%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .18) 52%, transparent 72%);
  transform: rotate(-20deg);
  pointer-events: none;
}

.cs-orbital__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cs-orbital-logo);
  height: var(--cs-orbital-logo);
  margin: calc(var(--cs-orbital-logo) / -2) 0 0 calc(var(--cs-orbital-logo) / -2);
  object-fit: contain;
  pointer-events: none;
  transform: translate3d(0, 0, 1px);
  filter: drop-shadow(0 1px 2px rgba(13, 71, 161, .1));
  animation: csOrbitalBreathe 5.5s ease-in-out infinite;
}

.cs-orbital__ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cs-orbital-icon);
  height: var(--cs-orbital-icon);
  margin: calc(var(--cs-orbital-icon) / -2) 0 0 calc(var(--cs-orbital-icon) / -2);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  pointer-events: auto;
  cursor: default;
  color: var(--cs-orbital-blue);
}

.cs-orbital__ico-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transition: transform .2s ease;
}

.cs-orbital__ico svg {
  display: block;
  width: var(--cs-orbital-icon);
  height: var(--cs-orbital-icon);
}

.cs-orbital__ico--blue { color: var(--cs-orbital-blue); }
.cs-orbital__ico--orange { color: var(--cs-orbital-orange); }

.cs-orbital__ico--eq {
  animation: csOrbEq var(--cs-orbital-dur-eq) linear infinite;
}
.cs-orbital__ico--vert {
  animation: csOrbVert var(--cs-orbital-dur-vert) linear infinite;
}
.cs-orbital__ico--tilt {
  animation: csOrbTilt var(--cs-orbital-dur-tilt) linear infinite;
}

/* Distribuição equidistante por órbita (6 / 5 / 5) */
.cs-orbital__ico--1 { animation-delay: 0s; }
.cs-orbital__ico--2 { animation-delay: calc(var(--cs-orbital-dur-eq) * -1 / 6); }
.cs-orbital__ico--3 { animation-delay: calc(var(--cs-orbital-dur-eq) * -2 / 6); }
.cs-orbital__ico--4 { animation-delay: calc(var(--cs-orbital-dur-eq) * -3 / 6); }
.cs-orbital__ico--5 { animation-delay: calc(var(--cs-orbital-dur-eq) * -4 / 6); }
.cs-orbital__ico--6 { animation-delay: calc(var(--cs-orbital-dur-eq) * -5 / 6); }

.cs-orbital__ico--7 { animation-delay: 0s; }
.cs-orbital__ico--8 { animation-delay: calc(var(--cs-orbital-dur-vert) * -1 / 5); }
.cs-orbital__ico--9 { animation-delay: calc(var(--cs-orbital-dur-vert) * -2 / 5); }
.cs-orbital__ico--10 { animation-delay: calc(var(--cs-orbital-dur-vert) * -3 / 5); }
.cs-orbital__ico--11 { animation-delay: calc(var(--cs-orbital-dur-vert) * -4 / 5); }

.cs-orbital__ico--12 { animation-delay: 0s; }
.cs-orbital__ico--13 { animation-delay: calc(var(--cs-orbital-dur-tilt) * -1 / 5); }
.cs-orbital__ico--14 { animation-delay: calc(var(--cs-orbital-dur-tilt) * -2 / 5); }
.cs-orbital__ico--15 { animation-delay: calc(var(--cs-orbital-dur-tilt) * -3 / 5); }
.cs-orbital__ico--16 { animation-delay: calc(var(--cs-orbital-dur-tilt) * -4 / 5); }

.cs-orbital__ico:hover {
  filter: drop-shadow(0 0 3px rgba(21, 101, 192, .3)) !important;
  opacity: 1 !important;
}
.cs-orbital__ico:hover .cs-orbital__ico-face { transform: scale(1.15); }
.cs-orbital__ico--orange:hover {
  filter: drop-shadow(0 0 3px rgba(255, 106, 0, .32)) !important;
}

@keyframes csOrbEq {
  0% {
    transform: rotateY(0deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(0deg) scale(1.06);
    opacity: 1;
    filter: blur(0);
  }
  25% {
    transform: rotateY(90deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-90deg) scale(.9);
    opacity: .68;
    filter: blur(.2px);
  }
  50% {
    transform: rotateY(180deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-180deg) scale(.74);
    opacity: .3;
    filter: blur(.7px);
  }
  75% {
    transform: rotateY(270deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-270deg) scale(.9);
    opacity: .68;
    filter: blur(.2px);
  }
  100% {
    transform: rotateY(360deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-360deg) scale(1.06);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes csOrbVert {
  0% {
    transform: rotateX(0deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(0deg) scale(1.04);
    opacity: 1;
    filter: blur(0);
  }
  25% {
    transform: rotateX(90deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-90deg) scale(.87);
    opacity: .62;
    filter: blur(.25px);
  }
  50% {
    transform: rotateX(180deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-180deg) scale(.72);
    opacity: .28;
    filter: blur(.75px);
  }
  75% {
    transform: rotateX(270deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-270deg) scale(.87);
    opacity: .62;
    filter: blur(.25px);
  }
  100% {
    transform: rotateX(360deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-360deg) scale(1.04);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes csOrbTilt {
  0% {
    transform: rotateZ(36deg) rotateY(0deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(0deg) rotateZ(-36deg) scale(1.03);
    opacity: 1;
    filter: blur(0);
  }
  25% {
    transform: rotateZ(36deg) rotateY(90deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(-90deg) rotateZ(-36deg) scale(.86);
    opacity: .58;
    filter: blur(.3px);
  }
  50% {
    transform: rotateZ(36deg) rotateY(180deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(-180deg) rotateZ(-36deg) scale(.7);
    opacity: .26;
    filter: blur(.8px);
  }
  75% {
    transform: rotateZ(36deg) rotateY(270deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(-270deg) rotateZ(-36deg) scale(.86);
    opacity: .58;
    filter: blur(.3px);
  }
  100% {
    transform: rotateZ(36deg) rotateY(360deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(-360deg) rotateZ(-36deg) scale(1.03);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes csOrbRingEq {
  to { transform: rotateX(78deg) rotateZ(360deg); }
}
@keyframes csOrbRingVert {
  to { transform: rotateY(448deg) rotateZ(6deg); }
}
@keyframes csOrbRingTilt {
  to { transform: rotateX(48deg) rotateY(402deg); }
}

@keyframes csOrbitalBreathe {
  0%, 100% { transform: translate3d(0, 0, 1px) scale(1); }
  50% { transform: translate3d(0, 0, 1px) scale(1.03); }
}

/* Tablet — raio ligeiramente menor */
@media (max-width: 1100px) {
  .cs-orbital { --cs-orbital-scale: 0.9; }
}

/* Mobile / PWA — menos ícones, animação mantém-se */
@media (max-width: 780px) {
  .cs-orbital__ico--dense {
    display: none;
  }
  .cs-orbital { --cs-orbital-scale: 0.86; }
}

@media (max-width: 400px) {
  .cs-orbital__ring--tilt {
    display: none;
  }
  .cs-orbital__ico--tilt:not(.cs-orbital__ico--prio) {
    display: none;
  }
  .cs-orbital { --cs-orbital-scale: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-orbital__ico,
  .cs-orbital__logo,
  .cs-orbital__ring {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
  .cs-orbital__ico--1 {
    transform: rotateY(15deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-15deg) !important;
    opacity: 1 !important;
  }
  .cs-orbital__ico--3 {
    transform: rotateY(135deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-135deg) !important;
    opacity: .55 !important;
  }
  .cs-orbital__ico--5 {
    transform: rotateY(255deg) translate3d(0, 0, var(--cs-orbital-rz-eq)) rotateY(-255deg) !important;
    opacity: .8 !important;
  }
  .cs-orbital__ico--8 {
    transform: rotateX(40deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-40deg) !important;
    opacity: .9 !important;
  }
  .cs-orbital__ico--11 {
    transform: rotateX(200deg) translate3d(0, 0, var(--cs-orbital-rz-vert)) rotateX(-200deg) !important;
    opacity: .4 !important;
  }
  .cs-orbital__ico--12 {
    transform: rotateZ(36deg) rotateY(50deg) translate3d(0, 0, var(--cs-orbital-rz-tilt)) rotateY(-50deg) rotateZ(-36deg) !important;
    opacity: .85 !important;
  }
}