*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg, #111);
  color: var(--text, #e9e0d4);
  font-family: "Rubik", sans-serif;
  opacity: 0;
  transition: opacity 0.55s ease;
}

body.loaded { opacity: 1; }

h1, h2, h3, h4 { font-family: "Cinzel", serif;  }
p  { line-height: 1.7; }
a  { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
em  { font-style: italic; }

/* ── Navbar ─────────────────────────────────── */
:root {
  --ease-out: cubic-bezier(.14, .85, .2, 1);
}

.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  filter: blur(10px);
  transition:
    opacity   900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter    900ms var(--ease-out);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px) scale(0.995);
  filter: blur(10px);
  transition:
    opacity   900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter    900ms var(--ease-out);
  will-change: opacity, transform, filter;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px) scale(0.995);
  filter: blur(10px);
  transition:
    opacity   900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter    900ms var(--ease-out);
  will-change: opacity, transform, filter;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------
CONTACT CUSTOM
-------------------------- */
.kontakty {
  color: var(--text);
}

.kontakty-dotaznik textarea {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(233, 224, 212, 0.94);
  color: #121416;
}

.kontakty-dotaznik textarea:focus {
  box-shadow: 0 0 0 6px var(--textarea-focus-ring, rgba(147, 197, 253, 0.16));
}

.kontakty-dotaznik button {
  background: var(--btn-bg, #555);
  color: var(--btn-color, #fff);
}

.kontakty-dotaznik button:hover {
  background: var(--btn-hover, #777);
}

.form-status {
  color: var(--form-status-color, rgba(200, 200, 200, 0.85));
}

.ornament-frame {
  border: 1px solid var(--ornament-border-color, rgba(255, 255, 255, 0.15));
  background: var(--ornament-bg, rgba(0, 0, 0, 0.35));
}

.ornament-frame::before,
.ornament-frame::after {
  border: 1px solid var(--ornament-corner-color, rgba(255, 255, 255, 0.30));
}