.mybook-loading-screen {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(183, 47, 124, .2), transparent 42%),
        #100d19;
    color: #fff8fc;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.mybook-loading-screen.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.mybook-loading-content {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 2rem;
    text-align: center;
    animation: mybook-loading-rise .45s ease both;
}

.mybook-loading-logo {
    display: block;
    width: clamp(112px, 30vw, 160px);
    height: auto;
    margin-bottom: .6rem;
    object-fit: contain;
}

.mybook-loading-book {
    position: relative;
    display: block;
    width: 90px;
    height: 66px;
    perspective: 520px;
    transform-style: preserve-3d;
    isolation: isolate;
}

.mybook-loading-book::after {
    position: absolute;
    z-index: 12;
    bottom: 1px;
    left: 50%;
    width: 4px;
    height: 63px;
    border-radius: 3px;
    background: linear-gradient(90deg, #7f315e, #ffe8f4 48%, #a84777);
    box-shadow: 0 0 14px rgba(255, 193, 224, .55), 1px 0 4px rgba(83, 22, 58, .45);
    content: "";
}

.mybook-loading-book::before {
    position: absolute;
    z-index: 0;
    right: 5px;
    bottom: -5px;
    left: 5px;
    height: 8px;
    border-radius: 50%;
    background: rgba(224, 116, 177, .42);
    box-shadow: 0 8px 17px rgba(221, 104, 168, .35);
    content: "";
}

.mybook-book-cover {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 2px;
    width: 50%;
    border: 1px solid rgba(255, 202, 229, .8);
    background: linear-gradient(145deg, #9d3b73, #5d234a);
    box-shadow: 0 5px 12px rgba(54, 12, 42, .36);
}

.mybook-book-cover-left {
    left: 1px;
    border-right: 0;
    border-radius: 6px 1px 2px 5px;
    transform: skewY(7deg);
    transform-origin: right center;
}

.mybook-book-cover-right {
    right: 1px;
    border-left: 0;
    border-radius: 1px 6px 5px 2px;
    transform: skewY(-7deg);
    transform-origin: left center;
}

.mybook-book-stack {
    position: absolute;
    z-index: 2;
    top: 5px;
    bottom: 5px;
    width: 47%;
    border: 1px solid rgba(255, 249, 252, .94);
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(146, 91, 120, .18) 6px 7px),
        linear-gradient(145deg, #fffafd, #efd9e5);
    box-shadow: inset 0 0 8px rgba(117, 56, 88, .13);
}

.mybook-book-stack-left {
    left: 3px;
    border-radius: 5px 1px 2px 4px;
    transform: skewY(6deg);
    transform-origin: right center;
}

.mybook-book-stack-right {
    right: 3px;
    border-radius: 1px 5px 4px 2px;
    transform: skewY(-6deg);
    transform-origin: left center;
}

.mybook-loading-leaf {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 5;
    display: block;
    width: calc(50% - 2px);
    height: calc(100% - 9px);
    border-radius: 1px 5px 3px 1px;
    transform-origin: left center;
    transform-style: preserve-3d;
    animation: mybook-page-turn 8s cubic-bezier(.42, 0, .2, 1) infinite;
    backface-visibility: visible;
    will-change: transform, opacity, filter;
}

.mybook-loading-leaf::before,
.mybook-loading-leaf::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 249, 252, .95);
    border-radius: inherit;
    backface-visibility: hidden;
    content: "";
}

.mybook-loading-leaf::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .95), transparent 22%, transparent 78%, rgba(151, 73, 115, .23)),
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(146, 91, 120, .15) 6px 7px),
        linear-gradient(145deg, #fffafd, #edd0e0);
    box-shadow: inset 4px 0 8px rgba(255, 255, 255, .72), inset -5px 0 10px rgba(130, 48, 95, .16);
}

.mybook-loading-leaf::after {
    background:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(146, 91, 120, .13) 6px 7px),
        linear-gradient(230deg, #fff9fc, #e6bed2);
    box-shadow: inset -5px 0 10px rgba(130, 48, 95, .15);
    transform: rotateY(180deg);
}

