/* A small pause between the blog and projects, using the favicon's own palette. */
.latest-post { margin-bottom: 0; }

.avatar-section {
  display: grid;
  place-items: center;
  height: 352px;
  position: relative;
  isolation: isolate;
}

.avatar-intro {
  position: absolute;
  right: calc(50% + 175px);
  width: clamp(180px, 22vw, 290px);
  margin: 0;
  color: var(--text-secondary, #c9d1d9);
  font-family: var(--font-sans, inherit);
  font-size: 1rem;
  line-height: 1.72;
  text-align: right;
  transition: color 900ms ease, text-shadow 900ms ease;
}
.avatar-intro__default,
.avatar-intro__moon {
  display: block;
  transition: opacity 420ms ease, transform 600ms ease, filter 600ms ease;
}
.avatar-intro__moon {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(5px);
}
.avatar-section[data-moon-moment="true"] .avatar-intro {
  color: #dceaff;
  text-shadow: 0 0 18px rgba(146, 191, 255, .45);
}
.avatar-section[data-moon-moment="true"] .avatar-intro__default {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(5px);
}
.avatar-section[data-moon-moment="true"] .avatar-intro__moon {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 360ms;
}

.avatar-dialogue {
  position: absolute;
  left: calc(50% + 175px);
  right: max(18px, calc((100% - 86rem) / 2 + 48px));
  width: clamp(148px, 20vw, 260px);
  min-height: 3.25em;
  margin: 0;
  opacity: 0;
  color: var(--text-secondary, #c9d1d9);
  font-family: var(--font-sans, inherit);
  font-size: 1rem;
  line-height: 1.72;
  pointer-events: none;
  transition: opacity 650ms ease;
}

.avatar-dialogue[data-visible="true"] { opacity: 1; }

.avatar-dialogue__typed::after {
  display: inline-block;
  height: .95em;
  margin-left: 2px;
  border-right: 1px solid var(--accent-bright, #4d9bff);
  content: "";
  vertical-align: -.12em;
  animation: avatar-caret .85s steps(1, end) infinite;
}

.avatar-dialogue:not([data-typing="true"]) .avatar-dialogue__typed::after { display: none; }
.avatar-dialogue__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes avatar-caret { 50% { opacity: 0; } }

.avatar {
  display: block;
  width: 320px;
  height: 320px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  appearance: none;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1) 120ms, transform 900ms cubic-bezier(.22, 1, .36, 1) 120ms, filter 900ms ease 120ms;
}

.avatar:disabled { cursor: default; }
.avatar[data-dragging] { cursor: grabbing; }
.avatar:focus-visible { outline: 2px solid var(--accent-bright, #4d9bff); outline-offset: 4px; }
.avatar__drawing { display: block; width: 100%; height: 100%; overflow: visible; }
.avatar__drawing * { pointer-events: none; }
.moon-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  filter: blur(5px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: opacity 950ms ease, transform 1050ms cubic-bezier(.22, 1, .36, 1), filter 950ms ease, clip-path 950ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 1050ms;
}
.moon-scene::before,
.moon-scene::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1100ms ease, transform 1200ms cubic-bezier(.22, 1, .36, 1);
}
.moon-scene::before {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 166, 255, .3), rgba(67, 115, 202, .12) 42%, transparent 69%);
  transform: scale(.76);
  filter: blur(12px);
}
.moon-scene::after {
  background:
    radial-gradient(circle at 12% 22%, #dceaff 0 1px, transparent 2px),
    radial-gradient(circle at 86% 28%, #dceaff 0 1px, transparent 2px),
    radial-gradient(circle at 18% 76%, #dceaff 0 1px, transparent 2px),
    radial-gradient(circle at 79% 82%, #dceaff 0 1px, transparent 2px);
  transform: scale(1.07);
}
.avatar-section[data-moon-moment="true"] .avatar {
  visibility: hidden;
  opacity: 0;
  transform: scale(.93);
  filter: blur(4px);
  transition: opacity 780ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1), filter 780ms ease, visibility 0s linear 900ms;
}
.avatar-section[data-moon-moment="true"] .avatar-dialogue {
  visibility: hidden;
  opacity: 0;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.avatar-section[data-moon-moment="true"] .moon-scene {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  clip-path: inset(-12% -12% -12% -12%);
  transition: opacity 1050ms ease 120ms, transform 1100ms cubic-bezier(.22, 1, .36, 1) 120ms, filter 1050ms ease 120ms, clip-path 1100ms cubic-bezier(.22, 1, .36, 1) 120ms, visibility 0s;
}
.avatar-section[data-moon-moment="true"] .moon-scene::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 240ms;
}
.avatar-section[data-moon-moment="true"] .moon-scene::after {
  opacity: .7;
  transform: scale(1);
  transition-delay: 470ms;
}
.moon-scene__surface {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 1;
  width: 80%;
  height: 80%;
  object-fit: contain;
  transform: translateY(8px) scale(.97);
  transition: transform 1150ms cubic-bezier(.22, 1, .36, 1), filter 1150ms ease;
}
.moon-scene__pair {
  position: absolute;
  top: -1%;
  left: 50%;
  z-index: 2;
  width: 18%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 10px) scale(.94);
  transition: opacity 480ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1);
}
.avatar-section[data-moon-moment="true"] .moon-scene__surface {
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 14px rgba(163, 206, 255, .36));
}
.avatar-section[data-moon-moment="true"] .moon-scene__pair {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 820ms ease 360ms, transform 1000ms cubic-bezier(.22, 1, .36, 1) 360ms;
}
.moon-transition {
  --moon-size: 256px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: var(--moon-size);
  height: var(--moon-size);
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(147, 222, 255, .09) 0 1px, transparent 1px 6px);
}
.moon-transition::before,
.moon-transition::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.moon-transition::before {
  top: 0;
  left: -5%;
  width: 110%;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(49, 201, 255, .22) 36%, rgba(232, 249, 255, .72) 51%, rgba(255, 212, 72, .48) 54%, transparent);
  box-shadow: 0 0 22px rgba(84, 193, 255, .38);
  transform: translateY(-110%);
}
.moon-transition::after {
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(transparent 19%, rgba(81, 211, 255, .42) 19% 21%, transparent 21% 58%, rgba(255, 211, 71, .34) 58% 59%, transparent 59%),
    linear-gradient(90deg, transparent 8%, rgba(103, 214, 255, .12) 8% 9%, transparent 9% 82%, rgba(255, 221, 90, .12) 82% 83%, transparent 83%);
}
.avatar-section[data-moon-transition="enter"] .moon-transition,
.avatar-section[data-moon-transition="exit"] .moon-transition {
  animation: moon-signal-pulse 1200ms ease-out both;
}
.avatar-section[data-moon-transition="enter"] .moon-transition::before {
  animation: moon-scan-down 1100ms cubic-bezier(.25, .75, .25, 1) both;
}
.avatar-section[data-moon-transition="exit"] .moon-transition::before {
  animation: moon-scan-up 1100ms cubic-bezier(.25, .75, .25, 1) both;
}
.avatar-section[data-moon-transition="enter"] .moon-transition::after,
.avatar-section[data-moon-transition="exit"] .moon-transition::after {
  animation: moon-signal-noise 1100ms steps(1, end) both;
}
@keyframes moon-signal-pulse {
  0%, 100% { opacity: 0; }
  15% { opacity: .35; }
  34% { opacity: .8; }
  72% { opacity: .5; }
}
@keyframes moon-scan-down {
  from { transform: translateY(-110%); }
  to { transform: translateY(calc(var(--moon-size) + 110%)); }
}
@keyframes moon-scan-up {
  from { transform: translateY(calc(var(--moon-size) + 110%)); }
  to { transform: translateY(-110%); }
}
@keyframes moon-signal-noise {
  0%, 100% { opacity: 0; transform: translateX(0); }
  18%, 27% { opacity: .5; transform: translateX(-5px); }
  28%, 45% { opacity: .12; transform: translateX(6px); }
  46%, 63% { opacity: .4; transform: translateX(-3px); }
  64%, 82% { opacity: .16; transform: translateX(4px); }
}
.avatar__home { transition: fill 220ms ease, filter 220ms ease; }
.avatar[data-feedback] .avatar__home { fill: #268aff; }
.avatar-section[data-mood="angry"] .avatar__home {
  fill: #d3263f;
  filter: drop-shadow(0 0 7px rgba(255, 45, 70, .72));
  animation: avatar-rage-pulse 420ms ease-in-out infinite alternate;
}
.avatar__blaster,
.avatar__shot,
.avatar__shot-trail { pointer-events: none; }

html[data-avatar-shot]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: avatar-shot-flash 110ms step-end;
}
html[data-avatar-shot] .avatar-section { animation: avatar-shot-shake 110ms linear; }

@keyframes avatar-rage-pulse {
  to { filter: drop-shadow(0 0 13px rgba(255, 45, 70, .95)); }
}
@keyframes avatar-shot-shake {
  25% { transform: translate3d(-3px, 1px, 0); }
  50% { transform: translate3d(3px, -1px, 0); }
  75% { transform: translate3d(-1px, 0, 0); }
}
@keyframes avatar-shot-flash {
  0%, 30% { opacity: .28; }
  31%, 100% { opacity: 0; }
}

.avatar-section__help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .avatar-intro { display: none; }

  .avatar-section {
    height: 356px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 256px auto;
    align-content: center;
    row-gap: 10px;
  }

  .avatar { width: 256px; height: 256px; }
  .moon-scene {
    top: calc(50% - 30px);
    width: 256px;
    height: 256px;
  }
  .moon-transition {
    --moon-size: 205px;
    top: calc(50% - 30px);
  }
  .avatar-dialogue {
    position: relative;
    inset: auto;
    width: min(270px, calc(100% - 32px));
    min-height: 2.8em;
    margin: 0 auto;
    text-align: center;
  }
}