/*
 * Variant D „Ihrisko“ — shared layer on top of the portal tokens (src/styles/tokens.css).
 * Only token-derived values here: every colour is a token or a color-mix() of tokens.
 */
:root {
  --vd-gap: clamp(16px, 1.6vw, 24px);
  --vd-section: clamp(96px, 11vw, 152px);
  --vd-radius-xl: 28px;
  --vd-header-h: 72px;
  /* Height of the client shelf under the hero (its top hairline is the toy-box floor on desktop). */
  --vd-shelf-h: 99px;

  /* Ink / surface tints */
  --vd-ink-04: color-mix(in oklab, var(--color-ink) 4%, transparent);
  --vd-ink-06: color-mix(in oklab, var(--color-ink) 6%, transparent);
  --vd-ink-10: color-mix(in oklab, var(--color-ink) 10%, transparent);
  --vd-ink-16: color-mix(in oklab, var(--color-ink) 16%, transparent);
  --vd-ink-40: color-mix(in oklab, var(--color-ink) 40%, transparent);
  --vd-paper-deep: color-mix(in oklab, var(--color-paper) 88%, var(--color-line));
  --vd-coral-soft: color-mix(in oklab, var(--color-coral) 55%, var(--color-surface));
  --vd-coral-line: color-mix(in oklab, var(--color-coral) 70%, var(--color-coral-strong));

  /* Soft, low elevations (portal: no big shadows) */
  --vd-shadow-toy: 0 14px 28px -18px color-mix(in oklab, var(--color-ink) 30%, transparent);
  --vd-shadow-print: 0 1px 2px color-mix(in oklab, var(--color-ink) 6%, transparent),
    0 10px 24px -14px color-mix(in oklab, var(--color-ink) 22%, transparent);
  --vd-shadow-lift: 0 2px 4px color-mix(in oklab, var(--color-ink) 5%, transparent),
    0 22px 40px -22px color-mix(in oklab, var(--color-ink) 34%, transparent);

  /* Motion */
  --ease-boing: linear(0, 0.29 8%, 0.74 18%, 1.06 29%, 1.12 35%, 1.06 45%, 0.99 58%, 1.01 72%, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 160ms;
  --dur-ui: 280ms;
  --dur-reveal: 720ms;

  --vd-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 767px) {
  :root { --vd-header-h: 64px; }
}

html { scroll-padding-top: calc(var(--vd-header-h) + 16px); }
body { overflow-x: clip; }
/* The coral thread (Nit.astro) is laid out over the whole of <main>. */
.vd-main:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { position: relative; }

/* ------------------------------------------------------------------ layout */
.vd-container:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.vd-section:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { position: relative; padding-block: var(--vd-section) 0; }
.vd-section:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) > .vd-container { position: relative; }

/* ------------------------------------------------------------------ type */
.vd-h1:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.vd-h2:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.625rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.vd-h3:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.vd-lead:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-ink-soft);
  max-width: 34em;
}
.vd-body:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-soft); }

/* Eyebrow: the end of the section string is a coral bead. */
.vd-eyebrow:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-muted);
}
.vd-eyebrow:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-coral);
  box-shadow: 0 0 0 3px var(--color-paper), 0 0 0 4px var(--vd-coral-soft);
  flex: none;
}
/* Beads on the thread: hollow until the thread reaches them, then they tie with a pop (nit.ts). */
@keyframes vd-knot {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
html.js[data-motion='full'] .vd-eyebrow[data-knot='off']:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before {
  background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-coral), 0 0 0 3px var(--color-paper);
}
html.js[data-motion='full'] .vd-eyebrow[data-knot='on']:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { animation: vd-knot 560ms var(--ease-out-soft) both; }

/* Optical kerning: the comma of the display face keeps its side bearing at tight tracking. */
.vd-punct:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { margin-inline-start: -0.1em; }

.vd-section-head:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  display: grid;
  gap: 18px;
  max-width: 44rem;
}
.vd-section-head--split:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 1024px) {
  .vd-section-head--split:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--vd-gap); }
  .vd-section-head--split:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) > .vd-section-head__aside { justify-self: end; text-align: right; }
}
.vd-section-head__aside:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 1024px) { .vd-section-head__aside:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { justify-items: end; } }

/* ------------------------------------------------------------------ buttons (portal §4.1, pill extension) */
.vd-btn:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-surface);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 var(--text-base) / 1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.vd-btn:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-ui) var(--ease-out-soft); }
.vd-btn:hover:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { --btn-bg: var(--color-ink-soft); }
.vd-btn:hover:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) svg.vd-arrow { transform: translateX(3px); }
.vd-btn:active:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { transform: scale(0.98); }
.vd-btn--secondary:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-line);
}
.vd-btn--secondary:hover:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { --btn-bg: var(--color-surface); box-shadow: 0 0 0 1px var(--color-ink-25); }
.vd-btn--coral:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { --btn-bg: var(--color-coral); --btn-fg: var(--color-ink); }
.vd-btn--coral:hover:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { --btn-bg: var(--color-coral-wash); }
.vd-btn--small:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { min-height: 44px; padding: 0 16px; font-size: var(--text-sm); gap: 8px; }
.vd-btn--small:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) svg { width: 16px; height: 16px; }

.vd-link:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-coral-text);
  text-decoration: none;
  transition: gap var(--dur-micro) var(--ease-standard);
}
.vd-link:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) svg { width: 16px; height: 16px; }
.vd-link:hover:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { gap: 10px; }
.vd-link--ink:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { color: var(--color-ink); }

/* ------------------------------------------------------------------ portal status pill (§4.3) */
.vd-status:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 600 var(--text-xs) / 1rem var(--font-sans);
  white-space: nowrap;
  background: var(--color-new-wash);
  color: var(--color-new-text);
}
.vd-status:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-new); }
.vd-status--done:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { background: var(--color-done-wash); color: var(--color-done-text); }
.vd-status--done:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { background: var(--color-done); }
.vd-status--soon:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { background: var(--color-soon-wash); color: var(--color-soon-text); }
.vd-status--soon:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { background: var(--color-soon); }
.vd-status--progress:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { background: var(--color-progress-wash); color: var(--color-progress-text); }
.vd-status--progress:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { background: var(--color-progress); }
.vd-status--waiting:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { background: var(--color-waiting-wash); color: var(--color-waiting-text); }
.vd-status--waiting:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before { background: var(--color-waiting); }

.vd-tabular:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { font-variant-numeric: tabular-nums; }

/* Visible only when JS runs (the class is set before first paint). */
html:not(.js) .vd-js-only:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) { display: none !important; }

/* ------------------------------------------------------------------ reveals
 * Scroll-driven, CSS only. Nothing is hidden without support, without JS-free motion, or under reduced motion.
 */
@keyframes vd-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  html[data-motion='full'] .vd-reveal:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *) {
    animation: vd-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

/* The motion toggle and prefers-reduced-motion both land here. */
html[data-motion='reduced'] *:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *),
html[data-motion='reduced'] *:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::before,
html[data-motion='reduced'] *:where(html:not([data-skladacka]) *, [data-v="d"] *, [data-v-base="d"] *)::after {
  scroll-behavior: auto !important;
}