/* renzos-kenburns.css — Renzo's KEN BURNS slideshow (house asset).
   Slow zoom/pan on stills + crossfade. Pure CSS animation — no video, no
   player, no sound. JS (renzos-kenburns.js) is OPTIONAL and only pauses the
   animation while the band is off-screen; with JS disabled the CSS still runs.

   Visuals use the CONSUMING PAGE'S v1 tokens (with safe fallbacks) — no v2
   tokens here, same rule as maitre-nav.css:
     --bg-dark (base behind the photos)   --gold (eyebrow + rule)
     --pad-x (gutter)                     --max-w (content width)

   CLASS CONTRACT
     .kb                 slideshow root            [data-kenburns][data-kb-slides="3..6"]
       .kb-stage           the photo layer (absolute, behind content)
         .kb-slide           one <figure> per photo, in show order
           picture > img       object-fit:cover
       .kb-inner           optional content over the photos (eyebrow/h2/CTA)
     .kb--band           full-bleed mood-band height preset

   TUNING (set on .kb)
     --kb-step    seconds each slide holds        default 7s
     --kb-scrim   overlay darkness 0–1            default .52
     --kb-min     band min-height                 default clamp(420px,58vh,600px)

   RULES
     · 3 slides minimum (fewer reads as a glitch), 6 maximum.
     · prefers-reduced-motion ⇒ slide 1, static, no animation, no crossfade.
     · Below-the-fold bands: loading="lazy" on every <img>.
     · Mobile gets its own smaller export via <source media="(max-width:768px)">.
   ------------------------------------------------------------------------ */

.kb{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg-dark,#1C1A17);
  --kb-step:7s; --kb-scrim:.52;
}

/* ── the photo layer ─────────────────────────────────────────────────── */
.kb-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.kb-stage::after{                       /* scrim — keeps copy legible */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  /* A soft pool of shade under the copy + a top-to-bottom wash. The pool is
     what lets the same band survive a bright plate (the filet's arugula) and
     a dark one (the lamb) without re-tuning per photo. */
  background:
    radial-gradient(74% 88% at 50% 50%,
                    rgba(8,8,8,calc(var(--kb-scrim) + .14)), transparent 74%),
    linear-gradient(rgba(10,10,10,calc(var(--kb-scrim) - .18)),
                    rgba(10,10,10,var(--kb-scrim)) 60%,
                    rgba(10,10,10,calc(var(--kb-scrim) + .08)));
}
.kb-slide{
  position:absolute; inset:0; margin:0; z-index:1; overflow:hidden;
  opacity:0; animation-fill-mode:both; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; will-change:opacity;
}
.kb-slide picture{ display:contents; }
.kb-slide img{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:var(--kb-focus,50% 50%);
  animation-fill-mode:both; animation-timing-function:linear;
  animation-iteration-count:infinite; will-change:transform;
  backface-visibility:hidden;
}

/* ── cycle length + per-slide entry delay (counts 3–6) ───────────────── */
.kb[data-kb-slides="3"] .kb-slide,.kb[data-kb-slides="3"] .kb-slide img{animation-duration:calc(var(--kb-step)*3)}
.kb[data-kb-slides="4"] .kb-slide,.kb[data-kb-slides="4"] .kb-slide img{animation-duration:calc(var(--kb-step)*4)}
.kb[data-kb-slides="5"] .kb-slide,.kb[data-kb-slides="5"] .kb-slide img{animation-duration:calc(var(--kb-step)*5)}
.kb[data-kb-slides="6"] .kb-slide,.kb[data-kb-slides="6"] .kb-slide img{animation-duration:calc(var(--kb-step)*6)}

.kb-slide:nth-child(1),.kb-slide:nth-child(1) img{animation-delay:0s}
.kb-slide:nth-child(2),.kb-slide:nth-child(2) img{animation-delay:calc(var(--kb-step)*1)}
.kb-slide:nth-child(3),.kb-slide:nth-child(3) img{animation-delay:calc(var(--kb-step)*2)}
.kb-slide:nth-child(4),.kb-slide:nth-child(4) img{animation-delay:calc(var(--kb-step)*3)}
.kb-slide:nth-child(5),.kb-slide:nth-child(5) img{animation-delay:calc(var(--kb-step)*4)}
.kb-slide:nth-child(6),.kb-slide:nth-child(6) img{animation-delay:calc(var(--kb-step)*5)}

