/* =========================================================
   KUMBR Studio — Works Page v11: 375-style Showcase
   Full-height right panel, edge-to-edge images, big type
   ========================================================= */

/* --- Header (light page = dark header) --- */
.header--works .nav-logo-dark{ display:block; }
.header--works .nav-logo-white{ display:none; }
.header--works .menu-btn-label{ color:var(--dark); }
.header--works .menu-line{ background:var(--dark); }

/* --- Page lock --- */
.page-works{
    overflow:hidden;
    height:100vh;
}

/* --- Cursor text mode --- */
.cursor.cursor--text .cursor-ring{
    width:100px; height:100px;
    border-color:var(--gold);
    background:rgba(180,154,106,.12);
}
.cursor-text-label{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--font-body);
    font-size:11px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold);
    opacity:0; transition:opacity .2s;
    pointer-events:none; white-space:nowrap;
}
.cursor.cursor--text .cursor-text-label{ opacity:1; }

/* =========================================================
   SHOWCASE — Full viewport split
   ========================================================= */
.wk-showcase{
    display:flex;
    width:100%;
    height:100vh;
    background:#f5f3ef;
    position:relative;
    overflow:hidden;
}

/* --- LEFT PANEL (60%) --- */
.wk-left{
    width:60%;
    height:100vh;
    flex-shrink:0;
    display:flex;
    align-items:center;
    position:relative;
    padding:0 clamp(40px, 5vw, 100px);
    padding-left:clamp(60px, 7vw, 120px);
}

.wk-left-inner{
    width:100%;
    max-width:660px;
}

/* "Works" label */
.wk-label{
    display:block;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:28px;
    opacity:0;
    transform:translateY(10px);
}

/* Title — large like 375 */
.wk-title{
    font-family:var(--font);
    font-size:clamp(40px, 4.5vw, 72px);
    line-height:1.1;
    letter-spacing:-.03em;
    color:var(--dark);
    margin:0 0 36px;
}

.wk-title-line{ display:block; overflow:hidden; }

.wk-title-word{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
}

.wk-title-word--light{
    font-weight:300;
    font-style:italic;
    color:rgba(29,29,27,.35);
}

.wk-title-word--bold{ font-weight:800; }

.wk-title-dot{
    display:inline-block;
    color:var(--gold);
    font-weight:800;
    transform:translateY(110%);
    opacity:0;
}

/* Description */
.wk-desc{
    font-family:var(--font-body);
    font-size:clamp(14px, 1.05vw, 16px);
    font-weight:300;
    line-height:1.7;
    color:rgba(29,29,27,.4);
    max-width:380px;
    margin:0;
    opacity:0;
    transform:translateY(15px);
}

/* Bottom info */
.wk-left-bottom{
    position:absolute;
    bottom:clamp(40px, 5vh, 80px);
    left:clamp(60px, 7vw, 120px);
    right:clamp(40px, 5vw, 100px);
}

.wk-counter{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:500;
    letter-spacing:.08em;
    color:var(--dark);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.wk-counter-current{
    font-size:28px;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--gold);
    font-family:var(--font);
    transition:all .4s var(--ease);
    min-width:38px;
}

.wk-counter-sep{ color:rgba(29,29,27,.12); font-size:16px; }
.wk-counter-total{ color:rgba(29,29,27,.2); font-size:14px; }

/* Progress track */
.wk-progress-track{
    width:100%;
    max-width:260px;
    height:2px;
    background:rgba(29,29,27,.06);
    border-radius:2px;
    overflow:hidden;
    margin-bottom:16px;
}

.wk-progress-fill{
    height:100%;
    width:0%;
    background:var(--gold);
    border-radius:2px;
    transition:width .4s cubic-bezier(.25,.1,.25,1);
}

/* Active project name */
.wk-active-name{
    font-family:var(--font);
    font-size:13px;
    font-weight:500;
    letter-spacing:.06em;
    color:rgba(29,29,27,.25);
    transition:all .4s var(--ease);
}

/* --- RIGHT PANEL (40%) — full height, edge-to-edge --- */
.wk-right{
    flex:1;
    height:100vh;
    position:relative;
    overflow:hidden;
}

/* Scrolling strip of cards */
.wk-strip{
    display:flex;
    flex-direction:column;
    gap:6px;
    will-change:transform;
    position:absolute;
    top:0;
    left:0;
    right:0;
}

/* --- Project card --- */
.wk-project{
    display:block;
    text-decoration:none;
    color:#fff;
    position:relative;
    flex-shrink:0;
    overflow:hidden;
}

.wk-project-visual{
    position:relative;
    width:100%;
    height:calc(50vh - 3px);
    overflow:hidden;
}

.wk-project-img{
    position:absolute;
    inset:-10%;
    width:120%;
    height:120%;
    background-size:cover;
    background-position:center;
    transition:filter .6s ease, transform .6s ease;
}

.wk-project:hover .wk-project-img{
    filter:brightness(1.05) saturate(1.15);
    transform:scale(1.02);
}

.wk-project-img-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,.02) 100%);
    z-index:1;
    transition:opacity .5s ease;
}

.wk-project:hover .wk-project-img-overlay{
    opacity:1;
    background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.05) 100%);
}

/* Project info overlay — hidden by default, appears on hover */
.wk-project-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px);
    z-index:2;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .4s ease, transform .4s ease;
}

.wk-project:hover .wk-project-info{
    opacity:1;
    transform:translateY(0);
}

.wk-project-name-wrap{
    display:flex;
    align-items:baseline;
    gap:clamp(10px, 1.2vw, 18px);
    flex:1;
}

.wk-project-num{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    color:rgba(255,255,255,.4);
    flex-shrink:0;
}

.wk-project-name{
    font-family:var(--font);
    font-size:clamp(24px, 2.8vw, 44px);
    font-weight:700;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0;
    color:#fff;
}

.wk-project-cat{
    font-family:var(--font-body);
    font-size:10px;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    padding:6px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:100px;
    white-space:nowrap;
    transition:all .4s ease;
    flex-shrink:0;
}

.wk-project:hover .wk-project-cat{
    border-color:var(--gold);
    color:var(--gold);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
    .wk-left{ width:55%; }
    .wk-title{ font-size:clamp(36px, 4vw, 56px); }
}

@media(max-width:768px){
    .page-works{
        overflow:auto;
        height:auto;
    }

    .wk-showcase{
        flex-direction:column;
        height:auto;
        min-height:100vh;
    }

    .wk-left{
        width:100%;
        height:auto;
        min-height:55vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 var(--pad);
    }

    .wk-left-inner{
        padding:clamp(100px, 16vh, 140px) 0 clamp(40px, 6vh, 80px);
        text-align:center;
    }

    .wk-left-bottom{
        position:relative;
        bottom:auto;
        left:auto;
        right:auto;
        margin-top:40px;
    }

    .wk-counter{ justify-content:center; }
    .wk-progress-track{ margin-left:auto; margin-right:auto; }
    .wk-active-name{ text-align:center; }

    .wk-title{
        font-size:clamp(36px, 10vw, 60px);
    }

    .wk-desc{
        max-width:none;
        margin:0 auto;
    }

    .wk-right{
        height:auto;
        overflow:visible;
        padding:0 var(--pad) clamp(60px, 8vh, 100px);
    }

    .wk-strip{
        position:relative;
        gap:clamp(20px, 4vw, 36px);
    }

    .wk-project-visual{
        height:auto;
        aspect-ratio:16/10;
        border-radius:6px;
    }

    .wk-project-name{
        font-size:clamp(20px, 6vw, 32px);
    }
}