/* Tomáš Benedikt — site
   Swiss-minimal, Helvetica. Black on white. */

/* Pravá Helvetica Neue LT (z assets/fonts/HelveticaNeue) — jedna rodina, 4 váhy */
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("assets/fonts/HelveticaNeue/HelveticaNeueLTCom-Lt.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("assets/fonts/HelveticaNeue/HelveticaNeueLTCom-Roman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("assets/fonts/HelveticaNeue/HelveticaNeueLTCom-Md.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("assets/fonts/HelveticaNeue/HelveticaNeueLTCom-Bd.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --muted: #8a8a8a;
  --hover: #ededed;   /* světlešedý fill tlačítek na hover */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
  color: var(--ink);
  font-family: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- logo + nav souběžně, blízko nahoře, malý padding ---- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* logo | nav (střed) | balanc */
  align-items: center;
  padding: 16px 20px;
}
.brand {                                /* col 1, vlevo: logo + jméno */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  height: 15px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.logo {
  height: 32px;
  width: auto;
  /* „logo ale černé" — vynutí černou u libovolného svg, zachová průhlednost */
  filter: brightness(0);
}

/* ---- stage (center) ---- */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 20px;
  text-align: center;
}

/* ---- nav: jen text ---- */
.nav {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.nav__sep { margin-right: 0.35em; }

/* ---- headline (menší) ---- */
.headline {
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  font-weight: 500;            /* → HelveticaNeueLTCom-Md */
  letter-spacing: -0.02em;
  line-height: 1;              /* bez půl-leadingu → vnořené inline-blocky sednou na stejné Y */
  white-space: nowrap;
}

/* animované segmenty: „Es muss sein." → „Musí to být." (bez margin hacků!) */
.headline .es,
.headline .muss,
.headline .to,
.headline .pair,
.headline .swap,
.headline .grp,
.headline .dot { display: inline-block; vertical-align: bottom; }
.headline .sp { white-space: pre; }     /* zachová mezeru mezi „echt/ono" a „být" */

/* sbalení/odhalení přes max-width v em → škáluje s font-size (clamp vw) = resize-safe */
.headline .es  { overflow: hidden; white-space: pre; max-width: 3em;
                 transition: max-width 0.6s ease, opacity 0.6s ease; }
.headline .es.collapsed { max-width: 0; opacity: 0; }   /* „Es" se sbalí, „muss" klapne doleva */
.headline .muss { white-space: pre; }
.headline .to  { overflow: hidden; white-space: pre; max-width: 0; opacity: 0;
                 transition: max-width 0.7s ease, opacity 0.7s ease; }
.headline .to.open { max-width: 3em; opacity: 1; }       /* width zůstává auto → resize-safe */

.headline .swap,
.headline .grp { position: relative; transition: width 0.35s ease; }
.headline .swap .o, .headline .swap .n,
.headline .grp .o,  .headline .grp .n {
  display: inline-block;
  vertical-align: bottom;      /* stejná zarovnávací reference jako segmenty */
  line-height: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;   /* jen Y + fade */
}
/* výchozí role: .o v toku (vidět), .n zaparkovaná dole (skrytá).
   Záměnu i návrat řídí morphGlyph inline (position/opacity/transform + data-shown). */
.headline .swap .n, .headline .grp .n {
  position: absolute; left: 0; top: 0;
  opacity: 0; transform: translateY(0.6em);   /* čeká dole, neviditelné */
}

/* ---- dvě hloupá tlačítka ---- */
.status { padding: 20px; }
.status__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.btn {
  appearance: none;
  border: 0;
  border-radius: 0;            /* hranaté */
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  /* bez animací */
}
.btn:disabled { cursor: default; color: var(--muted); }
.btn:not(:disabled):hover,
.btn[aria-expanded="true"] {
  background: var(--hover);     /* jednobarevný světlešedý fill */
}

.contacts {
  margin-top: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink);
}
.contacts[hidden] { display: none; }
.contacts a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--muted); }
.contacts a:hover { border-bottom-color: var(--ink); }

/* ---- kurzorová stopa: hranaté rámečky (viz initCursorTrail) ---- */
.cursor-frame {
  position: fixed;
  border: 1px solid var(--ink);
  border-radius: 0;                   /* hranaté rohy */
  background: transparent;            /* jen rámeček */
  transform: translate(-50%, -50%);   /* vzniká přesně na pozici kurzoru */
  pointer-events: none;               /* nesmí překážet klikání/hoveru */
  opacity: 1;
  z-index: 9999;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
/* při mizení se rámeček odstřelí ven (odstředivá síla) */
.cursor-frame--fade {
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0));
}