/* Oberoi Sukhvilas lab page: coded menu animations. Cream and gold are the menu's own paper and frame (artwork). */
.ob-stage{--ob-paper:#f9f6e0;--ob-gold:#d6b890;position:relative;width:100%;aspect-ratio:16/9;background:var(--ob-paper);border-radius:16px;overflow:hidden} /* ds-ok: menu cover paper and frame gold */
.ob-stage>*,.ob-scene>*{position:absolute;margin:0}
.ob-stage>.ob-scene{inset:0}
.ob-stage img{display:block;width:auto!important;max-width:none!important;min-width:0!important;min-height:0!important;max-height:none!important;object-fit:fill!important;border-radius:0}
.ob-label{font:400 12px/1.4 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--mj-muted);white-space:nowrap}

/* 01 photo to etching */
.ob-process .ob-card{left:6%;top:10%;height:80%!important;border-radius:8px!important;box-shadow:0 10px 30px #19061526}
.ob-process .ob-crop{left:11.5%;top:34%;width:19%;height:42%;border:1px solid var(--mj-ink);border-radius:4px}
.ob-process .ob-cutout{left:40%;top:24%;height:52%!important}
.ob-process .ob-etched{left:68%;top:14%;height:72%!important}
.ob-process .ob-arrow{top:48%;width:4%;height:1px;background:var(--mj-ink)}
.ob-process .ob-arrow::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid var(--mj-ink);border-right:1px solid var(--mj-ink);transform:rotate(45deg)}
.ob-process .ob-a1{left:34.5%}.ob-process .ob-a2{left:61.5%}
.ob-process .ob-label{bottom:4%;translate:-50% 0}
.ob-process .ob-l1{left:21%}.ob-process .ob-l2{left:50%}.ob-process .ob-l3{left:80%}

/* 03 eight drinks */
.ob-loop .ob-track{left:0;bottom:12%;height:76%;display:flex;align-items:flex-end;gap:clamp(40px,6vw,110px);padding-left:clamp(40px,6vw,110px);width:max-content}
.ob-loop .ob-track img{height:calc(var(--h) * 1%)!important}
.ob-loop.is-live .ob-track{animation:ob-marquee 46s linear infinite}
@keyframes ob-marquee{to{transform:translateX(-50%)}}

/* 05 Dilkash taken apart */
.ob-dilkash .ob-title{left:6%;top:9%;width:34%!important;height:auto}
.ob-dilkash .ob-notes{right:6%;top:11.5%;width:27%!important;height:auto}
.ob-dilkash .ob-rule{left:6%;right:6%;top:23%;height:1px;background:var(--ob-gold)}
.ob-dilkash .ob-drink{left:36.47%;top:27%;height:66%!important}
.ob-dilkash .ob-ing{width:auto}
.ob-dilkash .ob-glen{left:17.3%;top:46.5%;height:19%!important}
.ob-dilkash .ob-fig{left:67.5%;top:57.9%;height:15%!important}
.ob-dilkash .ob-bit{left:17.9%;top:71.1%;height:15%!important}
.ob-dilkash svg{inset:0;width:100%;height:100%;overflow:visible}
.ob-dilkash path{fill:none;stroke:var(--ob-gold);stroke-width:1.5}

/* 07 Gulnar, built up */
.ob-build-wrap{margin:0}
.ob-build{aspect-ratio:842/595;background:#fffefa} /* ds-ok: inner page paper */
.ob-build .ob-layer{position:absolute;inset:0;background:url(/assets/lab-workflows/oberoi/page-gulnar.webp) 0 0/100% 100% no-repeat}
.ob-build .ob-blank{position:absolute;left:3.6%;top:5.4%;right:3.6%;bottom:5.4%;background:#fffefa} /* ds-ok: inner page paper */
.ob-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.ob-steps li{border-top:1px solid var(--mj-line);padding-top:10px;transition:color 250ms var(--ease-out-strong,cubic-bezier(.23,1,.32,1)),border-color 250ms var(--ease-out-strong,cubic-bezier(.23,1,.32,1))}
.ob-steps li.is-on{color:var(--mj-ink);border-color:var(--mj-ink)}

@media(max-width:760px){
  .ob-label{letter-spacing:.02em}
  .ob-process .ob-label{bottom:3%}
  .ob-process .ob-card{top:6%;height:74%!important}
  .ob-process .ob-crop{top:29%;height:39%;left:11%;width:17.5%}
  .ob-process .ob-cutout{top:20%;height:48%!important}
  .ob-process .ob-etched{top:8%;height:68%!important}
  .ob-process .ob-arrow{top:42%}
  .ob-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.ob-loop .ob-track{animation:none!important}.ob-loop{overflow-x:auto}}