/* --- Cloud GIFs --- */
.gif-column {
    position: fixed;
    top: 9.5rem; /* adjust as needed */
    display: flex;
    flex-direction: column;
    z-index: -1; /* behind pageLayout */
}

.gif-column img {
    display: block;
}

.left-gifs {
    left: 0;
}

.right-gifs {
    right: 0;
}

/* --- Flying Dragon GIFs --- */
.gif-flying-dragon {
    position: absolute; /* absolute so it moves relative to the page */
    /*bottom: -150px;  /* -150 start hidden below screen */

    /*background-color: #f02020;
    border: 5px solid black;*/

    /*transform: rotate(-90deg); doesn't point the dragon upward, the transforms here and in keyframes don't stack */
    z-index: 999;

    opacity: 0;      /* hidden by default */
}

.gif-flying-dragon img {
    transform: rotate(-90deg);
    height: 10vw;   /* matches banner width */
    width: auto;    /* keeps aspect ratio */
}

.left-dragon {
    left: -7vw;
}

.right-dragon {
    right: -7vw;
}

/* --- Animation --- */
.gif-flying-dragon.animate {
    opacity: 1;
    animation: moveUp 10s linear forwards;
}

@keyframes moveUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-120vh); } /* -120 move up beyond the top of the viewport */
}