/* Import Plus Jakarta Sans (weight 800 for extra boldness).
Alternatively, place this @import in a separate file or <head> tag as needed. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@800&display=swap");

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Disable scrolling until the preloader is removed */
    background: #fff;
    perspective: 10px;
}

#preloader {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    z-index: 1000;
    mix-blend-mode: darken;
    will-change: transform;
    -webkit-font-smoothing: subpixel-antialiased
}

.preloadertext {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: max(1000px, 200vw, 200vh);
    font-weight: 800;
    color: white;
    mix-blend-mode: difference;
    /* transform-origin: 80% 0%; */
    will-change: transform;
    -webkit-transform-origin: 50% 50%;
    display: inline-block;
    line-height: 1;
    animation: txtExpand 2s cubic-bezier(1, 0, 0, 1) forwards;
    animation-delay: 2.5s;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: scale(0.05);
}

.ptxtinner {
    will-change: transform;
    animation: txtRotate 2s cubic-bezier(1, 0, 0, 1) forwards;
    animation-delay: .5s;
    -webkit-font-smoothing: subpixel-antialiased;
}

@keyframes txtRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: translateX(-38.87829679%) rotate(90deg);
        transform-origin: 88.87829679% 50%;
        -webkit-transform-origin: 88.87829679% 50%;
    }
}

@keyframes txtExpand {
    0% {
        transform: scale(0.05);
    }
    80% {
        transform: scale(2);
    }
    100% {
        transform: scale(20);
    }
}

#content {
    font-family: "Plus Jakarta Sans", sans-serif;
    padding: 20px;
    overflow-y: auto; /* re-enabled once preloader is removed */
}
