* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;

    font-family: Arial, Helvetica, sans-serif;

}


/* =========================
   OUTER ATMOSPHERE
========================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        url("images/waltzing.gif")
        center top / auto 200%
        repeat-y;

    z-index: 0;

    animation:
        backgroundRoll 130s linear infinite;

}

body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;


    background:

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 20%,
            rgba(0,0,0,.35) 55%,
            rgba(0,0,0,.85) 100%
        ),

        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0px,
            rgba(0,0,0,.4) 8px,
            transparent 8px,
            transparent 16px
        );


    background-size:
        100% 100%,
        100% 8px;


    animation:
        projectorRoll 14s linear infinite;

}


/* =========================
   BACKGROUND ROLL
========================= */

@keyframes backgroundRoll {

    from {

        background-position:
            center -100%;

    }


    to {

        background-position:
            center 0%;

    }

}


/* =========================
   PROJECTOR SCANLINE ROLL
========================= */

@keyframes projectorRoll {

    from {

        background-position:
            0 0;

    }


    to {

        background-position:
            0 80px;

    }

}

/* =========================
   STAGE
========================= */

.scene {

    position:relative;

    width:min(450px,95vw);

    aspect-ratio:9 / 16;

    max-height:88vh;

    background:#000;

    border:6px solid #000;

    border-radius:8px;

    overflow:hidden;

    z-index:3;

    box-shadow:
        0 50px 90px rgba(0,0,0,.95),
        0 0 120px rgba(0,0,0,.65);

}
 
/* =========================
   WORLD
========================= */

.world {

    position:absolute;

    inset:0;

}


/* =========================
   LAYERS
========================= */

.layer {

    position:absolute;

    inset:0;

    background-size:contain;

    background-position:center top;

    background-repeat:no-repeat;

    transform:translateY(0);

    transition:
        transform 6s cubic-bezier(.22,1,.36,1);

    will-change:transform;

}



/* =========================
   NAVIGATION (12 + LIFT)
========================= */

.sigils {

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:grid;

    grid-template-columns:repeat(6, auto);

    grid-template-rows:repeat(2, auto);

    gap:12px 18px;

    z-index:1000;

    user-select:none;

    align-items:center;

    justify-items:center;

}



.sigils div {

    color:#2a2216;

    font-size:24px;

    cursor:pointer;

    line-height:1;

    transition:

        color .25s ease,

        transform .25s ease;

}



.sigils div:hover {

    color:#ad8a6e;

    transform:scale(1.2);

}



.sigils div.active {

    color:#5a4630;

}



/* =========================
   MOBILE
========================= */

@media (max-width:768px){


    .scene {

        width:94vw;

        max-height:85vh;

    }


    .sigils {

        gap:12px 16px;

        bottom:16px;

    }


    .sigils div {

        font-size:18px;

    }

}



/* =========================
   LIFT ALL CENTER FIX
========================= */

.sigils .lift-all {

    grid-column:1 / -1;

    justify-self:center;

    font-size:32px;

    margin-top:4px;

}



.lower-all {

    cursor:pointer;

}



.lift-all {

    cursor:pointer;

}