/* =====================================================================
   NIVARA SIGNAGE - brand stylesheet (TV, 1920 x 1080 design pixels)
   Tokens:  forest green bg (pendrive green)  #1B4327 / #163820 / #112E1A
            gold  #E2B65C   cream #F6EEDA   sage #BCCDB4   card #1E472B
            sold-out red #C8402E   veg #1E8A3A   non-veg #8F2B1B
   Type:    Outfit 500/600/700 (Latin), Poppins Devanagari 500/600 (Hindi)
   Grid:    8px; safe margin 88px left/right; header 0-170; ribbon 984-1080
   Motion:  enter cubic-bezier(.22,.61,.36,1); loops >= 6s; one big moment at a time
   Written for Samsung Tizen 4 (old Chromium): no grid, no flex gap, no inset,
   no aspect-ratio, never var() inside animation timing.
   ===================================================================== */
@font-face{font-family:Outfit;font-weight:500;src:url(/fonts/outfit-500.woff2) format('woff2')}
@font-face{font-family:Outfit;font-weight:600;src:url(/fonts/outfit-600.woff2) format('woff2')}
@font-face{font-family:Outfit;font-weight:700;src:url(/fonts/outfit-700.woff2) format('woff2')}
@font-face{font-family:Rupee;font-weight:400 900;src:url(/fonts/rupee.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:Deva;font-weight:500;src:url(/fonts/deva-500.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:Deva;font-weight:600 700;src:url(/fonts/deva-600.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#112E1A}
.screen{position:relative;width:1920px;height:1080px;overflow:hidden;color:#F6EEDA;font-family:Outfit,Rupee,Deva,sans-serif;
  --acc:#E2B65C;--accr:226,182,92;--sage:#BCCDB4;--sager:188,205,180;--card:#1E472B;--ink:#163820;
  --bg:radial-gradient(120% 95% at 50% 42%,#1B4327 0%,#163820 58%,#112E1A 100%);background:var(--bg)}
.topbar{position:absolute;left:0;right:0;top:0;height:8px;background:var(--acc);z-index:6}
.wall{position:absolute;top:0;height:1080px;z-index:0;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
.wall.on{opacity:1}
.wall svg{display:block}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.95}}
.wall .tw{animation:tw 4.5s ease-in-out infinite}
.menu{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:1;transition:opacity .9s ease}
/* a TV that takes turns: the next page waits out of sight (menu-buf), the old one is gone at once after it faded (menu-old) */
.menu-buf,.menu-old{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:1}
.menu-buf{opacity:0}   /* not visibility: a photo inside sets its own visibility */
.menu-old{opacity:0}
.hi,.hh,.nh{font-family:Deva,Outfit,sans-serif}

/* ---------------- header: logo, time label, next line ---------------- */
.logo{position:absolute;left:82px;top:64px}
.dp{position:absolute;right:88px;top:56px;display:flex;align-items:center;white-space:nowrap}
.dp .ln{display:block;width:56px;height:2px;background:var(--acc);margin-right:20px}
.dp .nm{font-weight:600;font-size:29px;letter-spacing:.24em;color:var(--acc);text-transform:uppercase}
.dp .tm{font-weight:500;font-size:27px;letter-spacing:.05em;color:var(--sage);margin-left:22px;padding-left:22px;border-left:2px solid rgba(var(--sager),.35)}
.nx{position:absolute;right:88px;top:108px;display:none;align-items:center;font-size:23px;font-weight:500;color:var(--sage);white-space:nowrap}
.nx svg{width:22px;height:22px;margin-right:10px}
.nx b{color:var(--acc);font-weight:600;margin-left:10px}

/* ---------------- menu blocks (sizes scale with --s) ---------------- */
.box{position:absolute;display:flex;flex-direction:column;justify-content:center}
.box.top{justify-content:flex-start}
.flow{--s:1}
.cat{margin-top:calc(54px*var(--s))}.cat:first-child{margin-top:0}
.ch{display:flex;align-items:center}
.ch h2{font-weight:700;font-size:calc(48px*var(--s));letter-spacing:.2em;line-height:1;color:var(--acc);white-space:nowrap;text-transform:uppercase}
.ch .hh{margin-left:calc(20px*var(--s));font-size:calc(32px*var(--s));font-weight:500;color:var(--sage);white-space:nowrap;line-height:1}
.ch .note{margin-left:20px;font-size:calc(24px*var(--s));font-weight:700;letter-spacing:.08em;color:var(--sage);border:2px solid rgba(var(--sager),.5);border-radius:999px;padding:5px 15px;white-space:nowrap;line-height:1.2}
.ch .rule{flex:1;min-width:20px;height:3px;border-radius:2px;margin-left:24px;background:linear-gradient(90deg,rgba(var(--accr),.75),rgba(var(--accr),0))}
.ch.cont h2{opacity:.75}
/* duo: two categories side by side, each with its own photo - the heading takes two lines so the column stays roomy */
.duo .ch{-webkit-flex-wrap:wrap;flex-wrap:wrap}
.duo .ch h2{width:100%;font-size:calc(46px*var(--s));letter-spacing:.12em}
.duo .ch .hh{margin-left:0;margin-top:calc(12px*var(--s))}
.duo .ch .note{margin-top:calc(12px*var(--s))}
.duo .ch .rule{display:none}
/* narrow columns: a SOLD OUT / tag badge moves under the name instead of squeezing the line */
.duo .it .n{-webkit-flex-wrap:wrap;flex-wrap:wrap}
.duo .it .n .sold,.duo .it .n .tag{margin:calc(6px*var(--s)) 0 calc(4px*var(--s)) 0}
.duo .it .n .nt{margin-right:calc(14px*var(--s))}
.duo .it .l{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.duo .it .vm{margin-top:calc(12px*var(--s))}
.list{margin-top:calc(12px*var(--s))}
.vm{width:calc(36px*var(--s));height:calc(36px*var(--s));flex:none;border-radius:6px;background:#fff;border:calc(4px*var(--s)) solid #1E8A3A;display:flex;align-items:center;justify-content:center;margin-right:calc(22px*var(--s))}
.vm i{display:block;width:42%;height:42%;border-radius:50%;background:#1E8A3A}
.vm.nonveg{border-color:#8F2B1B}
.vm.nonveg i{width:0;height:0;border-radius:0;background:none;border-left:calc(9px*var(--s)) solid transparent;border-right:calc(9px*var(--s)) solid transparent;border-bottom:calc(15px*var(--s)) solid #8F2B1B}
.it{position:relative;display:flex;align-items:center}
.it .l{display:flex;align-items:center;min-width:0}
.it .tx{min-width:0}
.it .n{display:flex;align-items:center;font-weight:600;font-size:calc(58px*var(--s));line-height:1.06;white-space:nowrap}
.it .s{font-size:calc(31px*var(--s));font-weight:500;color:var(--sage);margin-top:calc(8px*var(--s));line-height:1.12;white-space:nowrap}
.it .s .hi{font-size:1.06em;color:var(--sage)}
.it .s .d{color:var(--sage)}
.it .s .hi+.d:before{content:"·";margin:0 .45em;opacity:.7}
.pr{font-weight:700;white-space:nowrap;line-height:1;font-size:calc(66px*var(--s))}
.pr b{font-family:Rupee,sans-serif;font-weight:700;color:var(--acc);font-size:.66em;margin-right:.08em;vertical-align:.16em}
.rows .it{justify-content:space-between;padding:calc(18px*var(--s)) 0;border-bottom:2px solid rgba(var(--sager),.2)}
.rows .it:last-child{border-bottom:0}
.rows .it .pr{margin-left:30px}
.lead .it{align-items:flex-start;padding:calc(17px*var(--s)) 0}
.lead .it .vm{margin-top:calc(9px*var(--s))}
.lead .it .n{font-size:calc(54px*var(--s))}
.lead .it .s{font-size:calc(29px*var(--s));margin-top:calc(6px*var(--s))}
.lead .it .dots{flex:1;min-width:28px;height:0;border-bottom:4px dotted rgba(var(--sager),.38);margin:calc(40px*var(--s)) 0 0 20px}
.lead .it .pr{font-size:calc(60px*var(--s));margin-left:20px;line-height:calc(57px*var(--s))}
/* compact (3 columns) */
.c3 .ch h2{font-size:calc(40px*var(--s));letter-spacing:.18em}
.c3 .ch .hh{font-size:calc(28px*var(--s))}
.c3 .cat{margin-top:calc(44px*var(--s))}.c3 .cat:first-child{margin-top:0}
.c3 .lead .it{padding:calc(13px*var(--s)) 0}
.c3 .lead .it .n{font-size:calc(46px*var(--s))}
.c3 .lead .it .s{font-size:calc(26px*var(--s))}
.c3 .lead .it .pr{font-size:calc(50px*var(--s));line-height:calc(49px*var(--s))}
.c3 .lead .it .dots{margin-top:calc(34px*var(--s))}
.c3 .vm{width:calc(30px*var(--s));height:calc(30px*var(--s));margin-right:calc(16px*var(--s))}
.c3 .lead .it .vm{margin-top:calc(8px*var(--s))}
.tag,.sold{margin-left:18px;font-size:calc(18px*var(--s));font-weight:700;letter-spacing:.16em;color:var(--acc);border:2px solid rgba(var(--accr),.7);border-radius:8px;padding:6px 12px;line-height:1;white-space:nowrap}
.sold{font-size:calc(20px*var(--s));letter-spacing:.12em;color:#FFF4E6;background:#C8402E;border:0;border-radius:8px;padding:7px 13px}
.it.out .nt,.it.out .s,.it.out .vm,.it.out .pr,.it.out .ith{opacity:.4}
.it.out .pr{opacity:.32}
/* 'Har item ki photo': a small photo before each item (blank when the item has none, so names stay in line) */
.ith{position:relative;display:block;flex:none;width:calc(92px*var(--s));height:calc(92px*var(--s));margin-right:calc(22px*var(--s))}
.ith img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;-webkit-transition:-webkit-transform 1.3s cubic-bezier(.22,.61,.36,1);transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.ith .sh{position:absolute;left:6%;top:6%;width:88%;height:88%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42) 78%,rgba(0,0,0,0) 100%);-webkit-transform:translate(3px,7px);transform:translate(3px,7px)}
/* the veg / non-veg mark on the photo's lower corner; without a photo it stands where the photo would be */
.ith .vm{position:absolute;right:calc(-4px*var(--s));bottom:calc(-2px*var(--s));width:calc(28px*var(--s));height:calc(28px*var(--s));margin:0!important;border-width:calc(3px*var(--s));box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:1}
.ith .vm.nonveg i{border-left-width:calc(7px*var(--s));border-right-width:calc(7px*var(--s));border-bottom-width:calc(11px*var(--s))}
.ith.no .vm{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:calc(34px*var(--s));height:calc(34px*var(--s));margin:calc(-17px*var(--s)) 0 0 calc(-17px*var(--s))!important;box-shadow:none}
.c3 .ith .vm,.duo .ith .vm{width:calc(24px*var(--s));height:calc(24px*var(--s))}
.ith.dk .sh{left:20%;top:80%;width:60%;height:14%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));-webkit-transform:none;transform:none}
.it.th,.it.th .l{-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.lead .it.th{padding:calc(10px*var(--s)) 0}
.lead .it.th .vm,.c3 .lead .it.th .vm{margin-top:0}
.lead .it.th .dots{margin-top:0;-webkit-align-self:center;align-self:center}
.rows .it.th{padding:calc(11px*var(--s)) 0}
.tbl .it.th .l{padding:calc(11px*var(--s)) 0}
.c3 .ith{width:calc(80px*var(--s));height:calc(80px*var(--s));margin-right:calc(16px*var(--s))}
/* narrow columns (2-4 categories, each with its big photo): smaller item photos so the names keep their size */
.duo .ith{width:calc(70px*var(--s));height:calc(70px*var(--s));margin-right:calc(14px*var(--s))}
.c3.duo .ith{width:calc(62px*var(--s));height:calc(62px*var(--s));margin-right:calc(12px*var(--s))}
.duo .it.th .vm{margin-top:0}
.ith.thin{-webkit-animation:thIn .9s cubic-bezier(.2,.75,.25,1) both;animation:thIn .9s cubic-bezier(.2,.75,.25,1) both}
.ith.dk.thin{-webkit-animation-name:dIn;animation-name:dIn}
@-webkit-keyframes thIn{from{opacity:0;-webkit-transform:scale(.55) rotate(-60deg)}to{opacity:1;-webkit-transform:none}}
@keyframes thIn{from{opacity:0;transform:scale(.55) rotate(-60deg)}to{opacity:1;transform:none}}
/* the dish in the big photo: its small plate turns and lifts a little */
.it.feat .ith img{-webkit-transform:scale(1.14) rotate(28deg);transform:scale(1.14) rotate(28deg)}
.it.feat .ith.dk img{-webkit-transform:translateY(-7%) scale(1.08);transform:translateY(-7%) scale(1.08)}
/* two-rate table (Limited / Refill) */
.intro{display:inline-block;margin-top:calc(20px*var(--s));background:var(--card);border:2px solid rgba(var(--accr),.35);border-radius:16px;padding:calc(11px*var(--s)) 22px;font-size:calc(30px*var(--s));font-weight:600;line-height:1.1;color:#F6EEDA;white-space:nowrap}
.intro b.ig{color:var(--acc);font-weight:600}
.tbl .hd{display:flex;justify-content:flex-end;margin-top:calc(18px*var(--s))}
.tbl .c{width:calc(190px*var(--s));flex:none;display:flex;align-items:center;justify-content:center}
.tbl .c.hl{background:rgba(var(--accr),.10)}
.tbl .hd .c{padding:calc(16px*var(--s)) 0 calc(12px*var(--s))}
.tbl .hd .c.hl{border-radius:22px 22px 0 0}
.tbl .hd .c span{font-size:calc(24px*var(--s));font-weight:700;letter-spacing:.16em;color:var(--sage);border:2px solid rgba(var(--sager),.55);border-radius:999px;padding:8px 20px;line-height:1;text-transform:uppercase}
.tbl .hd .c.hl span{color:var(--ink);background:var(--acc);border-color:var(--acc)}
.tbl .it{align-items:stretch;border-bottom:2px solid rgba(var(--sager),.2)}
.tbl .it:last-child{border-bottom:0}
.tbl .it:last-child .c.hl{border-radius:0 0 22px 22px}
.tbl .it .l{flex:1;padding:calc(20px*var(--s)) 0}
.tbl .it .n{font-weight:700;font-size:calc(60px*var(--s))}
.tbl .it .pr{font-size:calc(68px*var(--s))}
.tbl .c.hl .pr{color:var(--acc)}
.tnotes{margin-top:calc(20px*var(--s));font-size:calc(26px*var(--s));font-weight:500;color:var(--sage);line-height:1.25}
.tnotes b{color:#F6EEDA;font-weight:700}.tnotes b.g{color:var(--acc)}
/* bottom strip (Extras) */
.band{position:absolute;left:88px;right:88px;height:100px;background:var(--card);border:2px solid rgba(var(--accr),.35);border-radius:22px;padding:0 40px;display:flex;align-items:center}
.band h2{font-weight:700;font-size:38px;letter-spacing:.2em;color:var(--acc);margin-right:52px;text-transform:uppercase;white-space:nowrap}
.band .xs{flex:1;display:flex;justify-content:space-between;align-items:center}
.band .x{display:flex;align-items:baseline;font-size:40px;font-weight:600;white-space:nowrap}
.band .x .pr{font-size:46px;margin-left:14px}
.band .x.out .xn,.band .x.out .pr{opacity:.4}
.band .x .sold{font-size:16px;padding:5px 9px;margin-left:10px}
.pgn{position:absolute;right:88px;bottom:132px;font-size:22px;font-weight:600;letter-spacing:.2em;color:var(--sage)}

/* ---------------- food pictures ---------------- */
.hero{position:absolute}
.hero .art{position:absolute;left:0;top:0;width:100%;height:100%}
.hero .art img{display:block;width:100%;height:100%}
.hero .shd{position:absolute;left:4.5%;top:4.5%;width:91%;height:91%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.44) 80%,rgba(0,0,0,0) 100%);-webkit-transform:translate(14px,24px);transform:translate(14px,24px)}
.hero .shd.el{border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));-webkit-transform:none;transform:none}
.hero .stm{position:absolute;overflow:visible}
/* several photos: the plate turns away and the next one turns in (never two plates seen through each other) */
.hero.rot{visibility:hidden}
.hero.rot.on,.hero.rot.out{visibility:visible}
.hero.rot.out{-webkit-animation:hOut .6s cubic-bezier(.5,0,.75,.3) both;animation:hOut .6s cubic-bezier(.5,0,.75,.3) both}
.hero.rot.on.in{-webkit-animation:hIn 1.1s cubic-bezier(.16,.8,.24,1) .62s both;animation:hIn 1.1s cubic-bezier(.16,.8,.24,1) .62s both}
.hero.rot.out .art img{-webkit-animation:hTurnOut .6s cubic-bezier(.5,0,.75,.3) both;animation:hTurnOut .6s cubic-bezier(.5,0,.75,.3) both}
.hero.rot.on.in .art img{-webkit-animation:hTurnIn 1.1s cubic-bezier(.16,.8,.24,1) .62s both;animation:hTurnIn 1.1s cubic-bezier(.16,.8,.24,1) .62s both}
.hero.dk.rot.out{-webkit-animation-name:dOut;animation-name:dOut}
.hero.dk.rot.on.in{-webkit-animation-name:dIn;animation-name:dIn}
.hero.dk.rot.out .art img,.hero.dk.rot.on.in .art img{-webkit-animation:none;animation:none}
@-webkit-keyframes hOut{from{opacity:1;-webkit-transform:none}to{opacity:0;-webkit-transform:scale(.86)}}
@keyframes hOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.86)}}
@-webkit-keyframes hIn{from{opacity:0;-webkit-transform:scale(1.1)}to{opacity:1;-webkit-transform:none}}
@keyframes hIn{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:none}}
@-webkit-keyframes hTurnOut{from{-webkit-transform:none}to{-webkit-transform:rotate(30deg)}}
@keyframes hTurnOut{from{transform:none}to{transform:rotate(30deg)}}
@-webkit-keyframes hTurnIn{from{-webkit-transform:rotate(-40deg)}to{-webkit-transform:none}}
@keyframes hTurnIn{from{transform:rotate(-40deg)}to{transform:none}}
@-webkit-keyframes dOut{from{opacity:1;-webkit-transform:none}to{opacity:0;-webkit-transform:translateY(28px)}}
@keyframes dOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(28px)}}
@-webkit-keyframes dIn{from{opacity:0;-webkit-transform:translateY(-34px)}to{opacity:1;-webkit-transform:none}}
@keyframes dIn{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
.hero.rot .art,.hero.rot .shd,.hero.rot .stm path{-webkit-animation-play-state:paused;animation-play-state:paused}
.hero.rot.on .art,.hero.rot.on .shd,.hero.rot.on .stm path{-webkit-animation-play-state:running;animation-play-state:running}
.spin{-webkit-animation:spin 150s linear infinite;animation:spin 150s linear infinite;will-change:transform}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.float{-webkit-animation:float 7s ease-in-out infinite;animation:float 7s ease-in-out infinite;will-change:transform}
@-webkit-keyframes float{0%,100%{-webkit-transform:translateY(0)}50%{-webkit-transform:translateY(-12px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.shd.el.breath{-webkit-animation:breath 7s ease-in-out infinite;animation:breath 7s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.8}}
@-webkit-keyframes breath{0%,100%{-webkit-transform:scale(1);opacity:1}50%{-webkit-transform:scale(.92);opacity:.8}}
.stm path{-webkit-animation:steam 4.8s ease-in-out infinite;animation:steam 4.8s ease-in-out infinite;opacity:0}
.stm path:nth-child(2){-webkit-animation-delay:1.6s;animation-delay:1.6s}.stm path:nth-child(3){-webkit-animation-delay:3.2s;animation-delay:3.2s}
@-webkit-keyframes steam{0%{opacity:0;-webkit-transform:translateY(18px)}30%{opacity:1}70%{opacity:.7}100%{opacity:0;-webkit-transform:translateY(-36px)}}
@keyframes steam{0%{opacity:0;transform:translateY(18px)}30%{opacity:1}70%{opacity:.7}100%{opacity:0;transform:translateY(-36px)}}

/* ---------------- self-service steps: a cream band along the bottom of every TV (cream = self-service) ---------------- */
.rb{position:absolute;left:0;top:962px;width:1920px;height:118px;z-index:2;transition:opacity .8s ease;color:#163820;
  background:linear-gradient(180deg,#F9F3E3 0%,#F1E5C8 100%);box-shadow:0 -14px 34px rgba(0,0,0,.22)}
.rb:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#C3922F,#EBC673 50%,#C3922F)}
.rb .st{position:absolute;top:0;height:118px;display:flex;align-items:center;white-space:nowrap;padding:0 32px 0 16px}
.rb .st:before{content:"";position:absolute;left:0;right:0;top:16px;bottom:11px;border-radius:999px;background:rgba(226,182,92,.34);opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}
.rb .st.on:before{opacity:1}
.rb .st b{position:relative;display:flex;align-items:center;justify-content:center;width:70px;height:70px;flex:none;border-radius:50%;background:#163820;color:#F6EEDA;font-size:38px;font-weight:700;margin-right:20px;
  -webkit-transition:background .45s ease,color .45s ease,-webkit-transform .45s ease;transition:background .45s ease,color .45s ease,transform .45s ease}
.rb .st.on b{background:#E2B65C;color:#163820;-webkit-transform:scale(1.08);transform:scale(1.08)}
.rb .st b:after{content:"";position:absolute;left:-7px;top:-7px;width:84px;height:84px;border-radius:50%;border:3px solid #D9A944;opacity:0}
.rb .st.on b:after{-webkit-animation:rbPing 1.7s ease-out both;animation:rbPing 1.7s ease-out both}
@-webkit-keyframes rbPing{0%{opacity:.95;-webkit-transform:scale(.9)}100%{opacity:0;-webkit-transform:scale(1.55)}}
@keyframes rbPing{0%{opacity:.95;transform:scale(.9)}100%{opacity:0;transform:scale(1.55)}}
.rb .st .tx{position:relative}
.rb .st .en{font-size:38px;font-weight:700;line-height:1.04;color:#163820;letter-spacing:.005em}
.rb .st .hi{font-size:28px;font-weight:500;line-height:1.2;margin-top:5px;color:#7A6430}
.rb.lv1 .st .en{font-size:34px}.rb.lv1 .st .hi{font-size:26px}.rb.lv1 .st b{width:62px;height:62px;font-size:34px;margin-right:18px}.rb.lv1 .st b:after{width:76px;height:76px}
.rb.lv2 .st .en{font-size:31px}.rb.lv2 .st .hi{font-size:24px}.rb.lv2 .st b{width:56px;height:56px;font-size:31px;margin-right:16px}.rb.lv2 .st b:after{width:70px;height:70px}
.rb.lv3 .st .en{font-size:28px}.rb.lv3 .st .hi{font-size:22px}.rb.lv3 .st b{width:50px;height:50px;font-size:28px;margin-right:14px}.rb.lv3 .st b:after{width:64px;height:64px}.rb.lv3 .st{padding:0 22px 0 12px}
.rb .ln{position:absolute;top:58px;height:0;border-top:3px dotted rgba(22,56,32,.34)}
.rb .ln i{position:absolute;right:-2px;top:-9px;width:13px;height:13px;border-top:3px solid rgba(22,56,32,.5);border-right:3px solid rgba(22,56,32,.5);-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.rb .ln.rv i{right:auto;left:-2px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
.rb .rf{position:absolute;left:0;top:38px;width:40px;height:40px;opacity:0;z-index:1;will-change:transform}
.rb .rf svg{display:block}

/* ---------------- footer line (when no ribbon) ---------------- */
.ftr{position:absolute;left:88px;right:88px;bottom:46px;display:flex;justify-content:space-between;align-items:center;font-size:28px;font-weight:500;color:var(--sage)}
.ftr b{color:#F6EEDA;font-weight:700}
.ftr .tg{display:flex;align-items:center;color:var(--acc);font-weight:600;letter-spacing:.18em;font-size:25px}
.ftr .tg svg{margin-right:14px}

/* ---------------- logo with blooming flower ---------------- */
.blogo{display:block;overflow:visible}
.blogo .pt{-webkit-transform-origin:0 0;transform-origin:0 0}
.bloom .pt{-webkit-animation:petal 1.25s cubic-bezier(.2,.85,.25,1.08) both;animation:petal 1.25s cubic-bezier(.2,.85,.25,1.08) both}
@-webkit-keyframes petal{0%{opacity:0;-webkit-transform:rotate(-38deg) scale(.15)}55%{opacity:1}100%{opacity:1;-webkit-transform:rotate(0deg) scale(1)}}
@keyframes petal{0%{opacity:0;transform:rotate(-38deg) scale(.15)}55%{opacity:1}100%{opacity:1;transform:rotate(0deg) scale(1)}}
.bloom .wm{-webkit-animation:wordin 1.3s .75s cubic-bezier(.22,.61,.36,1) both;animation:wordin 1.3s .75s cubic-bezier(.22,.61,.36,1) both}
@-webkit-keyframes wordin{0%{opacity:0;-webkit-transform:translateX(-26px)}100%{opacity:1;-webkit-transform:none}}
@keyframes wordin{0%{opacity:0;transform:translateX(-26px)}100%{opacity:1;transform:none}}
.bloom .tgl{-webkit-animation:fade 1s 1.5s both;animation:fade 1s 1.5s both}
@-webkit-keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@-webkit-keyframes up{from{opacity:0;-webkit-transform:translateY(40px)}to{opacity:1;-webkit-transform:none}}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ---------------- brand screen ---------------- */
.brandscr{position:absolute;left:0;top:0;width:1920px;height:1080px}
.brandscr .bl{position:absolute;left:0;width:1920px;top:250px;display:flex;justify-content:center}
.brandscr .tl{position:absolute;left:0;width:1920px;top:566px;text-align:center}
.brandscr .tl .en{font-size:36px;font-weight:600;letter-spacing:.34em;color:var(--acc)}
.brandscr .tl .hi{font-size:38px;font-weight:500;color:var(--sage);margin-top:18px}
.notes{position:absolute;left:88px;right:88px;display:flex;justify-content:center;align-items:center;white-space:nowrap;font-size:27px;font-weight:500;color:var(--sage)}
.notes span{display:flex;align-items:center}
.notes span+span:before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin:0 30px;opacity:.8}
.notes .hi{margin-left:12px;color:rgba(var(--sager),.8);font-size:25px}

/* ---------------- Today's Special screen (TV 1) ---------------- */
.spx{position:absolute;left:0;top:0;width:1920px;height:1080px}
.spx .txt{position:absolute;left:96px;top:250px;width:960px}
.kick{display:flex;align-items:center;font-size:30px;font-weight:600;letter-spacing:.34em;color:var(--acc);text-transform:uppercase;white-space:nowrap}
.kick svg{margin-right:18px;flex:none}
.kick .hi{margin-left:22px;padding-left:22px;border-left:2px solid rgba(var(--accr),.45);font-size:30px;letter-spacing:0;color:var(--sage);text-transform:none}
.spx .nm{font-size:104px;font-weight:600;line-height:1.02;margin-top:34px;white-space:nowrap;letter-spacing:.005em}
.spx .nh{font-size:54px;font-weight:500;color:var(--sage);margin-top:14px;white-space:nowrap}
.spx .ds{font-size:34px;font-weight:500;color:var(--sage);margin-top:18px;white-space:nowrap}
.spx .pp{display:flex;align-items:center;margin-top:34px}
.spx .pp .pr{font-size:112px}
.spx .pp .cta{margin-left:40px;padding-left:40px;border-left:2px solid rgba(var(--sager),.35);font-size:28px;font-weight:600;color:#F6EEDA;line-height:1.3}
.spx .pp .cta .hi{display:block;font-size:26px;font-weight:500;color:var(--sage)}
.spx .dots{display:flex;margin-top:40px}
.spx .dots i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc);margin-right:14px;opacity:.6}
.spx .dots i.on{background:var(--acc);opacity:1}
.spx .txt.chg{-webkit-animation:up 1s cubic-bezier(.22,.61,.36,1) both;animation:up 1s cubic-bezier(.22,.61,.36,1) both}

/* ---------------- takeover (Now Serving / Coming up) ---------------- */
.take{position:absolute;left:0;top:0;width:1920px;height:1080px;display:none;z-index:4}
.take.on{display:block}
.screen.taking .menu,.screen.taking .menu .hero.rot.on,.screen.taking .menu .hero.rot.out{visibility:hidden}
.take .lg{position:absolute;left:150px;top:92px}
.take .tx{position:absolute;left:150px;top:200px;bottom:214px;width:880px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.take .k{display:flex;align-items:center;font-weight:600;font-size:32px;letter-spacing:.42em;color:var(--sage);text-transform:uppercase}
.take .k svg{margin-right:24px;flex:none}
.take .w{font-weight:600;font-size:196px;line-height:.98;letter-spacing:.01em;color:#F6EEDA;margin-top:26px;white-space:nowrap}
.take .w.two{font-size:150px}
.take .rl{width:170px;height:4px;border-radius:2px;background:var(--acc);margin-top:46px}
.take .tm{font-weight:600;font-size:54px;color:var(--acc);margin-top:34px;letter-spacing:.03em}
.take .sb{font-weight:500;font-size:36px;color:var(--sage);margin-top:18px;letter-spacing:.02em}
.take .cd{margin-top:30px;font-size:34px;font-weight:600;color:var(--ink);background:var(--acc);border-radius:999px;padding:12px 30px;line-height:1.1}
.take .hr{position:absolute;right:120px;top:150px;width:700px;height:700px}
.take .sweep{position:absolute;top:0;left:-760px;width:760px;height:1080px;background:linear-gradient(90deg,rgba(var(--accr),0),rgba(var(--accr),.20),rgba(var(--accr),0));-webkit-animation:sweep 1.9s cubic-bezier(.3,.6,.3,1) both;animation:sweep 1.9s cubic-bezier(.3,.6,.3,1) both}
@-webkit-keyframes sweep{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(2700px)}}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(2700px)}}
.take .sweep.rv{left:1920px;-webkit-animation:sweepr 1.9s cubic-bezier(.3,.6,.3,1) both;animation:sweepr 1.9s cubic-bezier(.3,.6,.3,1) both}
@-webkit-keyframes sweepr{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(-2700px)}}
@keyframes sweepr{from{transform:translateX(0)}to{transform:translateX(-2700px)}}
@-webkit-keyframes grow{from{width:0}to{width:170px}}
@keyframes grow{from{width:0}to{width:170px}}
@-webkit-keyframes pop{from{opacity:0;-webkit-transform:scale(.82) rotate(-10deg)}to{opacity:1;-webkit-transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.82) rotate(-10deg)}to{opacity:1;transform:none}}
.take.on .lg{-webkit-animation:fade 1s both;animation:fade 1s both}
.take.on .k{-webkit-animation:up .9s both;animation:up .9s both}
.take.on .w{-webkit-animation:up 1s both;animation:up 1s both}
.take.on .rl{-webkit-animation:grow 1s both;animation:grow 1s both}
.take.on .tm,.take.on .sb,.take.on .cd{-webkit-animation:up .9s both;animation:up .9s both}
.take.on .hr{-webkit-animation:pop 1.4s both;animation:pop 1.4s both}
.take.still .lg,.take.still .k,.take.still .w,.take.still .rl,.take.still .tm,.take.still .sb,.take.still .cd,.take.still .hr{-webkit-animation:none!important;animation:none!important}
.menu.in{-webkit-animation:fade 1.2s both;animation:fade 1.2s both}

/* ---------------- wall moments (Special travels, Brand) ---------------- */
.mo{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:5;opacity:0;transition:opacity .9s ease;pointer-events:none}
.mo.on{opacity:1}
.screen.mom .menu,.screen.mom .rb{opacity:0}
.mo .gl{position:absolute;height:2px;background:var(--acc);width:0;transition:width 1.1s cubic-bezier(.45,.05,.35,1)}
.mo .gl.go{width:1920px}
.mo .blk{position:absolute;opacity:0;-webkit-transform:translateY(34px);transform:translateY(34px);transition:opacity 1s ease,-webkit-transform 1.1s cubic-bezier(.22,.61,.36,1);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)}
.mo .blk.in{opacity:1;-webkit-transform:none;transform:none}
.mo .blk.out{opacity:0;-webkit-transform:translateY(-24px);transform:translateY(-24px)}
.mo .big{display:table;margin:0 auto;font-size:150px;font-weight:600;letter-spacing:.06em;line-height:1;white-space:nowrap;text-transform:uppercase;color:#F6EEDA}
.mo .big.g{color:var(--acc)}
.mo .bighi{display:table;margin:0 auto;font-size:96px;font-weight:500;color:#F6EEDA;white-space:nowrap}
.mo .kk{font-size:40px;font-weight:600;letter-spacing:.4em;color:var(--acc);text-transform:uppercase;white-space:nowrap}
.mo .kkh{font-size:44px;font-weight:500;color:var(--sage);margin-top:22px;white-space:nowrap}
.mo .dn{display:table;font-size:150px;font-weight:600;line-height:1.02;white-space:nowrap}
.mo.nar .dn{font-size:120px}
.mo .dh{display:table;font-size:84px;font-weight:500;color:var(--sage);margin-top:20px;white-space:nowrap}
.mo.nar .dh{font-size:64px}
.mo .dd{font-size:46px;font-weight:500;color:var(--sage);margin-top:26px;white-space:nowrap}
.mo.nar .dd{font-size:38px}
.mo .dp2{font-size:240px}
.mo.nar .dp2{font-size:150px}
.mo .ct{font-size:44px;font-weight:600;color:#F6EEDA;margin-top:30px;white-space:nowrap}
.mo.nar .ct{font-size:34px}
.mo .ct .hi{display:block;font-size:38px;font-weight:500;color:var(--sage);margin-top:8px}
.mo.nar .ct .hi{font-size:30px}
.mo .when{display:inline-block;margin-top:40px;font-size:30px;font-weight:600;letter-spacing:.2em;color:var(--ink);background:var(--acc);border-radius:999px;padding:12px 28px;text-transform:uppercase;white-space:nowrap}
.mo .cnt{font-size:26px;font-weight:600;letter-spacing:.3em;color:var(--sage);margin-top:30px}
.mo .dish{position:absolute;top:150px;width:780px;height:780px;left:0;will-change:transform}
.mo .dish .hero{left:0;top:0;width:780px;height:780px}
#err{position:fixed;left:6px;bottom:4px;z-index:99;font:12px sans-serif;color:#ffb4a8;opacity:.8}

/* ======================================================================= spare TVs: slides */
.spr{position:absolute;left:0;top:0;width:1920px;height:1080px;-webkit-transition:opacity .55s ease;transition:opacity .55s ease}
.spr.out{opacity:0}
.spr.in .sl .txt,.spr.in .stp,.spr.in .tim,.spr.in .msg{-webkit-animation:up 1s cubic-bezier(.22,.61,.36,1) both;animation:up 1s cubic-bezier(.22,.61,.36,1) both}
.spr.in .plate-in{-webkit-animation:hIn 1.2s cubic-bezier(.2,.75,.25,1) .15s both;animation:hIn 1.2s cubic-bezier(.2,.75,.25,1) .15s both}
.spr.in .plate-in .art img{-webkit-animation:hTurnIn 1.2s cubic-bezier(.2,.75,.25,1) .15s both;animation:hTurnIn 1.2s cubic-bezier(.2,.75,.25,1) .15s both}
.spr.in .plate-in.dk .art img{-webkit-animation:none;animation:none}
.spr.in .plate-in.dk{-webkit-animation-name:dIn;animation-name:dIn}
.spr .spx .txt{top:262px}
.stp{position:absolute;left:0;top:250px;width:1920px;text-align:center}
.stp .kk,.tim .kk{font-weight:600;font-size:36px;letter-spacing:.38em;color:var(--acc);text-transform:uppercase}
.stp .kk .hi,.tim .kk .hi{display:block;font-size:36px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--sage);margin-top:10px}
.stp .row{display:flex;justify-content:center;align-items:flex-start;margin-top:74px}
.stp .c{width:330px;display:flex;flex-direction:column;align-items:center}
.stp .ic{position:relative;width:190px;height:190px;border-radius:50%;border:3px solid rgba(var(--accr),.85);display:flex;align-items:center;justify-content:center;color:#F6EEDA;background:rgba(var(--accr),.06)}
.stp .ic b{position:absolute;left:-6px;top:-6px;width:58px;height:58px;border-radius:50%;background:var(--acc);color:var(--ink);font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stp .en{margin-top:34px;font-size:38px;font-weight:600;line-height:1.18;color:#F6EEDA;padding:0 10px}
.stp .hi{margin-top:12px;font-size:30px;font-weight:500;color:var(--sage);line-height:1.3;padding:0 10px}
.stp .ar{width:60px;height:3px;margin-top:94px;background:rgba(var(--accr),.6);position:relative}
.stp .ar:after{content:"";position:absolute;right:-2px;top:-7px;border-left:14px solid rgba(var(--accr),.85);border-top:8px solid transparent;border-bottom:8px solid transparent}
.tim{position:absolute;left:0;top:150px;width:1920px;display:flex;flex-direction:column;align-items:center}
.tim .rows{width:1240px;margin-top:30px}
.tim .r{display:flex;align-items:center;padding:13px 30px;border-bottom:2px solid rgba(var(--sager),.18)}
.tim .r .n{flex:1;font-size:46px;font-weight:600;color:#F6EEDA;white-space:nowrap}
.tim .r .n i{font-style:normal;font-size:31px;font-weight:500;color:var(--sage);margin-left:22px}
.tim .r .t{font-size:40px;font-weight:600;color:var(--acc);white-space:nowrap}
.tim .r .tg{width:120px;margin-left:34px;text-align:center;font-size:22px;font-weight:700;letter-spacing:.14em;color:var(--ink);background:var(--acc);border-radius:999px;padding:8px 0}
.tim .r .tg.nx2{background:none;color:var(--acc);border:2px solid rgba(var(--accr),.8);padding:6px 0}
.tim .r .tg.em{background:none}
.tim .r.now{background:rgba(var(--accr),.10);border-radius:16px;border-bottom-color:transparent}
.tim .r.ad{flex-wrap:wrap;border-bottom:0}
.tim .r.ad .n{color:var(--sage)}
.tim .r.ad .t{margin-right:154px}
.tim .r.ad .sb{width:100%;font-size:27px;font-weight:500;color:var(--sage);margin-top:8px}
.msg{position:absolute;left:120px;right:120px;top:0;height:1000px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.msg .fl{margin-bottom:56px}
.msg .t{display:table;margin:0 auto;font-size:112px;font-weight:600;line-height:1.05;color:#F6EEDA;white-space:nowrap}
.msg .s{font-size:46px;font-weight:500;color:var(--acc);margin-top:30px}
.msg .h{font-size:54px;font-weight:500;color:var(--sage);margin-top:24px}
.spr .take.still{display:block}
/* 'which TV is this?' - shown for a few minutes when the owner asks for it in the panel */
.ident{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:300;text-align:center;color:#F6EEDA;
  background:radial-gradient(120% 95% at 50% 42%,#1B4327 0%,#163820 58%,#0F2717 100%);-webkit-animation:idIn .7s ease-out both;animation:idIn .7s ease-out both}
.ident .il{position:absolute;left:0;right:0;top:64px}
.ident .il svg{display:inline-block}
.ident .ik{position:absolute;left:0;right:0;top:232px;font-weight:600;font-size:30px;letter-spacing:.46em;padding-left:.46em;color:#E2B65C}
.ident .inum{position:absolute;left:0;right:0;top:262px;font-weight:600;font-size:360px;line-height:1;color:#F6EEDA}
.ident .iw{position:absolute;left:0;right:0;top:652px;font-size:0}
.ident .iw i{display:inline-block;width:150px;height:84px;margin:0 10px;border:3px solid rgba(226,182,92,.45);border-radius:8px;font-style:normal;font-weight:600;font-size:30px;line-height:78px;color:rgba(226,182,92,.6)}
.ident .iw i.on{background:#E2B65C;border-color:#E2B65C;color:#163820}
.ident .iw i{position:relative}
.ident .iw i.c:after{content:"COUNTER";position:absolute;left:-20px;right:-20px;top:96px;font-size:19px;line-height:1;letter-spacing:.3em;padding-left:.3em;color:rgba(243,235,215,.75)}
.ident .io{position:absolute;left:0;right:0;top:796px;font-weight:500;font-size:44px}
.ident .io b{color:#E2B65C;font-weight:600}
.ident .io .hi2{display:block;font-size:28px;color:rgba(193,205,190,.8);margin-top:18px}
.ident .iu{position:absolute;left:0;right:0;bottom:52px;font-weight:500;font-size:24px;letter-spacing:.03em;color:rgba(193,205,190,.58)}
@-webkit-keyframes idIn{from{opacity:0}to{opacity:1}}
@keyframes idIn{from{opacity:0}to{opacity:1}}

/* ======================================================================= self service: plate bin & dustbin (all TVs together)
   The cream sweeps across the wall from TV 1, then every TV shows the bins at the same instant; a ring counts back to the menu. */
.bin{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:8;overflow:hidden;pointer-events:none;color:#163820}
.bin .bbg{position:absolute;left:0;top:0;width:1920px;height:1080px;background:radial-gradient(110% 90% at 50% 40%,#FCF8EE 0%,#F6EEDA 62%,#EEE1C2 100%);will-change:transform;
  -webkit-transform:translateX(-102%);transform:translateX(-102%);-webkit-transition:-webkit-transform .38s linear;transition:transform .38s linear}
.bin.rv .bbg{-webkit-transform:translateX(102%);transform:translateX(102%)}
.bin.on .bbg{-webkit-transform:none;transform:none}
.bin.on.out .bbg{-webkit-transform:translateX(102%);transform:translateX(102%)}
.bin.rv.on.out .bbg{-webkit-transform:translateX(-102%);transform:translateX(-102%)}
.bin .bin-in{position:absolute;left:0;top:0;width:1920px;height:1080px;opacity:0;-webkit-transition:opacity .4s ease;transition:opacity .4s ease}
.bin.show .bin-in{opacity:1}
.bin.out .bin-in{opacity:0;-webkit-transition-duration:.26s;transition-duration:.26s}
.bin .btop{position:absolute;left:0;right:0;top:0;height:8px;background:#163820}
.bin .bl{position:absolute;left:96px;top:68px}
.bin .bcd{position:absolute;right:96px;top:44px;display:flex;align-items:center}
.bin .bct{text-align:right;margin-right:24px}
.bin .bct span{display:block;font-size:24px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#163820;white-space:nowrap}
.bin .bct .hi{font-size:24px;font-weight:500;letter-spacing:0;text-transform:none;color:#6B735F;margin-top:8px}
.bin .bring{position:relative;width:140px;height:140px}
.bin .bring svg{display:block}
.bin .bring circle{fill:none;stroke-width:9}
.bin .bring .tr{stroke:rgba(22,56,32,.12)}
.bin .bring .pg{stroke:#163820;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:0;-webkit-animation:bcd 5s linear both;animation:bcd 5s linear both}
@-webkit-keyframes bcd{to{stroke-dashoffset:377}}
@keyframes bcd{to{stroke-dashoffset:377}}
.bin .bring b{position:absolute;left:0;top:0;width:140px;height:140px;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#163820;line-height:1}
.bin .bh{position:absolute;left:0;width:1920px;top:172px;text-align:center}
.bin .bk{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;align-items:center;font-size:26px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:#A57F27}
.bin .bk svg{margin-right:16px}
.bin .bt{font-size:94px;font-weight:600;line-height:1.02;margin-top:20px;color:#163820;white-space:nowrap}
.bin .bth{font-size:40px;font-weight:500;color:#5E6B57;margin-top:14px}
.bin .bcs{position:absolute;left:0;width:1920px;top:418px;display:flex;justify-content:center}
.bin .bc{position:relative;width:600px;margin:0 50px;padding:6px 0 26px;background:#FFFDF7;border:2px solid #E7DABA;border-radius:40px;box-shadow:0 26px 60px rgba(22,56,32,.13);text-align:center}
.bin .ba{position:relative;width:340px;height:300px;margin:40px auto 0}
.bin .ba .lay{position:absolute;left:0;top:0}
.bin .ba svg{display:block}
.bin .ba .fall{position:absolute;top:0;opacity:0}
.bin .ba.dust .fall{top:30px}
.bin .bn{font-size:58px;font-weight:700;line-height:1;color:#163820}
.bin .be{font-size:30px;font-weight:500;color:#5E6B57;margin-top:14px}
.bin .bhi{font-family:Deva,Outfit,sans-serif;font-size:29px;font-weight:500;color:#8A7444;margin-top:8px}
.bin .bf{position:absolute;left:0;width:1920px;top:986px;display:flex;justify-content:center;align-items:center;font-size:30px;font-weight:600;color:#163820;white-space:nowrap}
.bin .bf svg{margin-right:14px}
.bin .bf .hi{font-weight:500;font-size:28px;color:#6B735F;margin-left:24px;padding-left:24px;border-left:2px solid rgba(22,56,32,.22)}
.bin.show .bh{-webkit-animation:up .8s .05s both;animation:up .8s .05s both}
.bin.show .bc.c1{-webkit-animation:up .9s .18s both;animation:up .9s .18s both}
.bin.show .bc.c2{-webkit-animation:up .9s .3s both;animation:up .9s .3s both}
/* TV 1 & 3: all in Hindi */
.bin.lh .bk,.bin.lh .bt,.bin.lh .bth,.bin.lh .bn,.bin.lh .be,.bin.lh .bf,.bin.lh .bct span{font-family:Deva,Outfit,sans-serif;letter-spacing:0;text-transform:none}
.bin.lh .bk{font-size:32px;font-weight:600}
.bin.lh .bh{top:150px}
.bin.lh .bt{font-size:96px;font-weight:600;line-height:1.12}
.bin.lh .bth{font-size:42px;margin-top:8px}
.bin.lh .bn{font-size:56px;font-weight:600;line-height:1.15}
.bin.lh .be{font-size:31px;line-height:1.3}
.bin.lh .bct span{font-size:28px;font-weight:600}
.bin.lh .bf{font-size:32px;font-weight:500}
/* steel thali, katori and glass drop into the steel bin one after another; cup, paper plate and tissue go into the blue bin's opening */
.bin.show .ba.plate .fall{-webkit-animation:sDrop 3.6s cubic-bezier(.45,.05,.55,.95) infinite;animation:sDrop 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
.bin.show .ba.dust .fall{-webkit-animation:dDrop 3.6s cubic-bezier(.45,.05,.55,.95) infinite;animation:dDrop 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
@-webkit-keyframes sDrop{0%{opacity:0;-webkit-transform:translateY(-60px) rotate(-20deg)}12%{opacity:1}30%{-webkit-transform:translateY(62px) rotate(4deg)}36%{-webkit-transform:translateY(56px) rotate(0)}46%{opacity:1;-webkit-transform:translateY(118px) rotate(0)}47%,100%{opacity:0;-webkit-transform:translateY(118px) rotate(0)}}
@keyframes sDrop{0%{opacity:0;transform:translateY(-60px) rotate(-20deg)}12%{opacity:1}30%{transform:translateY(62px) rotate(4deg)}36%{transform:translateY(56px) rotate(0)}46%{opacity:1;transform:translateY(118px) rotate(0)}47%,100%{opacity:0;transform:translateY(118px) rotate(0)}}
@-webkit-keyframes dDrop{0%{opacity:0;-webkit-transform:translate(60px,-60px) rotate(30deg)}14%{opacity:1}38%{-webkit-transform:translate(0,12px) rotate(-6deg)}50%{opacity:1;-webkit-transform:translate(0,44px) rotate(0) scale(.7)}58%,100%{opacity:0;-webkit-transform:translate(0,56px) rotate(0) scale(.5)}}
@keyframes dDrop{0%{opacity:0;transform:translate(60px,-60px) rotate(30deg)}14%{opacity:1}38%{transform:translate(0,12px) rotate(-6deg)}50%{opacity:1;transform:translate(0,44px) rotate(0) scale(.7)}58%,100%{opacity:0;transform:translate(0,56px) rotate(0) scale(.5)}}
.nomotion .bin .bbg{-webkit-transition:none;transition:none}
.nomotion .bin .fall{display:none}
.nomotion .bin.show .ba .fall,.nomotion .bin.show .bh,.nomotion .bin.show .bc{-webkit-animation:none;animation:none}

/* ======================================================================= menu motion
   Built around how people read a menu while they queue or wait: one calm thing moves at a time, slowly, and it leads the eye
   (heading -> items -> price), so the wait feels shorter and the choice easier. Nothing blinks; everything stops with 'Animation band'. */
/* arrival: headings draw their gold line, items follow one by one */
.cin{-webkit-animation:cIn .8s cubic-bezier(.22,.61,.36,1) both;animation:cIn .8s cubic-bezier(.22,.61,.36,1) both}
.cin .rule{-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-animation:ruleIn 1.2s cubic-bezier(.22,.61,.36,1) both;animation:ruleIn 1.2s cubic-bezier(.22,.61,.36,1) both}
.iin{-webkit-animation:iIn .75s cubic-bezier(.22,.61,.36,1) both;animation:iIn .75s cubic-bezier(.22,.61,.36,1) both}
@-webkit-keyframes cIn{from{opacity:0;-webkit-transform:translateY(18px)}to{opacity:1;-webkit-transform:none}}
@keyframes cIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@-webkit-keyframes ruleIn{from{-webkit-transform:scaleX(0)}to{-webkit-transform:none}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:none}}
@-webkit-keyframes iIn{from{opacity:0;-webkit-transform:translateY(14px)}to{opacity:1;-webkit-transform:none}}
@keyframes iIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the dish in the big photo gets a soft gold light in the list: a bar on its left, its name brighter, its price gold */
.it:before{content:"";position:absolute;left:-20px;right:-14px;top:2px;bottom:2px;z-index:-1;border-radius:16px;opacity:0;-webkit-transform-origin:0 50%;transform-origin:0 50%;
  -webkit-transform:scaleX(.82);transform:scaleX(.82);-webkit-transition:opacity .9s ease,-webkit-transform .9s cubic-bezier(.22,.61,.36,1);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(90deg,rgba(var(--accr),.27),rgba(var(--accr),.09) 68%,rgba(var(--accr),0))}
.it:after{content:"";position:absolute;left:-20px;top:16%;bottom:16%;width:6px;border-radius:3px;background:var(--acc);opacity:0;-webkit-transition:opacity .7s ease;transition:opacity .7s ease}
.it.feat:before{opacity:1;-webkit-transform:none;transform:none}
.it.feat:after{opacity:1}
.it .nt{-webkit-transition:color .8s ease;transition:color .8s ease}
.it.feat .nt{color:#FFF7E2}
.it .pr{-webkit-transform-origin:100% 60%;transform-origin:100% 60%;-webkit-transition:color .9s ease,-webkit-transform .9s cubic-bezier(.22,.61,.36,1);transition:color .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.it.feat .pr{color:var(--acc);-webkit-transform:scale(1.08);transform:scale(1.08)}
.tbl .it.feat .c .pr{-webkit-transform-origin:50% 60%;transform-origin:50% 60%}
/* the dish's name and price under the big photo */
.hcap{position:absolute;height:66px;display:flex;justify-content:center;align-items:center;z-index:2;pointer-events:none;opacity:0}
.hcap .hp{display:flex;align-items:center;white-space:nowrap;background:rgba(13,36,21,.9);border:2px solid rgba(var(--accr),.6);border-radius:999px;padding:8px 30px 9px 32px;box-shadow:0 12px 30px rgba(0,0,0,.38)}
.hcap .hn{font-size:34px;font-weight:600;color:#F6EEDA}
.hcap .pr{font-size:40px;margin-left:20px;color:#F6EEDA}
.hcap.on{-webkit-animation:capIn .8s cubic-bezier(.22,.61,.36,1) .6s both;animation:capIn .8s cubic-bezier(.22,.61,.36,1) .6s both}
.hcap.on.q{-webkit-animation:none;animation:none;opacity:1}
@-webkit-keyframes capIn{from{opacity:0;-webkit-transform:translateY(18px)}to{opacity:1;-webkit-transform:none}}
@keyframes capIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* the big photo sits in a slow warm glow, like a plate under a warm lamp */
.hero.pc:before,.hero.mainh:before{content:"";position:absolute;left:-24%;top:-24%;width:148%;height:148%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--accr),.30) 50%,rgba(var(--accr),.42) 64%,rgba(var(--accr),.12) 80%,rgba(var(--accr),0) 100%);opacity:0;-webkit-transition:opacity 1.4s ease;transition:opacity 1.4s ease}
.hero.pc.lit:before{opacity:1}
.hero.mainh:before{-webkit-animation:glow 7s ease-in-out infinite;animation:glow 7s ease-in-out infinite}
@-webkit-keyframes glow{0%,100%{opacity:.2}50%{opacity:.6}}
@keyframes glow{0%,100%{opacity:.2}50%{opacity:.6}}
/* a page turn: the page leaves towards TV 4, the Nivara flower opens where the photo will be, the new photo grows out of it */
.menu.pgout{-webkit-animation:pgOut .48s cubic-bezier(.5,0,.75,0) both;animation:pgOut .48s cubic-bezier(.5,0,.75,0) both}
.menu.pgout.rv{-webkit-animation-name:pgOutR;animation-name:pgOutR}
@-webkit-keyframes pgOut{to{opacity:0;-webkit-transform:translateX(44px)}}
@keyframes pgOut{to{opacity:0;transform:translateX(44px)}}
@-webkit-keyframes pgOutR{to{opacity:0;-webkit-transform:translateX(-44px)}}
@keyframes pgOutR{to{opacity:0;transform:translateX(-44px)}}
.pgfl{position:absolute;z-index:3;pointer-events:none;-webkit-animation:pgfl 1.8s cubic-bezier(.3,.6,.3,1) both;animation:pgfl 1.8s cubic-bezier(.3,.6,.3,1) both}
.pgfl svg{width:100%;height:100%}
.fbloom .pt{-webkit-animation:petal .8s cubic-bezier(.2,.85,.25,1.1) both;animation:petal .8s cubic-bezier(.2,.85,.25,1.1) both}
@-webkit-keyframes pgfl{0%{opacity:1;-webkit-transform:rotate(-40deg)}40%{opacity:1;-webkit-transform:rotate(0)}58%{opacity:1;-webkit-transform:scale(1.04) rotate(4deg)}100%{opacity:0;-webkit-transform:scale(1.5) rotate(20deg)}}
@keyframes pgfl{0%{opacity:1;transform:rotate(-40deg)}40%{opacity:1;transform:rotate(0)}58%{opacity:1;transform:scale(1.04) rotate(4deg)}100%{opacity:0;transform:scale(1.5) rotate(20deg)}}
.hero.pin{-webkit-animation:hIn 1.1s cubic-bezier(.16,.8,.24,1) .78s both;animation:hIn 1.1s cubic-bezier(.16,.8,.24,1) .78s both}
.hero.pin .art img{-webkit-animation:hTurnIn 1.1s cubic-bezier(.16,.8,.24,1) .78s both;animation:hTurnIn 1.1s cubic-bezier(.16,.8,.24,1) .78s both}
.hero.dk.pin{-webkit-animation-name:dIn;animation-name:dIn}
.hero.dk.pin .art img{-webkit-animation:none;animation:none}
/* 'Next menu' corner of a TV that takes turns: what comes next, a ring that fills up until it comes, which page this is */
.cue{position:absolute;left:80px;top:30px;display:flex;align-items:center;height:120px;padding:0 34px 0 6px;border-radius:999px;background:rgba(8,26,15,.42);border:2px solid rgba(var(--accr),.3);white-space:nowrap;
  -webkit-transition:border-color .6s ease,box-shadow .6s ease;transition:border-color .6s ease,box-shadow .6s ease}
.cue .cr{position:relative;width:108px;height:108px;flex:none}
.cue .cr svg{position:absolute;left:0;top:0}
.cue .cr circle{fill:none;stroke-width:6}
.cue .cr .tr{stroke:rgba(var(--accr),.22)}
.cue .cr .pg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:314.2;stroke-dashoffset:314.2}
@-webkit-keyframes cueRing{from{stroke-dashoffset:314.2}to{stroke-dashoffset:0}}
@keyframes cueRing{from{stroke-dashoffset:314.2}to{stroke-dashoffset:0}}
.cue .ci{position:absolute;left:11px;top:11px;width:86px;height:86px;border-radius:50%;overflow:hidden;background:rgba(0,0,0,.18)}
.cue .ci img{display:block;width:100%;height:100%}
.cue .ci .cf{display:flex;width:86px;height:86px;align-items:center;justify-content:center}
.cue .ctx{margin-left:22px}
.cue .ck{display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);line-height:1}
.cue .ck .hi{font-size:22px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--sage);margin-left:16px;padding-left:16px;border-left:2px solid rgba(var(--sager),.35)}
.cue .ck .cs{display:none;margin-left:16px;font-size:22px;letter-spacing:.02em;text-transform:none;color:var(--ink);background:var(--acc);border-radius:999px;padding:5px 13px 4px}
.cue.soon .ck .cs{display:inline-block}
.cue .cn{margin-top:10px;font-size:42px;font-weight:600;line-height:1.05;color:#F6EEDA}
.cue .cn .hi{font-size:31px;font-weight:500;color:var(--sage);margin-left:16px}
.cue .cd{display:flex;margin-left:30px}
.cue .cd i{display:block;width:13px;height:13px;border-radius:50%;border:2px solid var(--acc);margin-left:10px;opacity:.55}
.cue .cd i.on{background:var(--acc);opacity:1}
.cue.soon{border-color:rgba(var(--accr),.85);box-shadow:0 0 34px rgba(var(--accr),.32)}
.cue.now .ci{-webkit-animation:cuePop 1s ease-in-out infinite alternate;animation:cuePop 1s ease-in-out infinite alternate}
@-webkit-keyframes cuePop{from{-webkit-transform:none}to{-webkit-transform:scale(1.07)}}
@keyframes cuePop{from{transform:none}to{transform:scale(1.07)}}
.spx .kick svg{-webkit-animation:spin 30s linear infinite;animation:spin 30s linear infinite}
.nomotion .spin,.nomotion .float,.nomotion .stm path,.nomotion .breath{-webkit-animation:none;animation:none}
.nomotion .stm path{opacity:.5}
.nomotion .fbloom .pt,.nomotion .cin,.nomotion .iin,.nomotion .cin .rule,.nomotion .ith.thin,.nomotion .hero:before,.nomotion .spx .kick svg,.nomotion .pgfl,.nomotion .hero.pin,.nomotion .hcap.on,.nomotion .cue .pg,.nomotion .rb .st.on b:after{-webkit-animation:none;animation:none}
.nomotion .hero.mainh:before{opacity:.4}
.nomotion .rb .rf{display:none}