/* ZeroGrav DM: the comet, the way to the events page. A visitor in the lower sky, opposite the ship's log: a small
   bright head in a green glow (a real comet's coma glows green), a straight blue ion tail and a wider, paler dust
   tail. Both tails point away from the mark at the heart of the orbit, as a real comet's point away from its sun.
   js/comet.js places it and flies it in; this file draws it. The events page draws the same comet in its heading
   (.comet-art, without the link). */

/* ── the link: a round target on the head, with its caption ── */
.comet {
  --kk: 1;                                   /* its size, with the screen (js/comet.js) */
  --a: 30deg;                                /* which way the tails point (js/comet.js) */
  --hit: calc(52px * var(--kk));
  position: absolute; left: 0; top: 0; z-index: 3; width: var(--hit); height: var(--hit);
  margin: calc(var(--hit) / -2) 0 0 calc(var(--hit) / -2); border-radius: 50%;
  color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent;
}
.comet[hidden] { display: none; }
/* hidden until js/comet.js has placed it (with an old copy of home.js it stays hidden, rather than in a corner) */
.comet:not(.placed) { visibility: hidden; }
.comet:focus-visible { box-shadow: 0 0 0 2px var(--brass-hi); }

/* the caption goes in front of the head, the way it's heading */
.comet-cap {
  position: absolute; right: calc(100% - 4px); top: 50%; translate: 0 -50%; 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: color .4s ease;
}
/* where there's no room there, under it */
.comet.cap-under .comet-cap { right: auto; left: 50%; top: calc(50% + 16px * var(--kk)); translate: -50% 0; }
.comet:hover .comet-cap, .comet:focus-visible .comet-cap { color: var(--cream); }

/* ── the comet itself ── */
.comet-art { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: var(--a, 30deg); pointer-events: none; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.comet:hover .comet-art, .comet:focus-visible .comet-art { scale: 1.1; }
.comet-art > span { position: absolute; display: block; }

/* the dust tail: a pale fan, bending a little away from the ion tail */
.comet-dust {
  left: 0; top: calc(-21px * var(--kk)); width: calc(165px * var(--kk)); height: calc(42px * var(--kk));
  transform-origin: 0 50%; rotate: 9deg;
  background: radial-gradient(ellipse farthest-side at 0 50%, rgba(255, 246, 226, .55), rgba(255, 238, 210, .2) 42%, rgba(255, 232, 200, .05) 78%, transparent);
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  animation: comet-dust 7s ease-in-out infinite;
}
@keyframes comet-dust { 50% { opacity: .78; transform: scaleX(1.05); } }

/* the ion tail: straight, thin and blue, the longer of the two */
.comet-ion {
  left: 0; top: calc(-2px * var(--kk)); width: calc(210px * var(--kk)); height: calc(4px * var(--kk)); border-radius: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(214, 240, 255, .95), rgba(150, 205, 255, .5) 30%, rgba(111, 170, 255, .14) 70%, rgba(111, 170, 255, 0));
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
  animation: comet-ion 4.6s ease-in-out infinite;
}
.comet-ion.two { top: calc(-1px * var(--kk)); width: calc(150px * var(--kk)); height: calc(2px * var(--kk)); rotate: -3deg; opacity: .6; animation-duration: 3.4s; animation-delay: -1.2s; }
@keyframes comet-ion { 50% { opacity: .62; } }

/* bits of dust blown back along the tail */
.comet-motes { left: 0; top: 0; width: 0; height: 0; }
.comet-motes i {
  position: absolute; left: 0; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #f2fbff;
  box-shadow: 0 0 3px rgba(190, 230, 255, .9); opacity: 0;
  animation: comet-mote 3.6s linear infinite;
}
.comet-motes i:nth-child(2) { top: 3px; animation-duration: 4.4s; animation-delay: -1.5s; }
.comet-motes i:nth-child(3) { top: -4px; animation-duration: 3.1s; animation-delay: -2.4s; }
.comet-motes i:nth-child(4) { top: 6px; animation-duration: 5.2s; animation-delay: -.7s; }
@keyframes comet-mote {
  0% { opacity: 0; transform: translateX(calc(6px * var(--kk))); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translateX(calc(130px * var(--kk))); }
}

/* the coma, glowing green round the head, and the head's hard white point */
.comet-coma {
  left: calc(-17px * var(--kk)); top: calc(-17px * var(--kk)); width: calc(34px * var(--kk)); height: calc(34px * var(--kk)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 255, 246, .95) 0 12%, rgba(156, 246, 212, .5) 28%, rgba(110, 214, 196, .16) 58%, rgba(110, 214, 196, 0));
  transition: scale .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.comet:hover .comet-coma, .comet:focus-visible .comet-coma { scale: 1.2; filter: brightness(1.2); }
.comet-core {
  left: calc(-2.5px * var(--kk)); top: calc(-2.5px * var(--kk)); width: calc(5px * var(--kk)); height: calc(5px * var(--kk)); border-radius: 50%;
  background: #fffef8; box-shadow: 0 0 4px 1px rgba(240, 255, 250, .9), 0 0 12px 3px rgba(150, 245, 210, .35);
}

/* during the DM's jump into Galactic Legends it slips away with the rest of the page */
html.jumping .comet { opacity: 0 !important; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .comet-dust, .comet-ion { animation: none; }
  .comet-art .comet-motes { display: none; }
  .comet-art, .comet-coma, .comet-cap { transition: none; }
}