/* =====================================
   RESET
===================================== */

html,
body {
    width: 100%;

    margin: 0;
    padding: 0;
}

/* =====================================
   PAGE
===================================== */

body {
    background: #eee6d8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================
   DESK
===================================== */

.desk {
    position: relative;

    width: 100vw;
    height: 100vh;

    max-width: none;

    margin: 0;

    overflow: hidden;
}


/* =====================================
   DESK BACKGROUND
===================================== */

.desk-background {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    filter:
        brightness(0.84)
        saturate(0.78)
        contrast(1.03);
}


/* =====================================
   INTRO PAPER
===================================== */

.intro {
    position: absolute;

    left: 31%;
    top: 3%;

    width: 38%;

    z-index: 5;
}

.paper {
    display: block;

    width: 100%;
    height: auto;
}

.intro-text {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 85%;

    transform:
        translate(-50%, -50%);

    text-align: center;

    color: #1f1713;

    pointer-events: none;
}

.intro-text h1 {
    margin: 0 0 10px;

    font-size: 42px;

    font-weight: normal;

    letter-spacing: 1px;
}

.intro-text p {
    margin: 0 0 14px;

    font-size: 18px;

    line-height: 1.5;
}

.intro-text span {
    font-size: 15px;

    color: #3a2922;

    letter-spacing: 1px;
}


/* =====================================
   BOOK OBJECT
===================================== */

.book-object {
    position: absolute;

    left: 10%;
    top: 10%;

    width: 27%;

    z-index: 7;

    transform:
        rotate(5deg);
}

.book-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            16px 19px 11px
            rgba(45, 25, 12, 0.48)
        );
}


/* =====================================
   LAPTOP OBJECT
===================================== */

.laptop-link {
    position: absolute;

    left: 62%;
    top: 3%;

    width: 40%;

    z-index: 6;
}

.laptop-object {
    display: block;

    position: relative;

    width: 100%;
    height: auto;

    transform:
        rotate(14deg);
}

.laptop-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.68)
        saturate(0.82)
        sepia(0.18)
        contrast(1.08)
        drop-shadow(
            7px 10px 10px
            rgba(25, 15, 10, 0.42)
        );
}


/* =====================================
   LABELS
===================================== */

.object-label {
    position: absolute;

    z-index: 10;

    display: block;

    background: #eee2c9;

    color: #45352c;

    padding: 9px 16px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: bold;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    text-decoration: none;

    letter-spacing: 1px;

    box-shadow:
        3px 4px 6px
        rgba(55, 35, 20, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        filter 0.2s ease;
}


.object-label:hover {
    background: #f7e8ca;

    box-shadow:
        0 0 8px
        rgba(255, 214, 145, 0.9),

        0 0 18px
        rgba(255, 197, 105, 0.65),

        7px 10px 14px
        rgba(45, 25, 12, 0.42);

    filter:
        brightness(1.08);
}


/* =====================================
   BOOK LABEL
===================================== */

.book-label {
    left: 53%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-6deg);
}

.book-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(-6deg)
        scale(1.18);
}


/* =====================================
   LAPTOP LABEL
===================================== */

.laptop-label {
    left: 50%;
    top: 32%;

    transform:
        translate(-50%, -50%)
        rotate(-12deg);
}

.laptop-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(-12deg)
        scale(1.18);
}


/* =====================================
   CD OBJECT
===================================== */

.cd-object {
    position: absolute;

    left: 25%;
    top: 42%;

    width: 18%;

    z-index: 4;

    transform:
        rotate(8deg);
}

.cd-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            17px 21px 14px
            rgba(45, 25, 12, 0.55)
        );
}


/* =====================================
   CD LABEL
===================================== */

.cd-label {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}

.cd-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(-8deg)
        scale(1.18);
}


/* =====================================
   STICKY NOTE OBJECT
===================================== */

.sticky-note-object {
    position: absolute;

    left: 8%;
    top: 63%;

    width: 15%;

    z-index: 4;

    transform:
        rotate(-8deg);
}

.sticky-note-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        hue-rotate(13deg)
        brightness(1.45)
        saturate(0.85)
        drop-shadow(
            13px 16px 9px
            rgba(55, 35, 20, 0.40)
        );
}


/* =====================================
   STICKY NOTE LABEL
===================================== */

.sticky-note-label {
    left: 52%;
    top: 47%;

    transform:
        translate(-50%, -50%)
        rotate(6deg);
}

.sticky-note-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(6deg)
        scale(1.18);
}


/* =====================================
   GAMES OBJECT
===================================== */

.games-object {
    position: absolute;

    left: 69%;
    top: 68%;

    width: 16%;
    height: auto;

    z-index: 7;

    transform:
        rotate(6deg);
}

.games-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            7px 10px 14px
            rgba(45, 25, 12, 0.42)
        );
}


/* =====================================
   GAMES LABEL
===================================== */

.games-label {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 20;

    transform:
        translate(-50%, -50%)
        rotate(-6deg);
}

.games-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(-6deg)
        scale(1.18);
}


/* =====================================
   CAMERA OBJECT
===================================== */

.camera-object {
    position: absolute;

    left: 30%;
    top: 67%;

    width: 22%;

    z-index: 4;

    transform:
        rotate(-13deg);
}

