/* ZeroGrav DM: other worlds. The DM's other games as one plain moon on the orbit. The games' art never sits
   on the page: it shows only in the card of a moonlet, once the moon has been opened. js/others.js places
   everything and drives it. */

/* ── the moon ── */
.others { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; --s: 110px; --R: 91px; }
/* hidden until js/others.js has placed it (if it can't, say with an old copy of home.js, it stays hidden) */
.others:not(.placed) { visibility: hidden; }
.others .moon {
  position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s);
  margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; outline: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* without WebGL: a painted moon, lit from above, a few soft craters */
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 248, 232, .22), transparent 42%),
    radial-gradient(circle at 50% 30%, transparent 44%, rgba(4, 6, 12, .5) 68%, rgba(4, 6, 12, .9) 88%),
    radial-gradient(circle at 34% 40%, rgba(38, 34, 28, .2) 0 9%, transparent 11%),
    radial-gradient(circle at 60% 58%, rgba(38, 34, 28, .16) 0 13%, transparent 15%),
    radial-gradient(circle at 44% 72%, rgba(38, 34, 28, .14) 0 6%, transparent 8%),
    radial-gradient(circle at 70% 34%, rgba(38, 34, 28, .12) 0 5%, transparent 7%),
    #bcb5a3;
  box-shadow: 0 0 calc(var(--s) * .5) rgba(239, 226, 196, .07);
  transition: scale .5s cubic-bezier(.2, .7, .2, 1);
}
.others .moon canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: none; }
.others.gl .moon { background: none; }
.others.gl .moon canvas { display: block; }
.others.open .moon { scale: 1.06; }
.others .moon:focus-visible { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 calc(var(--s) * .5) rgba(239, 226, 196, .07); }

.others .cap {
  position: absolute; left: 0; top: calc(var(--s) / 2 + 10px); transform: none; translate: -50% 0; width: max-content; max-width: none; margin: 0; white-space: nowrap; pointer-events: none;
  font: italic 400 calc(15px * var(--k, 1)) / 1 "IM Fell English", Georgia, serif; color: var(--ink-2);
  transition: opacity .3s ease;
}
.others.open .cap { opacity: 0; }

/* while it's open, the whole bloom keeps it open, and the moonlets' own faint orbit shows */
.others::before, .others::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.others::before { left: calc(-1 * (var(--R) + 24px)); top: calc(-1 * (var(--R) + 24px)); width: calc(2 * (var(--R) + 24px)); height: calc(2 * (var(--R) + 24px)); }
.others.open::before { pointer-events: auto; }
.others::after {
  left: calc(-1 * var(--R)); top: calc(-1 * var(--R)); width: calc(2 * var(--R)); height: calc(2 * var(--R));
  border: 1px dashed rgba(239, 226, 196, .14); opacity: 0; scale: .5;
  transition: opacity .4s ease, scale .5s cubic-bezier(.2, .8, .2, 1);
}
.others.open::after { opacity: 1; scale: 1; }

/* ── the moonlets: one per game, wearing its art, only while the moon is open ── */
.moonlets { position: absolute; left: 0; top: 0; }
.moonlet {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #15171f center / cover no-repeat; box-shadow: 0 0 0 1px rgba(239, 226, 196, .14); cursor: default; outline: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; scale: .2; translate: 0 0; pointer-events: none;
  transition: translate .5s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 22ms), opacity .3s ease calc(var(--i) * 22ms), scale .5s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 22ms);
}
.moonlet::after {                 /* a moon's shading over the art: lit on the side facing the big moon */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at var(--lx, 40%) var(--ly, 30%), rgba(255, 248, 232, .16), transparent 40%, rgba(4, 6, 12, .35) 72%, rgba(4, 6, 12, .75) 92%);
}
.others.open .moonlet { opacity: 1; scale: 1; translate: var(--x) var(--y); pointer-events: auto; }
/* closing is quick and all together */
.others:not(.open) .moonlet { transition-duration: .2s; transition-delay: 0s; }
.others:not(.open)::after { transition-duration: .2s; }
.others.open .moonlet:hover, .others.open .moonlet:focus-visible, .others.open .moonlet.shown { scale: 1.4; transition-delay: 0s; }
.moonlet:focus-visible { box-shadow: 0 0 0 2px var(--brass-hi); }

/* while it's open, the rest of the orbit steps back a little */
#arania, #gl, #brand, #orrery { transition: opacity .25s ease; }
body.others-open #arania, body.others-open #gl, body.others-open #brand, body.others-open #orrery { opacity: .45; transition-duration: .45s; }


/* ── the card: a moonlet's game ── */
.world-card {
  /* it grows with the page on big screens (--k is the page's own scale), up to half as big again */
  --ck: clamp(1, var(--k, 1), 1.5);
  position: fixed; left: 0; top: 0; z-index: 20; width: calc(250px * var(--ck)); padding: calc(12px * var(--ck)); border-radius: calc(10px * var(--ck)); pointer-events: none;
  background: rgba(8, 10, 20, .92); border: 1px solid rgba(239, 226, 196, .18); color: var(--cream);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); opacity: 0; translate: 0 4px; transition: opacity .25s ease, translate .25s ease;
}
.world-card.on { opacity: 1; translate: 0 0; }
.world-card img { display: block; width: 100%; aspect-ratio: 520 / 250; object-fit: cover; border-radius: calc(6px * var(--ck)); margin-bottom: calc(10px * var(--ck)); }
.world-card h3 { margin: 0 0 4px; font: 400 calc(19px * var(--ck))/1.15 "IM Fell English", Georgia, serif; text-wrap: balance; }
.world-card .meta { margin: 0 0 8px; font: 400 calc(12px * var(--ck))/1.3 "IM Fell English SC", Georgia, serif; letter-spacing: .06em; color: var(--ink-2); }
.world-card .hook { margin: 0; font: 400 calc(14px * var(--ck))/1.4 "IM Fell English", Georgia, serif; color: rgba(239, 226, 196, .86); }
.world-card .hook:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .moonlet, .others::after, .others .moon, .world-card { transition-duration: .01s; transition-delay: 0s; }
}