/* ============================================================
   Home A/B Dish Carousel — DESKTOP ONLY
   Variant A = Direction C (Cinematic Full-Bleed)
   Variant B = Direction D (Split Panel Slide)
   Source design: concepts/carousel.html (Claude Cowork).

   Mobile is unaffected: #slider-home (which wraps these two
   sections) is hidden on mobile by the existing toggle in
   index.html, and the mobile #mobile-actions layout is untouched.
   Global resets / body styles from the concept file were removed
   so they cannot leak into the rest of the site.
   ============================================================ */

.dirC, .dirD{
  --gold:#c9a227;
  --gold-bright:#e8c34a;
  --char:#0e1311;
  --cream:#f7f2e9;
  --ink:#211d16;
  --red:#b5482f;
  --green:#16352b;
  --serif:'Inter',sans-serif;
  --sans:'Inter',sans-serif;
  --ease:cubic-bezier(.65,.05,.2,1);
}
.dirC, .dirD{font-family:var(--sans)}
.dirC img, .dirD img{display:block}

/* ════════════════════════════════════════════════
   DIRECTION C — CINEMATIC FULL-BLEED
════════════════════════════════════════════════ */
.dirC{position:relative;height:min(88vh,760px);min-height:560px;overflow:hidden;background:var(--char)}

.c-slide{position:absolute;inset:0;visibility:hidden}
.c-slide.active{visibility:visible;z-index:2}
.c-slide.leaving{visibility:visible;z-index:1}

.c-imgWrap{position:absolute;inset:0;overflow:hidden}
.c-imgWrap img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
}
.c-slide.active .c-imgWrap{
  clip-path:inset(0 0 0 100%);
  animation:cWipe 1.1s var(--ease) forwards;
}
.c-slide.active .c-imgWrap img{
  animation:cSettle 7s linear forwards;
}
.c-slide.leaving .c-imgWrap img{
  animation:cDrift 1.1s var(--ease) forwards;
}
@keyframes cWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes cSettle{from{transform:scale(1.08) translateX(2%)}to{transform:scale(1.0) translateX(0)}}
@keyframes cDrift{from{transform:scale(1.0)}to{transform:scale(1.06) translateX(-3%)}}

.c-scrim{
  position:absolute;inset:0;
  /* no overlay — full-brightness photo, zero opacity */
  background:none;
}

.c-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  max-width:1180px;margin:0 auto;padding:0 56px;z-index:3;pointer-events:none;
}
.c-content > *{pointer-events:auto}

/* opaque panel behind the text so it stays readable over bright photos */
.c-panel{
  align-self:flex-start;max-width:600px;
  background:rgba(8,11,10,.4);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:30px 36px 34px;
}

.c-cat{
  color:var(--gold-bright);font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.c-cat::after{content:"";width:56px;height:1px;background:var(--gold-bright);opacity:.6}

.c-name{
  font-family:var(--serif);font-weight:300;color:var(--cream);
  font-size:clamp(48px,7.5vw,96px);line-height:.98;letter-spacing:-.015em;
  margin-top:18px;overflow:hidden;
}
.c-name .ln{display:block;overflow:hidden}
.c-name .ln span{display:inline-block}

.c-desc{
  color:#c5cdc8;font-size:15.5px;line-height:1.7;max-width:44ch;margin-top:20px;
}
.c-row{display:flex;align-items:center;gap:30px;margin-top:28px}
.c-cta{
  color:var(--cream);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:999px;
  padding:13px 30px;transition:all .25s;
}
.c-cta:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--char)}
.c-cta:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

.c-slide .c-cat,.c-slide .c-desc,.c-slide .c-row{opacity:0}
.c-slide .c-name .ln span{transform:translateY(110%)}
.c-slide.active .c-cat{animation:cUp .7s .25s var(--ease) forwards}
.c-slide.active .c-name .ln span{animation:cRise .9s .35s var(--ease) forwards}
.c-slide.active .c-desc{animation:cUp .7s .55s var(--ease) forwards}
.c-slide.active .c-row{animation:cUp .7s .7s var(--ease) forwards}
@keyframes cUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes cRise{to{transform:translateY(0)}}

