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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

body{

    overflow:hidden;

    font-family:Arial, sans-serif;

    height:100vh;

    color:white;

    background:
        linear-gradient(
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.60)
        ),
        url("images/background.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    position:relative;
}

/* Animated light overlay */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.04),
            transparent
        );

    animation:moveLight 10s linear infinite;

    pointer-events:none;

    z-index:0;
}

@keyframes moveLight{

    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(100%);
    }
}

/* =========================================
   TOOLBAR
========================================= */

.toolbar{

    position:fixed;

    top:15px;

    left:50%;

    transform:translateX(-50%);

    z-index:1500;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.15);

    border-radius:20px;

    box-shadow:
        0 8px 32px rgba(0,0,0,0.45);
}

.toolbar button{

    border:none;

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    color:white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    transition:0.3s;
}

.toolbar button:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );
}

#pageNumber{

    font-weight:bold;

    padding-left:10px;
}

/* =========================================
   MENU TOGGLE BUTTON
========================================= */

#menuToggle{

    position:fixed;

    top:20px;
    left:20px;

    z-index:2000;

    width:55px;
    height:55px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:28px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #15803d,
            #22c55e
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);

    transition:0.3s;
}

#menuToggle:hover{

    transform:scale(1.08);
}

/* =========================================
   MAIN LAYOUT
========================================= */

.main-container{

    width:100vw;
    height:100vh;

    display:flex;

    position:relative;
}

/* =========================================
   SIDEBAR
========================================= */

.thumbnail-panel{

    position:fixed;

    top:0;
    left:0;

    width:170px;

    height:100vh;

    overflow-y:auto;

    padding:
        90px 12px 20px;

    background:
        rgba(0,0,0,0.45);

    backdrop-filter:blur(14px);

    z-index:1200;

    transition:
        transform 0.4s ease;

    box-shadow:
        5px 0 25px rgba(0,0,0,0.4);
}

/* Hidden sidebar */

.thumbnail-panel.hidden{

    transform:translateX(-100%);
}

/* Mobile show */

.thumbnail-panel.show{

    transform:translateX(0);
}

/* Scrollbar */

.thumbnail-panel::-webkit-scrollbar{

    width:6px;
}

.thumbnail-panel::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,0.25);

    border-radius:20px;
}

/* =========================================
   THUMBNAILS
========================================= */

.thumbnail{

    width:100%;

    margin-bottom:12px;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    border:2px solid transparent;

    transition:0.3s;

    background:rgba(255,255,255,0.05);
}

.thumbnail:hover{

    transform:scale(1.04);

    border-color:#3b82f6;
}

.thumbnail.active{

    border-color:#22c55e;

    box-shadow:
        0 0 15px rgba(34,197,94,0.5);
}

.thumbnail img{

    width:100%;

    display:block;
}

/* =========================================
   FLIPBOOK AREA
========================================= */

.flipbook-container{

    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;

    z-index:10;
}

/* Glow effect */

.flipbook-container::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    background:
        radial-gradient(
            rgba(59,130,246,0.18),
            transparent 70%
        );

    filter:blur(80px);

    z-index:-1;
}

#flipbook{

    width:1200px;
    height:800px;

    transition:
        transform 0.3s ease;

    box-shadow:
        0 40px 100px rgba(0,0,0,0.65);

    border-radius:14px;
}

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

.page{

    background:white;

    overflow:hidden;
}

.page img{

    width:100%;
    height:100%;

    object-fit:cover;
}

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

#loading-screen{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #111827
        );

    transition:
        opacity 0.5s ease;
}

.loader{

    width:70px;
    height:70px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,0.15);

    border-top:6px solid white;

    animation:spin 1s linear infinite;

    margin-bottom:20px;
}

@keyframes spin{

    100%{
        transform:rotate(360deg);
    }
}

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

@media(max-width:900px){

    .toolbar{

        width:90%;

        flex-wrap:wrap;

        justify-content:center;
    }

    .thumbnail-panel{

        transform:translateX(-100%);
    }

    #flipbook{

        width:100%;
        height:90vh;
    }
}