*,*::before,*::after{box-sizing:border-box}
.portfolio-carousel-section{
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  background:transparent;
  overflow:visible
}
.portfolio-carousel-section .bg{
  display:none
}
.portfolio-carousel-section::after{
  display:none
}

.portfolio-carousel{
  position:relative;
  width:min(1200px,92vw);
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  perspective:1600px;
  overflow:visible
}
.portfolio-carousel>input{position:absolute;opacity:0;pointer-events:none}
.portfolio-carousel .cards{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}

.portfolio-carousel .nav{position:absolute;inset:0;pointer-events:none;z-index:10}
.portfolio-carousel .ctrl{display:none}

.portfolio-carousel .arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  pointer-events:auto;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent
}
.portfolio-carousel .arrow:hover{background:rgba(0,0,0,.6)}
.portfolio-carousel .arrow:active{transform:translateY(-50%) scale(.96)}
.portfolio-carousel .arrow::before{
  content:"";
  width:12px;
  height:12px;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  transform:rotate(45deg);
  opacity:.95
}
.portfolio-carousel .arrow.prev{left:-27px}
.portfolio-carousel .arrow.prev::before{transform:rotate(-135deg)}
.portfolio-carousel .arrow.next{right:-27px}
.portfolio-carousel .arrow.next::before{transform:rotate(45deg)}

@keyframes cardFadeIn{
  0%{
    opacity:0;
    filter:blur(10px) brightness(1.2)
  }
  100%{
    opacity:1;
    filter:blur(0) brightness(1)
  }
}

.portfolio-carousel .card{
  --w:clamp(220px,54vw,420px);
  --h:calc(var(--w)*3/2);
  position:absolute;
  width:var(--w);
  height:var(--h);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  background:transparent;
  will-change:transform,opacity,filter;
  transition:transform 550ms cubic-bezier(.22,.61,.36,1),opacity 400ms ease,filter 400ms ease,box-shadow 400ms ease;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65),0 12px 24px -8px rgba(0,0,0,.55);
  text-decoration:none;
  display:block;
  animation:cardFadeIn 1s ease-out forwards;
  opacity:0
}
.portfolio-carousel .card:nth-child(1){animation-delay:.2s}
.portfolio-carousel .card:nth-child(2){animation-delay:.4s}
.portfolio-carousel .card:nth-child(3){animation-delay:.6s}
.portfolio-carousel .card:nth-child(4){animation-delay:.8s}
.portfolio-carousel .card:nth-child(5){animation-delay:1s}
.portfolio-carousel .card:nth-child(6){animation-delay:1.2s}
.portfolio-carousel .card:nth-child(7){animation-delay:1.4s}
.portfolio-carousel .card:nth-child(8){animation-delay:1.6s}
.portfolio-carousel .card:nth-child(9){animation-delay:1.8s}
.portfolio-carousel .card:nth-child(10){animation-delay:2s}
.portfolio-carousel .card img{width:100%;height:100%;object-fit:cover}


@media (max-width:599px){
  .portfolio-carousel-section{padding:0;overflow:hidden;max-width:100vw}
  .portfolio-carousel{
    width:100vw;
    max-width:100vw;
    aspect-ratio:10/16;
    overflow:hidden;
    padding:0 40px;
    box-sizing:border-box
  }
  .portfolio-carousel .cards{overflow:hidden;width:100%}
  .portfolio-carousel .arrow{width:36px;height:36px}
  .portfolio-carousel .arrow.prev{left:6px}
  .portfolio-carousel .arrow.next{right:6px}
  .portfolio-carousel .card{--w:clamp(140px,60vw,240px);border-radius:12px}
}

.portfolio-carousel .card:focus-visible{outline:3px solid #7ad2ff;outline-offset:4px}
.portfolio-carousel .card-link{display:block;width:100%;height:100%;text-decoration:none}
.portfolio-carousel .card-external-link{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.7);
  color:#fff;
  padding:8px 16px;
  border-radius:6px;
  font-size:12px;
  text-decoration:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:2
}
.portfolio-carousel .card:hover .card-external-link{opacity:1}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  padding:20px
}
.lightbox:target{
  opacity:1;
  visibility:visible
}
.lightbox-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center
}
.lightbox-content img{
  max-width:100%;
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.8)
}
.lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  width:44px;
  height:44px;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  text-decoration:none;
  transition:background .2s ease;
  z-index:1001
}
.lightbox-close:hover,.lightbox-close:focus{background:rgba(255,255,255,.3)}
.lightbox-close::before{
  content:"×";
  font-size:36px;
  line-height:1
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  transition:background .2s ease;
  z-index:1001;
  font-size:24px
}
.lightbox-nav:hover,.lightbox-nav:focus{background:rgba(255,255,255,.3)}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}
.lightbox-nav::before{
  content:"";
  width:12px;
  height:12px;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  transform:rotate(45deg)
}
.lightbox-nav.prev::before{transform:rotate(-135deg)}
.lightbox-nav.next::before{transform:rotate(45deg)}
#close{display:none}

@media (max-width:599px){
  .lightbox-content{max-width:95vw;max-height:95vh}
  .lightbox-close{top:10px;right:10px;width:36px;height:36px}
  .lightbox-close::before{font-size:28px}
  .lightbox-nav{width:40px;height:40px}
  .lightbox-nav.prev{left:10px}
  .lightbox-nav.next{right:10px}
}