.c-chrome{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  max-width:1180px;margin:0 auto;padding:0 56px 34px;
  display:flex;align-items:flex-end;gap:26px;
}
.c-counter{font-family:var(--serif);color:var(--cream);font-size:15px;letter-spacing:.1em;white-space:nowrap}
.c-counter .tot{color:#6f7a74}
.c-bars{flex:1;display:flex;gap:8px;padding-bottom:7px}
.c-bar{
  flex:1;height:2px;background:rgba(255,255,255,.22);cursor:pointer;border:none;padding:0;
  position:relative;overflow:hidden;
}
.c-bar:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
.c-bar .f{position:absolute;inset:0;background:var(--gold-bright);transform:scaleX(0);transform-origin:left}
.c-bar.done .f{transform:scaleX(1)}
.c-bar.running .f{animation:cFill var(--dur,7s) linear forwards}
@keyframes cFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c-btns{display:flex;gap:10px}
.c-btn{
  width:50px;height:50px;border-radius:50%;cursor:pointer;background:rgba(10,14,12,.35);
  border:1px solid rgba(255,255,255,.35);color:var(--cream);font-size:17px;
  backdrop-filter:blur(4px);transition:all .2s;
}
.c-btn:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.c-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

@media (max-width:780px){
  .dirC{height:92vh;min-height:520px}
  .c-content{padding:0 26px;justify-content:flex-end;padding-bottom:150px}
  .c-chrome{padding:0 26px 26px;flex-wrap:wrap;gap:16px}
  .c-desc{font-size:14px}
}

/* ════════════════════════════════════════════════
   DIRECTION D — SPLIT PANEL SLIDE
════════════════════════════════════════════════ */
.dirD{background:var(--cream);padding:0;position:relative;overflow:hidden}
.d-grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px}

.d-textPanel{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  /* extra top padding clears the overlaid Hanuman logo/header */
  padding:170px 64px 70px;background:#16352b;overflow:hidden;
}
.d-kicker{color:#FFCE1C;font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:600}
.d-stage{position:relative;margin-top:10px;min-height:300px}
.d-slideTxt{position:absolute;inset:0;visibility:hidden}
.d-slideTxt.active{visibility:visible}
.d-slideTxt.leaving{visibility:visible}

.d-name{
  font-family:var(--serif);font-weight:300;color:#FFCE1C;
  font-size:clamp(38px,4.6vw,60px);line-height:1.02;letter-spacing:-.01em;
  padding-top:34px;max-width:9ch;
}
.d-desc{color:#f0e2b0;font-size:15px;line-height:1.75;max-width:38ch;margin-top:20px}
.d-rowD{display:flex;align-items:center;gap:26px;margin-top:26px}
.d-linkD{
  color:#FFCE1C;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid #FFCE1C;padding-bottom:5px;transition:all .2s;
}
.d-linkD:hover{color:#fff;border-color:#fff}
.d-linkD:focus-visible{outline:2px solid var(--red);outline-offset:4px}

.d-slideTxt.active > *{animation:dTxtIn .8s var(--ease) both}
.d-slideTxt.active .d-name{animation-delay:.08s}
.d-slideTxt.active .d-desc{animation-delay:.18s}
.d-slideTxt.active .d-rowD{animation-delay:.28s}
.d-slideTxt.leaving > *{animation:dTxtOut .5s var(--ease) both}
@keyframes dTxtIn{from{opacity:0;transform:translateX(calc(46px * var(--dir,1)))}to{opacity:1;transform:none}}
@keyframes dTxtOut{from{opacity:1}to{opacity:0;transform:translateX(calc(-38px * var(--dir,1)))}}

.d-imgPanel{position:relative;overflow:hidden;background:var(--green)}
.d-slideImg{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.d-slideImg img{width:100%;height:100%;object-fit:cover}
.d-slideImg.active{visibility:visible;z-index:2;animation:dImgIn .9s var(--ease) both}
.d-slideImg.leaving{visibility:visible;z-index:1;animation:dImgOut .9s var(--ease) both}
.d-slideImg.active img{animation:dImgInner .9s var(--ease) both}
@keyframes dImgIn{from{transform:translateY(calc(100% * var(--dir,1)))}to{transform:none}}
@keyframes dImgInner{from{transform:translateY(calc(-42% * var(--dir,1))) scale(1.06)}to{transform:none}}
@keyframes dImgOut{from{transform:none}to{transform:translateY(calc(-18% * var(--dir,1)))}}

.d-imgChrome{
  position:absolute;bottom:26px;right:26px;z-index:5;display:flex;gap:10px;
}
.d-btn{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:var(--cream);border:none;color:var(--ink);font-size:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);transition:all .2s;
}
.d-btn:hover{background:var(--gold-bright)}
.d-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

.d-dots{display:flex;gap:10px;margin-top:44px}
.d-dot{
  height:3px;width:34px;border:none;cursor:pointer;background:rgba(255,206,28,.35);
  transition:background .25s;padding:0;
}
.d-dot[aria-selected="true"]{background:#FFCE1C}
.d-dot:focus-visible{outline:2px solid #FFCE1C;outline-offset:4px}

@media (max-width:880px){
  .d-grid{grid-template-columns:1fr;min-height:0}
  .d-imgPanel{height:46vh;min-height:300px;order:-1}
  .d-textPanel{padding:44px 28px 52px}
  .d-stage{min-height:340px}
}

@media (prefers-reduced-motion: reduce){
  .dirC *,.dirD *{animation-duration:.01ms !important;animation-delay:0ms !important}
}