/* base.css — reset, typografie, layout primitiva, textura, utility. */

@layer reset {
  html { hanging-punctuation: first last; }
  body { overflow-x: clip; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; margin: 0; padding: 0; }
  h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
  h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; text-wrap: balance; }
  p { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

@layer base {
  ::selection { background: var(--accent); color: var(--ink); }

  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

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

  :focus { outline: none; }
  :focus-visible {
    outline: 1.5px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
  }

  main { display: block; overflow-x: clip; }
  main:focus { outline: none; }

  strong { font-weight: 500; }
  .muted { color: var(--fg-muted); }
}

@layer components {
  /* ---------- Layout ---------- */
  .container {
    width: 100%;
    padding-left: var(--margin-l);
    padding-right: var(--margin-r);
  }
  .grid12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .section { padding-block: var(--section); }

  /* Viditelné linky 12sloupcového gridu (dekorace). */
  .grid-lines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-inline: var(--margin-l) var(--margin-r);
    pointer-events: none;
    z-index: 0;
  }
  .grid-lines span {
    border-left: 1px solid var(--line);
    transform-origin: top;
  }
  .grid-lines span:last-child { border-right: 1px solid var(--line); }
  @media (max-width: 767px) {
    .grid-lines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-lines span:nth-child(n + 5) { display: none; }
    .grid-lines span:nth-child(4) { border-right: 1px solid var(--line); }
  }

  /* ---------- Typografické primitivy ---------- */
  .label {
    display: inline-flex;
    gap: 0.75em;
    color: var(--fg-muted);
  }
  .label__no { color: var(--fg); }

  .section-head {
    display: grid;
    gap: clamp(16px, 2vw, 28px);
    margin-bottom: clamp(48px, 8vw, 120px);
  }
  .section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 0.92;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
  }

  .link {
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    transition: background-size 0.6s var(--ease-out), color 0.3s;
    padding-bottom: 2px;
  }
  .link:hover { background-size: 0% 1px; background-position: 100% 100%; }

  .arrow { font-family: var(--font-mono); font-weight: 400; display: inline-block; transition: transform 0.5s var(--ease-out); }

  /* Text, který se při hoveru „protočí“ (duplikát přes data-text). */
  /* Prvek se posune nahoru a clip-path se posune opačně → okno zůstává na místě a vjede duplikát. */
  .roll-text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    clip-path: inset(0 0 0 0);
    transition: transform 0.6s var(--ease-out), clip-path 0.6s var(--ease-out);
  }
  .roll-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
  }
  :is(a, button):is(:hover, :focus-visible) > .roll-text { transform: translateY(-100%); clip-path: inset(100% 0 -100% 0); }

  /* ---------- Skip link ---------- */
  .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 12px 18px;
    background: var(--fg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: translateY(-160%);
    transition: transform 0.4s var(--ease-out);
  }
  .skip-link:focus-visible { transform: none; outline-color: var(--fg); }

  /* ---------- Film grain ---------- */
  .grain {
    position: fixed;
    inset: -100%;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 0.9s steps(6) infinite;
  }
  @keyframes grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-8%, 6%); }
    40% { transform: translate(6%, -10%); }
    60% { transform: translate(-12%, -4%); }
    80% { transform: translate(10%, 8%); }
    100% { transform: translate(0, 0); }
  }
}

@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Reveal stavy: obsah je vidět bez JS i bez GSAP. JS přidá .js-reveal až když animace opravdu běží. */
  .has-motion [data-reveal='fade'] { opacity: 0; transform: translateY(20px); }
  .has-motion [data-reveal='fade'].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--delay, 0s); }

  @media (prefers-reduced-motion: reduce) {
    .grain { animation: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .has-motion [data-reveal='fade'] { transform: none; }
  }
}

@layer utilities {
  /* SplitText masky (overflow: clip) by uřízly diakritiku nad velkými písmeny (Ř, Š, Č). Rozšíříme klip nahoru i dolů. */
  [data-reveal='lines'] > [class*='-mask'],
  [data-detail-title] [class*='-mask'],
  [data-hero-subtitle] [class*='-mask'] {
    padding-block: 0.16em 0.06em;
    margin-block: -0.16em -0.06em;
  }
}