.camera-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            17px 21px 14px
            rgba(45, 25, 12, 0.52)
        );
}


/* =====================================
   CAMERA LABEL
===================================== */

.camera-label {
    left: 22%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(14deg);
}

.camera-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(14deg)
        scale(1.18);
}


/* =====================================
   TICKET OBJECT
===================================== */

.ticket-object {
    position: absolute;

    left: 52%;
    top: 63%;

    width: 18%;

    z-index: 4;

    transform:
        rotate(8deg);
}

.ticket-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.78)
        saturate(0.82)
        sepia(0.08)
        contrast(1.05)
        drop-shadow(
            18px 21px 14px
            rgba(45, 25, 12, 0.55)
        );
}


/* =====================================
   TICKET LABEL
===================================== */

.ticket-label {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}

.ticket-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(-8deg)
        scale(1.18);
}


/* =====================================
   ABOUT ME OBJECT
===================================== */

.about-me-object {
    position: absolute;

    left: 46%;
    top: 45%;

    width: 12%;

    z-index: 4;

    transform:
        rotate(0deg);
}

.about-me-object img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        brightness(0.78)
        saturate(0.82)
        sepia(0.12)
        contrast(1.03)
        drop-shadow(
            16px 19px 11px
            rgba(55, 35, 20, 0.48)
        );
}


/* =====================================
   ABOUT ME LABEL
===================================== */

.about-me-label {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(0deg);
}

.about-me-label:hover {
    transform:
        translate(-50%, -50%)
        rotate(0deg)
        scale(1.18);
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 700px) {

    .intro {
        left: 25%;
        top: 63%;

        width: 50%;
    }

    .intro-text h1 {
        font-size: 25px;
    }

    .intro-text p {
        font-size: 13px;
    }

    .intro-text span {
        font-size: 11px;
    }

}


/* =====================================
   DESK CLUTTER
===================================== */

.earbuds-object {
    position: absolute;

    left: 20%;
    top: 48%;

    width: 10%;

    z-index: 4;

    transform:
        rotate(-39deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            7px 10px 12px
            rgba(45, 25, 12, 0.42)
        );
}


.photos-above-book {
    position: absolute;

    left: 39%;
    top: 72%;

    width: 12%;

    z-index: 3;

    transform:
        rotate(-4deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            7px 10px 12px
            rgba(45, 25, 12, 0.42)
        );
}


.desk-trinket {
    position: absolute;

    left: 4%;
    top: 25%;

    width: 13%;

    z-index: 3;

    transform:
        rotate(-5deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            7px 10px 12px
            rgba(45, 25, 12, 0.42)
        );
}


.desk-pencil {
    position: absolute;

    left: 10%;
    top: 63%;

    width: 22%;

    z-index: 4;

    transform:
        rotate(-18deg);

    filter:
        brightness(0.78)
        saturate(0.82)
        drop-shadow(
            10px 13px 13px
            rgba(45, 25, 12, 0.58)
        );
}


.desk-flowers {
    position: absolute;

    left: 61.5%;
    top: 14%;

    width: 27%;

    z-index: 6;

    transform:
        rotate(-6deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            8px 11px 12px
            rgba(45, 25, 12, 0.48)
        );
}


.desk-dice {
    position: absolute;

    left: 83%;
    top: 76%;

    width: 9%;

    z-index: 6;

    transform:
        rotate(-8deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            6px 9px 10px
            rgba(45, 25, 12, 0.45)
        );
}


.paper-under-card {
    position: absolute;

    left: 52%;
    top: 49%;

    width: 10%;

    z-index: 3;

    transform:
        rotate(-5deg);

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(
            5px 8px 10px
            rgba(45, 25, 12, 0.4)
        );
}


.paper-under-card-two {
    position: absolute;

    left: 54%;
    top: 44%;

    width: 6%;

    z-index: 2;

    transform:
        rotate(7deg);

    filter:
        brightness(0.99)
        saturate(0.75)
        drop-shadow(
            6px 9px 10px
            rgba(45, 25, 12, 0.42)
        );
}


.paper-under-card-three {
    position: absolute;

    left: 44%;
    top: 46%;

    width: 13%;

    z-index: 1;

    transform:
        rotate(-10deg);

    filter:
        brightness(0.82)
        saturate(0.75)
        drop-shadow(
            6px 9px 10px
            rgba(45, 25, 12, 0.42)
        );
}

/* =========================================
   REAL BOOK OPENING TRANSITION
========================================= */

#book-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(35, 24, 17, 0.72);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease;
}

#book-loader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


/* THE WHOLE BOOK SCENE */

.book-transition-scene {
    position: relative;

    width: min(650px, 72vw);
    aspect-ratio: 1.45 / 1;

    perspective: 1800px;

    transform:
        translateY(80px)
        scale(0.48)
        rotate(-5deg);

    opacity: 0;

    animation:
        book-arrive 0.65s
        cubic-bezier(.22,.75,.25,1)
        forwards;
}

#book-loader.active .book-transition-scene {
    animation:
        book-arrive 0.65s
        cubic-bezier(.22,.75,.25,1)
        forwards,
        book-settle 0.35s
        ease-out
        0.65s forwards;
}


/* =========================================
   PAGES UNDER THE COVER
========================================= */

