/*
 * Addon · Perihelio
 * ------------------------------------------------------------------------
 * Piel del sistema planetario. Todo cuelga de `.lm-perihelion`, una clase que
 * solo existe cuando el addon ha tomado el bloque de comunidad, así que el
 * diseño clásico del tema nunca se ve afectado: desactivar el addon o borrar
 * sus archivos no deja ni una regla suelta.
 *
 * Variables que llegan del panel a través del JS:
 *   --lm-ph-size        alto del escenario
 *   --lm-ph-anchor      tamaño de la skin del top comprador
 *   --lm-ph-glow        1 = luces y halos, 0 = apagados
 *   --lm-ph-intensity   intensidad de las animaciones
 *   --lm-ph-depth       (por tarjeta) cercanía al perihelio, 0.55 – 1
 *   --lm-ph-edge        (por tarjeta) 0 en los extremos del arco, 1 en medio
 *   --rx / --ry / --i   (por arco) radios e índice
 */

/* ===========================================================================
   El módulo
   =========================================================================== */

.lm-perihelion {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--lm-gap-group);
  padding: var(--lm-pad-page) var(--lm-pad-panel);
  border-radius: var(--lm-r-lg);
  overflow: hidden;
  /* El cristal y las luces van en sus propias capas, debajo. */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--lm-elev-1) 82%, transparent),
    color-mix(in oklab, var(--lm-elev-0) 94%, transparent));
  box-shadow:
    var(--lm-bevel-out),
    0 40px 90px -60px rgb(0 0 0 / 0.95),
    0 2px 0 -1px color-mix(in oklab, #fff 8%, transparent) inset;
}

/* --- capa 1 · cristal ------------------------------------------------------ */
.lm-perihelion__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(22px) saturate(1.25);
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 6%, transparent), transparent 42%),
    linear-gradient(0deg, color-mix(in oklab, var(--lm-ink) 34%, transparent), transparent 55%);
}
[data-lm-flat] .lm-perihelion__glass { backdrop-filter: none; }

/* --- capa 2 · luces ambientales --------------------------------------------
 * Una luz que se apaga en `transparent 70%` deja un anillo: a partir de ahí no
 * cambia nada, y el ojo lee ese salto de pendiente como un borde. Por eso cada
 * luz baja en varios tramos hasta llegar a cero justo en el 100%, la capa se
 * desenfoca de verdad y además se enmascara contra sus propios cantos. Así el
 * degradado no tiene ni principio ni final visibles.
 * ------------------------------------------------------------------------- */
.lm-perihelion__lights {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: calc(0.85 * var(--lm-ph-glow, 1));
  background:
    radial-gradient(44% 54% at 18% 52%,
      color-mix(in oklab, var(--lm-gold) 26%, transparent),
      color-mix(in oklab, var(--lm-gold) 13%, transparent) 38%,
      color-mix(in oklab, var(--lm-gold) 4%, transparent) 66%,
      transparent 100%),
    radial-gradient(50% 46% at 78% 22%,
      color-mix(in oklab, var(--lm-bolt) 22%, transparent),
      color-mix(in oklab, var(--lm-bolt) 10%, transparent) 42%,
      transparent 100%),
    radial-gradient(56% 50% at 68% 92%,
      color-mix(in oklab, var(--lm-bolt) 14%, transparent),
      color-mix(in oklab, var(--lm-bolt) 6%, transparent) 44%,
      transparent 100%);
  filter: blur(42px);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 24%, transparent 100%);
  animation: lm-ph-breathe calc(16s / max(var(--lm-ph-intensity, 1), 0.2)) var(--lm-ease-in-out) infinite alternate;
}
@keyframes lm-ph-breathe {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); opacity: calc(0.7 * var(--lm-ph-glow, 1)); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.07); opacity: calc(1 * var(--lm-ph-glow, 1)); }
}

/* --- capa 3 · profundidad --------------------------------------------------- */
.lm-perihelion__depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, color-mix(in oklab, #fff 2%, transparent) 26px 27px),
    radial-gradient(120% 90% at 50% 120%, color-mix(in oklab, var(--lm-ink) 60%, transparent), transparent 70%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 78%);
}

