/* JaiSue loading mark: all motion is transform/opacity-only to keep first paint light. */
#loading-screen[hidden] { display: none !important; }

.jaisue-logo-loader {
    --jaisue-blue: #0879f9;
    --jaisue-blue-deep: #12386f;
    --jaisue-sky: #75d3ff;
    --jaisue-green: #17c7a5;
    --jaisue-surface: rgba(255, 255, 255, .97);
    box-sizing: border-box;
    width: min(200px, 72vw);
    padding: 10px 12px 14px;
    border: 3px solid var(--jaisue-sky);
    border-radius: 24px;
    background: var(--jaisue-surface);
    box-shadow: 0 18px 44px rgba(3, 105, 161, .22);
    display: flex;
    flex-direction: column;
    align-items: center;
    contain: layout paint;
    user-select: none;
}

.jaisue-logo-loader__art {
    display: block;
    width: 112px;
    height: auto;
    margin: 8px auto 16px;
    border-radius: 28px;
}

.jaisue-logo-loader__part,
.jaisue-logo-loader__sparkle,
.jaisue-logo-loader__eye {
    transform-box: fill-box;
    transform-origin: center;
}

.jaisue-logo-loader__frame {
    fill: none;
    stroke: none;
}

.jaisue-logo-loader__books {
    transform-origin: 50% 100%;
}

.jaisue-logo-loader__book--left {
    transform-origin: 100% 100%;
    animation: jaisue-loader-book-left .62s cubic-bezier(.22, 1, .36, 1) both;
}

.jaisue-logo-loader__book--right {
    transform-origin: 0 100%;
    animation: jaisue-loader-book-right .62s cubic-bezier(.22, 1, .36, 1) both;
}

.jaisue-logo-loader__face {
    opacity: 0;
    transform: translateY(7px) scale(.92);
    animation: jaisue-loader-face .48s cubic-bezier(.22, 1, .36, 1) .58s both;
}

.jaisue-logo-loader__hat {
    transform-origin: 50% 100%;
    animation: jaisue-loader-hat .42s cubic-bezier(.22, 1, .36, 1) .84s both;
}

.jaisue-logo-loader__tassel {
    transform-origin: 50% 0;
    animation: jaisue-loader-tassel .48s cubic-bezier(.22, 1, .36, 1) 1s both;
}

.jaisue-logo-loader__sparkles {
    opacity: 0;
    animation: jaisue-loader-sparkles-in .3s ease-out 1.1s forwards;
}

.jaisue-logo-loader__sparkle {
    animation: jaisue-loader-sparkle var(--sparkle-duration, 2.8s) ease-in-out var(--sparkle-delay, 0s) infinite;
}

.jaisue-logo-loader__wordmark {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-height: 26px;
    margin-top: -6px;
    white-space: nowrap;
    color: var(--jaisue-blue-deep);
    font: 900 clamp(20px, 5vw, 24px)/1 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
    letter-spacing: -.075em;
    animation: jaisue-loader-wordmark .42s ease-out 1.02s both;
}

.jaisue-logo-loader__letter {
    display: inline-block;
    min-width: .52em;
    transform-origin: 50% 100%;
    will-change: transform;
}

.jaisue-logo-loader__letter--blue { color: #0879f9; }
.jaisue-logo-loader__letter--green { color: var(--jaisue-green); }
.jaisue-logo-loader__dot { min-width: .25em; color: var(--jaisue-green); }

.jaisue-logo-loader__letter.is-jumping {
    animation: jaisue-loader-letter-jump var(--letter-jump-duration, 320ms) cubic-bezier(.22, 1, .36, 1) both;
}

.jaisue-logo-loader__eye.is-blinking {
    transform: scaleY(.12);
    transition: transform 120ms cubic-bezier(.22, 1, .36, 1);
}

.jaisue-logo-loader__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: #5d7796;
    font-size: 11px;
    letter-spacing: .08em;
}

.jaisue-logo-loader__status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #54d7ff;
    animation: jaisue-loader-status-dot 1.2s ease-in-out infinite;
}

.jaisue-logo-loader__status-dot:nth-child(2) { animation-delay: .16s; }
.jaisue-logo-loader__status-dot:nth-child(3) { animation-delay: .32s; }

@keyframes jaisue-loader-book-left {
    0% { transform: scaleX(.72); }
    100% { transform: scaleX(1); }
}

@keyframes jaisue-loader-book-right {
    0% { transform: scaleX(.72); }
    100% { transform: scaleX(1); }
}

@keyframes jaisue-loader-face {
    0% { opacity: 0; transform: translateY(7px) scale(.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jaisue-loader-hat {
    0% { opacity: 0; transform: translateY(-13px) scale(.92); }
    58% { opacity: 1; transform: translateY(3px) scale(1.025); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jaisue-loader-tassel {
    0% { opacity: .2; transform: translateY(-4px) rotate(-7deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes jaisue-loader-sparkles-in {
    from { opacity: 0; transform: scale(.72); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes jaisue-loader-sparkle {
    0%, 100% { opacity: .38; transform: scale(.82) rotate(-4deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(5deg); }
}

@keyframes jaisue-loader-wordmark {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes jaisue-loader-letter-jump {
    0%, 100% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-6px) scale(1.04); }
}

@keyframes jaisue-loader-status-dot {
    0%, 100% { opacity: .35; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
    .jaisue-logo-loader__wordmark { margin-top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .jaisue-logo-loader__books,
    .jaisue-logo-loader__book--left,
    .jaisue-logo-loader__book--right,
    .jaisue-logo-loader__face,
    .jaisue-logo-loader__hat,
    .jaisue-logo-loader__tassel,
    .jaisue-logo-loader__sparkles,
    .jaisue-logo-loader__sparkle,
    .jaisue-logo-loader__wordmark,
    .jaisue-logo-loader__status-dot {
        animation: none !important;
    }

    .jaisue-logo-loader__face,
    .jaisue-logo-loader__sparkles,
    .jaisue-logo-loader__wordmark {
        opacity: 1;
        transform: none;
    }

    .jaisue-logo-loader__letter.is-jumping { transform: none; }
    .jaisue-logo-loader__eye.is-blinking { transition-duration: 1ms; }
}