/* Glass portfolio showcase with scrollable project menu */
.portfolio-showcase-section{
    position:relative;
    padding:54px 0 62px;
    overflow:hidden;
    border-top:1px solid rgba(91,235,206,.06);
    background:
        radial-gradient(circle at 15% 50%,rgba(49,226,197,.06),transparent 30%),
        radial-gradient(circle at 88% 15%,rgba(65,119,160,.06),transparent 28%),
        linear-gradient(180deg,rgba(2,16,18,.12),rgba(4,18,20,.34));
}
.portfolio-showcase-section:before{
    content:"";
    position:absolute;
    width:520px;
    height:260px;
    left:-180px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(49,226,197,.045);
    filter:blur(75px);
    pointer-events:none;
}
.portfolio-showcase__header{
    max-width:710px;
    margin:0 auto 28px;
    text-align:center;
}
.portfolio-showcase__header .eyebrow{
    margin-bottom:6px;
}
.portfolio-showcase__header h2{
    margin:0 0 7px;
    color:#f4ffff;
    font-size:clamp(25px,2.55vw,38px);
    line-height:1.5;
    font-weight:900;
}
.portfolio-showcase__header p{
    margin:0;
    color:#9fbcba;
    font-size:13px;
    line-height:1.9;
}
.portfolio-showcase{
    position:relative;
    display:grid;
    grid-template-columns:minmax(270px,330px) minmax(0,1fr);
    gap:16px;
    min-height:545px;
    direction:rtl;
}
.portfolio-showcase [x-cloak]{
    display:none!important;
}
.portfolio-showcase__menu-shell,
.portfolio-showcase__display{
    position:relative;
    border:1px solid rgba(127,231,211,.18);
    border-radius:22px;
    background:
        linear-gradient(145deg,rgba(10,53,55,.63),rgba(3,25,27,.82));
    box-shadow:
        0 24px 58px rgba(0,0,0,.18),
        inset 0 1px rgba(255,255,255,.045);
    backdrop-filter:blur(18px);
}
.portfolio-showcase__menu-shell{
    height:545px;
    padding:16px 10px 14px;
    overflow:hidden;
}
.portfolio-showcase__menu-title{
    position:relative;
    z-index:4;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 8px 12px;
    border-bottom:1px solid rgba(128,226,208,.10);
}
.portfolio-showcase__menu-title small,
.portfolio-showcase__menu-title strong{
    display:block;
}
.portfolio-showcase__menu-title small{
    color:#789d99;
    font-size:9px;
    line-height:1.6;
}
.portfolio-showcase__menu-title strong{
    color:#effffc;
    font-size:14px;
    line-height:1.6;
}
.portfolio-showcase__menu-title>span{
    padding:5px 8px;
    border:1px solid rgba(94,220,199,.12);
    border-radius:999px;
    color:#6ccfbe;
    background:rgba(49,226,197,.04);
    font-size:8px;
    white-space:nowrap;
}
.portfolio-showcase__menu{
    position:relative;
    z-index:2;
    height:calc(100% - 54px);
    padding:8px 2px 26px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(49,226,197,.34) rgba(255,255,255,.03);
}
.portfolio-showcase__menu::-webkit-scrollbar{
    width:5px;
}
.portfolio-showcase__menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,.025);
    border-radius:999px;
}
.portfolio-showcase__menu::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:linear-gradient(#31e2c5,#177e73);
}
.portfolio-showcase__menu-item{
    --project-accent:#31e2c5;
    position:relative;
    width:100%;
    min-height:78px;
    display:grid;
    grid-template-columns:68px minmax(0,1fr) 24px;
    align-items:center;
    gap:10px;
    margin:0 0 8px;
    padding:9px;
    overflow:hidden;
    border:1px solid rgba(125,224,207,.10);
    border-radius:15px;
    color:inherit;
    background:rgba(255,255,255,.018);
    text-align:right;
    cursor:pointer;
    appearance:none;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}
