/* ─────────────────────────────────────────────────────────────
   tour.css — "Quick tour" for BombayCafe
   16/10/2026 v1: animated mock-up scenes.
   16/10/2026 v2: the film now plays the REAL site. Each scene loads a
   real page (Home, Countries, Favorites...) into a small iframe with
   ?bcdemo=1, and tour.js moves a cursor and clicks the real buttons
   and icons on it. In demo mode _Layout.cshtml swaps the browser's
   storage for a temporary in-memory copy (js/tourdemo.js), so nothing
   the film clicks changes the visitor's own favorites or ratings.
   Two parts:
     1. .bct-invite — a small, non-blocking card at the bottom of
        the screen on a visitor's first visit. It deliberately does
        NOT cover the page (Google penalises intrusive pop-ups).
     2. .bct-film — the tour itself, in a dialog.
   Dark is the base theme; body[data-theme="light"] overrides.
   ───────────────────────────────────────────────────────────── */

.bct-invite, .bct-film { --bct-gold: #c9a84c; --bct-gold2: #e8cc7a; --bct-cyan: #5af7ff; --bct-bg: #120804; --bct-bg2: #1d0d03; --bct-ink: #f3ead8; --bct-muted: rgba(243, 234, 216, .72); --bct-line: rgba(201, 168, 76, .35); }
body[data-theme="light"] .bct-invite, body[data-theme="light"] .bct-film { --bct-gold: #8a6420; --bct-gold2: #8a6420; --bct-cyan: #0b7f8a; --bct-bg: #fffaf0; --bct-bg2: #f4ead6; --bct-ink: #2b2219; --bct-muted: rgba(43, 34, 25, .75); --bct-line: rgba(160, 120, 48, .35); }

/* ── 1. invitation card ─────────────────────────────────────── */
.bct-invite { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); z-index: 2600; width: min(440px, calc(100vw - 32px)); background: var(--bct-bg); color: var(--bct-ink); border: 1px solid var(--bct-line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); padding: 14px 16px 12px; font-family: 'Karla', system-ui, sans-serif; transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; opacity: 0; }
.bct-invite.show { transform: translate(-50%, 0); opacity: 1; }
.bct-invite-top { display: flex; align-items: center; gap: 12px; }
.bct-invite-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--bct-gold) 0 14%, #111 15% 34%, #2a2a2a 35% 37%, #111 38% 58%, #2a2a2a 59% 61%, #111 62%); animation: bct-spin 3s linear infinite; }
.bct-invite h3 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--bct-gold2); }
.bct-invite p { margin: 2px 0 0; font-size: .88rem; color: var(--bct-muted); line-height: 1.35; }
.bct-invite-x { margin-inline-start: auto; align-self: flex-start; background: none; border: 0; color: var(--bct-muted); font-size: 1.1rem; cursor: pointer; padding: 2px 4px; line-height: 1; }
.bct-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.bct-btn { font: inherit; font-size: .9rem; font-weight: 600; border-radius: 999px; padding: 7px 16px; cursor: pointer; border: 1px solid var(--bct-line); background: transparent; color: var(--bct-ink); }
.bct-btn.primary { background: var(--bct-gold); border-color: var(--bct-gold); color: #1a0a00; }
body[data-theme="light"] .bct-btn.primary { color: #fff; }
.bct-btn:hover { filter: brightness(1.1); }
.bct-btn:focus-visible, .bct-check input:focus-visible, .bct-ctl:focus-visible, .bct-seg:focus-visible, .bct-close:focus-visible { outline: 2px solid var(--bct-cyan); outline-offset: 2px; }
.bct-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--bct-muted); cursor: pointer; user-select: none; }
.bct-check input { width: 16px; height: 16px; accent-color: var(--bct-gold); margin: 0; }

