/* Ukázkové weby · společný základ. Vzhled každé šablony je v jejím vlastním CSS. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 400; background: #000; color: #fff; padding: 8px 12px; font-weight: 600; text-decoration: none; transition: top 300ms; }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Press feedback on pointer down (instant, not on release) */
.press { transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1); }
.press:active { transform: scale(0.97); transition-duration: 80ms; }

/* Reveal on scroll */
.js .rv { opacity: 0; transform: translateY(40px); transition: opacity 900ms cubic-bezier(0.32, 0.72, 0, 1), transform 900ms cubic-bezier(0.32, 0.72, 0, 1); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: 80ms; } .js .rv.d2 { transition-delay: 160ms; } .js .rv.d3 { transition-delay: 240ms; }
.in-frame .rv { opacity: 1 !important; transform: none !important; }

/* Draggable carousel */
.car { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.car.dragging { cursor: grabbing; }
.car-track { display: flex; will-change: transform; }
.car img { -webkit-user-drag: none; pointer-events: none; }

/* Demo form message */
.form-msg { display: none; }
.form-msg.show { display: flex; }
.field .err { display: none; }
.field.invalid .err { display: block; }

/* Ribbon that links back to Nikolas */
.demo-pill { position: fixed; left: 16px; bottom: 16px; z-index: 300; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 9999px; background: #0A0A0A; color: #fff; font: 500 14px/20px 'Geist', system-ui, sans-serif; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); max-width: calc(100% - 32px); }
.demo-pill span { color: #B5B5AE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-pill { padding: 6px; gap: 8px; }
.demo-pill span { padding: 0 4px; }
.demo-pill a { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; padding: 4px 12px; border-radius: 9999px; transition: background-color 200ms, transform 160ms cubic-bezier(0.32, 0.72, 0, 1); }
.demo-pill a:active { transform: scale(0.95); }
.demo-pill .back { background: #2A2A2A; color: #fff; padding: 4px 10px 4px 8px; }
.demo-pill .back:hover { background: #3A3A3A; }
.demo-pill .back b { font-weight: 600; }
.demo-pill .go { background: #FF4D1E; color: #fff; }
.demo-pill .go:hover { background: #E8400F; }
@media (max-width: 520px) { .demo-pill span { display: none; } }
.in-frame .demo-pill, .in-frame .mbar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .rv { opacity: 1; transform: none; }
}