/* =============================================================================
      style.css
   ============================================================================= */

   
:root{

    --cream:#FBF7EF;
    --cream-2:#F7F1E5;
    --cream-3:#EFE5D5;

    --gold:#DAAA63;
    --gold-light:#EBCB93;
    --gold-dark:#BB8547;

    --brown:#2C1810;
    --brown-soft:#5B463B;
    --brown-light:#8C7669;

    --border:#E7DCCD;

    --shadow-xs:
        0 8px 18px rgba(70,40,20,.05);

    --shadow-sm:
        0 14px 30px rgba(70,40,20,.07);

    --shadow:
        0 30px 90px rgba(60,35,18,.10);

    --radius-xl:42px;
    --radius-lg:26px;
    --radius:18px;

    --header-height:96px;

    --container:1480px;

    --transition:.28s cubic-bezier(.4,0,.2,1);

    --font-serif:"Libre Caslon Text",serif;
    --font-sans:"Montserrat",sans-serif;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#F3EBDD;

    color:var(--brown);

    font-family:var(--font-sans);

    overflow-x:hidden;

    min-height:100vh;

}




img{

    display:block;

    max-width:100%;

}

button,
input{

    font:inherit;

}

a{

    text-decoration:none;

    color:inherit;

}

#bg-canvas{

    position:fixed;

    inset:0;

    z-index:0;

    width:100%;

    height:100%;

}

.bg-overlay{

    position:fixed;

    inset:0;

    z-index:1;

    background:

        radial-gradient(

            circle at top,

            rgba(255,255,255,.45),

            transparent 55%

        ),

        linear-gradient(

            to bottom,

            rgba(255,255,255,.18),

            rgba(255,255,255,.08)

        );

}

.page-shell{

    position:relative;

    z-index:5;

    width:min(

        var(--container),

        calc(100% - 64px)

    );

    margin:34px auto;

    background:var(--cream);

    border-radius:44px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

/* =============================================================================
   SCROLLBAR GLOBAL
============================================================================= */

html{

    scrollbar-color:#C9984F transparent;

}

/* Chrome / Edge / Opera */

html::-webkit-scrollbar{

    width:18px;

}

html::-webkit-scrollbar-track{

    background:transparent;

}

html::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #E8C98B 0%,
            #D8B06A 40%,
            #C9984F 100%
        );

    border-radius:999px;

    border:2px solid transparent;

    background-clip:padding-box;

    transition:background .25s ease;

}

html::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #F2D79E 0%,
            #E2BD79 40%,
            #D2A45A 100%
        );

}

html::-webkit-scrollbar-corner{

    background:transparent;

}

/* ==========================================================================
   HEADER
============================================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:300;
    backdrop-filter:blur(22px);
    background:
        linear-gradient(
            rgba(251,247,239,.82),
            rgba(251,247,239,.72)
        );

    height:var(--header-height);
    padding:0 54px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}

.brand{
    display:flex;
    align-items:center;
}

.brand-logo{
    height:54px;
    width:auto;
}

.header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.header-button{
    height:50px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:999px;
    background:rgba(255,255,255,.58);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:
        0 10px 24px rgba(30,18,10,.08),
        inset 0 1px rgba(255,255,255,.65);
    color:var(--brown);
    transition:
        transform .25s,
        background .25s,
        box-shadow .25s;
}

.header-button i{
    font-size:.92rem;
    color:var(--gold-dark);
}

.header-button:not(.header-button-primary):hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.82);
    box-shadow:
        0 18px 34px rgba(30,18,10,.14);
}

.header-button-primary{
    background:
        linear-gradient(
            180deg,
            #E6BF7E,
            #D6A159
        );
    color:white;
}

.header-button-primary:hover{
    transform:translateY(-3px);
    background:
        linear-gradient(
            180deg,
            #EDC988,
            #DAAA63
        );
    box-shadow:
        0 18px 34px rgba(180,125,55,.28);
}

.header-button-primary i{
    color:white;
}

/* ==========================================================================
   HERO
============================================================================= */

.hero{

    display:grid;

    grid-template-columns:

        1.05fr

        .95fr;

    gap:70px;

    align-items:center;

    padding:

        20px

        72px

        80px;

}

