/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka 99: O mně pod úvodem. Fotka na výšku 3:4, vedle ní nadpis,
   text a pod ním jediná lišta kontaktů webu (bod 138: telefon, Instagram,
   rozbalovací Ostatní s mailem a WhatsAppem a portfolio). Telefon: fotka
   vedle nadpisu, text a kontakty přes celou šířku. PC: fotka vlevo přes
   celou výšku, všechno ostatní vpravo a svisle na středu. */
/* Sekce zabere aspoň celé okno, ať foťák přijíždí přes celou plochu. */
/* Zlatá hodinka 173: hladký roh, násobek --roh-hladky drží zh-plast. */
/* Zlatá hodinka 191: pod obsahem zůstane tma navíc (--zh-omne-dech), ať
   O mně dýchá a foťák nepřijede hned. Obsah stojí na stejném místě jako dřív,
   sekce je jen o dech delší; na počítači víc. */
/* Zlatá hodinka 261: na telefonu víc tmy pod Portfoliem před foťákem. */
.zh-omne {
  --zh-omne-dech: clamp(44px, 9vh, 84px);
  display: grid;
  align-content: center;
  min-height: calc(100vh + var(--zh-omne-dech));
  min-height: calc(100svh + var(--zh-omne-dech));
  padding: var(--zh-sekce-okraj) 0 calc(var(--zh-sekce-okraj) + var(--zh-omne-dech));
  background: linear-gradient(180deg, #2A1230 0%, #120818 100%);
}
/* Zlatá hodinka 261: korálová záře je vlastní vrstva se stálou velikostí,
   ne pozadí celé sekce. Pozadí přes výšku sekce se na telefonu kreslilo po
   dlaždicích a záře měla ostrou vodorovnou hranu; výška sekce se navíc mění
   s rozbalením Ostatní. Izolace drží záři nad pozadím a pod obsahem, i když
   sekce bez lepení není sticky. */
.zh-omne {
  isolation: isolate;
}
.zh-omne::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 42%;
  height: min(230vw, 88vh);
  transform: translateY(-50%);
  background: radial-gradient(49vw 50% at 18% 50%, rgba(250, 129, 185, 0.12), rgba(250, 129, 185, 0));
  pointer-events: none;
  will-change: transform;
}
.zh-omne__obsah {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  grid-template-areas: "foto hlava" "pribeh pribeh" "kontakty kontakty";
  align-items: center;
  column-gap: clamp(16px, 4vw, 24px);
  row-gap: clamp(22px, 5vw, 30px);
}
/* ─────────────────────────────  fotka  ───────────────────────────── */
/* Zlatá hodinka 255: fotka je Polaroid. Papír, podpis tužkou a světlo pokoje
   jsou stejné jako u výtisku z tiskárny (006-tiskarna.less), okraje mají
   stejný poměr k fotce. Když sekce přijede, fotka se vyvolá: z šedozelené
   chemie vystoupí bledý obraz se studeným nádechem a pak naběhnou barvy.
   Ťuknutí udělá novou fotku: závěrka, chemie se vrátí, Polaroid se zatřese
   a vyvolá znovu (002a-o-mne.js). Jen průhlednost, filtr bez rozmazání
   a transformace. (Ondra, část 68 a 71: „úplně od základu jinou animaci“;
   „by to asi chtělo ty rámečky … jak když se fakt jako vyfotí na tý tiskárně“) */
