/* Titus Original — shared styles for the three concept demo sites (restaurant, barber, trades).
   Each concept then adds its own stylesheet, so they look and feel completely different. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; padding-top: 44px; }              /* room for the concept bar */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the bar that keeps these unmistakably demos */
.concept-bar { position: fixed; inset: 0 0 auto 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; min-height: 44px; padding: 6px 16px; background: #151515; color: #f3efe7; font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; }
.concept-bar b { padding: 3px 9px; border-radius: 999px; background: #e6c27a; color: #151515; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.concept-bar a { padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 1100; padding: 12px 18px; background: #fff; color: #111; font: 600 13px system-ui, sans-serif; border-radius: 8px; }
.skip:focus { top: 52px; }

/* reveal on scroll */
.js .rv { transform: translateY(28px); filter: blur(6px); }          /* blur-to-sharp rather than an opacity fade: text is never semi-transparent */
.js .rv.is-in { transform: none; filter: none; }
@media (prefers-reduced-motion: no-preference) { .js .rv { transition: transform 1s cubic-bezier(.22,1,.36,1) var(--d, 0s), filter .8s ease var(--d, 0s); } }
@media (prefers-reduced-motion: reduce) { .js .rv { transform: none; filter: none; } }

/* before / after slider (keyboard accessible: it is a real range input) */
.cx-compare { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--cx-radius, 18px); background: #222; user-select: none; -webkit-user-select: none; }
.cx-scene { position: absolute; inset: 0; }
.cx-scene svg { width: 100%; height: 100%; }
.cx-compare .cx-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cx-compare-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cx-compare-handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.cx-compare-handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: #111; font: 600 20px system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cx-tag { position: absolute; z-index: 2; top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font: 600 10px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.cx-tag-before { left: 14px; }
.cx-tag-after { right: 14px; }
.cx-compare:focus-within { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .cx-compare-handle::after { animation: cx-nudge 2.4s ease-in-out 1.2s 2; } }
@keyframes cx-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-9px); } 60% { transform: translateX(9px); } }

/* demo confirmation panels */
[data-demo-result][hidden] { display: none; }