html {
        --hq-vt-bg: #ffffff;
        --hq-out: hqOutUp;
        --hq-in: hqInUp;
    }

    html.dark { --hq-vt-bg: #14161a; }
    html.hq-dir-fwd { --hq-out: hqOutRight; --hq-in: hqInLeft; }
    html.hq-dir-back { --hq-out: hqOutLeft; --hq-in: hqInRight; }

    @media (prefers-reduced-motion: no-preference) {
        @view-transition { navigation: auto; }
        ::view-transition { background-color: var(--hq-vt-bg, #ffffff); }
        ::view-transition-old(root) { animation: var(--hq-out, hqOutUp) .34s cubic-bezier(.4, 0, .6, 1) both; }
        ::view-transition-new(root) { animation: var(--hq-in, hqInUp) .46s cubic-bezier(.16, 1, .3, 1) both; }

        @keyframes hqNtFade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes hqOutUp { from { opacity: 1; } to { opacity: 0; transform: translateY(-56px); } }
        @keyframes hqInUp { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes hqOutRight { from { opacity: 1; } to { opacity: 0; transform: translateX(64px); } }
        @keyframes hqInLeft { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes hqOutLeft { from { opacity: 1; } to { opacity: 0; transform: translateX(-64px); } }
        @keyframes hqInRight { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: translateX(0); } }
    }
    .hero h1 span {
      display: inline-block;

      animation: hqCharIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .hero-text,
    .buttons .dl-button,
    .cards .card,
    .updates .heading,
    .update-list {
      animation: hqRiseIn 0.42s cubic-bezier(0.25, 1, 0.5, 1) both;
    }

    .hero h1 span:nth-child(1) { animation-delay: 0.04s; }
    .hero h1 span:nth-child(2) { animation-delay: 0.10s; }
    .hero h1 span:nth-child(3) { animation-delay: 0.16s; }
    .hero h1 span:nth-child(4) { animation-delay: 0.22s; }
    .hero h1 span:nth-child(5) { animation-delay: 0.28s; }
    .hero h1 span:nth-child(6) { animation-delay: 0.34s; }

    .hero-text { animation-delay: 0.16s; }
    .buttons .dl-button:nth-child(1) { animation-delay: 0.20s; }
    .buttons .dl-button:nth-child(2) { animation-delay: 0.24s; }
    .cards .card:nth-child(1) { animation-delay: 0.28s; }
    .cards .card:nth-child(2) { animation-delay: 0.32s; }
    .updates .heading { animation-delay: 0.36s; }
    .update-list { animation-delay: 0.40s; }

    @keyframes hqCharIn {
      from {
        opacity: 0.3;
        transform: translate3d(0, 26px, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes hqRiseIn {
      from {
        opacity: 0.45;
        transform: translate3d(0, 14px, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero h1 span,
      .hero-text,
      .buttons .dl-button,
      .cards .card,
      .updates .heading,
      .update-list {
        animation: none;
      }
    }