/* ==========================================================================
   ORBIT · Tecnologías orbitando alrededor del logo
   --------------------------------------------------------------------------
   Todo se calcula con variables CSS:
   - Cada ítem recibe --i (su posición) desde orbit.js; el ángulo sale de
     --i y --count, así que agregar o quitar tecnologías no requiere tocar
     este archivo.
   - Usa las variables de Bootstrap (--bs-body-bg, --bs-border-color, etc.),
     por lo que el tema claro/oscuro funciona sin código extra.
   ========================================================================== */

/* ---------- 1. Contenedor y variables ajustables ---------- */
.orbit {
  --orbit-size: min(100%, 26rem);   /* tamaño máximo del conjunto        */
  --orbit-radius: 38cqw;            /* radio de la órbita                 */
  --orbit-duration: 48s;            /* tiempo de una vuelta completa      */
  --orbit-accent: #4f6bff;          /* color del halo del logo            */

  position: relative;
  width: var(--orbit-size);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;      /* habilita unidades cqw y @container */
}

/* ---------- 2. Logo central ---------- */
.orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34cqw;
  aspect-ratio: 1;
  padding: 0.35rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  background: var(--bs-body-bg);
  box-shadow:
    0 0 0 0.6rem color-mix(in srgb, var(--orbit-accent) 12%, transparent),
    0 1rem 2.5rem rgb(0 0 0 / 0.15);
}

.orbit__core img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- 3. Anillo giratorio ---------- */
.orbit__ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: orbit-spin var(--orbit-duration) linear infinite;
}

/* Trazo guía de la órbita */
.orbit__ring::before {
  content: "";
  position: absolute;
  inset: calc(50% - var(--orbit-radius));
  border: 1px dashed var(--bs-border-color);
  border-radius: 50%;
}

/* ---------- 4. Ítem: punto de anclaje en la órbita ----------
   Mide 0×0: solo fija la posición. Gira hacia su ángulo, avanza el radio
   y vuelve a girar en sentido contrario para quedar derecho. */
.orbit__item {
  --orbit-angle: calc(360deg * var(--i) / var(--count) - 90deg); /* el primero queda arriba */

  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform:
    rotate(var(--orbit-angle))
    translateX(var(--orbit-radius))
    rotate(calc(var(--orbit-angle) * -1));
  animation: orbit-in 0.5s ease-out both;
  animation-delay: calc(var(--i) * 80ms);
}

/* ---------- 5. Chip: contrarresta el giro del anillo ---------- */
.orbit__chip {
  --chip-color: var(--bs-secondary-color);

  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--chip-color) 40%, var(--bs-border-color));
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.08);
  /* mismo tiempo que el anillo, en sentido contrario = chip siempre derecho */
  animation: orbit-spin var(--orbit-duration) linear infinite reverse;
  transition: scale 0.2s ease, box-shadow 0.2s ease;
}

.orbit__icon {
  color: var(--chip-color);
  font-size: 1rem;
}

.orbit__chip:hover,
.orbit__chip:focus-visible {
  scale: 1.12;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 28%, transparent);
  outline: none;
}

/* ---------- 6. Pausas (hover, foco por teclado o fuera de pantalla) ---------- */
.orbit:is(:hover, :focus-within, .is-offscreen) :is(.orbit__ring, .orbit__chip) {
  animation-play-state: paused;
}

/* ---------- 7. Pantallas angostas: solo íconos ---------- */
@container (max-width: 21rem) {
  .orbit__label {
    display: none;
  }

  .orbit__chip {
    padding: 0.55rem;
  }
}

/* ---------- 8. Animaciones ---------- */
@keyframes orbit-spin {
  to { rotate: 360deg; }
}

@keyframes orbit-in {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 1; scale: 1; }
}

/* ---------- 9. Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .orbit__ring,
  .orbit__chip,
  .orbit__item {
    animation: none;
  }
}