#splash-screen {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    inset: 0;
    position: fixed;
    background-color: light-dark(white, black); /* c7d6ff */

    opacity: 1;
    transition: opacity 0.6s;

    z-index: 1000000;
}

#splash-screen > .jmas {
    mask: url("/assets/splash-screen/jmas.svg") no-repeat center / contain;
    width: clamp(200px, 20vw, 500px);
    aspect-ratio: 2.5;
    background-color: light-dark(#757575, white); /* 5e6a8d */
    /* background: linear-gradient(45deg, rgb(106, 52, 255), magenta); */

    will-change: transform;
    transform: translateZ(0);

    margin-top: 25vh;

    animation:
        apareixer 0.5s ease,
        creixer 5s ease-out forwards;

}

@keyframes apareixer {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes creixer {
    from { transform: scale(1); }
    to { transform: scale(1.5); }
}