.hero-content{

    max-width:650px;

}

.publisher-logo{

    width:340px;

    margin-bottom:34px;

}

.hero-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 18px;

    border-radius:999px;

    background:#F4E7D2;

    color:var(--gold-dark);

    font-size:.78rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:28px;

}

.hero h1{

    font-family:var(--font-serif);

    font-size:4.3rem;

    font-weight:400;

    line-height:1.05;

    margin-bottom:26px;

}

.hero strong{

    color:var(--gold-dark);

    font-weight:700;

}

.hero p{

    color:var(--brown-light);

    line-height:1.9;

    font-size:1.04rem;

    margin-bottom:42px;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:640px;

    filter:

        drop-shadow(

            0 50px 60px

            rgba(55,35,20,.18)

        );

}

/* ==========================================================================
   SEARCH
============================================================================= */

.search-wrapper{

    position:relative;

    margin-bottom:28px;

}

.search-icon{

    position:absolute;

    width:18px;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#A38E80;

}

#search{

    width:100%;

    height:62px;

    border-radius:999px;

    border:1px solid var(--border);

    background:white;

    padding-left:58px;

    padding-right:22px;

    transition:var(--transition);

}

#search:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:

        0 0 0 4px

        rgba(218,170,99,.12);

}

/* ==========================================================================
   CATEGORIAS
============================================================================= */

.categories{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.category-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 18px;

    border-radius:999px;

    background:#F3E7D6;

    color:var(--brown-soft);

    cursor:pointer;

    user-select:none;

    transition:var(--transition);

    border:1px solid transparent;

    font-size:.88rem;

}

.category-chip:hover{

    background:var(--gold);

    color:var(--brown);

}

.category-chip.active{

    background:var(--gold);

    color:var(--brown);

    border-color:

        rgba(0,0,0,.08);

}

/* ==========================================================================
   LIBRARY
============================================================================= */

.library{

    padding:

        0

        72px

        80px;

}

.library-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:40px;

}

.library-top h2{

    font-family:var(--font-serif);

    font-size:2.8rem;

    font-weight:400;

    margin-bottom:10px;

}

.library-top p{

    color:var(--brown-light);

}

.view-selector{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-radius:999px;
    background:#F3E7D6;
}

.view-button{
    border:none;
    background:transparent;
    height:44px;
    padding:0 20px;
    border-radius:999px;
    cursor:pointer;
    color:var(--brown-soft);
    transition:var(--transition);
}

.view-button:hover{
    background:white;
}

.view-button.active{
    background:var(--gold);
    color:var(--brown);
}

/* ==========================================================================
   PALCO
============================================================================= */

.library-stage{
    position:relative;
    min-height:470px;
    perspective:2200px;
}

.books-container{
    position:relative;
    width:100%;
    min-height:520px;
    padding-bottom:42px;
}

/* ==========================================================================
   ESTEIRA
============================================================================= */

.books-shelf{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:34px;
    pointer-events:none;
}

.books-shelf-top{
    position:absolute;
    left:0;
    right:0;
    top:10px;
    height:18px;
    border-radius:14px 14px 4px 4px;
    background:
        linear-gradient(
            to bottom,
            #F4E2C4,
            #E7C694
        );
}

.books-shelf-front{
    position:absolute;
    left:0;
    right:0;
    top:8px;
    height:26px;
    border-radius:0 0 14px 14px;
    background:
        linear-gradient(
            to bottom,
            #D9B27A,
            #BF8D53
        );

    box-shadow:
        inset 0 2px rgba(255,255,255,.28),
        0 22px 38px rgba(70,40,20,.18);
}

/* ==========================================================================
   SETAS
============================================================================= */

.nav-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:var(--shadow-sm);

    color:var(--brown);

    cursor:pointer;

    transition:var(--transition);

    z-index:50;

}

.nav-arrow:hover{

    background:var(--gold);

}

.nav-arrow.left{

    left:-26px;

}

.nav-arrow.right{

    right:-26px;

}

/* ==========================================================================
   CARDS
============================================================================= */

