/* ZeroGrav DM: the comet's tail wipe, the page change between the front page and the Events page, both ways (js/wipe.js
   sets it up; docs: README, "The comet's tail wipe"). The comet leaves its place head first, opposite to its tails, and
   speeds across the screen growing as it comes at you. Its tails open into a fan, and the page it's going to shows
   through the fan: the old page is left as it was, and the new one is let in behind the comet until the comet's gone and
   there's nothing of the old page left. The page's own comet then flies in and parks (js/comet.js on the front page,
   js/wipe.js on the Events page).
   Two animated numbers on <html> run all of it, so nothing can drift apart: --cw-s, how far along its path the head
   is, and --cw-open, how wide the fan has opened (half its angle). Both pages load this first thing in their <head>,
   because the browser must see a page opt into page transitions before it first draws it. */
@view-transition { navigation: auto; }

@property --cw-s { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cw-open { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cw-ign { syntax: "<number>"; inherits: true; initial-value: 0; }

/* the comet that flies the wipe: built ahead in each page, and out of sight until then */
.cw-comet { display: none; }

/* leaving: the page's own comet is already away, so the picture of this page is taken without it */
html.cw-leave .comet, html.cw-leave .events-sky { visibility: hidden; }

/* js/wipe.js sets, from where the comet left (the numbers have no units): --cw-x0 and --cw-y0 (where), --cw-dx and
   --cw-dy (which way it goes: opposite its tails), --cw-back (which way its tails point, in degrees clockwise from
   up), --cw-a (the same, as the art turns), --cw-end (how far it goes, to be well past the screen's far corner),
   --cw-kk (its size on the page it left) and --cw-scale (how big it grows to), and --cw-ms (how long). */
html:active-view-transition-type(comet) {
  --cw-hx: calc((var(--cw-x0) + var(--cw-dx) * var(--cw-s)) * 1px);               /* the head */
  --cw-hy: calc((var(--cw-y0) + var(--cw-dy) * var(--cw-s)) * 1px);
  --cw-p: calc(var(--cw-s) / var(--cw-end));                                      /* 0 to 1, how far it's got */
  /* how big it is by now: it grows as it comes at you, and flares as it lights up, before it's gone far */
  --cw-sc: calc((1 + (var(--cw-scale) - 1) * pow(var(--cw-p), .85)) * (1 + .6 * var(--cw-ign) * (1 - var(--cw-p))));
  --cw-hr: calc(var(--cw-kk) * var(--cw-sc) * 30px);                              /* the page shows round the head too */
  /* what of the new page shows: a bubble round the head, and the fan behind it, its edges soft */
  --cw-mask:
    radial-gradient(circle at var(--cw-hx) var(--cw-hy), #000 var(--cw-hr), transparent calc(var(--cw-hr) + 46px)),
    conic-gradient(from calc(var(--cw-back) * 1deg - var(--cw-open) * 1deg - 9deg) at var(--cw-hx) var(--cw-hy),
      transparent 0deg, #000 9deg, #000 calc(var(--cw-open) * 2deg + 9deg), transparent calc(var(--cw-open) * 2deg + 18deg), transparent 360deg);
  animation: cw-run var(--cw-ms, 1450ms) cubic-bezier(.5, .04, .8, .5) both, cw-fan var(--cw-ms, 1450ms) linear both,
    cw-ignite var(--cw-ms, 1450ms) ease-out both;
}
@keyframes cw-run { from { --cw-s: 0; } to { --cw-s: var(--cw-end); } }
@keyframes cw-ignite { 0% { --cw-ign: 0; } 24% { --cw-ign: 1; } 100% { --cw-ign: 1; } }
/* the fan: a thin slit to begin with, the comet pulling away; it opens as the comet gathers speed, and by the end it's
   wider than the half-plane behind the head, so the whole screen is behind the comet */
@keyframes cw-fan {
  0% { --cw-open: 1.4; }
  20% { --cw-open: 2.4; }
  50% { --cw-open: 24; }
  75% { --cw-open: 78; }
  90% { --cw-open: 112; }
  100% { --cw-open: 128; }
}

/* the old page is left as it was, dimmed and drawn back a little as the comet's blast goes by, and the new page is let
   in on top of it through the mask */
html:active-view-transition-type(comet)::view-transition-old(root) {
  animation: none; mix-blend-mode: normal;
  filter: brightness(calc(1 - .55 * var(--cw-p))) saturate(calc(1 - .4 * var(--cw-p)));
  transform: scale(calc(1 + .035 * var(--cw-p)));
}
html:active-view-transition-type(comet)::view-transition-new(root) {
  animation: none; mix-blend-mode: normal;
  -webkit-mask-image: var(--cw-mask); mask-image: var(--cw-mask);
}
/* the transition ends when its last animation does: this one lasts as long as the wipe, and a moment more */
html:active-view-transition-type(comet)::view-transition-image-pair(root) { animation: cw-hold calc(var(--cw-ms, 1450ms) + 80ms) linear both; }
@keyframes cw-hold { from { opacity: 1; } to { opacity: 1; } }

/* the flying comet: the page's comet, drawn again in the new page, and carried by the head */
html:active-view-transition-type(comet) .cw-comet {
  display: block; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 99; pointer-events: none;
  translate: var(--cw-hx) var(--cw-hy);
}
.cw-comet .comet-art { --kk: var(--cw-kk); --a: calc(var(--cw-a) * 1deg); scale: var(--cw-sc); transition: none; }
/* light along the two edges of the fan, from the head, fading with distance: where the dust tail's edges would glow */
.cw-comet::before {
  content: ""; position: absolute; inset: -160vmax; pointer-events: none;
  background: conic-gradient(from calc(var(--cw-back) * 1deg - var(--cw-open) * 1deg - 2deg) at 50% 50%,
    transparent 0deg, rgba(168, 232, 255, .5) 5deg, transparent 11deg,
    transparent calc(var(--cw-open) * 2deg - 8deg), rgba(168, 232, 255, .5) calc(var(--cw-open) * 2deg - 1deg), transparent calc(var(--cw-open) * 2deg + 6deg),
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 62vmax); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 62vmax);
}