/* Store tour hero (marketing). The scene is a fixed-size box in its own pixels; tour.js scales and pans it. */
.tour{--tf-d:var(--font-display,var(--display,'Manrope',system-ui,sans-serif));--tf-b:var(--font-body,var(--body,'Inter',system-ui,sans-serif));--tc-bg:#0B0F19;--tc-line:#1F2A3C;--tc-ink:#fff;--tc-muted:#AAB6C8;--tc-cyan:#00E5FF;--tc-hot:#00E5FF;position:relative;width:100%}
.tour-view{position:relative;width:100%;aspect-ratio:2170/725;max-height:min(50vh,470px);min-height:240px;overflow:hidden;border-radius:16px 16px 0 0;background:#07090E;border:2px solid var(--tc-line);border-bottom:0;box-shadow:0 50px 100px -40px rgba(0,229,255,.28),0 40px 80px -32px rgba(0,0,0,.8);isolation:isolate}
.tour-scene{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transition:transform 1700ms cubic-bezier(.65,0,.35,1);--hs:34px}
.tour.no-anim .tour-scene{transition:none}
.tour-wall,.tour-photo,.tour-photo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tour-photo img{object-fit:cover}

/* a screen on the wall */
.ts{position:absolute;border-radius:6px;background:#000;border:5px solid #05070B;box-shadow:0 0 0 2px #2A3446,0 26px 40px -18px rgba(0,0,0,.9);overflow:hidden;cursor:pointer;transition:filter 600ms ease,box-shadow 600ms ease}
.ts.on-photo{background:transparent;border:0;box-shadow:none;border-radius:4px}
.ts-in{position:absolute;inset:0;overflow:hidden}
.ts::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%);pointer-events:none}
.ts.on-photo::after{display:none}
.tour.focused .ts:not(.is-on){filter:brightness(.55) saturate(.8)}
.ts.is-on{box-shadow:0 0 0 3px var(--tc-hot),0 0 40px 6px rgba(0,229,255,.45),0 26px 40px -18px rgba(0,0,0,.9)}
.ts.on-photo.is-on{box-shadow:0 0 0 3px var(--tc-hot),0 0 40px 6px rgba(0,229,255,.45)}


/* menu board */
.mb{position:absolute;inset:0;background:var(--bg);color:var(--fg);padding:11px 15px 9px;display:flex;flex-direction:column;gap:4px;font-family:var(--tf-b)}
.mb-h{font:800 20px/1 var(--tf-d);letter-spacing:-.01em;padding-bottom:5px;margin-bottom:2px;border-bottom:3px solid var(--ac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-r{display:flex;align-items:baseline;gap:6px;font:600 12.5px/1.12 var(--tf-b);white-space:nowrap}
.mb-r i{flex:1;border-bottom:2px dotted currentColor;opacity:.3;transform:translateY(-3px)}
.mb-r b{font:800 14px/1 var(--tf-d);color:var(--ac)}
.mb-clock{margin-top:auto;font:600 10px/1 var(--tf-b);opacity:.8}
/* portrait promo (coffee, cold drinks) */
.pt{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.14),transparent 60%),var(--bg);color:var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 10px;gap:6px}
.pt-cup{width:62px;height:62px;color:var(--ac)}
.pt-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:6px}
.pt-t{font:800 19px/1.05 var(--tf-d)}
.pt-big{font:800 30px/1 var(--tf-d);color:var(--ac);letter-spacing:-.02em}
.pt-sub{font:600 11px/1.25 var(--tf-b);opacity:.85}
/* promo video */
.ts video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vid-now{position:absolute;left:8px;right:8px;bottom:7px;display:flex;align-items:center;gap:6px;font:600 11px/1.1 var(--tf-b);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden}
.vid-now span:last-child{overflow:hidden;text-overflow:ellipsis}
/* deals slideshow (pure CSS crossfade, 4 slides x 4 s) */
.sl{position:absolute;inset:0;background:#000}
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:sl-fade 16s infinite}
@keyframes sl-fade{0%{opacity:0;transform:scale(1.04)}4%{opacity:1}25%{opacity:1}29%{opacity:0;transform:scale(1)}100%{opacity:0}}
/* rotating lottery / weather / We Card */
.rot{position:absolute;inset:0}
.rp{position:absolute;inset:0;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;transition:opacity 700ms ease}
.rp.is-on{opacity:1}
.rp-h{font:800 20px/1 var(--tf-d);display:flex;justify-content:space-between;align-items:center}
.rp-h em{font:700 9px/1 var(--tf-b);font-style:normal;letter-spacing:.12em;color:#F2C14E}
.rp-lotto{background:linear-gradient(180deg,#9C1420,#7A0F18);color:#FFF7E6}
.rp-r{display:flex;justify-content:space-between;align-items:baseline;font:600 14px/1 var(--tf-b)}
.rp-r b{font:800 22px/1 var(--tf-d);color:#F2C14E}
.rp-wx{background:linear-gradient(180deg,#FFFFFF,#E8F4FA);color:#07090E}
.wx{display:flex;align-items:center;gap:14px}.wx svg{width:62px;height:62px;flex:none}.wx b{font:800 54px/1 var(--tf-d);letter-spacing:-.03em}.wx span{font:500 13px/1.35 var(--tf-b);color:#526174}
.rp-wc{background:linear-gradient(180deg,#C4141F,#9A0F18);color:#FFF7F7;text-align:center;align-items:center}
.wc-l{font:600 12px/1 var(--tf-b);opacity:.85}.wc-d{font:800 34px/1 var(--tf-d);letter-spacing:-.02em}.wc-s{font:500 11px/1.2 var(--tf-b);color:#FFD2D4}

/* numbered hotspots: --hs is set by tour.js so they stay finger-sized at any zoom */
.hs{position:absolute;width:var(--hs);height:var(--hs);transform:translate(-50%,-50%);border-radius:999px;border:calc(var(--hs) * .07) solid #07090E;background:var(--tc-hot);color:#07090E;font:800 calc(var(--hs) * .44)/1 var(--tf-d);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;box-shadow:0 0 0 0 rgba(0,229,255,.6);animation:hs-ping 2.6s cubic-bezier(.2,.8,.2,1) infinite}
.hs:hover,.hs.is-on{background:#fff}
.hs:focus-visible{outline:calc(var(--hs) * .1) solid #fff;outline-offset:calc(var(--hs) * .08)}
@keyframes hs-ping{0%{box-shadow:0 0 0 0 rgba(0,229,255,.55)}70%{box-shadow:0 0 0 calc(var(--hs) * .5) rgba(0,229,255,0)}100%{box-shadow:0 0 0 0 rgba(0,229,255,0)}}

/* tagline over the scene */
.tour-tag{position:absolute;left:18px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:12px;background:rgba(7,9,14,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:opacity 500ms ease}
.tour-tag span{font:800 clamp(16px,1.6vw,22px)/1.1 var(--tf-d);letter-spacing:-.01em;color:#fff}
.tour-tag small{font:500 11px/1.2 var(--tf-b);color:var(--tc-muted)}
.tour.focused .tour-tag{opacity:0}

/* caption bar */
.tour-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 16px;background:var(--tc-bg);border:2px solid var(--tc-line);border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 16px 16px;min-height:76px}
.tour-no{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.tour-no b{font:800 30px/1 var(--tf-d);color:var(--tc-cyan);letter-spacing:-.02em}
.tour-no span{font:600 12px/1 var(--tf-b);color:var(--tc-muted)}
.tour-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tour-l span{font:700 16px/1.2 var(--tf-d);color:var(--tc-ink)}
.tour-l em{font:600 11px/1 var(--tf-b);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-cyan);border:1px solid rgba(0,229,255,.35);border-radius:999px;padding:5px 9px}
.tour-txt p{margin:4px 0 0;font:400 14px/1.45 var(--tf-b);color:var(--tc-muted);min-height:2.9em}
.tour-ctl{display:flex;gap:6px}
.tour [data-tour-play] .tp-play{display:none}
.tour.paused [data-tour-play] .tp-play{display:block}.tour.paused [data-tour-play] .tp-pause{display:none}

@media (max-width:1024px){
  .tour-view{aspect-ratio:4/3;max-height:62vh;min-height:0;border-radius:14px 14px 0 0}
  .tour-txt p{min-height:5.8em}
  .tour-cap{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:12px;border-radius:0 0 14px 14px}
  .tour-ctl{grid-column:1 / -1;justify-content:space-between}
  .tour-ctl .iconbtn{flex:1}
  .tour-tag{left:10px;bottom:10px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){.tour-scene{transition:none}.hs{animation:none}.sl img{animation:none}.sl img:first-child{opacity:1}}
html.a11y-still .tour-scene{transition:none}html.a11y-still .hs{animation:none}html.a11y-still .sl img{animation:none}html.a11y-still .sl img:first-child{opacity:1}

/* on the full marketing site the caption bar follows the site theme (light by default, dark when chosen) */
.tour.site{--tc-bg:var(--surface);--tc-line:var(--line);--tc-ink:var(--ink);--tc-muted:var(--muted);--tc-cyan:#0A7EA4}
.tour.site .tour-view{border-color:#1F2A3C;box-shadow:0 40px 80px -40px rgba(11,18,32,.45)}
.tour.site .tour-cap{border-color:var(--line);box-shadow:var(--sh)}
.tour.site .tour-l em{border-color:color-mix(in srgb,var(--tc-cyan) 40%,transparent)}
:root[data-theme=dark] .tour.site{--tc-cyan:#00E5FF}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tour.site{--tc-cyan:#00E5FF}}