.book-card{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.book-button{
    border:none;
    background:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.book-3d{
    position:relative;
    width:180px;
    aspect-ratio:1/1.46;
   transform-style:preserve-3d;
    transition:
        transform .45s,
        filter .45s;

    filter:
        drop-shadow(
            0 30px 30px
            rgba(40,20,10,.18)
        );

}

.book-button:hover .book-3d{
    transform:
        translateY(-14px)
        rotateY(-7deg)
        rotateX(2deg);
}

/* =============================================================================
   CAPA
============================================================================= */

.book-cover{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:6px;
    background:white;
    transform:
        translateZ(14px);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.06);
}

.book-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.book-generated{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px;
    background:
        linear-gradient(
            145deg,
            var(--cover-primary,#EFE5D5),
            white
        );
}

.generated-title{
    font-family:var(--font-serif);
    font-size:1rem;
    line-height:1.35;
}

.generated-author{
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--brown-soft);
}

.book-gloss{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            transparent 28%,
            rgba(255,255,255,.55) 48%,
            transparent 70%
        );
    opacity:0;
    transition:.45s;
}

.book-button:hover .book-gloss{
    opacity:1;
}

/* =============================================================================
   PÁGINAS
============================================================================= */

.book-pages{
    position:absolute;
    top:2px;
    right:-8px;
    width:16px;
    height:98%;
    transform:
        rotateY(90deg)
        translateZ(8px);
    background:
        repeating-linear-gradient(
            to right,
            #fbfaf7 0,
            #fbfaf7 1px,
            #ece4d7 2px,
            #ece4d7 3px
        );
}

/* =============================================================================
   LOMBADA 3D
============================================================================= */

.book-spine{
    position:absolute;
    top:0;
    left:-18px;
    width:18px;
    height:100%;
    transform-origin:right;
    transform:
        rotateY(90deg);
    background:
        linear-gradient(
            to bottom,
            var(--cover-spine,#DCC7B0),
            color-mix(in srgb,var(--cover-spine,#DCC7B0) 72%,black)
        );

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:10px 3px;
}

.spine-band{
    width:12px;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,.45);
}

.spine-title{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:.55rem;
    font-weight:600;
    color:white;
    text-align:center;
    line-height:1.2;
}

.spine-author{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:.42rem;
    color:rgba(255,255,255,.82);
    text-align:center;
}

/* =============================================================================
   FITA
============================================================================= */

.book-ribbon{
    position:absolute;
    top:12px;
    right:-10px;
    background:#E9C0B7;
    color:#7D3527;
    padding:6px 12px;
    border-radius:8px;
    font-size:.68rem;
    font-weight:600;
    display:none;
}

.book-card.unavailable

.book-ribbon{
    display:block;
}

/* =============================================================================
   LEGENDA
============================================================================= */

.book-caption{
    width:100%;
    max-width:210px;
    text-align:center;
    margin-top: 10px;
}

.caption-title{
    font-family:var(--font-serif);
    font-size:1.05rem;
    font-weight:400;
    line-height:1.35;
    margin-bottom:6px;
    text-wrap:balance;
    min-height:64px;
}

.caption-author{
    font-size:.80rem;
    color:var(--brown-light);
    line-height:1.5;
    min-height:22px;
}

/* =============================================================================
   CARROSSEL
============================================================================= */

.books-container.carousel{
    display:flex;
    align-items:flex-end;
    gap:42px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    padding: 30px 40px 36px;
    scrollbar-width:none;
}

.books-container.carousel::-webkit-scrollbar{
    display:none;
}


/* =============================================================================
   GALERIA 3D (COVERFLOW)
============================================================================= */

.books-container.gallery{

    position:relative;

    width:100%;

    height:540px;

    overflow:hidden;

    perspective:2200px;

}

.books-container.gallery .book-card{

    position:absolute;

    left:50%;

    bottom:36px;

    margin:0;

    transform-style:preserve-3d;

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease,
        filter .45s ease;

    will-change:transform;

}

/* ---------- CENTRAL ---------- */

.books-container.gallery .book-card.center{

    transform:
        translateX(-50%)
        translateZ(120px)
        scale(1.22);

    z-index:50;

    opacity:1;

}

/* ---------- ESQUERDA PRÓXIMA ---------- */

.books-container.gallery .book-card.left1{

    transform:
        translateX(calc(-50% - 250px))
        translateZ(40px)
        rotateY(38deg)
        scale(.82);

    opacity:.90;

    z-index:40;

}

/* ---------- ESQUERDA DISTANTE ---------- */

.books-container.gallery .book-card.left2{

    transform:
        translateX(calc(-50% - 430px))
        translateZ(-40px)
        rotateY(55deg)
        scale(.62);

    opacity:.45;

    z-index:30;

}

/* ---------- DIREITA PRÓXIMA ---------- */

.books-container.gallery .book-card.right1{

    transform:
        translateX(calc(-50% + 250px))
        translateZ(40px)
        rotateY(-38deg)
        scale(.82);

    opacity:.90;

    z-index:40;

}

/* ---------- DIREITA DISTANTE ---------- */

.books-container.gallery .book-card.right2{

    transform:
        translateX(calc(-50% + 430px))
        translateZ(-40px)
        rotateY(-55deg)
        scale(.62);

    opacity:.45;

    z-index:30;

}

/* ---------- OCULTOS ---------- */

.books-container.gallery .book-card.hidden{

    transform:
        translateX(-50%)
        scale(.30);

    opacity:0;

    pointer-events:none;

}

/* ---------- MOCKUP ---------- */

.books-container.gallery .book-3d{

    margin-bottom:-2px;

}

/* ---------- SOMBRAS ---------- */

.books-container.gallery .center .book-cover{

    box-shadow:
        0 28px 60px rgba(0,0,0,.18),
        0 8px 20px rgba(218,170,99,.15);

}

.books-container.gallery .left1 .book-cover,
.books-container.gallery .right1 .book-cover{

    box-shadow:
        0 18px 36px rgba(0,0,0,.14);

}

.books-container.gallery .left2 .book-cover,
.books-container.gallery .right2 .book-cover{

    box-shadow:
        0 10px 22px rgba(0,0,0,.10);

}

/* ---------- SEM LEGENDA ---------- */

.books-container.gallery .book-caption{

    display:none;

}

/* =============================================================================
   GRADE
============================================================================= */

.books-container.grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px,1fr)
        );

    gap:70px 44px;
    padding: 30px 10px 10px;
}