.portfolio-showcase__menu-item:before{
    content:"";
    position:absolute;
    right:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:var(--project-accent);
    box-shadow:0 0 12px color-mix(in srgb,var(--project-accent) 60%,transparent);
    opacity:0;
    transform:scaleY(.4);
    transition:opacity .25s ease,transform .25s ease;
}
.portfolio-showcase__menu-item:hover,
.portfolio-showcase__menu-item:focus-visible{
    transform:translateX(-3px);
    outline:none;
    border-color:rgba(128,232,212,.22);
    background:rgba(255,255,255,.035);
}
.portfolio-showcase__menu-item.is-active{
    border-color:color-mix(in srgb,var(--project-accent) 42%,rgba(116,231,210,.25));
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--project-accent) 9%,transparent),rgba(255,255,255,.025));
    box-shadow:
        0 12px 26px rgba(0,0,0,.11),
        inset 0 1px rgba(255,255,255,.025);
}
.portfolio-showcase__menu-item.is-active:before{
    opacity:1;
    transform:scaleY(1);
}
.portfolio-showcase__menu-thumb{
    width:68px;
    height:50px;
    display:block;
    overflow:hidden;
    border:1px solid rgba(213,255,247,.14);
    border-radius:10px;
    background:#0a2b2d;
    box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.portfolio-showcase__menu-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.portfolio-showcase__menu-copy{
    min-width:0;
}
.portfolio-showcase__menu-copy small,
.portfolio-showcase__menu-copy strong,
.portfolio-showcase__menu-copy em{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.portfolio-showcase__menu-copy small{
    margin-bottom:2px;
    color:#779a97;
    font-size:8px;
    line-height:1.6;
}
.portfolio-showcase__menu-copy strong{
    color:#e9faf7;
    font-size:11.5px;
    line-height:1.65;
}
.portfolio-showcase__menu-copy em{
    color:var(--project-accent);
    font-size:8.5px;
    line-height:1.65;
    font-style:normal;
    opacity:.84;
}
.portfolio-showcase__menu-arrow{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border:1px solid rgba(118,223,204,.10);
    border-radius:8px;
    color:#729b97;
    background:rgba(255,255,255,.018);
    transform:rotate(180deg);
    transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.portfolio-showcase__menu-item.is-active .portfolio-showcase__menu-arrow{
    color:var(--project-accent);
    border-color:color-mix(in srgb,var(--project-accent) 28%,transparent);
    background:color-mix(in srgb,var(--project-accent) 8%,transparent);
}
.portfolio-showcase__menu-fade{
    position:absolute;
    z-index:3;
    left:10px;
    right:10px;
    height:32px;
    pointer-events:none;
}
.portfolio-showcase__menu-fade--top{
    top:69px;
    background:linear-gradient(rgba(5,35,37,.95),transparent);
}
.portfolio-showcase__menu-fade--bottom{
    bottom:10px;
    background:linear-gradient(transparent,rgba(4,28,30,.98));
}
.portfolio-showcase__display{
    height:545px;
    overflow:hidden;
}
.portfolio-showcase__display:before{
    content:"";
    position:absolute;
    z-index:0;
    width:300px;
    height:300px;
    left:-120px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(49,226,197,.045);
    filter:blur(45px);
    pointer-events:none;
}
.portfolio-showcase__panel{
    --project-accent:#31e2c5;
    position:absolute;
    inset:0 0 50px;
    z-index:1;
    display:grid;
    grid-template-rows:minmax(0,1.45fr) auto;
    direction:rtl;
}
.portfolio-showcase__image{
    position:relative;
    min-height:0;
    overflow:hidden;
    border-radius:21px 21px 0 0;
    background:#082628;
}
.portfolio-showcase__image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
    transform:scale(1.002);
}
.portfolio-showcase__image-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(3,21,23,.04),rgba(3,21,23,.08) 54%,rgba(3,21,23,.78)),
        linear-gradient(90deg,rgba(3,21,23,.16),transparent 35%);
    pointer-events:none;
}
.portfolio-showcase__type{
    position:absolute;
    top:17px;
    right:17px;
    padding:7px 11px;
    border:1px solid color-mix(in srgb,var(--project-accent) 30%,rgba(255,255,255,.12));
    border-radius:999px;
    color:#f3fffd;
    background:rgba(4,28,30,.70);
    box-shadow:0 9px 22px rgba(0,0,0,.16);
    backdrop-filter:blur(12px);
    font-size:9px;
    font-weight:800;
}
.portfolio-showcase__image-result{
    position:absolute;
    left:18px;
    bottom:17px;
    min-width:135px;
    padding:10px 13px;
    border:1px solid color-mix(in srgb,var(--project-accent) 30%,rgba(255,255,255,.10));
    border-radius:14px;
    background:rgba(3,28,30,.72);
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
}
.portfolio-showcase__image-result small,
.portfolio-showcase__image-result strong{
    display:block;
}
.portfolio-showcase__image-result small{
    color:#8aa9a5;
    font-size:8px;
    line-height:1.6;
}
.portfolio-showcase__image-result strong{
    color:var(--project-accent);
    font-size:15px;
    line-height:1.6;
    font-weight:900;
}
.portfolio-showcase__details{
    position:relative;
    z-index:2;
    padding:19px 21px 17px;
    background:
        linear-gradient(140deg,rgba(8,48,50,.94),rgba(3,25,27,.98));
    border-top:1px solid rgba(123,225,207,.10);
}
.portfolio-showcase__details-main{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:13px;
    align-items:start;
}
.portfolio-showcase__number{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--project-accent) 30%,transparent);
    border-radius:13px;
    color:var(--project-accent);
    background:color-mix(in srgb,var(--project-accent) 7%,rgba(5,39,41,.95));
    font-size:11px;
    font-weight:900;
}
.portfolio-showcase__details h3{
    margin:0 0 5px;
    color:#f1fffc;
    font-size:20px;
    line-height:1.55;
    font-weight:900;
}
.portfolio-showcase__details p{
    margin:0;
    color:#a6c2bf;
    font-size:11.5px;
    line-height:1.9;
}
.portfolio-showcase__details-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:13px;
    padding-top:13px;
    border-top:1px solid rgba(123,225,207,.09);
}
.portfolio-showcase__tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.portfolio-showcase__tags span{
    padding:5px 8px;
    border:1px solid rgba(118,219,201,.10);
    border-radius:999px;
    color:#8eaaa7;
    background:rgba(255,255,255,.018);
    font-size:8px;
    line-height:1.4;
}
.portfolio-showcase__link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    color:var(--project-accent);
    font-size:10px;
    line-height:1.6;
    font-weight:800;
    text-decoration:none;
}
.portfolio-showcase__link .icon{
    transform:rotate(180deg);
}
.portfolio-showcase__controls{
    position:absolute;
    z-index:4;
    left:18px;
    right:18px;
    bottom:10px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
}
.portfolio-showcase__controls>button{
    width:30px;
    height:30px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(116,222,203,.15);
    border-radius:9px;
    color:#b5cecb;
    background:rgba(4,31,33,.76);
    cursor:pointer;
    appearance:none;
    transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.portfolio-showcase__controls>button:hover{
    color:#42e6c9;
    border-color:rgba(66,230,201,.32);
    background:rgba(8,52,54,.92);
}
.portfolio-showcase__controls>button.is-next .icon{
    transform:rotate(180deg);
}
.portfolio-showcase__progress{
    display:flex;
    align-items:center;
    gap:6px;
}
.portfolio-showcase__progress button{
    position:relative;
    width:8px;
    height:8px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(106,220,201,.20);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    cursor:pointer;
    appearance:none;
    transition:width .25s ease,background .25s ease,border-color .25s ease;
}
.portfolio-showcase__progress button.is-active{
    width:35px;
    border-color:rgba(68,231,202,.35);
    background:rgba(49,226,197,.09);
}
.portfolio-showcase__progress button.is-active:after{
    content:"";
    position:absolute;
    inset:1px;
    width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#31e2c5,#94fff0);
    animation:portfolioShowcaseProgress 10s linear forwards;
}
.portfolio-showcase__footer{
    margin-top:18px;
    text-align:center;
}
.portfolio-showcase__footer .btn{
    min-width:205px;
}
.portfolio-panel-enter{
    transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.portfolio-panel-enter-start{
    opacity:0;
    transform:translateY(14px) scale(.985);
}
.portfolio-panel-enter-end{
    opacity:1;
    transform:translateY(0) scale(1);
}
.portfolio-panel-leave{
    transition:opacity .25s ease,transform .25s ease;
}
.portfolio-panel-leave-start{
    opacity:1;
    transform:translateY(0);
}
.portfolio-panel-leave-end{
    opacity:0;
    transform:translateY(-8px);
}
@keyframes portfolioShowcaseProgress{
    from{width:0}
    to{width:calc(100% - 2px)}
}
@media(max-width:980px){
    .portfolio-showcase{
        grid-template-columns:minmax(230px,280px) minmax(0,1fr);
    }
    .portfolio-showcase__menu-item{
        grid-template-columns:58px minmax(0,1fr) 22px;
    }
    .portfolio-showcase__menu-thumb{
        width:58px;
        height:46px;
    }
    .portfolio-showcase__details h3{
        font-size:18px;
    }
}
@media(max-width:760px){
    .portfolio-showcase-section{
        padding:44px 0 52px;
    }
    .portfolio-showcase__header{
        margin-bottom:21px;
    }
    .portfolio-showcase{
        display:flex;
        flex-direction:column;
        min-height:0;
        gap:12px;
    }
    .portfolio-showcase__menu-shell{
        order:1;
        height:auto;
        padding:10px 0 8px;
        overflow:hidden;
        border-radius:18px;
    }
    .portfolio-showcase__menu-title{
        min-height:43px;
        padding:0 13px 9px;
    }
    .portfolio-showcase__menu-title>span{
        display:none;
    }
    .portfolio-showcase__menu{
        height:auto;
        display:flex;
        gap:8px;
        padding:8px 18px 10px;
        overflow-x:auto;
        overflow-y:hidden;
        direction:rtl;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:18px;
        scrollbar-width:none;
    }
    .portfolio-showcase__menu::-webkit-scrollbar{
        display:none;
    }
    .portfolio-showcase__menu-item{
        flex:0 0 min(72vw,255px);
        width:min(72vw,255px);
        min-height:76px;
        margin:0;
        scroll-snap-align:center;
        scroll-snap-stop:always;
    }
    .portfolio-showcase__menu-fade{
        top:52px;
        bottom:8px;
        width:24px;
        height:auto;
    }
    .portfolio-showcase__menu-fade--top{
        right:0;
        left:auto;
        background:linear-gradient(90deg,transparent,rgba(5,35,37,.98));
    }
    .portfolio-showcase__menu-fade--bottom{
        left:0;
        right:auto;
        background:linear-gradient(270deg,transparent,rgba(5,35,37,.98));
    }
    .portfolio-showcase__display{
        order:2;
        height:auto;
        min-height:535px;
        border-radius:18px;
    }
    .portfolio-showcase__panel{
        position:relative;
        inset:auto;
        min-height:485px;
        grid-template-rows:245px auto;
        padding-bottom:48px;
    }
    .portfolio-showcase__image{
        border-radius:17px 17px 0 0;
    }
    .portfolio-showcase__details{
        padding:17px 16px 15px;
    }
    .portfolio-showcase__details-bottom{
        align-items:flex-start;
        flex-direction:column;
    }
    .portfolio-showcase__controls{
        bottom:9px;
    }
}
@media(max-width:480px){
    .portfolio-showcase__header h2{
        font-size:23px;
    }
    .portfolio-showcase__header p{
        font-size:11.5px;
    }
    .portfolio-showcase__menu-item{
        flex-basis:min(78vw,270px);
        width:min(78vw,270px);
    }
    .portfolio-showcase__display{
        min-height:555px;
    }
    .portfolio-showcase__panel{
        min-height:510px;
        grid-template-rows:220px auto;
    }
    .portfolio-showcase__image-result{
        left:12px;
        bottom:12px;
        min-width:120px;
        padding:8px 10px;
    }
    .portfolio-showcase__type{
        top:12px;
        right:12px;
    }
    .portfolio-showcase__details-main{
        grid-template-columns:38px minmax(0,1fr);
        gap:10px;
    }
    .portfolio-showcase__number{
        width:36px;
        height:36px;
        border-radius:11px;
    }
    .portfolio-showcase__details h3{
        font-size:17px;
    }
    .portfolio-showcase__details p{
        font-size:10.5px;
    }
    .portfolio-showcase__tags span{
        font-size:7.5px;
    }
}
@media(prefers-reduced-motion:reduce){
    .portfolio-showcase__progress button.is-active:after{
        animation:none!important;
    }
    .portfolio-panel-enter,
    .portfolio-panel-leave{
        transition:none!important;
    }
}

/* Prevent browser scroll anchoring and Alpine mobile transition jumps. */
.portfolio-showcase,
.portfolio-showcase__menu,
.portfolio-showcase__display{
    overflow-anchor:none;
}

@media (max-width:760px){
    .portfolio-showcase__display{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-items:stretch;
        isolation:isolate;
    }

    .portfolio-showcase__panel{
        grid-area:1 / 1;
        width:100%;
        min-width:0;
    }

    .portfolio-panel-enter,
    .portfolio-panel-leave{
        transition:opacity .18s ease!important;
    }

    .portfolio-panel-enter-start,
    .portfolio-panel-enter-end,
    .portfolio-panel-leave-start,
    .portfolio-panel-leave-end{
        transform:none!important;
    }

    .portfolio-showcase__image{
        contain:layout paint;
    }

    .portfolio-showcase__image img{
        backface-visibility:hidden;
        transform:translateZ(0);
    }
}