/* Shared pieces for Havoc Labs demo sites. Each demo brings its own look. */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
main, footer { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
video { background: #000; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reveal */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform 0.9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* Concept badge: every demo says plainly it's a sample for a fictional business. */
.concept { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 99px;
  background: rgb(12 12 11 / 0.82); color: #f4f2ec; font: 500 12.5px/1.2 'Inter', system-ui, sans-serif; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 8px 30px rgb(0 0 0 / 0.25); max-width: calc(100vw - 28px); }
.concept b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: #f7931a; color: #1a1100; font-size: 11px; flex: none; }
.concept span { opacity: 0.85; }
.concept:hover span { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Cursor preview (menu hover images) */
.cursor-preview { position: fixed; left: 0; top: 0; width: 260px; height: 320px; border-radius: 14px; background: center/cover no-repeat; pointer-events: none; z-index: 60;
  opacity: 0; scale: 0.85; transition: opacity 0.25s, scale 0.35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); }
.cursor-preview.on { opacity: 1; scale: 1; }

/* Demo toast */
.demo-toast { position: fixed; left: 50%; bottom: 70px; translate: -50% 20px; z-index: 95; max-width: min(520px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 12px;
  background: #111; color: #fff; font: 500 14px/1.45 'Inter', system-ui, sans-serif; box-shadow: 0 16px 40px rgb(0 0 0 / 0.35); opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s; }
.demo-toast.on { opacity: 1; translate: -50% 0; }

/* Before / after */
[data-compare] { position: relative; overflow: hidden; --pos: 50%; }
[data-compare] .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
[data-compare] .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; translate: -1px 0; pointer-events: none; }
[data-compare] .handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font: 600 18px/1 system-ui; box-shadow: 0 6px 20px rgb(0 0 0 / .3); }
[data-compare] input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }