/* ── OMATO zaślepka — custom styles ── */

/* ── Wordmark magnetic ── */
.wm-letter {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform;
}

/* ── Loader ── */
#loader {
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader.done {
  transform: translateY(-100%);
}

.loader-number {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.02em;
  color: #282427;
  font-variant-numeric: tabular-nums;
}


/* Padding niestandardowy (px-13 = 52px) */
.px-13 { padding-left: 52px; padding-right: 52px; }
.py-9  { padding-top: 36px;  padding-bottom: 36px; }

/* Headline — fluid font size */
.headline {
  font-size: clamp(38px, 5.4vw, 80px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* Opis — fluid font size */
.desc {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.02em;
}

/* Headline hover — circular reveal */
.hl-item {
  display: inline-block;
}
.hl-front {
  display: block;
}
.hl-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: #282427;
  color: #f0ede8;
  clip-path: inset(50% 0 50% 0);
  pointer-events: none;
  white-space: nowrap;
}

/* Footer / label — małe uppercase */
.label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}