.books-container.grid .book-card{
    justify-content:center;
}

/* =============================================================================
   LOMBADAS
============================================================================= */

.books-container.spines{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:2px;
    min-height:560px;
    padding:40px 0 34px;
}

.books-container.spines .book-card{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.books-container.spines .book-button{
    gap:0;
}

.books-container.spines .book-caption,
.books-container.spines .book-pages,
.books-container.spines .book-cover{
    display:none;
}

.books-container.carousel .book-card,
.books-container.gallery .book-card,
.books-container.grid .book-card{
    padding-bottom:0;
}

.books-container.spines .book-3d{

    width:var(--spine-width);
    height:var(--spine-height);
    aspect-ratio:auto;
    margin-bottom:-3px;

    transform-origin:bottom center;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        filter .35s;

    filter:
        drop-shadow(
            0 10px 16px rgba(40,20,10,.14)
        );

}

.books-container.spines .book-spine{
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:100%;
    transform:none;
    border-radius:6px 6px 0 0;
    overflow:hidden;
    transition:
        box-shadow .35s ease,
        filter .35s ease;
    box-shadow:
        inset 2px 0 rgba(255,255,255,.18),
        inset -2px 0 rgba(0,0,0,.08);
}

.books-container.spines .book-spine::after{
    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            105deg,

            transparent 18%,

            rgba(255,255,255,.06) 35%,

            rgba(255,220,160,.24) 52%,

            rgba(255,255,255,.10) 66%,

            transparent 82%

        );

    opacity:0;

    transition:

        opacity .35s,

        transform .45s;

    transform:translateX(-40%);

}

.books-container.spines .book-card:hover .spine-title{
    color:#FFF;
    text-shadow:
        0 1px 2px rgba(0,0,0,.20);
    letter-spacing:.05em;
}

.books-container.spines .book-card:hover .spine-author{
    color:rgba(255,255,255,.96);
}

.books-container.spines:hover .book-card:not(:hover){
    opacity:.55;
    filter:grayscale(.12);
    transition:.35s;
}

