@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111;
  --muted: #9a9a9a;
  --paper: #fff;
}

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

html {
  background: var(--paper);
}

body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: uppercase;
  min-height: 100vh;
}

/* ——— čmouhy (dekorativní vrstva za obsahem) ——— */

/* záporný z-index = vždy pod veškerým obsahem */
.smudges {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.smudge {
  position: absolute;
  user-select: none;
}

/* velikosti = polovina nativního rozlišení (@2x exporty),
   číslované po směru hodinových ručiček od pravého horního rohu */
.smudge--1 { width: 875px; left: 62vw;  top: 0; }
.smudge--2 { width: 340px; left: 84vw;  top: 36vh; }
.smudge--3 { width: 308px; left: 78vw;  top: 90vh; }
.smudge--4 { width: 196px; left: 63vw;  top: 94vh; }
.smudge--5 { width: 195px; left: 9.5vw; top: 91vh; }
.smudge--6 { width: 323px; left: 8.5vw; top: 70vh; }
.smudge--7 { width: 293px; left: 8vw;   top: 58vh; }
.smudge--8 { width: 463px; left: 12vw;  top: 30vh; }

/* ——— hlavička ——— */

/* obal hlavičky — na desktopu se nijak neprojeví,
   na mobilu vymezuje, kam až je hlavička „přilepená" */
.intro {
  display: contents;
}

.header {
  position: absolute;
  top: 4.5rem;
  left: 4.2vw;
  z-index: 2;
}

.header__name {
  font-size: 13px;
  font-weight: 400;
}

.header__subtitle {
  color: var(--muted);
  max-width: 20ch;
  min-height: 36px; /* 2 řádky — ať rotace hlášek nehýbe layoutem */
}

.avatar {
  position: absolute;
  top: 4.5rem;
  right: 4.2vw;
  width: 64px;
  height: 64px;
  object-fit: cover;
  z-index: 2;
}

/* ——— scéna s portrétem a odkazy ——— */

.stage {
  position: relative;
  min-height: 100vh;
}

.portrait {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* zdroj je @2x (1740×1750) — nikdy nezvětšovat nad polovinu, tj. 870×875 */
  height: min(92vh, 875px);
  aspect-ratio: 1740 / 1750;
  max-width: min(96vw, 870px);
  transition: transform 0.6s ease;
}

.portrait.is-tilting {
  transition: transform 0.08s linear;
}

.portrait__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  transition: transform 0.6s ease;
}

.portrait.is-tilting .portrait__layer {
  transition: transform 0.08s linear;
}

/* čtverec-lupa — rozmazává obsah pod sebou */
.portrait__square {
  position: absolute;
  left: calc(50% - 33px + 240px);
  top: calc(50% - 33px - 150px);
  width: 66px;
  height: 66px;
  background: rgba(255, 255, 255, 0.1); /* mléčný závoj — „frosted glass" */
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  will-change: transform;
  transition: transform 0.6s ease;
}

.portrait.is-tilting .portrait__square {
  transition: transform 0.08s linear;
}

.link {
  position: absolute;
  color: var(--ink);
  text-decoration: none;
  z-index: 2;
  white-space: nowrap;
}

/* podtržení 4 px pod textem, roztáhne se zleva doprava,
   při opuštění se stejnou cestou stáhne zpět */
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
}

.link--linkedin    { left: 9vw;   top: 27vh; }
.link--hadat       { left: 74vw;  top: 19vh; }
.link--instagram   { left: 4.6vw; top: 46.5vh; }
.link--tohlejsemja { left: 77.5vw; top: 57.5vh; }
.link--giant       { left: 16vw;  top: 78vh; }
.link--phone       { left: 80vw;  top: 38vh; }

.bio {
  position: absolute;
  left: 78vw;
  bottom: 7vh;
  width: 275px;
  z-index: 2;
}

.bio__signature {
  color: var(--muted);
}
/* ——— mobil ——— */

@media (max-width: 768px) {
  body {
    position: relative;
    padding: 2rem 1.75rem 3rem;
    display: flex;
    flex-direction: column;
  }

  /* čmouhy rolují se stránkou, pozice v % výšky dokumentu */
  .smudges {
    position: absolute;
  }

  /* parallaxa hýbe čmouhami každý snímek — drž je na kompozitoru */
  .smudge {
    will-change: transform;
  }

  /* scroll-driven tilt mapuje pozici 1:1 — transitions by se s každou
     scroll událostí restartovaly a efekt by drhnul */
  .portrait,
  .portrait .portrait__layer,
  .portrait .portrait__square {
    transition: none;
  }

  .smudge--2,
  .smudge--4,
  .smudge--8 {
    display: none;
  }

  /* první čmouha je fixní u horního okraje obrazovky */
  .smudge--1 { position: fixed; width: 120vw; left: 30vw; top: 0; }
  .smudge--5 { left: 5vw;   top: 38%; }
  .smudge--6 { left: auto;  right: 0; top: 60%; }
  .smudge--7 { left: 0;     top: 73%; }
  .smudge--3 { left: 8vw;   top: 79%; }

  /* hlavička je „přilepená" nahoře; jakmile ke ní doscrolluje obsah
     (konec .intro), odjede s ním pryč */
  .intro {
    display: block;
    order: 1;
    height: 92vh;
  }

  .header {
    position: sticky;
    top: 2rem;
    z-index: 3;
  }

  /* bílé pozadí po jednotlivých řádcích textu (a na odkazech) */
  .hl,
  .link {
    background: var(--paper);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 1px 0.35em;
    margin-left: -0.35em;
  }

  .stage {
    order: 2;
  }

  .avatar {
    position: relative;
    z-index: 2;
    order: 3;
    margin: 5rem 0 0 auto;
    width: 56px;
    height: 56px;
  }

  .stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* portrét je fixní, kotvený od horní hrany viewportu;
     obsah se scrolluje přes něj */
  .portrait {
    position: fixed;
    left: 50%;
    top: 140px;
    transform: translate(-50%, 0);
    width: calc(100vw - 3.5rem);
    height: auto;
    max-width: 870px;
    z-index: 1;
  }

  .link {
    position: relative;
    left: auto;
    top: auto;
    align-self: flex-start;
    z-index: 2;
  }

  .bio {
    position: relative;
    z-index: 2;
    width: 240px;
    min-width: 0;
    left: auto;
    bottom: auto;
    margin-bottom: 3.5rem;
  }

  /* pořadí podle mobilního náhledu */
  .portrait          { order: 1; }
  .bio               { order: 2; }
  .link--giant       { order: 3; align-self: flex-end; margin: 0 4vw 3rem 0; }
  .link--tohlejsemja { order: 4; align-self: flex-start; margin: 0 0 3.5rem 4vw; }
  .link--instagram   { order: 5; align-self: center; margin-bottom: 5rem; }
  .link--linkedin    { order: 6; align-self: flex-end; margin: 0 8vw 4rem 0; }
  .link--hadat       { order: 7; align-self: flex-start; margin-left: 12vw; }
  .link--phone       { order: 8; align-self: center; margin-top: 4rem; }
}