/* ===========================================================================
   Ask the Kitchen — the stills slideshow
   Loaded on any page that includes includes/slideshow.php.
   Colour and type come from shared/brand.css.
   =========================================================================== */

.show{ margin-top:2.4rem }

.show__stage{
  position:relative;
  aspect-ratio:16/9;
  border:var(--edge); border-radius:var(--r);
  box-shadow:var(--pop);
  overflow:hidden;
  background:var(--ink);
}

.show__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
  display:grid;
}
.show__slide.on{ opacity:1; pointer-events:auto }

.show__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Slow drift. Only on the live slide, so idle images are not being animated. */
.show__slide.on .show__img{ animation:show-burns 6s linear forwards }
@keyframes show-burns{ from{ transform:scale(1.02) } to{ transform:scale(1.11) } }

/* Placeholder doubles as the brief for the missing still. */
.show__ph{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:.9rem; text-align:center;
  padding:clamp(1.2rem,4vw,2.5rem);
  background:repeating-linear-gradient(45deg,#241d3c,#241d3c 14px,#2c2448 14px,#2c2448 28px);
}
.show__ph-n{ font-family:var(--display); font-weight:900; font-size:2.4rem; line-height:1; color:var(--custard) }
.show__ph-p{ font-family:var(--mono); font-size:.78rem; line-height:1.7; color:#CFC7E6; max-width:52ch; margin:0 auto }
.show__ph-f{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--frost); margin:0 }

/* Caption sticker. Same edge and shadow as every other card on the site. */
.show__cap{
  position:absolute;
  left:clamp(.8rem,3%,1.6rem); right:clamp(.8rem,3%,1.6rem);
  bottom:clamp(.8rem,4%,1.8rem);
  display:flex;
}
.show__cap span{
  background:var(--milk); color:var(--ink);
  border:var(--edge); border-radius:14px; box-shadow:var(--pop);
  padding:.6rem 1rem;
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 112;
  font-size:clamp(1rem,2.4vw,1.55rem); line-height:1.15;
  max-width:min(100%,28ch);
}
.show__cap--hot span{ background:var(--tomato); color:#fff }
.show__cap--yes span{ background:var(--custard) }
.show__cap--tiny span{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(.7rem,1.6vw,.85rem); letter-spacing:.1em; text-transform:uppercase;
}

/* End card */
.show__slide--end{
  background:var(--ink);
  place-content:center; text-align:center; gap:.8rem; padding:2rem;
}
.show__logo{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 100;
  font-size:clamp(1.8rem,6vw,3.4rem); line-height:.9; letter-spacing:-.03em;
  text-transform:lowercase; color:var(--custard);
}
.show__tagline{
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:clamp(1rem,3vw,1.5rem); margin:0;
}
.show__url{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--frost); margin:0 }

/* Progress */
.show__bars{ position:absolute; top:.7rem; left:.7rem; right:.7rem; z-index:5; display:flex; gap:.3rem }
.show__bars i{ flex:1; height:4px; background:rgba(255,249,238,.32); border-radius:99px; overflow:hidden }
.show__bars i b{ display:block; height:100%; width:0; background:var(--custard) }
.show__bars i.done b{ width:100% }
.show__bars i.live b{ animation:show-fill linear forwards }
@keyframes show-fill{ from{ width:0 } to{ width:100% } }

/* Controls */
.show__ctrl{ display:flex; gap:.6rem; align-items:center; margin-top:1.2rem; flex-wrap:wrap }
.show__btn{
  font-family:var(--display); font-weight:800; font-size:.92rem; cursor:pointer;
  border:var(--edge); border-radius:999px; padding:.6rem 1.2rem;
  background:var(--custard); color:var(--ink); box-shadow:var(--pop-sm);
  transition:transform .1s ease;
}
.show__btn:hover{ transform:translate(-2px,-2px) }
.show__btn:active{ transform:translate(2px,2px) }
.show__now{ margin-left:auto }

/* On a dark section the controls need to sit on the light side. */
.demo .show__now, .showcase--dark .show__now{ color:rgba(255,249,238,.65) }

@media(prefers-reduced-motion:reduce){
  .show__slide.on .show__img{ animation:none }
  .show__bars i.live b{ animation:none; width:100% }
}

/* Without JS: stack the slides so the story is still readable. */
.no-js .show__stage{ aspect-ratio:auto; display:grid; gap:0 }
.no-js .show__slide{ position:relative; opacity:1; pointer-events:auto; aspect-ratio:16/9 }
.no-js .show__ctrl, .no-js .show__bars{ display:none }