/* --- capa 4 · polvo estelar -------------------------------------------------- */
.lm-perihelion__dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.lm-perihelion__dust i {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: color-mix(in oklab, var(--lm-bolt) 60%, #fff);
  box-shadow: 0 0 calc(6px * var(--lm-ph-glow, 1)) color-mix(in oklab, var(--lm-bolt) 70%, transparent);
  opacity: 0.35;
  animation: lm-ph-mote var(--d, 8s) ease-in-out var(--t, 0s) infinite alternate;
}
@keyframes lm-ph-mote {
  from { opacity: 0.12; transform: translate3d(0, 0, 0); }
  to { opacity: 0.75; transform: translate3d(6px, -10px, 0); }
}

.lm-perihelion__head { position: relative; z-index: 6; }

/* ===========================================================================
   Escenario: la skin a la izquierda, el campo orbital a la derecha
   =========================================================================== */

.lm-perihelion__stage {
  position: relative;
  z-index: 4;
  display: grid;
  /* La columna izquierda la fija la skin; el campo se queda con el resto. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: calc(clamp(24rem, 42vw, 34rem) * var(--lm-ph-size, 1));
}

/* --- el cuerpo central ------------------------------------------------------ */

/*
 * z-index 8 es el plano de la skin, y el JS reparte las tarjetas entre el 2 y
 * el 14 según por dónde vayan: por debajo cuando pasan por detrás y por encima
 * cuando vienen de frente. Los dos números tienen que moverse juntos.
 */
.lm-perihelion__anchor {
  position: relative;
  z-index: 8;
  justify-self: start;
  pointer-events: auto;
}
.lm-perihelion .lm-donor {
  gap: var(--lm-gap-group);
  justify-items: center;
  text-align: center;
}

/* El halo del bloque, sin cantos. El del tema es un rectángulo sin recortar y
   se le veían las cuatro esquinas; la máscara redonda lo deja sin principio ni
   final visibles. */
.lm-perihelion .lm-donor::before {
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--lm-gold) 17%, transparent),
    color-mix(in oklab, var(--lm-gold) 7%, transparent) 52%,
    transparent 78%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
}

/*
 * La cabecera del top comprador.
 *
 * El problema no era el hueco sino la jerarquía: «En la tienda» y «Top
 * Comprador» son dos titulares del mismo tamaño, uno encima del otro, y el ojo
 * no sabía cuál manda. Aquí el titular de la sección se queda arriba y este
 * pasa a ser una etiqueta —más pequeña, en una sola línea y con el puesto al
 * lado—, así que se lee como lo que es: el rótulo del pedestal.
 */
.lm-perihelion .lm-donor__head {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.625rem;
  max-width: 24rem;
}
.lm-perihelion .lm-donor__head > div { display: grid; gap: 0.2rem; }
.lm-perihelion .lm-donor__head .lm-head__eyebrow { letter-spacing: 0.16em; }
.lm-perihelion .lm-donor__head .lm-head__title {
  justify-content: center;
  font-size: 1.125rem;
  letter-spacing: 0;
}
.lm-perihelion .lm-donor__rank { align-self: center; }

.lm-perihelion .lm-donor__card {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--lm-gap-card);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.lm-perihelion .lm-donor__card::after { content: none; }

/* Considerablemente más grande que cualquier tarjeta: es el planeta. */
.lm-perihelion .lm-donor__medal {
  /* `place-items: end center` es lo que traía el diseño clásico, donde el marco
     es un pedestal y la skin se apoya en el suelo. Aquí el marco es un cuerpo
     redondo y la skin es su centro, así que va centrada de verdad. */
  place-items: center;
  padding: 0;
  width: calc(clamp(14rem, 24vw, 21rem) * var(--lm-ph-anchor, 1));
  height: calc(clamp(14rem, 24vw, 21rem) * var(--lm-ph-anchor, 1));
  border-radius: 50%;
  /* Igual que las luces: la caída llega hasta el 100% en varios tramos, para
     que el cuerpo no tenga un halo con borde sino un degradado que se acaba. */
  background:
    radial-gradient(closest-side at 50% 50%,
      color-mix(in oklab, var(--lm-gold) 30%, transparent),
      color-mix(in oklab, var(--lm-gold) 14%, transparent) 46%,
      color-mix(in oklab, var(--lm-gold) 4%, transparent) 74%,
      transparent 100%),
    radial-gradient(closest-side at 32% 28%,
      color-mix(in oklab, var(--lm-bolt) 24%, transparent),
      color-mix(in oklab, var(--lm-bolt) 9%, transparent) 48%,
      transparent 100%);
  box-shadow:
    inset 0 -32px 70px -34px color-mix(in oklab, var(--lm-ink) 92%, transparent),
    0 0 calc(120px * var(--lm-ph-glow, 1)) -24px color-mix(in oklab, var(--lm-gold) 60%, transparent);
}
.lm-perihelion .lm-donor__medal::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--lm-gold) 30%, transparent);
  opacity: var(--lm-ph-glow, 1);
  animation: lm-ph-halo calc(9s / max(var(--lm-ph-intensity, 1), 0.2)) var(--lm-ease-in-out) infinite;
}
@keyframes lm-ph-halo {
  0%, 100% { transform: scale(1); opacity: calc(0.35 * var(--lm-ph-glow, 1)); }
  50% { transform: scale(1.05); opacity: calc(0.9 * var(--lm-ph-glow, 1)); }
}

