@layer animation.reveal {
    .subject {
      opacity: 0;
    }

    .reveal-up {
      animation: fade-in 660ms ease forwards,
        slide-up 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

    .reveal-down {
      animation: fade-in 660ms ease forwards,
        slide-down 1000ms cubic-bezier(0, 0, 0.1, 1) forwards;
    }

    @keyframes fade-in {
      to {
        opacity: 1;
      }
    }

    @keyframes slide-up {
      from {
        transform: translateY(-100px);
      }
    }

    @keyframes slide-down {
      from {
        transform: translateY(100px);
      }
    }
  }