.opening-pages {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: flex;

    transform:
        rotateX(7deg)
        rotateZ(0deg);

    transform-origin: center;

    opacity: 0;

    animation:
        pages-appear 0.25s
        ease-out
        1.05s forwards;
}


/* BOTH PAGE HALVES */

.page-left,
.page-right {
    position: relative;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #e5d7bc 0%,
            #f7f0df 8%,
            #fffaf0 48%,
            #eee3cd 100%
        );

    box-shadow:
        inset 0 0 18px rgba(80, 48, 28, 0.16),
        0 12px 28px rgba(35, 20, 10, 0.35);
}


/* LEFT PAGE */

.page-left {
    border-radius: 8px 2px 2px 8px;

    transform-origin: right center;

    border-right: 1px solid rgba(90, 60, 40, 0.22);
}


/* RIGHT PAGE */

.page-right {
    border-radius: 2px 8px 8px 2px;

    transform-origin: left center;

    border-left: 1px solid rgba(90, 60, 40, 0.18);
}


/* LITTLE PAGE DETAILS */

.page-left span,
.page-right span {
    position: absolute;

    left: 15%;
    right: 15%;
    top: 25%;

    height: 2px;

    background: rgba(100, 72, 48, 0.13);

    box-shadow:
        0 22px rgba(100, 72, 48, 0.10),
        0 44px rgba(100, 72, 48, 0.08),
        0 66px rgba(100, 72, 48, 0.07);

    opacity: 0.8;
}


/* =========================================
   THE ACTUAL BOOK COVER
========================================= */

.opening-cover {
    position: absolute;

    inset: 0;

    transform-style: preserve-3d;

    transform-origin: left center;

    z-index: 5;

    animation:
        cover-opening 1.15s
        cubic-bezier(.42, 0, .18, 1)
        0.82s forwards;
}


/* ACTUAL BOOK.PNG */

.opening-cover img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transform:
        rotate(5deg);

    transform-origin: center;

    filter:
        drop-shadow(0 18px 22px rgba(35, 20, 10, 0.42));
}


/* =========================================
   SPINE / HINGE
========================================= */

.book-transition-scene::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 3%;

    width: 5px;
    height: 94%;

    transform:
        translateX(-50%)
        rotateX(7deg);

    background:
        linear-gradient(
            90deg,
            rgba(70, 40, 22, 0.05),
            rgba(70, 40, 22, 0.28),
            rgba(255, 248, 225, 0.25),
            rgba(70, 40, 22, 0.08)
        );

    border-radius: 50%;

    z-index: 10;

    opacity: 0;

    animation:
        spine-appear 0.2s
        ease-out
        0.82s forwards;
}


/* =========================================
   LOADING TEXT
========================================= */

.book-loading-text {
    position: absolute;

    bottom: 14%;

    left: 50%;

    transform: translateX(-50%);

    color: #f3e7d1;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.45);

    opacity: 0;

    animation:
        loading-text-appear 0.4s
        ease-out
        0.75s forwards;
}


/* =========================================
   ANIMATIONS
========================================= */


/* Book lifts off desk and comes toward you */

@keyframes book-arrive {

    0% {
        opacity: 0;

        transform:
            translateY(80px)
            scale(0.48)
            rotate(-5deg);
    }

    45% {
        opacity: 1;

        transform:
            translateY(-15px)
            scale(0.78)
            rotate(-2deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0deg);
    }

}


/* Tiny settling movement */

@keyframes book-settle {

    0% {
        transform:
            translateY(0)
            scale(1)
            rotate(0deg);
    }

    100% {
        transform:
            translateY(-4px)
            scale(1.015)
            rotate(0deg);
    }

}


/* Pages become visible underneath */

@keyframes pages-appear {

    0% {
        opacity: 0;
        transform:
            rotateX(7deg)
            scale(0.92);
    }

    100% {
        opacity: 1;
        transform:
            rotateX(7deg)
            scale(1);
    }

}


/* THIS IS THE IMPORTANT PART:
   the cover actually swings open */

@keyframes cover-opening {

    0% {

        transform:
            rotateY(0deg)
            rotateZ(0deg);

    }

    18% {

        transform:
            rotateY(-18deg)
            rotateZ(0deg);

    }

    55% {

        transform:
            rotateY(-105deg)
            rotateZ(0deg);

    }

    78% {

        transform:
            rotateY(-145deg)
            rotateZ(0deg);

    }

    100% {

        transform:
            rotateY(-165deg)
            rotateZ(0deg);

    }

}


/* Spine appears when cover starts moving */

@keyframes spine-appear {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}


/* Loading text */

@keyframes loading-text-appear {

    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(8px);
    }

    100% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0);
    }

}
/* =====================================
   BOOK LOADING SCREEN
===================================== */

#book-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#book-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   MINI BOOK
===================================== */

.mini-book {
    position: relative;

    width: 110px;
    height: 75px;

    perspective: 700px;
}


/* =====================================
   BOOK PAGES
===================================== */

.book-page {
    position: absolute;

    top: 0;
    left: 50%;

    width: 50%;
    height: 100%;

    background:
        #eee2c9;

    border:
        1px solid #b9a78d;

    transform-origin:
        left center;

    box-shadow:
        3px 4px 8px
        rgba(25, 15, 10, 0.35);
}