/*
 * La skin. El tema la fija en 10.75rem y la apoya abajo, que es lo correcto
 * sobre un pedestal y lo que la dejaba caída dentro del círculo. Aquí se mide
 * contra el marco —así crece cuando se sube «Tamaño de la skin»— y se centra.
 */
.lm-perihelion .lm-donor__body {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 62%;
  height: calc(clamp(14rem, 24vw, 21rem) * var(--lm-ph-anchor, 1) * 0.86);
  object-position: center;
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.55));
}

/*
 * El marco dorado, convertido en anillo.
 *
 * El del tema se dibuja recortando el borde con `content-box exclude`, y esa
 * caja es siempre un rectángulo: sobre un medallón redondeado cuela, pero sobre
 * un círculo dejaba el rectángulo entero pintado alrededor de la skin. El
 * agujero se recorta con un radial, que sí sigue la forma del cuerpo.
 */
.lm-perihelion .lm-donor__ring {
  border-radius: 50%;
  padding: 0;
  --lm-ph-ring: 2px;
  mask:
    radial-gradient(closest-side,
      transparent calc(100% - var(--lm-ph-ring)),
      #000 calc(100% - var(--lm-ph-ring)) 100%);
}

/* La sombra de apoyo baja hasta el pie del círculo en vez de quedarse a media
   altura, ahora que la skin ya no se apoya en el borde inferior del marco. */
.lm-perihelion .lm-donor__glow { bottom: 8%; width: 46%; }

/* Las motas del marco también se apoyaban abajo: centradas, acompañan a la
   skin en vez de amontonarse a sus pies. */
.lm-perihelion .lm-donor__medal::after {
  mask: radial-gradient(closest-side, #000 30%, transparent 82%);
}

.lm-perihelion .lm-donor__who { display: grid; gap: 0.35rem; }
.lm-perihelion .lm-donor__amount { font-size: clamp(1.5rem, 3.4vw, 2.125rem); }

/* --- el campo orbital ------------------------------------------------------- */
/*
 * El campo NO abre plano propio (`z-index: auto`) a propósito: si lo abriera,
 * todas las tarjetas quedarían encerradas dentro de él y ninguna podría subir
 * por encima del cuerpo central. Sin plano propio, cada satélite compite
 * directamente contra la skin y puede pasarle por delante o por detrás según
 * dónde esté en la órbita, que es justo lo que da la profundidad.
 */
.lm-perihelion__field {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  min-height: 100%;
  /* El campo se solapa con la skin a propósito: el centro de las órbitas es
     el centro del planeta, así que los arcos tienen que poder nacer detrás. */
  margin-left: calc(clamp(13rem, 22vw, 20rem) * var(--lm-ph-anchor, 1) * -0.5);
  pointer-events: none;
}
.lm-perihelion__field > * { pointer-events: auto; }
.lm-perihelion__source[hidden] { display: none; }

/*
 * Órbitas completas. La elipse entera rodea al planeta y se cierra por detrás:
 * es lo que hace que el sistema se lea como un sistema y no como un abanico.
 *
 * El JS escribe left/top/width/height en píxeles, con el mismo origen y los
 * mismos radios que recorren las tarjetas. En porcentajes del campo no podían
 * coincidir, porque el radio vertical no es la mitad del campo sino lo que cabe
 * hasta el borde.
 */
.lm-perihelion__arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;               /* por debajo del cuerpo central: pasa por detrás */
  translate: -50% -50%;
  border: 1px solid color-mix(in oklab, var(--lm-bolt) 20%, transparent);
  border-radius: 50%;
  opacity: calc((1 - var(--i, 0) * 0.14) * var(--lm-ph-glow, 1));
  pointer-events: none;
  /* La línea se apaga hacia la izquierda igual que las tarjetas: entra en la
     sombra del cuerpo y se acaba antes del borde del módulo, así que no hay
     ningún corte contra el recorte del panel. */
  mask-image: linear-gradient(90deg, transparent 0 8%, rgb(0 0 0 / 0.28) 27%, #000 54%);
}
.lm-perihelion__arc:nth-of-type(even) { border-style: dashed; }

/* ===========================================================================
   Los satélites
   =========================================================================== */

.lm-perihelion__sat {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  /* --lm-ph-edge desvanece la tarjeta al asomar y al retirarse por los
     extremos del arco, así que el recorrido nunca corta en seco. */
  opacity: calc(var(--lm-ph-depth, 1) * var(--lm-ph-edge, 1));
  filter: saturate(calc(0.65 + var(--lm-ph-depth, 1) * 0.35));
  transition: opacity var(--lm-slow) var(--lm-ease);
  will-change: transform, opacity;
}
.lm-perihelion__sat[data-lm-out] { opacity: 0; }

/*
 * Entrada y salida. El transform lo escribe el JS cada fotograma, así que la
 * animación de relevo se hace sobre la TARJETA de dentro: así nunca pelean por
 * la misma propiedad y el movimiento orbital no se interrumpe.
 */
.lm-perihelion__card {
  /* 13rem = los 208px con los que el JS calcula el cupo de cada órbita.
     --lm-ph-card lo encoge cuando hay muchas órbitas y el hueco entre ellas
     no da para una tarjeta a tamaño natural. */
  width: calc(13rem * var(--lm-ph-card, 1));
  padding: calc(0.5rem * var(--lm-ph-card, 1)) calc(0.75rem * var(--lm-ph-card, 1));
  gap: 0.5rem;
  font-size: calc(1rem * max(var(--lm-ph-card, 1), 0.72));
  backdrop-filter: blur(10px);
  transition:
    opacity var(--lm-slow) var(--lm-ease),
    transform var(--lm-slow) var(--lm-ease);
  /* La rareza manda: color, borde y halo salen de --r, como en el catálogo. */
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in oklab, var(--r) 16%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--lm-elev-2) 80%, transparent),
      color-mix(in oklab, var(--lm-elev-1) 88%, transparent));
  box-shadow:
    var(--lm-bevel-out),
    0 0 0 1px color-mix(in oklab, var(--r) 26%, transparent),
    0 20px calc(46px * var(--lm-ph-glow, 1)) -28px var(--r);
}
[data-lm-flat] .lm-perihelion__card { backdrop-filter: none; }