/* papír v šeru sekce, jako výtisk u tiskárny (tam brightness 0.86) */
.zh-omne__foto {
  grid-area: foto;
  position: relative;
  container-type: inline-size;
  align-self: center;
  margin: 0;
  /* okraj 0.06 a spodek 0.15 šířky fotky jako u výtisku (--zh-tb, --zh-tbd) */
  padding: 5.36% 5.36% 0;
  border-radius: 3px;
  background-color: #d1ccc5;
  rotate: -1.6deg;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Na telefonu je pod fotkou hned motto, stín a záře proto sahají jen do mezery. */
  box-shadow: 0 1px 1px rgba(8, 4, 16, 0.55), 0 12px 24px -14px rgba(8, 4, 16, 0.85), 0 0 18px -6px rgba(250, 129, 185, 0.42);
  transition: box-shadow 0.25s ease, translate 0.25s ease, scale 0.2s ease;
}
/* světlo pokoje na papíře i na fotce: teplé zleva, studené zprava */
.zh-omne__foto::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(250, 176, 142, 0.16) 0%, transparent 45%, transparent 62%, rgba(126, 224, 232, 0.1) 100%), linear-gradient(180deg, rgba(250, 129, 185, 0.1) 0%, transparent 22%, transparent 60%, rgba(8, 4, 16, 0.26) 100%);
  pointer-events: none;
}
/* matný papír: jemné zrno přes celý list i přes fotku */
.zh-omne__foto::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}
.zh-omne__okno {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1B1320;
}
.zh-omne__zaber {
  position: absolute;
  inset: 0;
  display: block;
}
/* Zlatá hodinka 177: výchozí fotka Honzy má prázdnou zeď vpravo a pás pod
   pasem. Záběr je o 12 % větší od levého horního rohu, těžiště postavy tak
   stojí na středu a obličej na horní zlaté linii. */
