/* Shared by the landing page and the blog; both load it in <head>. See src/shared/jetpack.js. */

/* The header link between the two pages, handwritten so he can rewrite it in the same hand.
   Both headers put it in the same spot, top right of the column. */
html a.hand-link {
  display: inline-block;
  font-family: "Shantell Sans", cursive;
  font-weight: 500;
  font-size: 16.8px;
  line-height: 1;
  color: oklch(0.26 0.02 265);
  text-decoration: none;
  white-space: nowrap;
}

/* The shared pseudo-element stays with the link while the figure rewrites its text. */
html a.hand-link::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.3em;
  vertical-align: -0.2em;
  background-color: currentColor;
  --hand-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 15.5C8 12 9.9 7.4 14.3 5.1C16.1 4.1 18.1 3.8 20.1 3.9C20.2 6 19.7 8.1 18.8 9.8C16.5 14.1 12.1 16 8.5 15.5ZM9.1 9.6C6.6 9.2 4.7 10.4 3.5 13.2L8.3 13.3M14.3 14.8C14.7 17.3 13.5 19.2 10.6 20.5L10.7 15.7M16 8.4C17.6 10 15.1 12.6 13.5 11C11.9 9.5 14.5 6.9 16 8.4ZM6.2 17.8Q4.3 18.2 3.4 20.8Q6 20.3 6.8 18.6'/%3E%3C/svg%3E");
  -webkit-mask: var(--hand-link-icon) center / contain no-repeat;
  mask: var(--hand-link-icon) center / contain no-repeat;
}

/* Crossfade to the other page once he's rewritten the link, holding him in place over it
   (jetpack.js skips this for every other navigation) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* Him: the last page's picture of him holds still over the crossfade, and the new page's own copy
   of him (in exactly the same spot) stays hidden until the crossfade is over, so the two never
   overlap (a hair apart, they look like an outline). This works however late the new page's
   script puts him there. */
::view-transition-old(jet-buddy),
::view-transition-new(jet-buddy) {
  animation: none;
}

html:active-view-transition .jet-buddy[data-arrived] {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* The stick figure with his jetpack. His pose is a set of --jet-* variables (jetpack.js sets
   them) and every part transitions to its new angle with a little spring. Pivots are in his
   70 x 100 figure box. */
.jet-buddy {
  position: fixed;
  left: 0;
  top: 0;
  width: 170px;
  height: 170px;
  z-index: 2147483002;
  pointer-events: none;
  view-transition-name: jet-buddy;
}

.jet-body {
  position: relative;
  width: 170px;
  height: 170px;
  transform-origin: 85px 100px;
  scale: var(--jet-k);
  rotate: var(--jet-lean);
  transition: scale 0.5s ease, rotate 0.45s ease;
}

.jet-body svg {
  display: block;
  overflow: visible;
  /* His feet, for squash, wiggle, and tilt */
  transform-origin: 85px 124px;
  rotate: var(--jet-tilt);
  transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jet-body g,
.jet-body path {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.jet-instant,
.jet-instant * {
  transition: none !important;
}

.jet-arm-l {
  transform-origin: 35px 60px;
  transform: rotate(var(--jet-arm-l));
}

.jet-arm-r {
  transform-origin: 35px 60px;
  transform: rotate(var(--jet-arm-r));
}

.jet-legs {
  transform-origin: 35px 74px;
  transform: rotate(var(--jet-legs));
}

.jet-buddy[data-flying] .jet-legs {
  animation: jet-dangle 0.9s ease-in-out infinite alternate;
}

.jet-head {
  transform-origin: 35px 55px;
  transform: rotate(var(--jet-head));
}

.jet-eyes {
  transform: translate(calc(var(--jet-ex) * 1.5px), calc(var(--jet-ey) * 1.5px));
}

.jet-smile {
  opacity: calc(1 - var(--jet-oh));
}

.jet-oh {
  opacity: var(--jet-oh);
}

.jet-straps {
  opacity: var(--jet-straps);
}

/* The pencil, held by its middle in his hand: spin flips it end for end */
.jet-pencil {
  transform-origin: 35.5px 74px;
  transform: rotate(var(--jet-wrist)) rotate(var(--jet-spin)) scale(var(--jet-pencil));
}

/* The pack hangs from his hand at (pack-x, pack-y, pack-r), then hops onto his back at 0, 0, 0 */
.jet-pack {
  transform-origin: 35px 67px;
  transform: translate(var(--jet-pack-x), var(--jet-pack-y)) rotate(var(--jet-pack-r)) scale(var(--jet-pack));
}

.jet-flames {
  transform-origin: 35px 80.5px;
  transform: scale(calc(0.75 + 0.25 * var(--jet-flame)), var(--jet-flame));
}

.jet-flame {
  animation: jet-flicker 0.11s ease-in-out infinite alternate;
}

.jet-flame + .jet-flame {
  animation-delay: -0.06s;
}

@keyframes jet-flicker {
  from {
    transform: scaleY(0.72);
  }
  to {
    transform: scaleY(1.12);
  }
}

@keyframes jet-dangle {
  from {
    transform: rotate(calc(var(--jet-legs) - 7deg));
  }
  to {
    transform: rotate(calc(var(--jet-legs) + 7deg));
  }
}

/* Speech bubble, in the same spot as the docked figure's */
.jet-say {
  position: absolute;
  right: 132px;
  top: 43px;
  padding: 6px 12px;
  font: 15px/1.2 "Shantell Sans", cursive;
  color: oklch(0.26 0.02 265);
  white-space: nowrap;
  background: #fff;
  border: 2px solid oklch(0.26 0.02 265);
  border-radius: 16px 18px 4px 17px / 18px 15px 4px 16px;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(8px) scale(0.7);
  transition: opacity 0.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jet-buddy[data-say] .jet-say {
  opacity: 1;
  transform: none;
}

/* While the jetpack copy of him is out, the page's own drawing of him steps away (the blog's
   lounger, blog/assets/js/lounger.js), so there's only ever one of him */
html[data-jet] .lounger {
  opacity: 0 !important;
  transition: none !important;
}

/* Exhaust puffs */
.jet-puff {
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  overflow: visible;
  pointer-events: none;
  z-index: 2147483001;
}