html, body {
    margin: 0;
    padding: 0;
    background: #050505;
    overflow: hidden;
    height: 100%;
    font-family: "Cormorant Garamond", serif;
}

/* Main stage */
#stage {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* Artwork layer */
#art {
    position: absolute;
    width: 100%;
    height: 100%;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    transform-origin: center center; /* IMPORTANT */

    opacity: 0;
    transform: scale(1);

    transition:
        opacity 3s ease,
        transform linear;
}
/* Artwork title */
#title {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    color: rgba(255,255,255,0.75);
    font-size: 22px;
    letter-spacing: 2px;
    text-align: center;

    opacity: 0;
    transition: opacity 3s ease;
}

/* Film grain overlay */
#grain {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;

    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: 0.06;
    mix-blend-mode: overlay;
}