/* =====================================================================
   LA ÓRBITA DE SHAKA · los cinco elementos 五行
   =====================================================================
   Shaka va en el centro. Alrededor giran los cinco elementos chinos:

       金 Metal  · gris   → la estructura   → sistemas a medida
       水 Agua   · azul   → el flujo       → páginas web
       木 Madera · verde  → el crecimiento → tiendas en línea
       火 Fuego  · rojo   → el impacto     → imagen y diseño
       土 Tierra · dorado → el soporte     → mantenimiento


   CÓMO ESTÁ HECHO (y por qué así)
   ---------------------------------------------------------------------
   Cada elemento va PEGADO AL BORDE DE SU PROPIA ELIPSE. Por eso nunca
   se sale de su línea: no hay dos recorridos, hay uno solo.

   La estructura de cada órbita es:

       <div class="anillo anillo--1 el-metal">     ← la elipse, con su color
         <div class="portador">                    ← recorre la elipse
           <div class="letra">                     ← solo endereza el texto
             <div class="elemento">金</div>        ← la bolita
           </div>
         </div>
       </div>

   · El ANILLO es un círculo con borde, aplastado con rotateX y girado
     con rotateZ. Como el borde es del color del elemento (--col), la
     línea sale de su color: la verde con línea verde, y así.

   · El PORTADOR gira dentro del anillo. Como está DENTRO, hereda la
     inclinación: al girar, la bolita recorre exactamente la elipse.
     Al ser hijo del anillo, es imposible que se salga.

   · La LETRA solo deshace el giro del portador, para que el texto no
     se voltee mientras viaja.

   ⚠️ LOS TRES FALLOS QUE SE ARREGLARON ANTES DE LLEGAR AQUÍ
   .....................................................................

   1 · «solo se veía un aro» → las cinco tenían la misma inclinación.

   2 · «quedaban acostadas» → el CSS aplica las transformaciones de
       derecha a izquierda. Estaba «rotateX(...) rotateZ(...)», que
       aplasta AL FINAL y deja todo horizontal. Ahora es
       «rotateZ(...) rotateX(...)»: aplasta primero, gira después.

   3 · «cada esfera se salía de su línea» → el portador deshacía la
       inclinación del anillo para enderezar la letra, y con eso la
       bolita dejaba de ir sobre la elipse. Ahora el portador NO toca
       la inclinación: solo gira. El texto se endereza en un elemento
       aparte, más adentro, que no afecta el recorrido.
   ===================================================================== */