/* Las rarezas con efecto suben un punto: más borde y más halo. */
.lm-perihelion__card[data-fx] {
  box-shadow:
    var(--lm-bevel-out),
    0 0 0 1px color-mix(in oklab, var(--r) 44%, transparent),
    0 22px calc(56px * var(--lm-ph-glow, 1)) -24px var(--r);
}

/* Todo dentro de la tarjeta se mide en `em`, para que encoja con ella cuando
   el planificador reduce la escala. */
.lm-perihelion__card .lm-sale__face { width: 2.6em; height: 2.6em; }
.lm-perihelion__card .lm-sale__who { font-size: 0.82em; }
.lm-perihelion__card .lm-sale__what { font-size: 0.62em; }
.lm-perihelion__card .lm-sale__price { font-size: 0.95em; }

/* El nombre de la rareza va centrado al pie de la tarjeta: pegado a la derecha
   se montaba encima del precio en cuanto la tarjeta encogía. */
.lm-perihelion__card { padding-bottom: calc(1.05rem * var(--lm-ph-card, 1)); }
.lm-perihelion__card::after {
  right: auto;
  left: 50%;
  translate: -50% 0;
  bottom: calc(0.2rem * var(--lm-ph-card, 1));
  font-size: 0.42em;
}

/* Partículas de rareza: un anillo de destellos con el color del tier. */
.lm-perihelion__card[data-fx]::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(0.55 * var(--lm-ph-glow, 1));
  background:
    radial-gradient(circle at 50% 50%, var(--r) 0 1px, transparent 1.6px) 0 0 / 21px 19px,
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--r) 60%, #fff) 0 1px, transparent 2px) 9px 13px / 37px 31px;
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  animation: lm-ph-sparks calc(7s / max(var(--lm-ph-intensity, 1), 0.2)) linear infinite;
}
@keyframes lm-ph-sparks {
  to { background-position: 21px -19px, -37px 31px; }
}

