@layer base {
  :root {
    /* Sticky header height (70–74px) – anchors and scroll-snap clear it. */
    --header-height: 4.75rem;
  }

  html {
    /* Every in-page jump (#faq, #project, "Více") lands below the sticky
       header with breathing room, eyebrow included – no per-element margins. */
    scroll-padding-block-start: calc(var(--header-height) + 1rem);
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(
        circle at top,
        color-mix(in oklch, var(--color-accent) 12%, transparent),
        transparent 28%
      ),
      var(--color-background);
  }

  [data-theme="dark"] body {
    background:
      radial-gradient(
        circle at top,
        color-mix(in oklch, var(--color-accent) 14%, transparent),
        transparent 24%
      ),
      radial-gradient(
        circle at bottom left,
        color-mix(in oklch, var(--color-white) 4%, transparent),
        transparent 22%
      ),
      var(--color-background);
  }

  body[data-scroll-lock] {
    overflow: hidden;
  }

  /* Editorial serif for page and section headings (pairs with the script
     logo); Manrope stays the UI face for small headings and buttons. */
  h1,
  h2,
  h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  h4,
  h5,
  h6,
  button,
  .button,
  .btn {
    font-family: var(--font-display);
  }

  a,
  button {
    transition:
      color var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  ::selection {
    background: color-mix(in oklch, var(--color-royal) 26%, transparent);
  }

  iframe {
    color-scheme: light;
  }

  /* Visible, consistent keyboard focus everywhere (WCAG 2.4.7 / 2.4.11). */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  a[href],
  button:not(:disabled),
  summary,
  label[for],
  [role="button"] {
    cursor: pointer;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* Scroll reveal – CSS-first, scroll-driven (no JS, no IntersectionObserver).
   - The animation runs while the element *enters* the viewport and finishes
     at 40 % of its entry, so content at the very end of a page always ends
     fully visible (a `cover` range could leave it half-faded).
   - `--reveal-i` staggers siblings in a grid: each item's range starts a bit
     later (set inline: style="--reveal-i: 2").
   - `data-reveal="fade"` = opacity only (for large blocks and images).
   - Baseline: without support or with reduced motion everything is simply
     visible; transforms use `transform`, so Tailwind hover `translate` still
     works on revealed cards. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range:
        entry calc(var(--reveal-i, 0) * 6%)
        entry calc(40% + var(--reveal-i, 0) * 6%);
    }

    [data-reveal="fade"] {
      animation-name: reveal-fade;
    }
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@layer components {
  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }

  /* Glass surface — frosted-blur panel used on hover states,
     headers, and overlays. Tokenized so themes inherit.
     Backdrop-filter lives on ::before so the host element does not
     create a containing block for fixed-position descendants
     (Chrome treats elements with backdrop-filter as CB ancestors). */
  .glass {
    position: relative;
    isolation: isolate;
    background: color-mix(in oklch, var(--color-background) 70%, transparent);
    border: 1px solid var(--color-border);
  }

  .glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    pointer-events: none;
  }

  [data-theme="dark"] .glass {
    background: color-mix(in oklch, var(--color-ink) 60%, transparent);
  }

  .glass-strong {
    position: relative;
    isolation: isolate;
    background: color-mix(in oklch, var(--color-background) 86%, transparent);
    border: 1px solid var(--color-border-strong);
  }

  .glass-strong::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
  }

  [data-theme="dark"] .glass-strong {
    background: color-mix(in oklch, var(--color-ink-deep) 80%, transparent);
  }

  /* Subtle frosted overlay that reveals on hover. Add the
     class to a card; the glass appears on :hover. */
  .glass-hover {
    position: relative;
    isolation: isolate;
  }

  .glass-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in oklch, var(--color-white) 8%, transparent);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-standard) var(--ease-out-soft);
    z-index: 1;
  }

  .glass-hover:hover::before,
  .glass-hover:focus-within::before {
    opacity: 1;
  }

  .glass-hover > * {
    position: relative;
    z-index: 2;
  }
}