.orbita-caja {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* ---------------------------------------------------------------------
   ⚠️ AQUÍ ESTABAN LAS DOS MANCHAS NEGRAS DE SHAKA
   ---------------------------------------------------------------------
   Había DOS cosas que se veían como sombra sucia alrededor de la foto:

   1. EL ESCUDO (.orbita-caja::after)
      Un disco negro del color del fondo, que se puso para que las
      elipses que pasan por detrás no se encimaran en la cara de Shaka.
      Pero el disco se veía: un círculo oscuro más grande que la foto.

   2. EL HALO (.orbita-caja::before)
      Un resplandor dorado con «filter: blur(24px)» puesto DETRÁS del
      escudo. Como el escudo lo tapaba por el centro, del halo solo
      asomaba el borde: una mancha difusa.

   Los dos se quitaron. En su lugar, la foto lleva su propio aro y su
   propia luz, pegados a ella (ver abajo). Nada suelto por el fondo.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   EL SISTEMA · aquí viven las cinco elipses
   --------------------------------------------------------------------- */
.sistema {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

/* ---------------------------------------------------------------------
   CADA ELIPSE
   ---------------------------------------------------------------------
   ⚠️ TRES FALLOS ARREGLADOS AQUÍ
   .....................................................................

   FALLO 1 · «se veía solo un aro»
   Las cinco tenían la misma inclinación. Ahora cada una tiene su giro.

   FALLO 2 · «quedaban acostadas todas hacia el mismo lado»
   Con rotateX de 62° el aplastado es muy fuerte: la elipse queda casi
   plana y, aunque se gire, sigue pareciendo una franja. Ahora el
   aplastado es de 55° (menos fuerte, más redonda) y los cinco giros
   van repartidos de a 36° para abrirse como flor.

   FALLO 3 · «se frena, vuelve y arranca»  ← el salto
   El .anillo tenía DOS animaciones con «animation-delay»: el latido
   del brillo y, heredado, el giro del portador. Los dos retrasos se
   pisaban, y al cruzar el final de cada vuelta el navegador
   reiniciaba desde el principio: de ahí el frenón y el salto.

   Ahora:
     · el LATIDO va en el anillo (con su retraso)
     · el GIRO va en el portador (con el suyo)
     · la LETRA va en su propia capa (con el mismo del portador)
   Cada animación vive en un elemento distinto: ya no se pisan.
   --------------------------------------------------------------------- */
.anillo {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--col);
  box-shadow:
    0 0 12px -2px var(--col),
    0 0 30px -8px var(--col),
    inset 0 0 22px -16px var(--col);
  transform-style: preserve-3d;
  /* Aplasta PRIMERO (se escribe al final) y gira DESPUÉS.
     Si se escribe al revés, todas quedan horizontales. */
  transform: rotateZ(var(--ang)) rotateX(var(--inc));
  /* El latido del brillo, con su propio retraso. Es la ÚNICA animación
     de este elemento: así no se pisa con el giro del portador. */
  animation: latirAro 6s ease-in-out infinite;
  animation-delay: var(--latido);
}

.anillo--1 { --inc: 55deg; --ang: 0deg;   --vuelta: 7s; --latido: 0s;   }
.anillo--2 { --inc: 55deg; --ang: 36deg;  --vuelta: 7s; --latido: 1.2s; }
.anillo--3 { --inc: 55deg; --ang: 72deg;  --vuelta: 7s; --latido: 2.4s; }
.anillo--4 { --inc: 55deg; --ang: 108deg; --vuelta: 7s; --latido: 3.6s; }
.anillo--5 { --inc: 55deg; --ang: 144deg; --vuelta: 7s; --latido: 4.8s; }

@keyframes latirAro {
  0%, 100% {
    box-shadow:
      0 0 10px -3px var(--col),
      0 0 24px -10px var(--col),
      inset 0 0 22px -16px var(--col);
  }
  50% {
    box-shadow:
      0 0 18px -1px var(--col),
      0 0 40px -6px var(--col),
      inset 0 0 26px -12px var(--col);
  }
}

/* ---------------------------------------------------------------------
   EL PORTADOR · el que recorre la elipse
   ---------------------------------------------------------------------
   Va DENTRO del anillo, así que hereda su inclinación. Al girar, la
   bolita que lleva pegada recorre EXACTAMENTE la elipse del anillo.

   No se le toca la inclinación: solo gira. Eso es lo que garantiza que
   la esfera nunca se salga de su línea.

   ⚠️ ARRANQUE COMÚN, POSICIÓN DISTINTA
   Las cinco empiezan a girar AL MISMO TIEMPO (sin retraso) y van al
   mismo ritmo, así que nunca se desincronizan.

   Pero si además empezaran en el MISMO punto de su elipse, irían las
   cinco pegadas, una detrás de otra. Para repartirlas, cada una lleva
   un giro inicial distinto (--arranque), que es su posición de salida:

       金  0°   ·   水  72°   ·   木  144°   ·   火  216°   ·   土  288°

   Repartidas como los números de un reloj. Como todas giran igual de
   rápido, se mantienen siempre a la misma distancia.
   --------------------------------------------------------------------- */
.portador {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: recorrer var(--vuelta) linear infinite;
}

@keyframes recorrer {
  from { transform: rotate(var(--arranque)); }
  to   { transform: rotate(calc(var(--arranque) + 360deg)); }
}

/* El punto de salida de cada una: repartidos de a 72° */
.anillo--1 .portador { --arranque: 0deg;   }
.anillo--2 .portador { --arranque: 72deg;  }
.anillo--3 .portador { --arranque: 144deg; }
.anillo--4 .portador { --arranque: 216deg; }
.anillo--5 .portador { --arranque: 288deg; }

/* ---------------------------------------------------------------------
   LA ESFERA · pegada al borde de su elipse
   ---------------------------------------------------------------------
   Va arriba (top:0), centrada. Como está dentro del portador, que está
   dentro del anillo, hereda las dos cosas: la inclinación y el giro.
   Resultado: viaja por la elipse.
   --------------------------------------------------------------------- */
.elemento {
  position: absolute;
  top: 0;
  left: 50%;
  width: 82px;
  height: 82px;
  margin: -41px 0 0 -41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  background: var(--tinta-2);
  border: 2px solid var(--col);
  box-shadow:
    0 0 16px -2px var(--col),
    inset 0 0 14px -6px var(--col);
  cursor: default;
  transition: box-shadow .25s;
  z-index: 6;
}
.elemento:hover {
  box-shadow: 0 0 40px 4px var(--col), inset 0 0 18px -4px var(--col);
}

/* La letra se endereza aquí: este bloque deshace el giro del portador
   para que el texto no se voltee mientras viaja. Va APARTE del
   recorrido, así que no lo afecta.

   Empieza contrarrestando el giro de arranque (para que la palabra se
   lea derecha desde el primer cuadro) y sigue girando al revés. */
.letra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  animation: enderezar var(--vuelta) linear infinite;
}
@keyframes enderezar {
  from { transform: rotate(calc(-1 * var(--arranque))); }
  to   { transform: rotate(calc(-1 * var(--arranque) - 360deg)); }
}

.elemento b {
  font-size: 1.95rem;
  line-height: 1;
  color: var(--col);
  text-shadow: 0 0 14px var(--col);
}
.elemento small {
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel);
  opacity: .9;
}

/* ---------------------------------------------------------------------
   LOS CINCO COLORES
   ---------------------------------------------------------------------
   Cada uno con su color de la paleta china tradicional.
   La línea de la elipse y la esfera toman el MISMO color, porque el
   anillo lleva la clase del elemento y todo lo de dentro lo hereda.
   --------------------------------------------------------------------- */
