aos/episode-1/src/assets/css/scss/_story.scss

.story {
    /*background-color: black;*/
    width: 100%;
    overflow: hidden;
    margin: 0;
    letter-spacing: .15em;
    font: 700 1em "Play", sans-serif;
    height: 100vh;
    position: absolute;
    z-index: 3;
    transition: opacity 1.5s;


    #info {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        color: white;
        font-weight: 400;
        font-size: 12px;
        display: none;
    }

    #title {
        color: rgb(75, 213, 238);
        transform: translate(-50%, -50%);
        position: absolute;
        font-size: calc(16px + (30 - 16) * (100vw - 400px) / (800 - 400));
        line-height: 1em;
        font-weight: 200;
        margin-right: -50%;
        padding: 0 2em;
        opacity: 0;
    }

    section {
        top: 45%;
        left: 50%;
        position: absolute;
        z-index: 1;
    }

    .content {
        top: auto;
        bottom: 16%;
        height: 50em;
        width: 14.65em;
        margin: 0 0 0 -7.65em;
        font-size: calc(16px + (30 - 16) * (100vw - 400px) / (800 - 400));
        text-align: justify;
        overflow: hidden;
        color: yellow;
        transform-origin: 50% 95%;
        transform: perspective(352px) rotateX(39deg);
    }

    .content div {
        position: absolute;
        top: 100%;
    }

    .content div.animated {
        animation: content 60s linear 0s;
    }

    .content div p {
        line-height: 1.35em;
        margin: 1.35em 0 1.85em 0;
        color: #caca23;
        top: 97%;
        opacity: 1;
        /* @include backface-visibility(hidden); */
    }

    @keyframes content {
        0% {
            top: 97%;
            opacity: 1;
        }

        95% {
            opacity: 1;
        }

        100% {
            top: 20%;
            opacity: 0;
        }
    }
}