.page-one {
    left: 0;

    transform-origin:
        right center;
}


.page-two {
    animation:
        bookFlip 0.65s ease-in-out infinite;
}


.page-three {
    animation:
        bookFlip 0.65s ease-in-out 0.32s infinite;
}


@keyframes bookFlip {

    0% {
        transform:
            rotateY(0deg);
    }

    45% {
        transform:
            rotateY(-155deg);
    }

    50% {
        transform:
            rotateY(-165deg);
    }

    100% {
        transform:
            rotateY(0deg);
    }

}


.book-loading-text {
    margin-top: 22px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =====================================
   MUSIC LOADING SCREEN
===================================== */

#music-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#music-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   CSS CD
===================================== */

.music-disc {
    position: relative;

    width: 105px;
    height: 105px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            #d8d1c4 0%,
            #eee8dc 7%,
            #a9a39a 9%,
            #d9d4ca 12%,
            #b5b0a8 28%,
            #e7e2d9 42%,
            #aaa59d 58%,
            #d9d4cb 72%,
            #a29d95 86%,
            #ded9d0 100%
        );

    border:
        1px solid #817b72;

    box-shadow:

        6px 9px 10px
        rgba(25, 15, 10, 0.42),

        inset 0 0 5px
        rgba(45, 35, 25, 0.35);

    animation:
        musicSpin 1.1s linear infinite;
}


.music-disc::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 13px;

    width: 42px;
    height: 25px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.65),
            rgba(255,255,255,0)
        );

    transform:
        rotate(-25deg);

    pointer-events: none;
}


.music-disc::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    border:
        1px solid
        rgba(100, 95, 88, 0.55);

    transform:
        translate(-50%, -50%);

    box-shadow:
        inset 0 0 4px
        rgba(45, 35, 25, 0.25);
}


.disc-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        #eee6d8;

    border:
        1px solid #8f897f;

    box-shadow:
        inset 0 1px 2px
        rgba(45, 35, 25, 0.35);

    transform:
        translate(-50%, -50%);

    z-index: 2;
}


@keyframes musicSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


.music-loading-text {
    margin-top: 22px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =====================================
   COMPUTER LOADING SCREEN
===================================== */

#computer-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#computer-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   MINI COMPUTER
===================================== */

.mini-computer {
    position: relative;

    width: 125px;
    height: 90px;

    filter:
        drop-shadow(
            6px 9px 8px
            rgba(25, 15, 10, 0.42)
        );
}


/* =====================================
   COMPUTER SCREEN
===================================== */

.computer-screen {
    position: absolute;

    top: 0;
    left: 12px;

    width: 101px;
    height: 67px;

    background:
        #211d19;

    border:
        3px solid #756858;

    border-radius:
        5px 5px 2px 2px;

    box-shadow:
        inset 0 0 8px
        rgba(0, 0, 0, 0.75),

        2px 3px 5px
        rgba(35, 20, 10, 0.35);

    overflow: hidden;
}


/* =====================================
   NO SCREEN GLOW
===================================== */

.screen-glow {
    display: none;
}


/* =====================================
   COMPUTER BASE
===================================== */

.computer-base {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 125px;
    height: 20px;

    background:
        #756858;

    border-radius:
        3px 3px 7px 7px;

    box-shadow:
        inset 0 2px 2px
        rgba(255, 244, 214, 0.18),

        2px 3px 5px
        rgba(35, 20, 10, 0.35);
}


/* =====================================
   COMPUTER LOADING TEXT
===================================== */

.computer-loading-text {
    margin-top: 22px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;

    text-align: center;
}


/* =====================================
   EXPERIENCES LOADING SCREEN
===================================== */

#experience-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#experience-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   EXPERIENCE TICKET
===================================== */

.experience-ticket {
    position: relative;

    width: 300px;
    height: 145px;

    background:
        linear-gradient(
            135deg,
            #e6d4b3,
            #d5bd91
        );

    border:
        1px solid #a18a65;

    box-shadow:

        7px 10px 15px
        rgba(25, 15, 10, 0.45),

        inset 0 0 0 4px
        rgba(255, 244, 214, 0.28);

    transform:
        rotate(0deg)
        scale(0.75);

    opacity: 0;

    transition:
        opacity 0.35s ease,
        transform 0.45s ease;
}


/* STRAIGHT TICKET */

#experience-loader.active .experience-ticket {
    opacity: 1;

    transform:
        rotate(0deg)
        scale(1);
}


/* =====================================
   TICKET PERFORATIONS
===================================== */

.ticket-hole {
    position: absolute;

    top: 50%;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        #40332a;

    transform:
        translateY(-50%);
}


.ticket-hole-left {
    left: -10px;
}


.ticket-hole-right {
    right: -10px;
}


/* =====================================
   TICKET CONTENT
===================================== */

.ticket-content {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 85%;

    transform:
        translate(-50%, -50%);

    text-align: center;

    color: #49372a;
}


.ticket-small-text {
    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 7px;
}


.ticket-title {
    font-size: 27px;

    letter-spacing: 2px;

    font-weight: bold;
}


.ticket-line {
    width: 70%;

    height: 1px;

    margin: 10px auto;

    background:
        #9b815c;
}


