/* Launcher — EarVu Orbit Nav (public) */

.vu-launcher{
  position: fixed;
  width: 72px;
  height: 72px;
  z-index: 99999;
  --vu-orbit-shift: 0px;
}

/* PLEGADO = SIEMPRE visible en esquina (mata transforms/left/top heredados) */
.vu-launcher[data-open="0"]{
  right: 80px !important;
  bottom: 80px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* ABIERTO = se mete hacia dentro */
.vu-launcher[data-open="1"]{
  right: calc(80px + var(--vu-orbit-shift));
  bottom: calc(80px + var(--vu-orbit-shift));
  left: auto;
  top: auto;
  transform: none;
}

.vu-launcher-btn{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(8,12,22,0.62);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(255,255,255,0.92);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s ease,
    background .28s ease,
    opacity .22s ease;
}

.vu-launcher[data-open="1"] .vu-launcher-btn{
  transform: scale(1.05);
  opacity:1;
}

.vu-launcher[data-open="0"] .vu-launcher-btn{
  transform: scale(1);
  opacity:.96;
}

.vu-launcher-icon{
  font-size: 1.35rem;
  line-height: 1;
}

.vu-launcher-text{
  display:none; /* orbit-only (si quieres texto, lo reactivamos luego) */
}

/* Panel en modo órbita */
.vu-launcher-panel.orbit-mode{
  position: absolute;
  z-index: 2;
  width: 360px;
  height: 360px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    opacity .26s ease;
}

.vu-launcher[data-open="1"] .vu-launcher-panel.orbit-mode{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Anillo visual EarVu */
.vu-launcher-panel.orbit-mode::before{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 999px;
  background: conic-gradient(
    from var(--vu-angle, 210deg),
    #ff7a18,
    #ff9f43,
    #ffd166,
    #38bdf8,
    #2563eb,
    #ff7a18
  );
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  filter: blur(0.2px);
  opacity: 0.85;
  pointer-events:none;
}

/* Orbit items */
.orbit-item{
  position: absolute;
  left: 50%;
  top: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(10,15,30,0.72);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.48),
    inset 0 0 0 1px rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  text-decoration:none;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(var(--ox), var(--oy))
    scale(.85);
  transition:
    opacity .30s ease,
    transform .36s cubic-bezier(.22,1,.36,1);
}

.orbit-1{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,122,24,0.35); }
.orbit-2{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,159,67,0.35); }
.orbit-3{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,209,102,0.35); }
.orbit-4{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(56,189,248,0.35); }
.orbit-5{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(37,99,235,0.35); }
.orbit-6{ box-shadow:0 18px 45px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,122,24,0.25); }

.vu-launcher[data-open="1"] .orbit-item{
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(var(--ox), var(--oy))
    scale(1);
}

.vu-launcher[data-open="1"] .orbit-1{ transition-delay: .05s; }
.vu-launcher[data-open="1"] .orbit-2{ transition-delay: .09s; }
.vu-launcher[data-open="1"] .orbit-3{ transition-delay: .13s; }
.vu-launcher[data-open="1"] .orbit-4{ transition-delay: .17s; }
.vu-launcher[data-open="1"] .orbit-5{ transition-delay: .21s; }
.vu-launcher[data-open="1"] .orbit-6{ transition-delay: .25s; }

.orbit-item:hover{
  color:#fff;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.16);
}

.vu-launcher[data-open="0"] .orbit-item{
  opacity:0;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--ox)*0.15), calc(var(--oy)*0.15))
    scale(.65);
}

/* Coordenadas */
.orbit-1{ --ox: 0px;    --oy: -135px; }
.orbit-2{ --ox: 118px;  --oy: -68px; }
.orbit-3{ --ox: 118px;  --oy: 68px; }
.orbit-4{ --ox: 0px;    --oy: 135px; }
.orbit-5{ --ox: -118px; --oy: 68px; }
.orbit-6{ --ox: -118px; --oy: -68px; }

/* Animación sutil */
.vu-launcher[data-open="1"] .orbit-item{
  animation: vu-orbit-float 6s ease-in-out infinite;
}

.vu-launcher[data-open="1"] .orbit-2{ animation-delay:.08s; }
.vu-launcher[data-open="1"] .orbit-3{ animation-delay:.16s; }
.vu-launcher[data-open="1"] .orbit-4{ animation-delay:.24s; }
.vu-launcher[data-open="1"] .orbit-5{ animation-delay:.32s; }
.vu-launcher[data-open="1"] .orbit-6{ animation-delay:.40s; }

@keyframes vu-orbit-float{
  0%,100%{
    transform:
      translate(-50%, -50%)
      translate(var(--ox), var(--oy));
  }
  50%{
    transform:
      translate(-50%, -50%)
      translate(calc(var(--ox)), calc(var(--oy) - 6px));
  }
}

/* BACKDROP */

.vu-launcher-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(8,12,20,0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 998;
}

.vu-launcher[data-open="1"] + .vu-launcher-backdrop{
  opacity: 1;
  pointer-events: auto;
}

.vu-launcher{
  z-index: 999;
}

body.vu-nav-open{
  overflow: hidden;
}