/* Órbitas del planeta como un disco galáctico visto en oblicuo (no desde arriba), con un tono de color por anillo
   y estelas algo más largas. Todo sutil. Los valores de inclinación (--orbit-tilt, --orbit-roll) los usa también
   Vix al orbitar (planetOrbit en tav-chat.js). */

.hero-planet {
  --orbit-tilt: 66deg;
  --orbit-roll: -16deg;
}

.hero-planet-orbit {
  animation-name: heroDiscOrbit;
  border-width: 1px;
}

@keyframes heroDiscOrbit {
  from { transform: rotateZ(var(--orbit-roll)) rotateX(var(--orbit-tilt)) rotateZ(0turn); }
  to { transform: rotateZ(var(--orbit-roll)) rotateX(var(--orbit-tilt)) rotateZ(1turn); }
}

/* un tono por anillo */
.hero-planet-orbit.orbit-one { border-color: rgba(120, 215, 235, 0.1); }
.hero-planet-orbit.orbit-two { border-color: rgba(160, 135, 255, 0.09); }
.hero-planet-orbit.orbit-three { border-color: rgba(230, 150, 190, 0.075); }
.hero-planet-orbit.orbit-four { border-color: rgba(130, 200, 230, 0.06); }

.hero-planet-orbit.orbit-one > i { background: #8fe9ef; }
.hero-planet-orbit.orbit-two > i { background: #b8a6ff; box-shadow: 0 0 8px rgba(184, 166, 255, 0.9), 0 0 22px rgba(140, 115, 255, 0.6), 0 0 48px rgba(111, 123, 255, 0.3); }
.hero-planet-orbit.orbit-three > i { background: #ffc3d9; box-shadow: 0 0 8px rgba(255, 195, 217, 0.85), 0 0 22px rgba(235, 130, 175, 0.55), 0 0 48px rgba(180, 110, 220, 0.28); }

/* Estela: un arco curvo que sigue el anillo y se va diluyendo detrás de la partícula (nada de rayas rectas) */
.hero-planet-orbit.orbit-one { --tc: 120, 225, 240; }
.hero-planet-orbit.orbit-two { --tc: 175, 150, 255; }
.hero-planet-orbit.orbit-three { --tc: 250, 170, 205; }
.hero-planet-orbit.orbit-four { --tc: 130, 205, 235; }

.hero-planet-orbit > i::after { display: none !important; }

.hero-planet-orbit::before,
.hero-planet-orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  pointer-events: none;
  /* una sola máscara radial deja solo el anillo (sin compositing de dos capas) */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

/* arco fino y brillante */
.hero-planet-orbit::before {
  background: conic-gradient(from -52deg, rgba(var(--tc), 0) 0deg, rgba(var(--tc), 0.42) 52deg, rgba(var(--tc), 0) 52.2deg);
}

/* halo difuso y más largo */
.hero-planet-orbit::after {
  inset: -5px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  background: conic-gradient(from -76deg, rgba(var(--tc), 0) 0deg, rgba(var(--tc), 0.07) 76deg, rgba(var(--tc), 0) 76.2deg);
}

/* los anillos que giran al revés llevan la estela al otro lado */
.hero-planet-orbit.orbit-two::before,
.hero-planet-orbit.orbit-four::before {
  background: conic-gradient(from 0deg, rgba(var(--tc), 0.42) 0deg, rgba(var(--tc), 0) 52deg);
}
.hero-planet-orbit.orbit-two::after,
.hero-planet-orbit.orbit-four::after {
  background: conic-gradient(from 0deg, rgba(var(--tc), 0.07) 0deg, rgba(var(--tc), 0) 76deg);
}

/* el hover no exagera nada: la partícula no crece ni se le añade brillo extra */
.hero-planet-orbit > i { transform: translate(-50%, -50%) !important; }
.hero-planet-orbit > i.is-cursor-near { box-shadow: 0 0 8px rgba(156, 244, 240, 0.95), 0 0 22px rgba(61, 217, 224, 0.6), 0 0 48px rgba(111, 123, 255, 0.3); }
.hero-planet-orbit.orbit-two > i.is-cursor-near { box-shadow: 0 0 8px rgba(184, 166, 255, 0.9), 0 0 22px rgba(140, 115, 255, 0.55), 0 0 48px rgba(111, 123, 255, 0.28); }
.hero-planet-orbit.orbit-three > i.is-cursor-near { box-shadow: 0 0 8px rgba(255, 195, 217, 0.85), 0 0 22px rgba(235, 130, 175, 0.5), 0 0 48px rgba(180, 110, 220, 0.25); }

/* con la tinta rosa de Estudio, el disco se vuelve cálido */
.hero-planet.is-tint-pink .hero-planet-orbit.orbit-one { border-color: rgba(240, 150, 190, 0.11); }
.hero-planet.is-tint-pink .hero-planet-orbit.orbit-one > i { background: #ffb4cf; }

@media (prefers-reduced-motion: reduce) {
  .hero-planet-orbit { animation: none !important; transform: rotateZ(var(--orbit-roll)) rotateX(var(--orbit-tilt)); }
}

/* Móvil: en las páginas interiores el planeta va DETRÁS del texto, grande y cortado por el borde derecho
   (nunca centrado ni colgando debajo del título). El texto queda por encima. */
@media (max-width: 899px) {
  .hero-grid { position: relative; }
  .hero-grid > .signal-orb { position: absolute; inset: 0; min-height: 0; z-index: 0; opacity: 0.55; pointer-events: none; overflow: visible; }
  .hero-grid > :not(.signal-orb) { position: relative; z-index: 1; }
  .hero-grid > .signal-orb .hero-planet.is-compact { left: auto; right: -38vw; top: 40%; width: 100vw; animation-name: heroPlanetDriftSide; }
}

@keyframes heroPlanetDriftSide {
  from { transform: translate3d(var(--planet-shift-x, 0px), calc(-50% + var(--planet-shift-y, 0px)), 0) scale(0.985); }
  to { transform: translate3d(calc(var(--planet-shift-x, 0px) - 14px), calc(-52% + var(--planet-shift-y, 0px)), 0) scale(1.015); }
}