/* =========================================================================
   V5 — SHOWCASE SLIDESHOW
   Replaces the single-film Featured block with an inline, horizontally
   scrollable image viewer (drag · arrows · scroll-snap). Loads AFTER
   v5-styles.css. Reuses the editorial paper / ink / accent tokens.
   ========================================================================= */

.v5-show{
  position:relative;
  padding:108px 0 132px;
  background:var(--v4-paper);
  border-top:1px solid var(--v4-line-soft);
  overflow:hidden;
}
.v5-show-container{ position:relative; z-index:1; }

/* Copper bloom orb — soft ambient warmth at top-right, behind the reel.
   Restored from the earlier featured header. */
.v5-show::after{
  content:none;
}
.v5-show-orb{
  position:absolute;
  top:10px; right:-190px;
  width:620px; height:620px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(231,148,118,0.42) 0%,
    rgba(223,133,103,0.24) 42%,
    rgba(208,118,88,0.08) 66%,
    rgba(208,118,88,0)    100%);
  filter:blur(16px);
  pointer-events:none;
  z-index:0;
  animation:cz-bloom-breath 14s ease-in-out infinite;
}
.v5-show-rail{ z-index:1; }

/* Vertical rail — left edge, echoes the featured block */
.v5-show-rail{
  position:absolute;
  left:46%; top:24px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  pointer-events:none;
  z-index:1;
}
@media (max-width:1100px){ .v5-show-rail{ left:40%; } }
.v5-show-rail-tick{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--v4-accent);
}
.v5-show-rail-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.32em;
  color:var(--v4-mute);
  text-transform:uppercase;
}
@media (max-width:1023px){ .v5-show-rail{ display:none; } }

/* ---- Section head ----------------------------------------------------- */
.v5-show-head{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap:64px;
  align-items:end;
  margin-bottom:60px;
  padding-bottom:36px;
  border-bottom:1px solid var(--v4-line-soft);
}
@media (min-width:1024px){ .v5-show-head{ min-height:380px; } }
@media (max-width:1100px){
  .v5-show-head{ grid-template-columns:1fr; gap:28px; align-items:start; }
}
.v5-show-head-left{ min-width:0; }
.v5-show-head-right{ min-width:0; padding-bottom:6px; }

.v5-show-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  margin-bottom:26px;
}
.v5-show-eyebrow-rule{ display:inline-block; width:36px; height:1px; background:var(--v4-accent); }
.v5-show-eyebrow-num{
  font-family:var(--serif); font-style:italic;
  color:var(--v4-accent);
  font-size:18px; letter-spacing:-.01em;
}
.v5-show-eyebrow-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-show-title{
  font-family:var(--serif);
  font-size:clamp(48px,7vw,92px);
  line-height:0.96;
  letter-spacing:-.028em;
  color:var(--v4-ink);
  margin:0 0 4px;
  font-variation-settings:"opsz" 60;
  text-wrap:balance;
}
.v5-show-title .emph{ font-style:italic; color:var(--v4-accent); }
.v5-show-title-sep{
  display:inline-block; margin:0 14px;
  color:var(--v4-mute); font-style:normal;
  font-family:var(--mono); font-size:0.5em;
  vertical-align:0.24em;
}
.v5-show-lede{
  font-family:var(--serif);
  font-size:19px; line-height:1.55;
  color:var(--v4-ink-2);
  max-width:62ch;
  margin:0;
}

