*,::after,::before{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background:#111;
    color:#1a1a1a;
    line-height:1.5;
    overflow-x:hidden;
    }
    @keyframes portfolioGlow{
        0%,100%{
            transform:translate3d(-3%,-2%,0) scale(1);opacity:.85
        }
        50%{
            transform:translate3d(3%,2%,0) scale(1.04);opacity:1
        }
    }
    @keyframes portfolioDrift{
        0%,100%{
            transform:translate3d(0,0,0)
        }
        50%{
            transform:translate3d(16px,-10px,0)
        }
    }
    @keyframes portfolioPulse{
        0%,100%{
            transform:translateY(-50%) scale(1);opacity:.8
        }
        50%{
            transform:translateY(-50%) scale(1.03);opacity:1
        }
    }
    .portfolio-section{
        position:relative;
        width:100%;
        min-height:720px;
        background:linear-gradient(135deg,#0c1927 0,#17344f 45%,#b78c50 100%);
        overflow:hidden;
        display:flex;
        align-items:center;
        isolation:isolate;
    }
    .portfolio-section::after,.portfolio-section::before{
        content:"";
        position:absolute;
        inset:auto;
        border-radius:50%;
        filter:blur(0);
        pointer-events:none;
        z-index:0;
    }
    .portfolio-section::before{
        width:460px;
        height:460px;
        top:-120px;
        left:-140px;
        background:radial-gradient(circle,rgba(183,140,80,.34) 0,rgba(183,140,80,0) 70%);
        animation:portfolioGlow 12s ease-in-out infinite;
    }
    .portfolio-section::after{
        width:560px;
        height:560px;
        right:-140px;
        bottom:-180px;
        background:radial-gradient(circle,rgba(12,25,39,.4) 0,rgba(12,25,39,0) 70%);
        animation:portfolioGlow 16s ease-in-out infinite reverse;
    }
    .portfolio-inner{
        position:relative;
        width:100%;
        max-width:1400px;
        margin:0 auto;
        padding:60px 40px 80px;
        display:grid;
        grid-template-columns:1fr 1.35fr;
        gap:40px;
        align-items:center;
        z-index:2;
    }
    .portfolio-content{
        position:relative;
        z-index:5;
        max-width:420px;
        padding-left:20px;
    }
    .portfolio-content h2{
        font-size:clamp(1.9rem, 3.2vw, 2.75rem);
        font-weight:700;
        color:#f8efe3;
        letter-spacing:-.02em;
        margin-bottom:18px;
        line-height:1.15;
    }
    .portfolio-content .subtitle{
        font-size:.95rem;
        color:rgba(248,239,227,.9);
        margin-bottom:42px;
        max-width:360px;
        line-height:1.55;
    }
    .category-list{
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:14px;
        }
        .category-list li{
            position:relative;
            font-size:1.05rem;
            font-weight:500;
            color:rgba(248,239,227,.92);
            cursor:pointer;
            padding:4px 0 4px 28px;
            transition:color .25s ease,transform .25s ease;
            user-select:none;
        }
        .category-list li:hover{
            color:#b78c50;
            transform:translateX(4px);
        }
        .category-list li.active{
            color: #b78c50;
            font-weight:600;
        }
        .category-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:50%;
            transform:translateY(-50%) scaleX(0);
            width:18px;
            height:3.5px;
            background:linear-gradient(90deg,#b78c50 0,#f2d6a1 100%);
            border-radius:2px;
            transition:transform .32s cubic-bezier(.34, 1.56, .64, 1);
            transform-origin:left center;
        }
        .category-list li.active::before{
            transform:translateY(-50%) scaleX(1);
        }
        .books-showcase{
            position:relative;
            height:560px;
            width:100%;
            z-index:3;
        }
        .book{
            position:absolute;
            width:148px;
            height:222px;
            border-radius:3px 6px 6px 3px;
            box-shadow:0 14px 32px rgba(0,0,0,.32),0 5px 12px rgba(0,0,0,.18),inset -3px 0 0 rgba(0,0,0,.12);
            overflow:hidden;
            cursor:pointer;
            transition:opacity .4s ease,transform .55s cubic-bezier(.22, 1, .36, 1),box-shadow .3s ease;
            will-change:transform,opacity;
        }
        .book::after{
            content:"";
            position:absolute;
            top:0;
            right:0;
            width:5px;
            height:100%;
            background:linear-gradient(to right,rgba(255,255,255,.25),rgba(0,0,0,.15));
            border-radius:0 5px 5px 0;
            pointer-events:none;
        }
        .book:hover{
            box-shadow:0 22px 48px rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.25);
            z-index:30!important;
        }
        .book-cover{
            position:absolute;
            inset:0;
            display:block;
            background:0 0;
        }
        .book-cover-image{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }
        .book-cover .book-title{
            font-size:.78rem;
            font-weight:700;
            line-height:1.25;
            letter-spacing:.01em;
            text-shadow:0 1px 3px rgba(0,0,0,.4);
        }
        .book-cover .book-author{
            font-size:.65rem;
            font-weight:500;
            opacity:.9;
            margin-top:6px;
            text-shadow:0 1px 2px rgba(0,0,0,.3);
        }
        .book-cover .book-decoration{
            font-size:1.8rem;
            opacity:.25;
            align-self:center;
            margin:auto 0;
        }
        .book.enter{
            opacity:0;
            transform:scale(.82) translateY(40px)!important;
        }
        .book.visible{
            opacity:1;
        }
        .book.exit{
            opacity:0;
            transform:scale(.88) translateY(-25px)!important;
            pointer-events:none;
        }
        .book:first-child{
            top:6%;
            left:1%;
            transform:rotate(-13deg);z-index:6;
        }
        .book:nth-child(2){
            top:0;
            left:27%;
            transform:rotate(8deg);z-index:5;
        }
        .book:nth-child(3){
            top:-2%;
            left:53%;
            transform:rotate(-7deg);z-index:7;
        }
        .book:nth-child(4){
            top:26%;
            left:16%;
            transform:rotate(12deg);z-index:8;
        }
        .book:nth-child(5){
            top:20%;
            left:41%;
            transform:rotate(-10deg);
            z-index:9;
        }
        .book:nth-child(6){
            top:16%;
            left:67%;
            transform:rotate(6deg);
            z-index:6;
        }
        .book:nth-child(7){
            top:50%;
            left:6%;
            transform:rotate(-8deg);z-index:7;
        }
        .book:nth-child(8){
            top:46%;
            left:33%;
            transform:rotate(14deg);
            z-index:10;
        }
        .book:nth-child(9){
            top:42%;
            left:59%;
            transform:rotate(-5deg);
            z-index:8;
        }
        .book:nth-child(10){
            top:66%;
            left:46%;
            transform:rotate(9deg);
            z-index:5;
        }
        .bg-portfolio-text{
            position:absolute;
            bottom:-25px;
            left:15px;
            font-size:clamp(6.5rem, 18vw, 15rem);
            font-weight:800;
            color:transparent;
            background:linear-gradient(90deg,#b78c50 0,#f2d6a1 45%,#0c1927 100%);
            -webkit-background-clip:text;
            background-clip:text;
            opacity:.24;
            letter-spacing:-.04em;
            line-height:.85;
            z-index:1;
            pointer-events:none;
            user-select:none;
            white-space:nowrap;
            animation:portfolioDrift 12s ease-in-out infinite;
        }
        .bg-circle{
            position:absolute;
            width:640px;
            height:640px;
            border-radius:50%;
            border:1.5px solid rgba(183,140,80,.4);
            top:48%;
            right:6%;
            transform:translateY(-50%);
            z-index:1;
            pointer-events:none;
            box-shadow:0 0 45px rgba(183,140,80,.16);
            animation:portfolioPulse 10s ease-in-out infinite;
        }
        .bg-circle::before{
            content:"";
            position:absolute;
            inset:45px;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.16);
            animation:portfolioPulse 8s ease-in-out infinite reverse;
        }
        @media (max-width:1200px)
        {
            .portfolio-inner{
                padding:50px 32px 70px;
                gap:30px;
            }
            .book{
                width:135px;
                height:203px;
            }
        }
        @media (max-width:992px)
        {
            .portfolio-section{
                min-height:auto;
            }
            .portfolio-inner{
                grid-template-columns:1fr;
                gap:40px;
                padding:50px 28px 60px;
            }
            .portfolio-content{
                max-width:100%;
                padding-left:0;
                text-align:left;
            }
            .portfolio-content .subtitle{
                max-width:520px;
            }
            .books-showcase{
                height:500px;
                max-width:620px;
                margin:0 auto;
            }
            .bg-portfolio-text{
                font-size:6rem;
                bottom:-10px;
                left:-10px;
            }
            .bg-circle{
                width:480px;
                height:480px;
                right:50%;
                transform:translate(50%,-50%);
                opacity:.7
            }
        }
        @media (max-width:768px){
            .portfolio-inner{
                padding:40px 20px 50px;
                gap:28px;
            }
            .portfolio-content h2{
                font-size:1.85rem;
            }
            .portfolio-content .subtitle{
                font-size:.9rem;
                margin-bottom:32px;
            }
            .category-list{
                gap:12px;
            }
            .category-list li{
                font-size:1rem;
            }
            .books-showcase{
                height:420px;
                max-width:100%;
            }
            .book{
                width:120px;
                height:180px;
            }
            .book-cover{
                padding:12px 11px 14px;
            }
            .book-cover .book-title{
                font-size:.7rem;
            }
            .book-cover .book-author{
                font-size:.58rem;
            }
            .book-cover .book-decoration{
                font-size:1.4rem;
            }
            .book:first-child{
                top:4%;
                left:0;
            }
            .book:nth-child(2){
                top:0;
                left:26%;
            }
            .book:nth-child(3){
                top:-2%;
                left:52%;
            }
            .book:nth-child(4){
                top:28%;
                left:14%;
            }
            .book:nth-child(5){
                top:22%;
                left:40%;
            }
            .book:nth-child(6){
                top:18%;
                left:66%;
            }
            .book:nth-child(7){
                top:54%;
                left:4%;
            }
            .book:nth-child(8){
                top:50%;
                left:32%;
            }
            .book:nth-child(9){
                top:46%;
                left:58%;
            }
            .book:nth-child(10){
                top:70%;
                left:44%;
            }
            .bg-portfolio-text{
                font-size:4.8rem;
            }
        }
        @media (max-width:576px){
            .portfolio-section{
                min-height:auto;
            }
            .portfolio-inner{
                padding:36px 16px 48px;
                gap:32px;
            }
            .portfolio-content h2{
                font-size:1.65rem;
                margin-bottom:14px;
            }
            .portfolio-content .subtitle{
                font-size:.875rem;
                margin-bottom:28px;
            }
            .category-list{
                flex-direction:row;
                flex-wrap:wrap;
                gap:8px 14px;
            }
            .category-list li{
                font-size:.9rem;
                padding:6px 0 6px 22px;
            }
            .category-list li::before{
                width:14px;
                height:3px;
            }
            .books-showcase{
                height:380px;
            }
            .book{
                width:92px;
                height:138px;
            }
            .book-cover{
                padding:10px 9px 12px;
            }
            .book-cover .book-title{
                font-size:.6rem;
            }
            .book-cover .book-author{
                font-size:.52rem;
            }
            .book-cover .book-decoration{
                font-size:1.2rem;
            }
            .book:first-child{
                top:2%;
                left:0;
                transform:rotate(-11deg);
            }
            .book:nth-child(2){
                top:0;
                left:28%;
                transform:rotate(7deg);
            }
            .book:nth-child(3){
                top:-1%;
                left:56%;
                transform:rotate(-6deg);
            }
            .book:nth-child(4){
                top:30%;
                left:12%;
                transform:rotate(10deg);
            }
            .book:nth-child(5){
                top:24%;
                left:40%;
                transform:rotate(-9deg);
            }
            .book:nth-child(6){
                top:20%;
                left:68%;
                transform:rotate(5deg);
            }
            .book:nth-child(7){
                top:58%;
                left:2%;
                transform:rotate(-7deg);
            }
            .book:nth-child(8){
                top:54%;
                left:32%;
                transform:rotate(12deg);
            }
            .book:nth-child(9){
                top:50%;
                left:60%;
                transform:rotate(-4deg);
            }
            .book:nth-child(10){
                top:74%;
                left:42%;
                transform:rotate(8deg);
            }
            .bg-portfolio-text{
                font-size:3.6rem;
                bottom:0;
                left:0;
                opacity:.2;
            }
            .bg-circle{
                width:320px;
                height:320px;
                opacity:.5;
            }
        }
        @media (max-width:400px){
            .books-showcase{
                height:320px;
            }
            .book{
                width:82px;
                height:124px;
            }
            .book-cover .book-title{
                font-size:.55rem;
            }
            .bg-portfolio-text{
                font-size:3rem;
            }
        }