/* Jeden wordmark pro titulku i navigace. Varianty meni pouze velikost. */
.brand-wordmark {
  display: inline-block;
  max-width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--brand-wordmark-size, 18px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  background-image: linear-gradient(100deg,
    #0f172a 0%, #0f172a 40%,
    #17d0cf 46%, #01a6fd 50%, #17d0cf 54%,
    #0f172a 60%, #0f172a 100%);
  background-size: 900% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-wordmark-sheen 9s linear infinite;
}

.brand-wordmark--nav { --brand-wordmark-size: 18px; }
.brand-wordmark--hero {
  font-size: clamp(2.1rem, 7.2vw, var(--brand-wordmark-size, 74px));
}
.brand-wordmark--upper { text-transform: uppercase; }
.brand-wordmark--lower { text-transform: lowercase; }

html[lang='en'] .brand-wordmark {
  font-family: 'Overpass Mono', 'JetBrains Mono', monospace;
  font-weight: 400;
  letter-spacing: .04em;
}
.brand-wordmark__gap {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: baseline;
}
.brand-wordmark__dot {
  position: absolute;
  left: 50%;
  bottom: .255em;
  transform: translate(calc(-50% + .015em), 50%);
  width: .12em;
  height: .12em;
  border-radius: 50%;
  background: #0f172a;
  z-index: 1;
}

@keyframes brand-wordmark-sheen {
  0% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.brand-wordmark:hover,
.brand-wordmark.brand-wordmark--triggering {
  animation-name: brand-wordmark-sheen-trigger;
  animation-duration: 2s;
  animation-iteration-count: 1;
}
@keyframes brand-wordmark-sheen-trigger {
  0% { background-position: 100% center; }
  5% { background-position: 68% center; }
  80% { background-position: 44% center; }
  100% { background-position: 0% center; }
}

.brand.menu-open .brand-wordmark {
  animation: none;
  background-image: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.brand.menu-open .brand-wordmark__dot { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .brand-wordmark,
  .brand-wordmark:hover,
  .brand-wordmark.brand-wordmark--triggering {
    animation: none;
    background-image: none;
    color: #0f172a;
    -webkit-text-fill-color: #0f172a;
  }
  .brand-wordmark__dot { background: #0f172a; }
  .brand.menu-open .brand-wordmark {
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  .brand.menu-open .brand-wordmark__dot { background: #fff; }
}