@layer scenes {
      [data-8b-live] [data-8b-motion~="post"] {
        animation-name: motion-post-translate, motion-post-opacity;
        animation-duration: 0.9s;
        animation-delay: calc(0s + var(--post-delay, 0s));
        animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
        animation-fill-mode: both;
        animation-play-state: paused;
        transform: none;
      }

      [data-8b-live] [data-8b-motion~="post"].is-in {
        animation-play-state: running;
      }

      @keyframes motion-post-translate {
        0% {
          translate: var(--post-translate-x-from, -36px) 0px;
        }

        100% {
          translate: 0px 0px;
        }
      }

      @keyframes motion-post-opacity {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      [data-8b-live] [data-8b-motion~="rule"] {
        animation: motion-rule 1.1s cubic-bezier(0.76, 0, 0.24, 1) both paused;
        transform-origin: var(--rule-origin, 0% 50%);
      }

      [data-8b-live] [data-8b-motion~="rule"].is-in {
        animation-play-state: running;
      }

      @keyframes motion-rule {
        0% {
          scale: var(--rule-from, 0 1);
        }

        100% {
          scale: 1;
        }
      }

      [data-8b-live] [data-8b-motion~="weigh"] {
        font-weight: 300;
        transition: font-weight 0.7s cubic-bezier(0.25, 1, 0.5, 1);
      }

      [data-8b-live] [data-8b-motion~="weigh"].is-in {
        font-weight: 500;
      }
    }