html.page-loader-active,
html.page-loader-active body {
    overflow: hidden;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.page-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.page-loader__logo {
    display: block;
    width: min(818px, calc(100vw - 48px));
    height: auto;
    max-height: min(247px, 40vh);
}

.page-loader__part {
    opacity: 0;
    will-change: transform, opacity;
}

.page-loader.is-ready .page-loader__part--anima {
    animation: page-loader-anima 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.page-loader.is-ready .page-loader__part--school {
    animation: page-loader-school 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}

.page-loader.is-ready .page-loader__part--mark {
    animation: page-loader-mark 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}

.page-loader.is-ready .page-loader__part--tagline {
    animation: page-loader-tagline 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

@keyframes page-loader-anima {
    from {
        opacity: 0;
        transform: translateX(-72px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes page-loader-school {
    from {
        opacity: 0;
        transform: translateX(72px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes page-loader-mark {
    from {
        opacity: 0;
        transform: translate(24px, -24px) scale(0.6);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes page-loader-tagline {
    from {
        opacity: 0;
        transform: translateY(36px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575px) {
    .page-loader__inner {
        padding: 16px;
    }

    .page-loader__logo {
        width: min(320px, calc(100vw - 32px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader__part {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}