/* ===== Tlačítko Sklyvo — jediný zdroj pravdy =====
 *
 * Načítá to LANDING (public/landing/*.html přes <link>) i APLIKACE
 * (import v app/layout.tsx). Landing je statické HTML a workspace React,
 * takže sdílet doslova jednu komponentu napříč nejde — sdílí se tohle:
 * vzhled i chování hoveru. Kdo změní hodnotu tady, změní ji na obou stranách.
 *
 * Markup, který tyhle třídy očekávají:
 *
 *   <a class="pixbtn pixbtn--white">
 *     <span class="lbl">
 *       <span class="lt"><b class="b1">S</b><b class="b2">S</b></span>
 *       …jedno `lt` na znak…
 *     </span>
 *     <svg class="pixarrow">…</svg>
 *   </a>
 *
 * Na landingu ho z prostého textu poskládá script.js, v Reactu komponenta
 * PixButton. Výsledný DOM je v obou případech stejný.
 */

.pixbtn,
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 12px 10px 22px;
  border-radius: var(--sk-radius);
  transition: background 0.2s;
}

.pixbtn--white,
.btn-white {
  background: #fff;
  color: #000;
}
.pixbtn--white:hover,
.btn-white:hover {
  background: #e8e8e8;
}

/* Tmavá varianta — sekundární akce vedle bílé. */
.pixbtn--dark {
  background: #161616;
  border: 1px solid var(--line, #1f1f1f);
  color: #fff;
}
.pixbtn--dark:hover {
  background: #1d1d1d;
}

/* ---- rolování písmen ----
 * Každý znak je v DOM dvakrát: `b1` na místě, `b2` schovaný pod ním. Při
 * najetí obě vyjedou o řádek nahoru, takže druhá kopie nastoupí na místo
 * první. Prodleva na znak dělá ten postupný běh zleva doprava.
 *
 * `user-select: none`, protože jinak by výběr přes tlačítko vrátil zdvojená
 * písmena („SSiiggnn iinn“). Přístupný název drží aria-label na tlačítku.
 */
.lbl {
  display: inline-flex;
  -webkit-user-select: none;
  user-select: none;
}
.lt {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
}
.lt b {
  display: block;
  font-weight: inherit;
  line-height: 1.3;
  transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.lt .b2 {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
}
a:hover .lt .b1,
button:hover .lt .b1 {
  transform: translateY(-105%);
}
a:hover .lt .b2,
button:hover .lt .b2 {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .lt b {
    transition: none;
  }
}

/* ---- pixelová šipka ---- */
.pixarrow {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}
.pixarrow rect {
  fill: rgba(255, 255, 255, 0.2);
  transition: fill 0.09s linear;
}
.pixarrow rect.on {
  fill: #fff;
}
.pixbtn--white .pixarrow rect,
.btn-white .pixarrow rect {
  fill: rgba(0, 0, 0, 0.2);
}
.pixbtn--white .pixarrow rect.on,
.btn-white .pixarrow rect.on {
  fill: #000;
}