/* ── the crossfade — one keyframe set per slide count ────────────────── */
.kb[data-kb-slides="3"] .kb-slide{animation-name:kb-fade-3}
.kb[data-kb-slides="4"] .kb-slide{animation-name:kb-fade-4}
.kb[data-kb-slides="5"] .kb-slide{animation-name:kb-fade-5}
.kb[data-kb-slides="6"] .kb-slide{animation-name:kb-fade-6}
/* Percentages differ per count only so the FADE ITSELF stays ~1.26s at every
   slide count — St. Pete's wine-bar number, which is the approved feel. */
@keyframes kb-fade-3{0%{opacity:0}6%{opacity:1}33.33%{opacity:1}39.33%{opacity:0}100%{opacity:0}}
@keyframes kb-fade-4{0%{opacity:0}4.5%{opacity:1}25%{opacity:1}29.5%{opacity:0}100%{opacity:0}}
@keyframes kb-fade-5{0%{opacity:0}3.6%{opacity:1}20%{opacity:1}23.6%{opacity:0}100%{opacity:0}}
@keyframes kb-fade-6{0%{opacity:0}3%{opacity:1}16.66%{opacity:1}19.66%{opacity:0}100%{opacity:0}}

/* ── the drift — the Ken Burns move itself ───────────────────────────────
   Travel is held well under the zoom's slack ((scale-1)/2) so an edge can
   never show. Endpoint holds while the slide is invisible, so the loop-point
   snap back to the start pose is never seen. */
.kb[data-kb-slides="3"] .kb-slide img{animation-name:kb-drift-3}
.kb[data-kb-slides="4"] .kb-slide img{animation-name:kb-drift-4}
.kb[data-kb-slides="5"] .kb-slide img{animation-name:kb-drift-5}
.kb[data-kb-slides="6"] .kb-slide img{animation-name:kb-drift-6}
@keyframes kb-drift-3{
  0%    {transform:scale(var(--kb-s0,1)) translate3d(var(--kb-x0,0),var(--kb-y0,0),0)}
  39.33%,100%{transform:scale(var(--kb-s1,1.09)) translate3d(var(--kb-x1,0),var(--kb-y1,0),0)}}
@keyframes kb-drift-4{
  0%    {transform:scale(var(--kb-s0,1)) translate3d(var(--kb-x0,0),var(--kb-y0,0),0)}
  29.5%,100%{transform:scale(var(--kb-s1,1.09)) translate3d(var(--kb-x1,0),var(--kb-y1,0),0)}}
@keyframes kb-drift-5{
  0%    {transform:scale(var(--kb-s0,1)) translate3d(var(--kb-x0,0),var(--kb-y0,0),0)}
  23.6%,100%{transform:scale(var(--kb-s1,1.09)) translate3d(var(--kb-x1,0),var(--kb-y1,0),0)}}
@keyframes kb-drift-6{
  0%    {transform:scale(var(--kb-s0,1)) translate3d(var(--kb-x0,0),var(--kb-y0,0),0)}
  19.66%,100%{transform:scale(var(--kb-s1,1.09)) translate3d(var(--kb-x1,0),var(--kb-y1,0),0)}}

/* THE HOUSE MOVE — St. Pete's wine-bar hero, which is the approved feel:
   a straight 6% push-in, no pan, every slide the same. Calm on purpose.
   Add class .kb--vary for the alternating zoom-in/zoom-out/drift set when a
   band wants more life; override any single slide inline with --kb-s0 etc. */
.kb-slide img{--kb-s0:1; --kb-s1:1.06; --kb-x0:0; --kb-x1:0; --kb-y0:0; --kb-y1:0}