.el-metal  { --col: #9aa3ad; }   /* 金 · el Oeste, el filo */
.el-agua   { --col: #4a7fb5; }   /* 水 · ceder y fluir */
.el-madera { --col: #4e9e52; }   /* 木 · el aliento que crece */
.el-fuego  { --col: #d8382f; }   /* 火 · el fuego que calienta */
.el-tierra { --col: #d9a441; }   /* 土 · el centro que sostiene */

/* ---------------------------------------------------------------------
   LA FOTO DE SHAKA · un solo aro dorado, delgado, con la luz girando
   ---------------------------------------------------------------------
   ⚠️ LO QUE SE FUE QUITANDO

   Primero tenía dos sombras negras (un disco pegado y una sombra
   corrida 20 px) que hacían ver la foto torcida: la mancha negra se
   movía con la imagen y parecía un descentrado.

   Después quedaron DOS aros dorados. Ahora queda UNO SOLO, más
   delgado, con la luz que lo recorre dando vueltas.
   --------------------------------------------------------------------- */
.orbita-nucleo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid var(--fuego);
}

/* EL ARO · uno solo y delgado.
   Se hace con un box-shadow en anillo a 8 px del borde. */
.orbita-nucleo::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 9px rgba(232, 163, 61, .85);
}

/* LA LUZ · recorre el aro dando vueltas.
   Un degradado cónico que deja ver solo un tramo encendido; al girar,
   ese tramo viaja por el aro, como la línea roja de la web de XIHU.
   La máscara radial recorta el centro, así solo se ve el anillo. */
.orbita-nucleo .luz {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(240, 220, 168, .85) 28deg,
    #fff6d8 44deg,
    rgba(240, 220, 168, .85) 60deg,
    transparent 90deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 46%, #000 48% 53%, transparent 55%);
  mask-image: radial-gradient(circle, transparent 0 46%, #000 48% 53%, transparent 55%);
  animation: girarLuz 3.5s linear infinite;
}
@keyframes girarLuz {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* La foto, encima de todo, recortada en círculo */
.orbita-nucleo img {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* El resplandor suave por fuera, que late despacio */
.orbita-nucleo::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  animation: latirNucleo 5s ease-in-out infinite;
}
@keyframes latirNucleo {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(217, 164, 65, .26); }
  50%      { box-shadow: 0 0 32px 8px rgba(217, 164, 65, .48); }
}

/* ---------------------------------------------------------------------
   LA LISTA DE LOS CINCO, debajo
   --------------------------------------------------------------------- */
.cinco {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 46px;
}
.cinco__item {
  padding: 16px 12px;
  text-align: center;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--col);
  border-radius: 12px;
  transition: transform .18s, box-shadow .18s;
}
.cinco__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px -12px var(--col);
}
.cinco__item i {
  display: block;
  font-style: normal;
  font-size: 1.5rem;
  color: var(--col);
  margin-bottom: 6px;
  text-shadow: 0 0 14px var(--col);
}
.cinco__item b {
  display: block;
  font-family: var(--display);
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cinco__item span {
  display: block;
  font-size: .74rem;
  color: var(--texto-2);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   EL CELULAR
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  .orbita-caja { max-width: 360px; }
  .elemento { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .elemento b { font-size: 1.22rem; }
  .elemento small { font-size: .46rem; }
  .cinco { grid-template-columns: repeat(2, 1fr); }
  .cinco__item:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Quien pida menos movimiento: todo quieto, cada esfera puesta en un
   punto distinto de su elipse para que se vea repartido.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portador, .letra, .anillo, .orbita-nucleo { animation: none !important; }
  .anillo--1 .portador { transform: rotate(60deg); }
  .anillo--2 .portador { transform: rotate(150deg); }
  .anillo--3 .portador { transform: rotate(240deg); }
  .anillo--4 .portador { transform: rotate(100deg); }
  .anillo--5 .portador { transform: rotate(200deg); }
}


/* =====================================================================
   LA ÓRBITA EN EL CELULAR
   ---------------------------------------------------------------------
   Las cinco animaciones de la órbita son:

       .anillo            latirAro   (el aro palpita)
       .portador          recorrer   (EL GIRO: el elemento viaja)
       .letra             enderezar  (el texto se mantiene derecho)
       .orbita-nucleo .luz girarLuz  (un cónico girando)
       .orbita-nucleo     latirNucleo

   En un celular se apagan las que menos se notan y más cuestan:

     - girarLuz: es un degradado cónico girando. Lo más caro de todo.
     - latirAro: un palpito lento, casi imperceptible en pantalla chica.

   Y se MANTIENE «recorrer», que es el giro de los elementos alrededor
   de Shaka. Eso es la órbita misma: sin eso no habría efecto.
   ===================================================================== */
@media (max-width: 900px) {
  /* La luz que gira alrededor del núcleo: lo más caro del conjunto */
  .orbita-nucleo .luz {
    animation: none;
  }

  /* El palpito de los aros: lento y casi invisible en pantalla chica */
  .anillo {
    animation: none;
  }
}