/* ── 2. the film ────────────────────────────────────────────── */
.bct-film { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); font-family: 'Karla', system-ui, sans-serif; }
.bct-film.open { display: flex; }
.bct-box { position: relative; width: var(--bct-boxw, 960px); max-width: 100%; background: linear-gradient(160deg, var(--bct-bg2), var(--bct-bg)); color: var(--bct-ink); border: 1px solid var(--bct-line); border-radius: 16px; box-shadow: 0 20px 70px rgba(0, 0, 0, .6); padding: 12px 14px 10px; box-sizing: border-box; }
.bct-close { position: absolute; top: 6px; right: 8px; z-index: 3; background: none; border: 0; color: var(--bct-muted); font-size: 1.25rem; cursor: pointer; line-height: 1; padding: 4px 6px; }
.bct-kicker { margin: 0 0 6px; padding-right: 28px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bct-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the stage: a window onto the real page, which tour.js scales and pans */
.bct-stage { position: relative; width: 100%; height: var(--bct-stageh, 540px); border-radius: 10px; overflow: hidden; background: #0b0603; border: 1px solid var(--bct-line); box-sizing: border-box; }
body[data-theme="light"] .bct-stage { background: #efe6d4; }
.bct-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.45, .05, .25, 1); will-change: transform; --inv: 1; }
.bct-frame { position: absolute; left: 0; top: 0; border: 0; display: block; background: #111; pointer-events: none; }
body[data-theme="light"] .bct-frame { background: #f5f5f5; }
.bct-bezel { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: calc(34px * var(--inv)); box-shadow: 0 0 0 calc(9px * var(--inv)) #050505, 0 0 0 calc(10px * var(--inv)) rgba(201, 168, 76, .5), 0 calc(12px * var(--inv)) calc(40px * var(--inv)) rgba(0, 0, 0, .6); }
.bct-curtain { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: none; opacity: 0; pointer-events: none; transition: opacity .35s; }
.bct-curtain.on { opacity: 1; }
.bct-curtain i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, var(--bct-gold) 0 14%, #111 15% 34%, #2a2a2a 35% 37%, #111 38% 58%, #2a2a2a 59% 61%, #111 62%); animation: bct-spin 1.6s linear infinite; }
.bct-shield { position: absolute; inset: 0; z-index: 3; }   /* the page inside is for watching only */

/* cursor, click ripple and highlight ring live in page pixels inside
   .bct-cam; --inv (= 1 / zoom) keeps them the same size on screen */
.bct-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 6; pointer-events: none; transform: scale(var(--inv)); transform-origin: 0 0; transition: left .8s cubic-bezier(.45, .05, .25, 1), top .8s cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); opacity: 0; }
.bct-cursor.on { opacity: 1; }
.bct-cursor::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 37% 55%, 66% 55%); }
.bct-cursor::after { content: ""; position: absolute; inset: 1px; background: #111; clip-path: polygon(8% 12%, 8% 66%, 23% 52%, 40% 85%, 47% 81%, 31% 48%, 52% 48%); }
.bct-film.touch .bct-cursor { width: 34px; height: 34px; margin: -17px 0 0 -17px; transform-origin: 17px 17px; }
.bct-film.touch .bct-cursor::before { clip-path: none; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 2px solid #fff; box-sizing: border-box; }
.bct-film.touch .bct-cursor::after { display: none; }
.bct-ripple { position: absolute; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--bct-cyan); pointer-events: none; transform: scale(var(--inv)); animation: bct-ripple .6s ease-out forwards; }
/* phone: no moving circle; a tap shows as a short glow on the spot */
.bct-film.touch .bct-ripple { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid rgba(255, 255, 255, .9); background: radial-gradient(circle, rgba(90, 247, 255, .55), rgba(90, 247, 255, 0) 70%); animation-duration: .55s; }
@keyframes bct-ripple { from { opacity: 1; transform: scale(calc(var(--inv) * .3)) } to { opacity: 0; transform: scale(calc(var(--inv) * 1.6)) } }
.bct-ring { position: absolute; z-index: 5; pointer-events: none; border: calc(3px * var(--inv)) solid var(--bct-gold2); border-radius: calc(10px * var(--inv)); box-shadow: 0 0 0 calc(4000px * var(--inv)) rgba(0, 0, 0, .38), 0 0 calc(18px * var(--inv)) rgba(232, 204, 122, .8); opacity: 0; transition: opacity .35s, left .5s, top .5s, width .5s, height .5s; }
.bct-ring.on { opacity: 1; animation: bct-pulse 1.4s ease-in-out infinite; }
.bct-key { position: absolute; z-index: 7; pointer-events: none; transform: scale(var(--inv)); transform-origin: 0 0; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--bct-gold2); border-bottom-width: 3px; background: #1d1206; color: #f3ead8; font: 600 14px/1.2 'Karla', system-ui, sans-serif; white-space: nowrap; animation: bct-keyin 1.6s ease forwards; }
@keyframes bct-keyin { 0% { opacity: 0; translate: 0 6px } 15% { opacity: 1; translate: 0 0 } 30% { translate: 0 2px } 40% { translate: 0 0 } 85% { opacity: 1 } 100% { opacity: 0 } }
@keyframes bct-pulse { 50% { border-color: var(--bct-cyan) } }

.bct-text { margin: 0 0 8px; min-height: 2.9em; padding-right: 28px; }   /* above the picture (16/10/2026) */
.bct-text p:empty { display: none; }
.bct-text h2 { margin: 0 0 2px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; color: var(--bct-gold2); }
.bct-text p { margin: 0; color: var(--bct-ink); font-size: .97rem; line-height: 1.42; transition: opacity .3s; }
.bct-text p.fade { opacity: 0; }
.bct-text .k { display: inline-block; padding: 0 5px; border: 1px solid var(--bct-line); border-radius: 6px; font-size: .92em; white-space: nowrap; }

.bct-bar { display: flex; gap: 4px; margin: 8px 0 8px; }
.bct-seg { flex: 1; height: 5px; border: 0; padding: 0; border-radius: 3px; background: rgba(201, 168, 76, .22); cursor: pointer; overflow: hidden; position: relative; }
.bct-seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bct-gold); }
.bct-seg.done i { width: 100% !important; }
.bct-film:not(.playing) .bct-seg.cur i { opacity: .55; }
.bct-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bct-ctls { display: flex; gap: 6px; }
.bct-ctl { width: 38px; height: 32px; border-radius: 10px; border: 1px solid var(--bct-line); background: transparent; color: var(--bct-ink); cursor: pointer; font-size: .95rem; }
.bct-ctl:disabled { opacity: .35; cursor: default; }