.ticket-details {
    font-size: 10px;

    letter-spacing: 2px;
}


/* =====================================
   ADMITTED STAMP
===================================== */

.valid-stamp {
    position: absolute;

    top: 50%;
    left: 50%;

    padding: 7px 18px;

    border:
        5px solid #a52f2f;

    color:
        #a52f2f;

    font-family:
        "Courier New",
        monospace;

    font-size: 34px;

    font-weight: 900;

    letter-spacing: 4px;

    transform:
        translate(-50%, -50%)
        rotate(-12deg)
        scale(2.8);

    opacity: 0;

    mix-blend-mode:
        multiply;

    z-index: 10;
}


/* STAMP AUTOMATICALLY APPEARS */

#experience-loader.active .valid-stamp {
    animation:
        stampDown
        0.6s
        ease-out
        0.9s
        forwards;
}


/* =====================================
   STAMP ANIMATION
===================================== */

@keyframes stampDown {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(2.8);
    }

    45% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(0.82);
    }

    60% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(1.12);
    }

    72% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(0.96);
    }

    84% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(1);
    }

}


/* =====================================
   EXPERIENCES LOADING TEXT
===================================== */

.experience-loading-text {
    margin-top: 25px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =====================================
   CAMERA / PHOTOS LOADING SCREEN
===================================== */

#photo-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#photo-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   VINTAGE CAMERA
===================================== */

.photo-camera {
    position: relative;

    width: 190px;
    height: 125px;

    opacity: 0;

    transform:
        translateY(18px)
        rotate(0deg)
        scale(0.88);

    transition:
        opacity 0.45s ease,
        transform 0.55s ease;

    filter:
        drop-shadow(
            9px 12px 9px
            rgba(25, 15, 10, 0.45)
        );
}


#photo-loader.active .photo-camera {
    opacity: 1;

    transform:
        translateY(0)
        rotate(0deg)
        scale(1);
}


/* =====================================
   CAMERA BODY
===================================== */

.photo-camera-body {
    position: absolute;

    left: 10px;
    bottom: 5px;

    width: 170px;
    height: 98px;

    background:
        linear-gradient(
            145deg,
            #4f4740,
            #2f2b27
        );

    border:
        2px solid #71665b;

    border-radius:
        9px 9px 12px 12px;

    box-shadow:

        inset 0 4px 5px
        rgba(255, 245, 225, 0.08),

        inset 0 -7px 10px
        rgba(0, 0, 0, 0.35);
}


/* =====================================
   CAMERA TOP
===================================== */

.camera-top {
    position: absolute;

    top: 10px;
    left: 57px;

    width: 76px;
    height: 25px;

    background:
        linear-gradient(
            to bottom,
            #62594f,
            #39342f
        );

    border:
        2px solid #756b60;

    border-bottom:
        none;

    border-radius:
        8px 8px 0 0;
}


/* =====================================
   VIEWFINDER
===================================== */

.camera-viewfinder {
    position: absolute;

    top: 14px;
    left: 22px;

    width: 30px;
    height: 18px;

    background:
        #1b1917;

    border:
        2px solid #8b7e6e;

    border-radius: 3px;

    box-shadow:
        inset 0 0 5px
        rgba(0, 0, 0, 0.8);
}


/* =====================================
   CAMERA LENS
===================================== */

.camera-lens {
    position: absolute;

    top: 18px;
    left: 58px;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 35%,
            #777067 0%,
            #403b36 20%,
            #211f1d 48%,
            #514a42 68%,
            #24211e 100%
        );

    border:
        4px solid #81766a;

    box-shadow:

        inset 0 0 8px
        rgba(0, 0, 0, 0.85),

        2px 3px 5px
        rgba(0, 0, 0, 0.45);

    transition:
        box-shadow 0.4s ease;
}


.camera-lens-inner {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 29px;
    height: 29px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(220, 204, 170, 0.65),
            rgba(125, 111, 91, 0.25),
            rgba(25, 23, 21, 0.85)
        );

    box-shadow:
        inset 0 0 5px
        rgba(0, 0, 0, 0.8);

    transition:
        box-shadow 0.4s ease;
}


#photo-loader.active .camera-lens {
    box-shadow:

        inset 0 0 8px
        rgba(0, 0, 0, 0.85),

        0 0 7px
        rgba(218, 190, 143, 0.18);
}


#photo-loader.active .camera-lens-inner {
    box-shadow:

        inset 0 0 5px
        rgba(0, 0, 0, 0.8),

        0 0 8px
        rgba(220, 196, 153, 0.22);
}


/* =====================================
   SHUTTER
===================================== */

.camera-shutter {
    position: absolute;

    right: 20px;
    top: 20px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        #8d8173;

    border:
        2px solid #39342f;

    box-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.5);
}


/* =====================================
   CAMERA SHUTTER MOTION
===================================== */

#photo-loader.active .camera-shutter {
    animation:
        cameraClick 0.28s ease-in-out 0.65s;
}


#photo-loader.active .photo-camera {
    animation:
        cameraGlow 0.65s ease-in-out 0.65s;
}


@keyframes cameraClick {

    0% {
        transform:
            scale(1);
    }

    35% {
        transform:
            scale(0.72);
    }

    65% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }

}


