/* ─────────────────────────────────────────────────────────────
   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.show.fade { opacity: 0; transition: opacity .85s ease; pointer-events: none; }   /* (25/10/2026) leaves with a soft fade, without sliding */
.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 (22/10/2026, v4: neon) ────
   Neon sign letters, as in the picture the user sent: a thin white-hot
   tube along the outline of tall condensed capitals (Bebas Neue, loaded by
   tour.js when the film opens) with an orange glow, over a dark patch with
   a warm orange haze. They light up and burst outward into orange sparks
   (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 30% 17% at 50% 50%, rgba(255, 150, 25, .55), rgba(255, 110, 0, .2) 55%, rgba(255, 110, 0, 0) 100%), radial-gradient(ellipse 58% 26% at 50% 50%, rgba(8, 6, 4, .86), rgba(8, 6, 4, .45) 55%, rgba(8, 6, 4, 0) 100%); opacity: 0; }
.bct-enjoy-in { position: relative; }
.bct-enjoy-word { display: block; font-family: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 18vw, 128px); line-height: 1; letter-spacing: .05em; white-space: nowrap; opacity: 0; }
.bct-enjoy-l { display: inline-block; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: clamp(2.2px, .45vw, 3.4px) #fffbf2; filter: drop-shadow(0 0 1.5px #ffe7b0) drop-shadow(0 0 5px #ffa51f) drop-shadow(0 0 13px #ff7d00) drop-shadow(0 0 30px rgba(255, 105, 0, .6)); }
.bct-shard { position: absolute; display: block; background: linear-gradient(135deg, #ffffff, #ffe6a6 40%, #ffb238); box-shadow: 0 0 6px rgba(255, 170, 40, .9); }
.bct-enjoy.plain { animation: bctEnjoyFade 1.5s ease both; }
.bct-enjoy.plain .bct-enjoy-word { opacity: 1; }
@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; }