/* --- formas de entrada ------------------------------------------------------ */
[data-lm-enter="fade"] .lm-perihelion__sat:not([data-lm-in]) .lm-perihelion__card { opacity: 0; }
[data-lm-enter="scale"] .lm-perihelion__sat:not([data-lm-in]) .lm-perihelion__card { opacity: 0; transform: scale(0.55); }
[data-lm-enter="drop"] .lm-perihelion__sat:not([data-lm-in]) .lm-perihelion__card { opacity: 0; transform: translateY(-1.75rem); }
[data-lm-enter="spiral"] .lm-perihelion__sat:not([data-lm-in]) .lm-perihelion__card { opacity: 0; transform: rotate(-24deg) scale(0.5); }

.lm-perihelion__sat[data-lm-in] .lm-perihelion__card { opacity: 1; transform: none; }

/* --- formas de salida -------------------------------------------------------- */
[data-lm-exit="fade"] .lm-perihelion__sat[data-lm-out] .lm-perihelion__card { opacity: 0; }
[data-lm-exit="scale"] .lm-perihelion__sat[data-lm-out] .lm-perihelion__card { opacity: 0; transform: scale(0.55); }
[data-lm-exit="drop"] .lm-perihelion__sat[data-lm-out] .lm-perihelion__card { opacity: 0; transform: translateY(1.75rem); }
[data-lm-exit="spiral"] .lm-perihelion__sat[data-lm-out] .lm-perihelion__card { opacity: 0; transform: rotate(24deg) scale(0.5); }

/* ===========================================================================
   Adaptaciones
   =========================================================================== */

@media (max-width: 1100px) {
  .lm-perihelion__card { width: calc(11.5rem * var(--lm-ph-card, 1)); }
}

@media (max-width: 767px) {
  /* En vertical no cabe el planeta al lado del campo: la skin sube arriba y
     las órbitas se despliegan debajo, centradas. */
  .lm-perihelion { padding-inline: var(--lm-gap-block); }
  /* La skin y el campo comparten celda para que las órbitas sigan naciendo
     del centro del planeta; al no haber hueco a la izquierda, los arcos
     vuelven a ser elipses completas. */
  .lm-perihelion__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage";
    justify-items: center;
    align-items: center;
    min-height: calc(26rem * var(--lm-ph-size, 1));
  }
  .lm-perihelion__anchor { grid-area: stage; justify-self: center; }
  .lm-perihelion__field {
    grid-area: stage;
    width: 100%;
    height: 100%;
    margin-left: 0;
  }
  /* Con la skin centrada en la celda, la órbita la rodea por los cuatro lados:
     no hay lado «de detrás» que apagar más que otro. */
  .lm-perihelion__arc { mask-image: none; }
  .lm-perihelion__card { width: calc(11.5rem * var(--lm-ph-card, 1)); }
  .lm-perihelion__card .lm-sale__who { font-size: 0.75rem; }
  .lm-perihelion__card .lm-sale__what { font-size: 0.625rem; }
  .lm-perihelion .lm-donor__medal {
    width: calc(12rem * var(--lm-ph-anchor, 1));
    height: calc(12rem * var(--lm-ph-anchor, 1));
  }
  .lm-perihelion .lm-donor__body { height: calc(12rem * var(--lm-ph-anchor, 1) * 0.86); }
  .lm-perihelion .lm-donor__head .lm-head__title { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-perihelion__lights,
  .lm-perihelion__dust i,
  .lm-perihelion .lm-donor__medal::before,
  .lm-perihelion__card[data-fx]::before { animation: none; }
}