@keyframes bct-spin { to { transform: rotate(360deg) } }

@media (max-width: 600px) {
  .bct-film { padding: 6px; align-items: center; }   /* (18/10/2026) the film is 80% of the screen now (tour.js layout): in the middle */
  .bct-box { padding: 8px 8px 8px; border-radius: 12px; }
  .bct-kicker { margin-bottom: 4px; }
  .bct-text { min-height: 3.4em; margin: 0 0 6px; }
  .bct-text h2 { font-size: 1.05rem; }
  .bct-text p { font-size: .9rem; line-height: 1.36; }
  .bct-check { font-size: .8rem; }
  .bct-invite { bottom: 14px; zoom: .8; }   /* (18/10/2026) the invitation card at 80% */
}
@media (prefers-reduced-motion: reduce) {
  .bct-invite-disc { animation: none; }
  .bct-invite { transition: none; }
  .bct-cam, .bct-cursor { transition-duration: .01s; }
}

/* ── inside the demo iframe (?bcdemo=1 adds html.bc-demo) ───── */
html.bc-demo { scrollbar-width: none; }
html.bc-demo::-webkit-scrollbar, html.bc-demo body::-webkit-scrollbar { display: none; }
/* 17/10/2026: the ↑ back-to-top button fades in and out with every scroll
   (it flickered at the bottom of the film), so it is not shown in the film.
   The small continuity player shows right away, as on the real site (it
   was hidden while YouTube loaded in it, then shown late; the user wanted
   it at once). */
html.bc-demo #back-to-top { display: none !important; }

/* ── 3. "enjoy!" after the film closes (17/10/2026, v3) ────────
   Glowing silver letters in the site's serif (Fraunces, not a joined-up
   script); they appear and burst outward into silver shards (tour.js
   enjoy(), Web Animations API). About 1.5s, takes no clicks. Reduced
   motion: a plain fade (.plain). */
.bct-enjoy { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse 55% 22% at 50% 50%, rgba(6, 8, 12, .78), rgba(6, 8, 12, .38) 55%, rgba(6, 8, 12, 0) 100%); opacity: 0; }
.bct-enjoy-in { position: relative; }
.bct-enjoy-word { display: block; font-family: 'Fraunces', Georgia, serif; font-style: normal; font-weight: 700; font-size: clamp(46px, 13vw, 88px); line-height: 1.1; letter-spacing: .04em; white-space: nowrap; opacity: 0; filter: drop-shadow(0 0 10px rgba(225, 235, 248, .55)) drop-shadow(0 0 26px rgba(170, 195, 230, .35)); }
.bct-enjoy-l { display: inline-block; color: #dfe5ec; background: linear-gradient(175deg, #ffffff 0%, #e9eef4 28%, #a9b3bf 52%, #f4f7fa 70%, #8c96a3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bct-shard { position: absolute; display: block; background: linear-gradient(135deg, #ffffff, #c7d0db 45%, #8d97a4); box-shadow: 0 0 6px rgba(225, 235, 248, .8); }
.bct-enjoy.plain { animation: bctEnjoyFade 1.5s ease both; }
.bct-enjoy.plain .bct-enjoy-word { opacity: 1; }
body[data-theme="light"] .bct-enjoy { background: radial-gradient(ellipse 55% 22% at 50% 50%, rgba(30, 36, 46, .72), rgba(30, 36, 46, .3) 55%, rgba(30, 36, 46, 0) 100%); }
@keyframes bctEnjoyFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* the film's own (hidden) music player, tour.js audioInit() (17/10/2026) */
.bct-audio { position: fixed; left: 0; bottom: 0; width: 200px; height: 113px; border: 0; opacity: 0; pointer-events: none; z-index: -1; }