/* Quiet client roster under the lede — breadth signal, lots of air */
.v5-show-roster{
  margin:18px 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.v5-show-roster-name{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-show-roster-sep{ color:var(--v4-line); font-family:var(--mono); font-size:11px; }

/* =======================================================================
   SCROLLER
   ======================================================================= */
.v5-show-viewer{
  position:relative;
  /* bleed slightly into the container gutter so slides can run to the edge */
}
.v5-show-track{
  display:flex;
  gap:22px;
  height:clamp(380px, 56vh, 600px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 2px 26px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.v5-show-track::-webkit-scrollbar{ display:none; }
.v5-show-track.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
.v5-show-track.is-dragging .v5-show-slide{ pointer-events:none; }

.v5-show-slide{
  position:relative;
  flex:0 0 auto;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background:#1a1f1c;
  scroll-snap-align:center;
  box-shadow:
    0 28px 66px -30px rgba(14,15,14,0.5),
    0 3px 12px -6px rgba(14,15,14,0.3);
  transition:box-shadow .4s ease;
}

.v5-show-slide img{
  display:block;
  height:100%;
  width:auto;
  max-width:none;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Film slides — autoplaying client reels. 16:9 panels shown full-frame
   (height-locked, width follows aspect) so nothing of the motion is cropped.
   They sit on the same dark backing as photo slides and read as the moving
   counterpoint to the static identity plates. */
.v5-show-slide.is-film video{
  display:block;
  height:100%;
  width:auto;
  max-width:none;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  background:#1a1f1c;
}

/* Identity-plate slides — render the client's bespoke specimen (its wordmark
   lives inside the plate), portrait, on its own background. */
.v5-show-slide.is-spec{ background:transparent; }
.v5-show-slide-spec{ height:100%; }
.v5-show-slide-spec svg{
  display:block;
  height:100%;
  width:auto;
  user-select:none;
  pointer-events:none;
}
/* Slides whose source is a transparent cut-out sit on paper, not on dark */
.v5-show-slide.is-cutout{
  background:color-mix(in oklab, var(--v4-paper-2) 88%, var(--v4-accent) 4%);
}
.v5-show-slide.is-cutout img{ object-fit:contain; }

/* Caption — slate chip top-left + label strip bottom */
.v5-show-slide-top{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none; gap:12px;
}
.v5-show-slide-n{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,234,212,0.92);
  background:rgba(13,16,12,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:6px 10px; border-radius:4px;
}
.v5-show-slide.is-cutout .v5-show-slide-n{
  color:var(--v4-ink);
  background:color-mix(in oklab, var(--v4-paper) 70%, transparent);
  border:1px solid var(--v4-line-soft);
}
.v5-show-slide-kind{
  font-family:var(--mono);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,234,212,0.8);
  background:rgba(13,16,12,0.45);
  padding:6px 9px; border-radius:4px;
  text-align:right;
}
.v5-show-slide.is-cutout .v5-show-slide-kind{
  color:var(--v4-mute);
  background:color-mix(in oklab, var(--v4-paper) 60%, transparent);
}

.v5-show-slide-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:48px 20px 18px;
  display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(0deg, rgba(13,16,12,0.78) 0%, rgba(13,16,12,0.28) 58%, transparent 100%);
  pointer-events:none;
}
.v5-show-slide.is-cutout .v5-show-slide-cap{
  background:linear-gradient(0deg, color-mix(in oklab, var(--v4-paper) 88%, transparent) 0%, transparent 100%);
}
.v5-show-slide-client{
  font-family:var(--sans);
  font-weight:600;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,234,212,0.78);
  margin-bottom:4px;
}
.v5-show-slide-label{
  font-family:var(--serif);
  font-size:21px; line-height:1.12;
  letter-spacing:-.012em;
  color:#f6efe0;
}
.v5-show-slide.is-cutout .v5-show-slide-label{ color:var(--v4-ink); }
.v5-show-slide-note{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,234,212,0.72);
}
.v5-show-slide.is-cutout .v5-show-slide-note{ color:var(--v4-mute); }

/* Edge fades hint that the track continues */
.v5-show-viewer::before,
.v5-show-viewer::after{
  content:"";
  position:absolute; top:0; bottom:26px;
  width:48px; z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.v5-show-viewer::before{
  left:0;
  background:linear-gradient(90deg, var(--v4-paper) 0%, transparent 100%);
}
.v5-show-viewer::after{
  right:0;
  background:linear-gradient(270deg, var(--v4-paper) 0%, transparent 100%);
}
.v5-show-viewer.has-prev::before{ opacity:1; }
.v5-show-viewer.has-next::after{ opacity:1; }

/* =======================================================================
   CONTROL BAR — counter · progress rail · arrows
   ======================================================================= */
.v5-show-controls{
  display:flex; align-items:center; gap:24px;
  margin-top:30px;
}
.v5-show-counter{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em;
  color:var(--v4-ink);
  flex:0 0 auto;
  min-width:88px;
}
.v5-show-counter .cur{ color:var(--v4-accent); }
.v5-show-counter .tot{ color:var(--v4-mute); }

.v5-show-rail-track{
  position:relative;
  flex:1 1 auto;
  height:2px;
  background:var(--v4-line);
  border-radius:2px;
  overflow:hidden;
}
.v5-show-rail-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:var(--v4-accent);
  border-radius:2px;
  transition:width .18s linear, left .18s linear;
}

.v5-show-arrows{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto;
}
.v5-show-arrow{
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--v4-line);
  border-radius:50%;
  background:var(--v4-paper);
  color:var(--v4-ink);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,.7,.2,1), opacity .25s ease;
}
.v5-show-arrow svg{ width:18px; height:18px; display:block; }
.v5-show-arrow:hover:not(:disabled){
  background:var(--v4-ink);
  border-color:var(--v4-ink);
  color:var(--v4-paper);
  transform:translateY(-2px);
}
.v5-show-arrow:disabled{ opacity:.32; cursor:default; }

/* Hint row + CTA */
.v5-show-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-top:38px;
  padding-top:26px;
  border-top:1px solid var(--v4-line-soft);
}
.v5-show-hint{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v4-mute);
}
.v5-show-hint-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--v4-accent);
  animation:v5-show-pulse 2.6s ease-in-out infinite;
}
@keyframes v5-show-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.v5-show-cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 24px;
  border:1px solid var(--v4-ink);
  background:var(--v4-ink);
  color:var(--v4-paper);
  border-radius:60px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500;
  transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,.7,.2,1);
}
.v5-show-cta:hover{
  background:var(--v4-accent);
  border-color:var(--v4-accent);
  transform:translateY(-2px);
}
.v5-show-cta-arr{ font-family:var(--mono); font-size:14px; transition:transform .3s ease; }
.v5-show-cta:hover .v5-show-cta-arr{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .v5-show-track{ scroll-behavior:auto; }
}