.kb--vary .kb-slide:nth-child(4n+1) img{--kb-s0:1;    --kb-s1:1.09; --kb-x0:0;     --kb-x1:-1.6%; --kb-y0:0;     --kb-y1:0}
.kb--vary .kb-slide:nth-child(4n+2) img{--kb-s0:1.09; --kb-s1:1;    --kb-x0:1.2%;  --kb-x1:0;     --kb-y0:0;     --kb-y1:0}
.kb--vary .kb-slide:nth-child(4n+3) img{--kb-s0:1;    --kb-s1:1.08; --kb-x0:0;     --kb-x1:0;     --kb-y0:1.2%;  --kb-y1:-1.2%}
.kb--vary .kb-slide:nth-child(4n+4) img{--kb-s0:1.08; --kb-s1:1;    --kb-x0:-1.2%; --kb-x1:0;     --kb-y0:0;     --kb-y1:0}

/* ── off-screen pause (JS-gated; no JS ⇒ always running) ─────────────── */
.kb[data-kb-ready="1"] .kb-slide,
.kb[data-kb-ready="1"] .kb-slide img{animation-play-state:paused}
.kb[data-kb-ready="1"][data-kb-inview="1"] .kb-slide,
.kb[data-kb-ready="1"][data-kb-inview="1"] .kb-slide img{animation-play-state:running}

/* ── reduced motion — slide 1, static. The law. ──────────────────────────
   Printing gets the same still (a paused cycle can sit between slides). */
@media print{
  .kb-slide,.kb-slide img{animation:none!important}
  .kb-slide{opacity:0}
  .kb-slide:first-child{opacity:1}
  .kb-slide img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .kb-slide,.kb-slide img{animation:none!important}
  .kb-slide{opacity:0}
  .kb-slide:first-child{opacity:1}
  .kb-slide img{transform:none}
}

/* ── the MOOD BAND preset ────────────────────────────────────────────── */
.kb--band{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--kb-min,clamp(420px,58vh,600px));
  padding:clamp(3rem,7vw,5rem) var(--pad-x,1.25rem);
}
.kb-inner{ position:relative; z-index:3; max-width:var(--max-w,1200px); margin:0 auto; }
.kb-eyebrow{
  font-size:.68rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold,#D0A93E); margin:0 0 1.1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.kb-headline{
  font-weight:300; font-size:clamp(2rem,4.5vw,3.5rem); line-height:1.04;
  letter-spacing:-.75px; color:#fff; margin:0 0 1rem;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.kb-sub{
  font-weight:300; font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.75;
  color:rgba(244,236,216,.86); max-width:52ch; margin:0 auto 1.9rem;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.kb-inner .btn{ position:relative; z-index:3; }


/* ── the PANEL preset — the light-field alternative to .kb--band ─────────
   The page keeps its own light section; the slideshow is a framed window in
   it and the copy sits beside the photo instead of on top of it. No scrim,
   so the food is at full brightness. Use when a dark full-bleed band would
   put two dark blocks too close together in the page's value rhythm. */
.kb--panel{
  display:grid; align-items:center;
  grid-template-columns:1fr; gap:clamp(1.75rem,4vw,3rem);
  background:var(--bg-section,#F5F0EA);
  padding:var(--pad-y,clamp(3.5rem,9vw,7.5rem)) var(--pad-x,1.25rem);
  --kb-scrim:0;
}
.kb--panel .kb-stage{
  position:relative; inset:auto; aspect-ratio:4/3;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 18px 44px rgba(28,26,23,.14);
}
.kb--panel .kb-stage::after{                 /* material edge, not a scrim */
  background:none; box-shadow:inset 0 0 0 1px rgba(28,26,23,.10);
}
.kb--panel .kb-inner{ text-align:left; max-width:46ch; margin:0; }
.kb--panel .kb-headline{ color:var(--text-primary,#1a1a1a); text-shadow:none }
.kb--panel .kb-sub{ color:var(--text-secondary,#666); text-shadow:none; margin:0 0 1.9rem }
.kb--panel .kb-eyebrow{ text-shadow:none }
@media (min-width:900px){
  .kb--panel{ grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem,5vw,4.5rem) }
  .kb--panel .kb-stage{ aspect-ratio:5/4 }
}