/* A compact, rotating project deck. The first card remains visible without JavaScript. */
.project-list { padding: 0 5vw 11vh !important; }

.project-carousel { width: min(100%, 940px); margin: 0 auto; }

.project-stage {
  position: relative;
  height: min(48vw, 470px);
  min-height: 370px;
  perspective: 1600px;
}

.carousel-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(140px, 23%) 68px;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(239,239,233,.5);
  padding: clamp(20px, 2.8vw, 40px);
  color: #efefe9;
  background: #151518;
  text-align: left;
  cursor: pointer;
  opacity: .13;
  transform: translate3d(82px, 36px, -170px) rotate(5deg) scale(.92);
  transform-origin: 50% 80%;
  transition: transform .72s cubic-bezier(.22,.8,.2,1), opacity .48s ease, filter .5s ease, background .45s ease;
}

.carousel-card:first-child,
.carousel-card.deck-0 { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); z-index: 6; }
.carousel-card.deck-1 { opacity: .7; transform: translate3d(42px,22px,-60px) rotate(2.6deg) scale(.975); z-index: 5; }
.carousel-card.deck-2 { opacity: .42; transform: translate3d(78px,43px,-120px) rotate(4.8deg) scale(.95); z-index: 4; }
.carousel-card.deck-3 { opacity: .22; transform: translate3d(112px,62px,-180px) rotate(7deg) scale(.925); z-index: 3; }
.carousel-card.deck-back { opacity: 0; pointer-events: none; transform: translate3d(138px,76px,-240px) rotate(9deg) scale(.9); z-index: 1; }

.carousel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16,16,17,.96) 0%, rgba(16,16,17,.7) 48%, rgba(16,16,17,.28) 100%);
  transition: background .45s ease;
  pointer-events: none;
}

.carousel-card > * { position: relative; z-index: 1; }
.carousel-image { position: absolute; z-index: 0; inset: 0; opacity: .4; }
.carousel-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.07); transition: filter .45s ease, transform .7s cubic-bezier(.22,.8,.2,1); }
.carousel-number, .carousel-type, .carousel-open { font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.carousel-title { max-width: 7ch; font-size: clamp(50px, 7.3vw, 105px); font-weight: 800; line-height: .64; letter-spacing: -.15em; }
.carousel-title em { font-family: Manrope, sans-serif; font-size: .9em; font-style: italic; font-weight: 500; }
.carousel-type { max-width: 17ch; }
.carousel-open { text-align: right; }
.carousel-open b { display: block; margin-top: 8px; font-size: 28px; }

.carousel-card.deck-0:hover { background: #303035; filter: brightness(1.16); }
.carousel-card.deck-0:hover::after { background: linear-gradient(90deg, rgba(16,16,17,.82) 0%, rgba(16,16,17,.44) 50%, rgba(16,16,17,.1) 100%); }
.carousel-card.deck-0:hover .carousel-image img { filter: saturate(1.06) contrast(1.03) brightness(1.16); transform: scale(1.035); }

.photo-cube {
  --cube-size: clamp(130px, 18vw, 235px);
  position: absolute;
  z-index: 2;
  right: clamp(86px, 11vw, 155px);
  top: 50%;
  width: var(--cube-size);
  height: var(--cube-size);
  transform: translateY(-50%) rotateX(-8deg) rotateY(-28deg);
  transform-style: preserve-3d;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.22,.8,.2,1);
}

.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(239,239,233,.72);
  background: #101011;
  backface-visibility: hidden;
}
.cube-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cube-front { transform: translateZ(calc(var(--cube-size) / 2)); }
.cube-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.carousel-card.deck-0:hover .photo-cube { animation: photo-cube-turn 1.4s cubic-bezier(.22,.8,.2,1) both; }

@keyframes photo-cube-turn {
  0% { transform: translateY(-50%) rotateX(-8deg) rotateY(-28deg); }
  52% { transform: translateY(-50%) rotateX(8deg) rotateY(-205deg) scale(1.06); }
  100% { transform: translateY(-50%) rotateX(-8deg) rotateY(-388deg); }
}

.deck-controls { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; margin-top: 28px; color: #efefe9; }
.deck-controls p { margin: 0; font: 500 10px/1.3 "DM Mono", monospace; letter-spacing: .12em; }
.deck-buttons { display: flex; gap: 8px; }
.deck-button { min-width: 49px; height: 39px; border: 1px solid rgba(239,239,233,.5); background: transparent; color: #efefe9; cursor: pointer; font-size: 18px; transition: background .2s, color .2s; }
.deck-button:hover, .deck-button:focus-visible { background: #efefe9; color: #101011; outline: none; }

@media (max-width: 700px) {
  .project-list { padding: 0 22px 74px !important; }
  .project-stage { height: 106vw; min-height: 390px; }
  .carousel-card { grid-template-columns: 1fr; align-content: center; gap: 16px; padding: 28px; }
  .carousel-card::after { background: linear-gradient(125deg, rgba(16,16,17,.93), rgba(16,16,17,.36)); }
  .carousel-number { align-self: end; }
  .carousel-title { max-width: 7ch; font-size: 16vw; }
  .carousel-type { max-width: 22ch; }
  .carousel-open { position: absolute; right: 28px; bottom: 28px; }
  .photo-cube { --cube-size: 34vw; right: 10vw; top: 57%; }
  .carousel-card.deck-1 { transform: translate3d(22px,15px,-60px) rotate(2.5deg) scale(.975); }
  .carousel-card.deck-2 { transform: translate3d(40px,31px,-120px) rotate(4.8deg) scale(.95); }
  .carousel-card.deck-3 { transform: translate3d(56px,46px,-180px) rotate(7deg) scale(.925); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card, .photo-cube { transition: none; }
  .carousel-card.deck-0:hover .photo-cube { animation: none; }
}