@media (prefers-reduced-motion: no-preference) {
  body {
    position: relative;
    isolation: isolate;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
  }

  body::before {
    inset: -18vh auto -18vh 0;
    display: block;
    width: min(22vw, 260px);
    background: #050505;
    opacity: .035;
    transform: skewX(-14deg) translateX(-140vw);
    animation: tito-slit 13s cubic-bezier(.16, 1, .3, 1) infinite;
  }

  body::after {
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(5, 5, 5, .03) 0,
      rgba(5, 5, 5, .03) 1px,
      transparent 1px,
      transparent 8px
    );
    opacity: .34;
    mix-blend-mode: multiply;
    animation: tito-scan 4.5s steps(4, end) infinite;
  }

  .site-header,
  main,
  .site-footer {
    position: relative;
    z-index: 1;
  }

  .site-mark__dot {
    transform-origin: center;
    animation: tito-dot 4.8s steps(2, end) infinite;
  }

  .simple-hero h1 {
    transform-origin: center;
    animation: tito-letterform 9.5s cubic-bezier(.16, 1, .3, 1) infinite;
    will-change: transform, font-variation-settings;
  }

  .hero h1,
  .simple-hero__inner,
  .mini-profile,
  .icon-tile,
  .link-card,
  .contact-panel {
    animation: tito-rise .82s cubic-bezier(.16, 1, .3, 1) both;
  }

  .mini-profile {
    animation-delay: .08s;
  }

  .icon-tile:nth-of-type(1),
  .link-card:nth-of-type(1) {
    animation-delay: .08s;
  }

  .icon-tile:nth-of-type(2),
  .link-card:nth-of-type(2) {
    animation-delay: .14s;
  }

  .icon-tile:nth-of-type(3),
  .link-card:nth-of-type(3) {
    animation-delay: .2s;
  }

  .icon-tile:nth-of-type(4),
  .link-card:nth-of-type(4) {
    animation-delay: .26s;
  }

  .icon-button,
  .button-link,
  .icon-tile,
  .link-card,
  .contact-form__field input,
  .contact-form__field textarea {
    transition:
      transform .22s cubic-bezier(.16, 1, .3, 1),
      background-color .22s cubic-bezier(.16, 1, .3, 1),
      border-color .22s cubic-bezier(.16, 1, .3, 1),
      box-shadow .22s cubic-bezier(.16, 1, .3, 1),
      color .22s cubic-bezier(.16, 1, .3, 1);
  }

  .icon-button:hover,
  .icon-button:focus-visible,
  .button-link:hover,
  .button-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 #050505;
  }

  .button-link:hover,
  .button-link:focus-visible {
    outline: none;
  }

  .icon-tile:hover,
  .icon-tile:focus-visible,
  .link-card:hover,
  .link-card:focus-visible {
    transform: translate(-2px, -3px) skewX(-1.25deg);
    box-shadow: 6px 6px 0 #050505;
  }

  .contact-form__field input:focus,
  .contact-form__field textarea:focus {
    border-color: #050505;
    outline: none;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #050505;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-button,
  .button-link,
  .icon-tile,
  .link-card,
  .contact-form__field input,
  .contact-form__field textarea {
    transition: none;
  }
}

@keyframes tito-slit {
  0% {
    transform: skewX(-14deg) translateX(-140vw);
  }

  38%,
  100% {
    transform: skewX(-14deg) translateX(140vw);
  }
}

@keyframes tito-scan {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(8px);
  }
}

@keyframes tito-dot {
  0%,
  74%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  78% {
    transform: scaleX(1.8) scaleY(.7) rotate(0deg);
  }

  82% {
    transform: scale(.8) rotate(90deg);
  }
}

@keyframes tito-letterform {
  0%,
  100% {
    font-variation-settings: "wght" 900;
    transform: translate3d(0, 0, 0) scaleX(1);
  }

  32% {
    font-variation-settings: "wght" 820;
    transform: translate3d(-.55vw, 0, 0) scaleX(1.018);
  }

  64% {
    font-variation-settings: "wght" 900;
    transform: translate3d(.38vw, 0, 0) scaleX(.992);
  }
}

@keyframes tito-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) skewY(.7deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
  }
}