/* ═══════════════════════════════════════════════════════════════════════
   Muwafik product-tour — DEMO-ONLY chrome.
   Loaded AFTER muwafik.css so these rules win. Nothing here ships in the
   app; it drives the synthetic cursor, captions and scene transitions of
   the scripted walkthrough (static/../demo/muwafik-demo.html).
   ═══════════════════════════════════════════════════════════════════════ */

/* The tour drives its own scene transitions — disable the app's
   cross-document View Transitions so a reload/navigation can't abort one
   mid-flight (InvalidStateError). This <style> loads after muwafik.css. */
@view-transition { navigation: none; }

html, body { min-height: 100%; }
/* Keep the window scrollable (the director scrolls to below-the-fold
   targets) but hide the scrollbar so the walkthrough reads like a clean
   screen recording. */
html { scrollbar-width: none; }
body { -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

/* ── Synthetic macOS-style cursor ─────────────────────────────────────── */
#mwCursor {
  position: fixed; left: 0; top: 0; width: 24px; height: 24px;
  z-index: 2147483000; pointer-events: none; will-change: transform;
  transform: translate(72px, 72px);
  transition: transform 640ms cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 3px 5px rgba(8, 22, 15, .38));
}
#mwCursor.is-fast { transition-duration: 380ms; }
#mwCursor svg { display: block; width: 100%; height: 100%; }
#mwCursor .mw-cur-arrow { transform-origin: 3px 2px; transition: transform 130ms ease; }
#mwCursor.is-down .mw-cur-arrow { transform: scale(.8); }

/* Click ripple */
.mw-ripple {
  position: fixed; z-index: 2147482999; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(31, 90, 58, .85); background: rgba(31, 90, 58, .16);
  transform: translate(-50%, -50%) scale(.3); opacity: .9;
  animation: mwRipple 560ms ease-out forwards;
}
@keyframes mwRipple { to { transform: translate(-50%, -50%) scale(3.6); opacity: 0; } }

/* Highlight the field the cursor is typing into, so the eye follows it. */
.mw-demo-active { box-shadow: 0 0 0 3px rgba(31, 90, 58, .28) !important; }
/* Blink a fake caret at the end of the value while typing text fields. */
.mw-typing { caret-color: var(--brand, #1F5A3A); }

/* ── Caption / narration bar ──────────────────────────────────────────── */
#mwCap {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 8px);
  z-index: 2147482000; max-width: min(780px, 92vw);
  display: flex; align-items: center; gap: .75rem;
  padding: .72rem 1.15rem .72rem .8rem; border-radius: 999px;
  background: rgba(14, 30, 22, .93); color: #EEF5F0;
  font: 500 .93rem/1.35 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .005em;
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .42s ease, transform .42s ease;
}
#mwCap.is-on { opacity: 1; transform: translate(-50%, 0); }
#mwCap .mw-cap-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: rgba(143, 211, 173, .18); color: #B9E7CC;
  font: 600 .82rem/1 'IBM Plex Mono', ui-monospace, monospace;
}
#mwCap .mw-cap-txt { min-width: 0; }

/* ── Controls (bottom-right) ──────────────────────────────────────────── */
#mwCtl {
  position: fixed; right: 22px; bottom: 22px; z-index: 2147482000;
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .5rem; border-radius: 999px;
  background: rgba(14, 30, 22, .9); color: #EEF5F0;
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .55);
}
#mwCtl button {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #EEF5F0;
  display: inline-flex; align-items: center; justify-content: center;
}
#mwCtl button:hover { background: rgba(255, 255, 255, .13); }
#mwCtl button svg { width: 1.05rem; height: 1.05rem; }
#mwCtl .mw-dots { display: flex; gap: .4rem; padding: 0 .55rem; }
#mwCtl .mw-dot {
  width: .52rem; height: .52rem; border-radius: 50%;
  background: rgba(255, 255, 255, .26); transition: background .3s, transform .3s;
}
#mwCtl .mw-dot.is-on { background: #8FD3AD; transform: scale(1.15); }

/* ── Scene transition on <main> ───────────────────────────────────────── */
#main { transition: opacity .3s ease, transform .3s ease; }
#main.is-leaving  { opacity: 0; transform: translateY(10px); }
#main.is-entering { opacity: 0; transform: translateY(-10px); }

/* Keep the loading overlay above the app but below cursor + caption. */
.mw-loading-overlay { z-index: 1000 !important; }

/* A soft vignette so the fixed overlays read against light app surfaces. */
#mwStageTint {
  position: fixed; inset: 0; z-index: 1999; pointer-events: none;
  box-shadow: inset 0 -120px 120px -110px rgba(8, 22, 15, .5);
}

/* ── Context cut — full-screen labelled wipe when the story moves between
   the traveller's desk and the officer's console. Covers everything (cursor
   + caption included) so the app can change identity behind it. ─────────── */
#mwCut {
  position: fixed; inset: 0; z-index: 2147483500;
  display: flex; align-items: center; justify-content: center;
  background: #0E1E16; color: #EEF5F0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
#mwCut.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
#mwCut #mwCutLabel {
  font: 600 clamp(1.4rem, 3.4vw, 2.35rem)/1.15 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -0.01em; padding-bottom: .22em;
  border-bottom: 2px solid rgba(143, 211, 173, .5);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease .14s, transform .5s ease .14s;
}
#mwCut.is-on #mwCutLabel { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  #mwCursor { transition-duration: 1ms; }
  #main { transition: none; }
}