@keyframes cameraGlow {

    0% {
        filter:
            drop-shadow(
                9px 12px 9px
                rgba(25, 15, 10, 0.45)
            );
    }

    25% {
        filter:
            drop-shadow(
                9px 12px 9px
                rgba(25, 15, 10, 0.45)
            )
            drop-shadow(
                0 0 18px
                rgba(255, 225, 165, 0.8)
            )
            drop-shadow(
                0 0 35px
                rgba(255, 210, 130, 0.55)
            );
    }

    45% {
        filter:
            drop-shadow(
                9px 12px 9px
                rgba(25, 15, 10, 0.45)
            )
            drop-shadow(
                0 0 28px
                rgba(255, 235, 185, 1)
            )
            drop-shadow(
                0 0 55px
                rgba(255, 210, 130, 0.75)
            );
    }

    65% {
        filter:
            drop-shadow(
                9px 12px 9px
                rgba(25, 15, 10, 0.45)
            )
            drop-shadow(
                0 0 18px
                rgba(255, 225, 165, 0.7)
            )
            drop-shadow(
                0 0 35px
                rgba(255, 210, 130, 0.45)
            );
    }

    100% {
        filter:
            drop-shadow(
                9px 12px 9px
                rgba(25, 15, 10, 0.45)
            );
    }

}


/* =====================================
   DEVELOPING PHOTO
===================================== */

.developing-photo {
    position: absolute;

    top: calc(50% + 12px);
    left: calc(50% + 105px);

    width: 72px;
    height: 82px;

    padding: 5px;

    background:
        #eee6d8;

    box-shadow:
        4px 6px 9px
        rgba(25, 15, 10, 0.4);

    opacity: 0;

    transform:
        rotate(7deg)
        translateY(25px);

    transition:
        opacity 0.45s ease,
        transform 0.55s ease;
}


/* =====================================
   PHOTO IMAGE AREA
===================================== */

.developing-photo-image {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            145deg,
            #b9aa91,
            #d7c8ad
        );

    position: relative;

    overflow: hidden;
}


.developing-photo-image::before {
    content: "";

    position: absolute;

    top: 13px;
    left: 9px;

    width: 44px;
    height: 34px;

    background:
        linear-gradient(
            135deg,
            #82745f,
            #b7a98d
        );

    box-shadow:
        inset 0 0 5px
        rgba(45, 30, 18, 0.25);
}


.developing-photo-image::after {
    content: "";

    position: absolute;

    right: 8px;
    bottom: 9px;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background:
        #8e7e65;

    box-shadow:
        inset 0 0 5px
        rgba(45, 30, 18, 0.3);
}


#photo-loader.photo-taken .developing-photo {
    opacity: 1;

    transform:
        rotate(7deg)
        translateY(0);
}


/* =====================================
   DEVELOPING TEXT
===================================== */

.photo-loading-text {
    margin-top: 28px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;

    opacity: 0;

    transition:
        opacity 0.35s ease;
}


#photo-loader.active .photo-loading-text {
    opacity: 1;
}


/* =====================================
   UPDATES LOADING SCREEN
===================================== */

#updates-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#updates-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   CALENDAR
===================================== */

.calendar-loader {
    position: relative;

    width: 235px;
    height: 270px;

    perspective: 900px;

    filter:
        drop-shadow(
            8px 12px 10px
            rgba(25, 15, 10, 0.45)
        );
}


.calendar-top {
    position: absolute;

    top: 0;
    left: 0;

    width: 235px;
    height: 45px;

    background:
        linear-gradient(
            to bottom,
            #625448,
            #40372f
        );

    border:
        2px solid #756657;

    border-radius:
        7px 7px 0 0;

    z-index: 3;
}


.calendar-rings {
    position: absolute;

    top: 7px;
    left: 0;

    width: 100%;

    display: flex;

    justify-content: space-around;
}


.calendar-rings span {
    display: block;

    width: 14px;
    height: 27px;

    border-radius: 8px;

    background:
        linear-gradient(
            to right,
            #9b8b78,
            #51483f,
            #a39481
        );

    border:
        1px solid #3a332d;

    box-shadow:
        1px 2px 3px
        rgba(0, 0, 0, 0.45);
}


.calendar-page {
    position: absolute;

    top: 35px;
    left: 8px;

    width: 219px;
    height: 225px;

    padding-top: 27px;

    background:
        linear-gradient(
            135deg,
            #eee2c9,
            #e2d2b5
        );

    border:
        1px solid #b5a384;

    text-align: center;

    color:
        #49382d;

    transform-origin:
        top center;

    animation:
        calendarFlip 1s ease-in-out 0.65s forwards;

    transform:
        rotateX(0deg);

    z-index: 2;

    box-shadow:
        inset 0 0 0 3px
        rgba(255, 248, 226, 0.28);
}


.calendar-month {
    font-size: 17px;

    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 4px;
}


.calendar-day {
    font-size: 75px;

    line-height: 0.95;

    font-weight: normal;

    letter-spacing: 2px;
}


.calendar-weekday {
    margin-top: 7px;

    font-size: 12px;

    letter-spacing: 4px;
}


.calendar-line {
    width: 72%;

    height: 1px;

    margin: 17px auto 12px;

    background:
        #a38c6c;
}