.mybook-loading-leaf-one { z-index: 9; animation-delay: 0s; }
.mybook-loading-leaf-two { z-index: 8; animation-delay: 2s; }
.mybook-loading-leaf-three { z-index: 7; animation-delay: 4s; }
.mybook-loading-leaf-four { z-index: 6; animation-delay: 6s; }

@keyframes mybook-page-turn {
    0%, 8% { opacity: 0; transform: rotateY(0) rotateX(0) rotateZ(0) scaleX(1); filter: brightness(1); }
    10% { opacity: 1; transform: rotateY(0) rotateX(0) rotateZ(0) scaleX(1); filter: brightness(1); }
    14% { opacity: 1; transform: rotateY(-24deg) rotateX(4deg) rotateZ(-2deg) scaleX(.96) translateZ(3px); filter: brightness(.94); }
    20% { opacity: 1; transform: rotateY(-78deg) rotateX(9deg) rotateZ(-5deg) scaleX(.88) translateZ(7px); filter: brightness(.78); }
    27% { opacity: 1; transform: rotateY(-138deg) rotateX(12deg) rotateZ(-7deg) scaleX(.8) translateZ(9px); filter: brightness(.67); }
    32% { opacity: .9; transform: rotateY(-180deg) rotateX(0) rotateZ(0) scaleX(1); filter: brightness(.9); }
    35% { opacity: 0; transform: rotateY(-180deg) rotateX(0) rotateZ(0) scaleX(1); filter: brightness(1); }
    36%, 100% { opacity: 0; transform: rotateY(0) rotateX(0) rotateZ(0) scaleX(1); filter: brightness(1); }
}

.mybook-loading-kicker {
    margin: 1.1rem 0 0;
    color: #f2a5ce;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .3em;
}

.mybook-loading-message {
    margin: .25rem 0;
    color: #f8e8f1;
    font-size: clamp(1rem, 3vw, 1.2rem);
}

.mybook-loading-dots {
    display: flex;
    gap: .38rem;
    margin-top: .5rem;
}

.mybook-loading-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #efa0c9;
    animation: mybook-dot 1s ease-in-out infinite;
}

.mybook-loading-dots i:nth-child(2) { animation-delay: .14s; }
.mybook-loading-dots i:nth-child(3) { animation-delay: .28s; }

.mybook-loading-progress {
    width: min(220px, 58vw);
    height: 2px;
    overflow: hidden;
    margin-top: .8rem;
    border-radius: 2px;
    background: rgba(255, 223, 241, .16);
}

.mybook-loading-progress::before {
    display: block;
    width: 36%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d879ad, #ffe0ef);
    content: "";
    animation: mybook-loading-progress 1.6s ease-in-out infinite;
}

@keyframes mybook-page-left {
    0%, 13%, 100% { transform: skewY(8deg) rotateY(0); filter: brightness(1); }
    48% { transform: skewY(8deg) rotateY(-148deg) translateZ(3px); filter: brightness(.76); }
    62% { transform: skewY(8deg) rotateY(-158deg) translateZ(4px); filter: brightness(.68); }
    78% { transform: skewY(8deg) rotateY(-8deg); filter: brightness(.96); }
}

@keyframes mybook-page-right {
    0%, 34%, 100% { transform: skewY(-8deg) rotateY(0); filter: brightness(1); }
    67% { transform: skewY(-8deg) rotateY(148deg) translateZ(3px); filter: brightness(.76); }
    79% { transform: skewY(-8deg) rotateY(158deg) translateZ(4px); filter: brightness(.68); }
    92% { transform: skewY(-8deg) rotateY(8deg); filter: brightness(.96); }
}

@keyframes mybook-dot {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-5px); }
}

@keyframes mybook-loading-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

@keyframes mybook-loading-rise {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mybook-loading-screen,
    .mybook-loading-content,
    .mybook-loading-book span,
    .mybook-loading-dots i,
    .mybook-loading-progress::before {
        animation: none;
        transition-duration: .01ms;
    }
}