/* ===== Showcase — Project Marquee (skewed infinite gallery) ===== */

.showcase{
  position:relative;
  background:transparent;
  overflow:hidden;
}

.showcase > .wrap .sec-head{
  margin-bottom:clamp(64px,8vh,96px);
}

.showcase-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
}

.showcase-pin{
  --showcase-card-w:clamp(260px,32vw,380px);
  --showcase-card-h:calc(var(--showcase-card-w) * 1.25);
  --showcase-rot-slop:calc(130vw * 0.09);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:max(clamp(380px,58vh,640px), calc(var(--showcase-card-h) + var(--showcase-rot-slop) + 5rem));
  padding:clamp(32px,6vh,64px) 0;
  overflow:hidden;
}

.showcase-bg-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(100px,24vw,280px);
  font-weight:800;
  font-style:italic;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(35,85,25,.07);
  user-select:none;
  pointer-events:none;
  z-index:0;
  line-height:1;
  font-family:var(--font);
}

.showcase-stage{
  position:relative;
  z-index:1;
  width:130vw;
  margin-left:-15vw;
  transform:rotate(-5deg);
  transform-origin:center center;
  will-change:transform;
}

.showcase-viewport{
  overflow:visible;
  padding:clamp(20px,4vh,40px) 0;
}

.showcase-track{
  position:relative;
  display:flex;
  width:max-content;
  will-change:transform;
  gap:clamp(20px,3vw,36px);
}

.showcase-set{
  display:contents;
}

.showcase-card{
  flex-shrink:0;
  width:clamp(260px,32vw,380px);
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  border:none;
  background:transparent;
  cursor:none;
  box-shadow:0 32px 90px -24px rgba(26,31,22,.38), 0 14px 36px -12px rgba(26,31,22,.22);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.showcase-card:hover{
  transform:translateY(-3px);
  box-shadow:0 40px 110px -20px rgba(26,31,22,.44), 0 18px 44px -10px rgba(26,31,22,.28);
}
.showcase-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.showcase-card-media{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  transition:transform .6s var(--ease-out);
}
.showcase-card:hover .showcase-card-media{transform:scale(1.05)}

.showcase-cursor{
  position:fixed;
  top:0;left:0;
  z-index:200;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}
.showcase-cursor-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;height:96px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:700;
  font-style:italic;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 32px rgba(217,164,4,.35);
}

/* ===== Showcase Modal (View Transition style) ===== */
html.showcase-modal-open,
html.showcase-modal-open body{
  overflow:hidden;
}

.showcase-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(26,31,22,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .32s var(--ease-out);
}
.showcase-modal.open{display:flex}
.showcase-modal.visible{opacity:1}

.showcase-modal-detail{
  background:var(--card);
  border:none;
  border-radius:24px;
  max-width:640px;
  width:100%;
  overflow:hidden;
  transform:scale(.92) translateY(20px);
  transition:transform .4s var(--ease-out);
  box-shadow:0 40px 90px -30px rgba(26,31,22,.35);
}
.showcase-modal-detail:focus,
.showcase-modal-detail:focus-visible{
  outline:none;
}
.showcase-modal.visible .showcase-modal-detail{
  transform:scale(1) translateY(0);
}

.showcase-modal-media{
  width:100%;
  aspect-ratio:16/10;
  background:#000;
  overflow:hidden;
}
.showcase-modal-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}

.showcase-modal-body{padding:clamp(24px,4vw,36px)}
.showcase-modal-cat{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:8px;
}
.showcase-modal-title{
  font-size:clamp(24px,4vw,32px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--head);
  margin-bottom:14px;
  line-height:1.1;
}
.showcase-modal-desc{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:28px;
}
.showcase-modal-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:4px;
}
.showcase-modal-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border:none;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  font-family:var(--font);
  font-size:15px;
  font-weight:700;
  font-style:italic;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.showcase-modal-close .btn-icon{
  display:inline-flex;
  align-items:center;
  font-style:italic;
  font-weight:900;
  line-height:1;
  transform:rotate(-4.2deg);
}
.showcase-modal-close .btn-icon i{display:inline-block;transition:transform .45s var(--ease)}
.showcase-modal-close .btn-icon i + i{margin-left:-.04em}
.showcase-modal-close:hover{
  background:#235519;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(35,85,25,.35);
}
.showcase-modal-close:hover .btn-icon i:first-child{transform:translateX(-.1em)}
.showcase-modal-close:hover .btn-icon i:last-child{transform:translateX(.1em)}
.showcase-modal-close:active{transform:translateY(0);box-shadow:none}

@media(max-width:768px){
  .showcase > .wrap .sec-head{margin-bottom:56px}
  .showcase-pin{
    --showcase-rot-slop:calc(160vw * 0.052);
    min-height:max(clamp(340px,52vh,520px), calc(var(--showcase-card-h) + var(--showcase-rot-slop) + 3.5rem));
    padding:clamp(24px,5vh,48px) 0;
  }
  .showcase-stage{width:160vw;margin-left:-30vw;transform:rotate(-3deg)}
  .showcase-cursor{display:none}
  .showcase-card{cursor:pointer}
}

@media(max-height:900px){
  .showcase-pin{
    --showcase-rot-slop:calc(130vw * 0.052);
    min-height:max(clamp(500px,76vh,760px), calc(var(--showcase-card-h) + var(--showcase-rot-slop) + 5.5rem));
    padding:clamp(40px,7vh,72px) 0;
  }
  .showcase-stage{transform:rotate(-3deg)}
  .showcase-viewport{padding:clamp(28px,5vh,52px) 0}
}

@media (prefers-reduced-motion:reduce){
  .showcase-card-media{transition:none}
}