@keyframes calendarFlip {

    0% {
        transform:
            rotateX(0deg);
    }

    35% {
        transform:
            rotateX(-65deg);
    }

    55% {
        transform:
            rotateX(12deg);
    }

    72% {
        transform:
            rotateX(-7deg);
    }

    100% {
        transform:
            rotateX(0deg);
    }

}


/* =====================================
   UPDATES LOADING TEXT
===================================== */

.updates-loading-text {
    position: absolute;

    top: calc(50% + 35px);
    left: 50%;

    transform:
        translateX(-50%);

    color:
        #171411;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    font-weight: bold;

    letter-spacing: 6px;

    line-height: 1;

    opacity: 0;

    transition:
        opacity 0.35s ease;

    z-index: 3;
}


#updates-loader.active .updates-loading-text {
    opacity: 1;
}


.updates-loading-text span {
    display: inline-block;

    font-weight: bold;

    animation:
        loadingDot
        1.2s
        infinite
        ease-in-out;
}


.updates-loading-text span:nth-child(1) {
    animation-delay: 0s;
}

.updates-loading-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.updates-loading-text span:nth-child(3) {
    animation-delay: 0.4s;
}


@keyframes loadingDot {

    0%,
    60%,
    100% {
        opacity: 0.35;

        transform:
            translateY(0);
    }

    30% {
        opacity: 1;

        transform:
            translateY(-5px);
    }

}


/* =====================================
   GAMES LOADING SCREEN
===================================== */

#games-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#games-loader.active {
    opacity: 1;
    visibility: visible;
}


/* CARD CONTAINER */

.game-cards-loader {
    position: relative;

    width: 150px;
    height: 120px;

    filter:
        drop-shadow(
            7px 10px 9px
            rgba(25, 15, 10, 0.45)
        );
}


/* INDIVIDUAL CARDS */

.loading-card {
    position: absolute;

    top: 8px;
    left: 50%;

    width: 72px;
    height: 100px;

    margin-left: -36px;

    background: #eee6d8;

    border:
        1px solid #9d8e7b;

    border-radius: 5px;

    box-shadow:
        3px 5px 7px
        rgba(25, 15, 10, 0.35);

    display: flex;

    align-items: center;
    justify-content: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    font-weight: bold;
}


/* CARD STARTING POSITIONS */

.loading-card-one {
    color: #2e2925;

    transform:
        rotate(-15deg);

    z-index: 1;
}

.loading-card-two {
    color: #8f2e2e;

    transform:
        rotate(2deg);

    z-index: 2;
}

.loading-card-three {
    color: #2e2925;

    transform:
        rotate(17deg);

    z-index: 3;
}


/* =====================================
   SHUFFLE ANIMATION
===================================== */

@keyframes shuffleCardOne {

    0%,
    100% {
        transform:
            translateX(-3px)
            rotate(-10deg);
    }

    25% {
        transform:
            translateX(-14px)
            rotate(-14deg);
    }

    50% {
        transform:
            translateX(10px)
            rotate(-7deg);
    }

    75% {
        transform:
            translateX(-8px)
            rotate(-12deg);
    }

}


@keyframes shuffleCardTwo {

    0%,
    100% {
        transform:
            translateX(0)
            rotate(2deg);
    }

    25% {
        transform:
            translateX(10px)
            rotate(7deg);
    }

    50% {
        transform:
            translateX(-10px)
            rotate(-4deg);
    }

    75% {
        transform:
            translateX(13px)
            rotate(6deg);
    }

}


@keyframes shuffleCardThree {

    0%,
    100% {
        transform:
            translateX(3px)
            rotate(10deg);
    }

    25% {
        transform:
            translateX(-9px)
            rotate(7deg);
    }

    50% {
        transform:
            translateX(12px)
            rotate(14deg);
    }

    75% {
        transform:
            translateX(-11px)
            rotate(6deg);
    }

}


#games-loader.active .loading-card-one {
    animation:
        shuffleCardOne
        1s
        infinite
        ease-in-out;
}


#games-loader.active .loading-card-two {
    animation:
        shuffleCardTwo
        1s
        infinite
        ease-in-out;
}


#games-loader.active .loading-card-three {
    animation:
        shuffleCardThree
        1s
        infinite
        ease-in-out;
}


/* LOADING TEXT */

.games-loading-text {
    margin-top: 25px;

    color: #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    letter-spacing: 2px;
}


/* =====================================
   ABOUT ME — FINGERPRINT LOADING SCREEN
===================================== */

#about-loader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        rgba(31, 23, 19, 0.55);

    opacity: 0;

    visibility: hidden;

    z-index: 100;

    transition:
        opacity 0.25s ease;
}


#about-loader.active {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   FINGERPRINT
===================================== */

.fingerprint-loader {
    width: 190px;
    height: 170px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.fingerprint {
    width: 95px;
    height: 120px;

    position: relative;

    opacity: 1;

    transform:
        scale(1);

    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0px,
            transparent 4px,
            rgba(235, 215, 180, 0.9) 5px,
            rgba(235, 215, 180, 0.9) 7px,
            transparent 8px,
            transparent 11px
        );

    border-radius:
        48% 48% 43% 43%
        /
        42% 42% 55% 55%;

    filter:
        contrast(1.25)
        drop-shadow(
            0 0 7px
            rgba(255, 220, 170, 0.18)
        );

    animation:
        fingerprintPulse
        0.7s
        ease-in-out
        infinite;
}