.books-container.spines .spine-author{
    font-size:.55rem;
    opacity:.82;
    transition:opacity .35s ease;
}

/* ==========================================================
   HOVER
========================================================== */

.books-container.spines:hover .book-card{
    opacity:.45;
    filter:
        grayscale(.45);
}

.books-container.spines .book-card:hover{
    opacity:1;
    filter:none;
    z-index:50;
}

.books-container.spines .book-card:hover .book-3d{
    transform:
        translateY(-12px)
        rotateY(-8deg)
        scale(1.05);
    filter:
        drop-shadow(
            0 24px 42px rgba(44,24,16,.18)
        )
        drop-shadow(
            0 0 22px rgba(218,170,99,.18)
        );
}

.books-container.spines .book-card:hover .book-spine{

    filter:none;

    opacity:1;

    box-shadow:

        inset 2px 0 rgba(255,255,255,.08),

        inset -2px 0 rgba(0,0,0,.10),

        0 16px 34px rgba(44,24,16,.18);

}

.books-container.spines .book-card:hover .book-spine::after{
    opacity:0;
}

.books-container.spines .book-card:hover .spine-title{
    letter-spacing:.05em;
}

.books-container.spines .book-card:hover .spine-author{
    opacity:1;
}

/* =============================================================================
   MODAL
============================================================================= */

.book-modal{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    max-width:none;
    max-height:none;
    margin:auto;
    padding:40px;
    border:none;
    background:transparent;
    display:none;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.book-modal[open]{
    display:flex;
}

.book-modal::backdrop{
    background:
        rgba(34,20,12,.42);
    backdrop-filter:
        blur(14px);
}

.modal-window{
    position:relative;
    width:min(1040px,90vw);
    height:min(760px,88vh);
    background:var(--cream);
    border-radius:34px;
    overflow:hidden;
    box-shadow: 0 45px 120px rgba(20,10,5,.30);
}

.modal-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    height:100%;
}

.modal-left{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:48px;
    background:
        radial-gradient(
            circle at top,
            #FFF,
            #F3E9DA
        );
}

.modal-book{
    width:190px;
    aspect-ratio:1/1.48;
    border-radius:10px;
    background-size:cover;
    background-position:center;
    box-shadow:
        0 28px 50px rgba(30,20,10,.22);
}

.modal-right{
    padding:54px;
    overflow-y:auto;
    height:100%;
}

.modal-categories{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.modal-categories span{
    display:inline-flex;
    align-items:center;
    height:34px;
    padding:0 14px;
    border-radius:999px;
    background:#F4E8D6;
    color:var(--gold-dark);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', 'Inter', Helvetica, Arial, sans serif;
}

#modal-title{
    font-family:var(--font-serif);
    font-size:2.55rem;
    line-height:1.15;
    font-weight:400;
    margin-bottom:14px;
}

#modal-author{
    font-size:1rem;
    color:var(--brown-light);
    font-weight:500;
    margin-bottom:24px;
}

.modal-meta{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    padding-bottom:28px;
    margin-bottom:30px;
    border-bottom: 1px solid var(--border);
}

.modal-meta div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.modal-meta small{
    color:var(--brown-light);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.68rem;
}

.modal-meta strong{
    font-weight:600;
}

.modal-description{
    display:flex;
    flex-direction:column;
    gap:18px;
    color:var(--brown-soft);
    line-height:1.9;
}

.modal-description p{
    margin:0;
}

.modal-gallery{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(120px,1fr));
    gap:14px;
    margin-top:42px;
}

.modal-gallery img{
    width:100%;
    border-radius:10px;
    box-shadow:var(--shadow-xs);
}

.modal-close{
    position:absolute;
    top:22px;
    right:22px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:white;
    cursor:pointer;
    font-size:24px;
    box-shadow:var(--shadow-xs);
    transition:var(--transition);
    z-index:30;
}

.modal-close:hover{
    background:var(--gold);
}

/* ==========================================================
   Modal Animation
========================================================== */

.book-modal{
    opacity:0;
    transition:opacity .30s ease;
}

.book-modal.visible{
    opacity:1;
}

