*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{min-height:100vh;background:#070707;color:#fff;
    height : 100vh;
    overflow : hidden;
    background-color : #0c0c0c;
    background-image : url("../../../images/video-editing-portfolio-pictures/background\ lines.svg");
    background-size : cover;
    background-position : center;
    background-repeat : no-repeat;
}

.circle1 {
    background-color: #ff2a003c;
    height: 740px;
    width: 740px;
    border-radius: 1000px;
    filter: blur(350px);
    position: fixed;
    left: -180px;
    bottom: -470px;
    z-index: -1;
    opacity: 68%;
}

.circle2 {
    background-color: #dc000078;
    height: 740px;
    width: 740px;
    border-radius: 1000px;
    filter: blur(350px);
    position: fixed;
    right: -180px;
    top: -250px;
    z-index: -1;
    opacity: 48%;
}

.portfolio-strip{width:100%;padding:0 24px;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}
.portfolio-track{display:flex;gap:18px;align-items:center;animation:slide 28s linear infinite;animation-play-state:paused}
.portfolio-track.running{animation-play-state:running}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.thumb-card{width:200px;height:356px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:#111;box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .18s ease,opacity .18s ease;cursor:pointer}
.thumb-card:hover{transform:scale(1.05);opacity:1}
.thumb-card img.thumb-img{width:100%;height:100%;object-fit:cover;display:block}

.video{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:calc(100% - 48px);
    max-width:340px;
    aspect-ratio:9/16;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    z-index:50;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    overflow:hidden;
}
.video.open{opacity:1;pointer-events:auto}

#yt-player{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:transparent;
}

#yt-player iframe{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    max-width:none !important;
    min-width:unset !important;
    border:none !important;
}

.home-bottom{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(255,255,255,.06);color:#fff;padding:10px 20px;border-radius:30px;text-decoration:none;border:1px solid rgba(255,255,255,.08);z-index:80}

@media (max-width:800px){.thumb-card{width:140px;height:250px}.video{max-width:300px}}

.overlay-back{
    position:absolute;
    top:12px;
    left:12px;
    transform:none;
    z-index:99999;
    background:rgba(255, 255, 255, 0.033);
    color:#fff;
    border:1px solid rgba(255,255,255,0.14);
    padding:4px 18px;
    font-weight:700;
    font-size:16px;
    letter-spacing:0.3px;
    border-radius:12px;
    cursor:pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    opacity: 1;
    pointer-events: auto;
    transition: all 0.5s ease;
}
.overlay-back:hover{ background:rgba(255, 255, 255, 0.323); }

.video:not(.open) .overlay-back{ display: none !important; }