.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.8,.2,1);
}

.reveal--delay-1 {
  transition-delay: 120ms;
}

.reveal--delay-2 {
  transition-delay: 220ms;
}

.panel.is-visible .reveal {
  opacity: 1;
  transform: translateY(0);
}

.type-target {
  position: relative;
  display: inline;
}

.type-target::after {
  content: "▮";
  display: inline-block;
  margin-left: 0.14em;
  color: var(--accent);
  line-height: 1;
  animation: blink 950ms steps(1) infinite;
  pointer-events: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (min-width: 1101px) {
  h2.panel-title {
    --mouse-x: 0px;
    --mouse-y: 0px;
    transform: translate3d(var(--mouse-x), var(--mouse-y), 0);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--delay-1,
  .reveal--delay-2 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu,
  .logo,
  .menu-toggle,
  .menu-close,
  .button,
  .mail-link,
  h2.panel-title {
    transition: none;
  }

  h2.panel-title {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}