.modal-window{
    opacity:0;
    transform:
        translateY(22px)
        scale(.96);
    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        opacity .30s ease;
}

.book-modal.visible .modal-window{
    opacity:1;
    transform:
        translateY(0)
        scale(1);
}

.book-modal.closing .modal-window{
    opacity:0;
    transform:
        translateY(18px)
        scale(.97);
}

.book-modal.closing{
    opacity:0;
}

/* =============================================================================
   Empty State
============================================================================= */

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    min-height:360px;
    text-align:center;
}

.empty-state[hidden]{
    display:none !important;
}

.empty-state h3{
    font-family:var(--font-serif);
    font-size:2rem;
    font-weight:400;
}

.empty-state p{
    color:var(--brown-light);
    max-width:460px;
    line-height:1.8;
}

/* =============================================================================
   FOOTER
============================================================================= */

.site-footer{
    padding: 80px 72px  60px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
}

.footer-logo img{
    width:240px;
}

.site-footer p{
    color:var(--brown-light);
    max-width:760px;
    line-height:1.9;
}

.site-footer p:first-of-type{
    color:var(--brown);
    font-weight:600;
}

/* =============================================================================
   UTILITÁRIOS
============================================================================= */

.hidden{
    display:none!important;
}

.fade-in{
    animation:fade .45s ease;
}

@keyframes fade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes floatBook{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.hero-image img{
    animation:
        floatBook
        7s
        ease-in-out
        infinite;
}

/* ==========================================================
   SCROLLBAR DOURADA NO MODAL
========================================================== */

.modal-right{
    scrollbar-width:thin;
    scrollbar-color:
        #C79B56
        transparent;
}

.modal-right::-webkit-scrollbar{
    width:10px;
}

.modal-right::-webkit-scrollbar-track{
    background:transparent;
}

.modal-right::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #E8C98B,
            #C9984F
        );
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
}

.modal-right::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #F0D39C,
            #D7A45C
        );
}

.modal-right::-webkit-scrollbar-corner{
    background:transparent;
}


/* ==========================================================
ABOUT
========================================================== */

.about-editora{

padding:

30px

72px

80px;

}

.about-content{

max-width:920px;

margin:auto;

text-align:center;

}

.about-eyebrow{

display:inline-flex;

padding:9px 18px;

border-radius:999px;

background:#F5E8D5;

color:#BB8547;

font-size:.78rem;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:28px;

}

.about-editora h2{

font-family:var(--font-serif);

font-size:3rem;

font-weight:400;

margin-bottom:28px;

line-height:1.15;

}

.about-editora p{

font-size:1.05rem;

line-height:2;

color:var(--brown-light);

margin-bottom:24px;

}

/* ==========================================================
TIMELINE
========================================================== */

.timeline{
    max-width:980px;
    margin:auto;
    padding:30px 0 60px;
    display:flex;
    flex-direction:column;
    gap:46px;
}

.timeline[hidden]{
    display:none !important;
}

.books-container[hidden]{
    display:none !important;
}

.timeline-year{
    display:grid;
    grid-template-columns: 120px 1fr;
    gap:36px;
}

.timeline-date{
    font-family:var(--font-serif);
    font-size:2.2rem;
    color:var(--gold-dark);
}

.timeline-books{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-left:30px;
    border-left: 2px solid #E9DDCA;
}

.timeline-book{
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    transition:.25s;
}

.timeline-book:hover{
    transform:translateX(8px);

}

.timeline-title{
    font-family:var(--font-serif);
    font-size:1.18rem;
}

.timeline-author{
    color:var(--brown-light);
    font-size:.86rem;
}


[hidden]{
    display:none !important;
}


/* =============================================================================
   RESPONSIVO
============================================================================= */

@media (max-width:1280px){

.hero{
    grid-template-columns:1fr;
    gap:60px;
    text-align:center;
}

.hero-content{
    margin:auto;
}

.publisher-logo{
    margin-inline:auto;
}

.categories{
    justify-content:center;
}

.library-top{
    flex-direction:column;
    align-items:flex-start;
}

.modal-grid{
    grid-template-columns:1fr;
}

.modal-left{
    padding:40px;
}

}

/* Tablets */