@keyframes fingerprintPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            1;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            0.65;
    }

}


/* =====================================
   ABOUT LOADING TEXT
===================================== */

.about-loading-text {
    margin-top: 18px;

    color:
        #f1e5d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    letter-spacing:
        2px;

    opacity:
        1;
}


/* =====================================
   BOOKS PAGE
===================================== */

.books-page {
    min-height: 100vh;

    padding: 30px 8%;

    background: #e8dcc9;

    color: #34251d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


.back-to-desk {
    display: inline-block;

    margin-bottom: 20px;

    padding: 7px 11px;

    background: #f1e5d0;

    color: #34251d;

    text-decoration: none;

    font-weight: bold;

    font-size: 13px;

    border:
        1px solid #b8a58e;

    box-shadow:
        3px 4px 7px
        rgba(45, 25, 12, 0.25);
}


.back-to-desk:hover {
    background: #f7e8ca;

    transform:
        scale(1.05);
}


.books-page h1 {
    margin: 0;

    font-size: 42px;

    letter-spacing: 2px;
}


.books-intro {
    margin-top: 5px;

    margin-bottom: 25px;

    font-size: 16px;
}


.book-section {
    margin-bottom: 12px;
}


.book-section h2 {
    display: inline-block;

    margin-bottom: 12px;

    padding: 6px 11px;

    background: #f1e5d0;

    font-size: 21px;

    letter-spacing: 1px;

    box-shadow:
        3px 4px 7px
        rgba(45, 25, 12, 0.2);
}


.book-grid {
    display: flex;

    gap: 22px;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        5px 5px 12px;

    scroll-behavior:
        smooth;
}


.book-grid > * {
    flex:
        0 0 150px;
}


.book-card {
    flex:
        0 0 170px;
}


.book-card img {
    display: block;

    width: 170px;
    height: 250px;

    object-fit:
        contain;
}


.book-search {
    margin-bottom: 20px;
}


.book-search input {
    width: 300px;

    max-width: 100%;

    padding:
        9px 12px;

    box-sizing:
        border-box;

    background:
        #f1e5d0;

    color:
        #34251d;

    border:
        1px solid #b8a58e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    box-shadow:
        3px 4px 7px
        rgba(45, 25, 12, 0.2);
}


.book-search input::placeholder {
    color:
        #806f5d;
}


.book-search input:focus {
    outline: none;

    border-color:
        #8f7860;

    box-shadow:
        0 0 8px
        rgba(255, 214, 145, 0.7),

        3px 4px 7px
        rgba(45, 25, 12, 0.2);
}


.favorites-intro {
    margin-top: -8px;

    margin-bottom: 12px;

    font-size: 14px;

    font-style: italic;
}


.favorites-grid {
    padding-top: 3px;
}


.reading-stats {
    width: 100%;

    max-width: 700px;

    margin-bottom: 25px;

    padding:
        14px 18px;

    box-sizing:
        border-box;

    background:
        #f1e5d0;

    border:
        1px solid #b8a58e;

    box-shadow:
        4px 5px 9px
        rgba(45, 25, 12, 0.2);
}


.reading-stats h2 {
    margin:
        0 0 12px;

    padding: 0;

    background: none;

    box-shadow: none;

    font-size: 19px;

    letter-spacing: 1px;
}


.stats-grid {
    display: flex;

    gap: 35px;

    align-items: center;
}


.stat {
    display: flex;

    flex-direction: column;
}


.stat-number {
    font-size: 30px;

    font-weight: bold;
}


.stat-label {
    margin-top: 2px;

    font-size: 11px;

    letter-spacing: 1px;
}


/* =====================================
   BOOKS PAGE OVERRIDES
===================================== */

.books-body {
    display: block;

    width: 100%;
    min-height: 100vh;
    height: auto;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;
}
/* =========================================================
   BOOK OPENING TRANSITION
   ========================================================= */

.book-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eee6d8;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.35s ease;
}


/* When activated */

.book-transition.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* The physical book */

.book-opening {
    width: 27vw;
    max-width: 500px;

    transform:
        scale(1)
        rotate(5deg);

    transform-origin: center center;

    filter:
        brightness(0.88)
        saturate(0.82)
        drop-shadow(8px 12px 14px rgba(45, 25, 12, 0.42));

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1),
        filter 1.2s ease;
}


.book-opening img {
    display: block;

    width: 100%;
    height: auto;
}


/* Book flies toward you */

.book-transition.opening .book-opening {
    transform:
        scale(3.8)
        rotate(0deg);

    filter:
        brightness(0.95)
        saturate(0.9)
        drop-shadow(0 20px 35px rgba(0, 0, 0, 0.35));
}


/* Fade everything out at the end */

.book-transition.leaving {
    opacity: 0;
}


/* Mobile */

@media (max-width: 700px) {

    .book-opening {
        width: 45vw;
    }

    .book-transition.opening .book-opening {
        transform:
            scale(4.5)
            rotate(0deg);
    }

}