.zh-omne__foto--vychozi .zh-omne__zaber {
  right: -12%;
  bottom: -12%;
}
.zh-omne__obraz {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 32%;
}
/* chemie nevyvolaného Polaroidu: šedozelená, uprostřed o kousek světlejší */
.zh-omne__chemie {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 34% 28%, #5A6462 0%, #3D4548 55%, #2B3034 100%);
  opacity: 0;
  pointer-events: none;
}
/* spodní okraj: podpis a místo tužkou, jako na výtisku */
.zh-omne__okraj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  aspect-ratio: 20 / 3;
  font-size: clamp(7px, 3cqi, 12px);
  font-weight: 500;
  letter-spacing: 0.16em;
  /* místo nad velkými písmeny pro háčky a čárky (TŘEBÍČ) i v ořezu */
  line-height: 1.5;
  text-transform: uppercase;
  color: #8C8190;
  white-space: nowrap;
}
.zh-omne__kde {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* na úzkém Polaroidu vedle nadpisu stačí podpis */
@container (max-width: 230px) {
  .zh-omne__kde {
    display: none;
  }
}
/* Nevyvolaná fotka jen se skriptem, bez něj je hned hotová. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .zh-omne__foto--nevyvolana .zh-omne__chemie {
    opacity: 1;
  }
  .zh-omne__foto--nevyvolana .zh-omne__obraz {
    filter: saturate(0.15) contrast(0.5) brightness(1.18) sepia(0.45) hue-rotate(165deg);
  }
}
.zh-omne__foto--vyvolava .zh-omne__chemie {
  animation: zh-omne-chemie 3.6s cubic-bezier(0.45, 0.05, 0.4, 1) both;
}
.zh-omne__foto--vyvolava .zh-omne__obraz {
  animation: zh-omne-barvy 3.6s cubic-bezier(0.45, 0.05, 0.4, 1) both;
}
.zh-omne__foto--znovu .zh-omne__chemie {
  animation: zh-omne-chemie-znovu 5.4s ease-in-out both;
}
.zh-omne__foto--znovu .zh-omne__obraz {
  animation: zh-omne-barvy-znovu 5.4s ease-in-out both;
}
/* zatřesení Polaroidem, když se začne vyvolávat */
.zh-omne__foto--tres {
  animation: zh-omne-tres 0.7s ease-in-out 2.2s;
}
@keyframes zh-omne-chemie {
  0%,
  12% {
    opacity: 1;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}
@keyframes zh-omne-barvy {
  0%,
  12% {
    filter: saturate(0.15) contrast(0.5) brightness(1.18) sepia(0.45) hue-rotate(165deg);
  }
  60% {
    filter: saturate(0.55) contrast(0.78) brightness(1.08) sepia(0.2) hue-rotate(35deg);
  }
  100% {
    filter: saturate(1) contrast(1) brightness(1) sepia(0) hue-rotate(0deg);
  }
}
/* Ťuknutí: fotka postupně zčerná (chemie skoro černá), chvíli zůstane
   černá, tma se rozjasní do šedozelené chemie a pak se fotka vyvolá jako
   po příjezdu. Výměna barev obrazu proběhne pod plnou tmou, není vidět.
   (Ondra, část 72: „když na ni klikneš, tak postupně zčerná a potom se
   zase aktivuje ta animace toho postupného zobrazování“) */
@keyframes zh-omne-chemie-znovu {
  0% {
    opacity: 0;
    filter: brightness(0.12);
  }
  20%,
  32% {
    opacity: 1;
    filter: brightness(0.12);
  }
  42% {
    opacity: 1;
    filter: brightness(1);
  }
  76% {
    opacity: 0.4;
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}
@keyframes zh-omne-barvy-znovu {
  0%,
  20% {
    filter: saturate(1) contrast(1) brightness(1) sepia(0) hue-rotate(0deg);
  }
  21%,
  42% {
    filter: saturate(0.15) contrast(0.5) brightness(1.18) sepia(0.45) hue-rotate(165deg);
  }
  76% {
    filter: saturate(0.55) contrast(0.78) brightness(1.08) sepia(0.2) hue-rotate(35deg);
  }
  100% {
    filter: saturate(1) contrast(1) brightness(1) sepia(0) hue-rotate(0deg);
  }
}
@keyframes zh-omne-tres {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-2px) rotate(-1.8deg);
  }
  45% {
    transform: translateX(2px) rotate(1.4deg);
  }
  70% {
    transform: translateX(-1px) rotate(-0.7deg);
  }
}
/* Najetí: Polaroid se zvedne ze stránky a korálové světlo pokoje zesílí. */
@media (hover: hover) {
  .zh-omne__foto:hover {
    translate: 0 -3px;
    box-shadow: 0 1px 1px rgba(8, 4, 16, 0.45), 0 18px 30px -14px rgba(8, 4, 16, 0.9), 0 0 30px -4px rgba(250, 129, 185, 0.62);
  }
}
.zh-omne__foto:active {
  scale: 0.985;
  transition-duration: 0.06s;
}
/* ──────────────────────────  nadpis a text  ──────────────────────── */
.zh-omne__hlava {
  grid-area: hlava;
  min-width: 0;
}
.zh-omne__hlava h2 {
  font-size: clamp(26px, calc(2.4vw + 18px), 54px);
}
.zh-omne__udaje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: none;
  margin: 0;
}
.zh-omne__udaj {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(13px, calc(0.22vw + 12.2px), 15px);
  letter-spacing: 0.04em;
  color: #FDE0B5;
}
.zh-omne__udaj .zh-ikona {
  color: #FA81B9;
}
/* Text leží nad stínem fotky, ne pod ním. */
.zh-omne__pribeh {
  grid-area: pribeh;
  position: relative;
  min-width: 0;
}
.zh-omne__pribeh p {
  max-width: 60ch;
}
.zh-omne__pribeh p:last-child {
  margin-bottom: 0;
}
.zh-omne__motto {
  padding-left: 0.85em;
  border-left: 2px solid rgba(250, 129, 185, 0.7);
  font-size: var(--zh-pismo-perex);
  font-weight: 600;
  line-height: 1.35;
  color: #F3D9E4;
}
/* Zlatá hodinka 138: věta z patičky, jak se domluvit, uvádí tlačítka pod ní. */
.zh-omne__pribeh p.zh-omne__vyzva {
  color: #FDE0B5;
}
/* ─────────────────  kontakty: jediná lišta na webu  ──────────────── */
/* Pilulky jsou z jádra (.zh-kontakt v zh-plast.less), sekce drží jen
   rozložení. Ve dvou sloupcích vyjde telefon a Instagram, pod nimi Ostatní
   a portfolio a úplně dole rozbalený mail a WhatsApp; v jednom sloupci se
   mail a WhatsApp rozbalí hned pod Ostatní a portfolio je poslední. */