@media (max-width:1024px){

    .page-shell{

        width:calc(100% - 32px);

        margin:16px;

        border-radius:32px;

    }

    .site-header{

        padding:24px 36px;

    }

    .hero{

        grid-template-columns:1fr;

        gap:48px;

        text-align:center;

        padding:30px 36px 60px;

    }

    .hero-content{

        max-width:720px;

        margin:auto;

    }

    .publisher-logo{

        width:280px;

        margin-inline:auto;

    }

    .hero h1{

        font-size:3.3rem;

    }

    .categories{

        justify-content:center;

    }

    .library{

        padding:0 36px 60px;

    }

    .library-top{

        flex-direction:column;

        align-items:flex-start;

        gap:24px;

    }

    .view-selector{

        width:100%;

        overflow:auto;

        scrollbar-width:none;

    }

}

@media (max-width:900px){

.page-shell{
    width:calc(100% - 24px);
    margin:12px;
    border-radius:28px;
}

.site-header{
    padding:24px;
    height:auto;
    flex-direction:column;
    gap:28px;
}

.hero{
    padding:20px 28px 60px;
}

.library{
    padding:0 28px 60px;
}

.hero h1{
    font-size:2.9rem;
}

.publisher-logo{
    width:260px;
}

.view-selector{
    overflow:auto;
    width:100%;
}

.nav-arrow{
    display:none;
}

.site-footer{
    padding:60px 28px;
}

.modal-right{
    padding:40px 30px;
}

}

@media (max-width:640px){

    .page-shell{

        width:100%;

        margin:0;

        border-radius:0;

    }

    .site-header{

        padding:22px;

        gap:20px;

    }

    .header-right{

        width:100%;

        display:grid;

        grid-template-columns:1fr 1fr;

    }

    .header-button{

        width:100%;

    }

    .hero{

        padding:24px;

        gap:34px;

    }

    .publisher-logo{

        width:220px;

    }

    .hero h1{

        font-size:2.15rem;

        line-height:1.15;

    }

    .hero p{

        font-size:.95rem;

    }

    .hero-image img{

        max-width:300px;

    }

    .search-wrapper{

        margin-bottom:22px;

    }

    #search{

        height:56px;

    }

    .categories{

        justify-content:center;

        gap:10px;

    }

    .category-chip{

        font-size:.78rem;

        padding:0 14px;

        height:36px;

    }

    .library{

        padding:0 20px 50px;

    }

    .library-top h2{

        font-size:2rem;

    }

    .view-selector{
        width:100%;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:4px;
        padding:4px;
    }

    .view-button{
        width:100%;
        height:42px;
        padding:0;
        border-radius:12px;
    }

    .view-button span{
        display:none;
    }

    .view-button i{
        display:block;
        font-size:1rem;
    }

    .library-stage{
        min-height:340px;
    }

    .books-container{
        min-height:360px;
    }

    .book-3d{
        width:120px;
    }

    .books-container.carousel{
        gap:22px;
        padding:20px 12px 30px;
    }

    .books-container.grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px 14px;
    }

    .books-container.spines{
        justify-content:flex-start;
        overflow-x:auto;
        padding:20px 0 40px;
    }

    .books-shelf{
        display:none;
    }

    .nav-arrow{
        display:none;
    }

    /* -------- Modal -------- */

    .book-modal{
        padding:12px;
    }

    .modal-window{
        width:100%;
        height:100%;
        max-height:none;
        border-radius:22px;
    }

    .modal-grid{
        grid-template-columns:1fr;
    }

    .modal-left{
        padding:28px 20px;
    }

    .modal-book{
        width:150px;
    }

    .modal-right{
        padding:24px;
    }

    #modal-title{
        font-size:2rem;
    }

    .modal-meta{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
    }

    .modal-gallery{
        grid-template-columns:repeat(2,1fr);
    }

    /* -------- Timeline -------- */

    .timeline{
        gap:30px;
    }

    .timeline-year{
        grid-template-columns:1fr;
        gap:12px;
    }

    .timeline-books{
        border-left:none;
        padding-left:0;
        border-top:2px solid var(--border);
        padding-top:16px;
    }

    .timeline-date{
        font-size:1.8rem;
    }

    .site-footer{
        padding:50px 24px;
    }

}