.zh-omne__kontakty {
  grid-area: kontakty;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  grid-auto-flow: row dense;
  column-gap: 10px;
  /* Mezeru pod sebou drží každá pilulka sama, zavřený řádek s mailem
     a WhatsAppem tak nezabere ani mezeru mřížky. Poslední mezeru lišta vrací. */
  margin-bottom: -10px;
  min-width: 0;
}
.zh-omne__kontakty .zh-kontakt {
  margin-bottom: 10px;
}
/* Rozbalení: řádek roste z nuly na výšku pilulek i s jejich mezerou. */
.zh-omne__dalsi {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  /* po rozbalení dojede stránka tak, aby byl vidět i spodek pilulek */
  scroll-margin-bottom: 24px;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.45s;
}
.zh-omne__dalsi--otevrene {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
/* Ořez drží jen během rozbalování, otevřené pilulky mají celou záři. */
.zh-omne__dalsi-vnitrek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  column-gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.zh-omne__dalsi--hotovo .zh-omne__dalsi-vnitrek {
  overflow: visible;
}
/* Pilulky přijedou shora a rozsvítí se jedna po druhé. Přechody jádra
   (najetí a stisk) zůstávají, přibývá jen průhlednost a posun. */
.zh-omne__dalsi .zh-kontakt {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, translate 0.2s ease, scale 0.2s ease, opacity 0.2s ease, transform 0.3s ease;
}
.zh-omne__dalsi--otevrene .zh-kontakt {
  opacity: 1;
  transform: none;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, translate 0.2s ease, scale 0.2s ease, opacity 0.35s ease 0.08s, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.08s;
}
.zh-omne__dalsi--otevrene .zh-kontakt + .zh-kontakt {
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0.16s, 0.16s;
}
/* stisk stejně rychlý jako u ostatních pilulek */
.zh-omne__dalsi--otevrene .zh-kontakt.zh-kontakt:active {
  transition-duration: 0.06s;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .zh-omne__dalsi,
  .zh-omne__dalsi--otevrene,
  .zh-omne__dalsi .zh-kontakt,
  .zh-omne__dalsi--otevrene .zh-kontakt {
    transition: none;
  }
}
/* ─────────────────────────────  počítač  ─────────────────────────── */
@media (min-width: 768px) {
  .zh-omne {
    --zh-omne-dech: clamp(64px, 14vh, 160px);
  }
  .zh-omne__obsah {
    grid-template-columns: minmax(0, clamp(260px, 32vw, 440px)) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "foto ." "foto hlava" "foto pribeh" "foto kontakty" "foto .";
    column-gap: clamp(36px, 5.5vw, 88px);
    row-gap: 0;
  }
  /* Na počítači fotka stojí sama ve sloupci, smí plout výš nad stránkou. */
  .zh-omne__foto {
    box-shadow: var(--zh-stin-plovouci), 0 0 18px rgba(250, 129, 185, 0.38), 0 0 70px -24px rgba(250, 129, 185, 0.6);
  }
  .zh-omne__pribeh {
    margin-top: clamp(16px, 1.8vw, 24px);
  }
  .zh-omne__kontakty {
    margin-top: clamp(24px, 2.8vw, 36px);
  }
  /* Zlatá hodinka 178: sekce na počítači stojí (zh-drzi) a její přilepení
     se řídí výškou; rozbalení by ji zvětšilo a celá by poskočila. Řádek
     s mailem a WhatsAppem proto má místo od začátku a je poslední, i když
     se pilulky vejdou jen pod sebe; rozbalení pilulky jen rozsvítí. */
  .zh-omne__dalsi,
  .zh-omne__dalsi--otevrene {
    order: 1;
    grid-template-rows: 1fr;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .zh-omne__foto:hover {
    box-shadow: var(--zh-stin-plovouci), 0 0 30px rgba(250, 129, 185, 0.7), 0 0 80px -20px rgba(250, 129, 185, 0.7);
  }
}