/* Patrick Hand SC dodává téma (viz <head>). Modul si písmo nedeklaruje ani
   nepřibaluje. Kdyby se z tématu někdy odstranilo, přidej sem @font-face
   a soubor woff2 do views/fonts/. */

/* ==================================================================
   Storytelling – kresba z PDF, veškerý text živý v HTML
   ================================================================== */



.pjs__heading {
	text-align: center;
}

.pjs {
  --pjs-ease: cubic-bezier(.2,.7,.3,1);
  --pjs-spring: cubic-bezier(.34,1.56,.64,1);
  --pjs-dur: 380ms;
  /* Míra zesycení kroku pod myší. 1 = beze změny, 1.4 výrazně, 1.15 decentně. */
  --pjs-sat: 1.4;
  /* paleta */
  --c-50:  #f9fafa;
  --c-200: #e3e8e5;
  --c-300: #cfd8d3;
  --c-500: #6c8478;
  --c-600: #4a5b55;
  --c-800: #222b25;
  --c-900: #151e19;

  /* role barev – tady se to celé přebarvuje */
  --c-stone:     var(--c-200);
  --c-bubble:    var(--c-200);
  --c-bubble-hi: var(--c-500);
  --c-num:       var(--c-500);
  --c-num-hi:    var(--c-900);
  --c-text:      var(--c-900);
  --c-text-hi:   var(--c-50);

  --pjs-ink: var(--c-text);
  --pjs-font: "Patrick Hand SC", "Comic Sans MS", cursive;
  max-width: var(--pjs-maxwidth, 1200px);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Nadpis nemá vlastní styly – přebírá vzhled H1 z tématu. */

/* Vystoupení z obsahového sloupce tématu. 50vw počítá i s posuvníkem,
   takže při zapnutí zkontrolujte, že se nikde neobjevil vodorovný posuv. */
.pjs--full {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

.pjs__stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: var(--pjs-ratio, 1920 / 1130.55);
}

/* Šlápoty se dokreslují podle toho, jak daleko je sekce odscrollovaná. */
.pjs__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--c-stone);
  transition: opacity var(--pjs-dur) var(--pjs-ease);
}

.pjs__stage[data-scroll="on"] .pjs__path {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 calc(var(--pjs-progress, 100%) - 9%), transparent var(--pjs-progress, 100%));
  mask-image: linear-gradient(to bottom,
    #000 calc(var(--pjs-progress, 100%) - 9%), transparent var(--pjs-progress, 100%));
}

.pjs__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Krok: vnější prvek řeší příchod při scrollu, vnitřní reakci na myš. */
.pjs-step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * 1%);
  container-type: inline-size;
}

.pjs__stage[data-scroll="on"] .pjs-step {
  opacity: 0;
  transform: translateY(2.2cqw);
  transition: opacity 620ms var(--pjs-ease), transform 620ms var(--pjs-ease);
  transition-delay: calc(var(--i) * 90ms);
}

.pjs__stage[data-scroll="on"] .pjs-step.is-in {
  opacity: 1;
  transform: none;
}

.pjs-step__inner {
  position: relative;
  transition: transform var(--pjs-dur) var(--pjs-ease),
              opacity var(--pjs-dur) var(--pjs-ease),
              filter var(--pjs-dur) var(--pjs-ease);
}

.pjs-step__shapes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter var(--pjs-dur) var(--pjs-ease);
}

.pjs-step__shapes .b {
  fill: var(--c-bubble);
  transition: fill var(--pjs-dur) var(--pjs-ease);
}

.pjs-step__shapes .n {
  fill: var(--c-num);
  transition: fill var(--pjs-dur) var(--pjs-ease);
}

.pjs-step__art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--pjs-dur) var(--pjs-ease);
}

.pjs-step__text--link {
  text-decoration: none;
}

.pjs-step__text--link:focus-visible {
  outline: 2px solid var(--c-500);
  outline-offset: .3em;
  border-radius: .2em;
}

.pjs-step__text {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  margin: 0;
  font-family: var(--pjs-font);
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  white-space: pre-line;
  /* bez max-content by se dlouhý řádek zalomil na šířku dlaždice */
  width: max-content;
  z-index: 2;
  color: var(--c-text);
  transition: color var(--pjs-dur) var(--pjs-ease);
  cursor: default;
}

/* ------------------------------ hover: každý krok reaguje po svém ------ */

@media (hover: hover) and (min-width: 768px) {
  .pjs-step:hover { z-index: 2; }

  .pjs-step:hover .pjs-step__art,
  .pjs-step:hover .pjs-step__shapes {
    filter: saturate(var(--pjs-sat, 1.4)) drop-shadow(0 1cqw 1.2cqw rgba(21,30,25,.22));
  }

  /* Kámen pod textem zesytí, číslo ztmavne, text se obrátí do světla. */
  .pjs-step:hover .pjs-step__shapes .b { fill: var(--c-bubble-hi); }
  .pjs-step:hover .pjs-step__shapes .n { fill: var(--c-num-hi); }
  .pjs-step:hover .pjs-step__text { color: var(--c-text-hi); }

  /* 1 – semínka si prohlédneš zblízka */
  .pjs-step[data-fx="zoom"]:hover .pjs-step__inner {
    transform: scale(1.06);
  }

  /* 2 – návod se nalistuje */
  .pjs-step[data-fx="list"] .pjs-step__inner {
    transform-origin: 78% 50%;
  }
  .pjs-step[data-fx="list"]:hover .pjs-step__inner {
    transform: perspective(900px) rotateY(-11deg) scale(1.02);
  }

  /* 3 – debata se rozhýbe */
  .pjs-step[data-fx="sway"]:hover .pjs-step__inner {
    animation: pjs-sway 700ms var(--pjs-ease);
  }

  /* 4 – úroda se nadzvedne a doskočí */
  .pjs-step[data-fx="lift"]:hover .pjs-step__inner {
    transform: translateY(-1.4cqw) scale(1.03);
    transition-timing-function: var(--pjs-spring);
    transition-duration: 520ms;
  }

  /* 5 – garance se přitiskne jako razítko */
  .pjs-step[data-fx="stamp"] .pjs-step__inner {
    transform-origin: 20% 80%;
  }
  .pjs-step[data-fx="stamp"]:hover .pjs-step__inner {
    animation: pjs-stamp 520ms var(--pjs-ease) forwards;
  }

  /* 6 – rostlina povyroste ode dna */
  .pjs-step[data-fx="sprout"] .pjs-step__inner {
    transform-origin: 50% 100%;
  }
  .pjs-step[data-fx="sprout"]:hover .pjs-step__inner {
    transform: scale(1.02, 1.07) translateY(-.3cqw);
    transition-duration: 560ms;
  }
}

@keyframes pjs-sway {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(1.6deg); }
  48%  { transform: rotate(-1.2deg); }
  74%  { transform: rotate(.6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pjs-stamp {
  0%   { transform: rotate(0deg) scale(1); }
  45%  { transform: rotate(-2.4deg) scale(.985); }
  100% { transform: rotate(-1.6deg) scale(1.025); }
}

/* ========================= mobil: druhá verze ========================= */

@media (max-width: 767px) {
  .pjs { padding: 0 1.1rem; }

  .pjs__stage { aspect-ratio: auto; }
  .pjs__path { display: none; }

  .pjs__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  /* Společné měřítko: nejširší dlaždice vyplní řádek.
     relative, ne static – text uvnitř je polohovaný v procentech dlaždice. */
  .pjs-step {
    position: relative;
    left: 0;
    top: 0;
    width: calc(var(--w) / var(--pjs-maxtile, 35) * 100%);
    max-width: 100%;
  }

  .pjs__stage[data-scroll="on"] .pjs-step {
    transform: translateY(16px);
    transition-delay: 0ms;
  }

  /* Místo hoveru rozhoduje scroll: krok, který je zrovna uprostřed
     obrazovky, udělá svůj pohyb a přebarví se. Ostatní zůstávají
     v plné barvě – žádné ztlumování. */
  .pjs-step.is-active .pjs-step__art,
  .pjs-step.is-active .pjs-step__shapes {
    filter: saturate(var(--pjs-sat, 1.4)) drop-shadow(0 1cqw 1.2cqw rgba(21,30,25,.18));
  }

  .pjs-step.is-active .pjs-step__shapes .b { fill: var(--c-bubble-hi); }
  .pjs-step.is-active .pjs-step__shapes .n { fill: var(--c-num-hi); }
  .pjs-step.is-active .pjs-step__text { color: var(--c-text-hi); }

  /* stejné pohyby jako na desktopu, jen decentnější */
  .pjs-step[data-fx="zoom"].is-active .pjs-step__inner {
    transform: scale(1.04);
  }
  .pjs-step[data-fx="list"].is-active .pjs-step__inner {
    transform-origin: 78% 50%;
    transform: perspective(900px) rotateY(-8deg);
  }
  .pjs-step[data-fx="sway"].is-active .pjs-step__inner {
    animation: pjs-sway 800ms var(--pjs-ease);
  }
  .pjs-step[data-fx="lift"].is-active .pjs-step__inner {
    transform: translateY(-1.1cqw) scale(1.02);
    transition-timing-function: var(--pjs-spring);
    transition-duration: 520ms;
  }
  .pjs-step[data-fx="stamp"].is-active .pjs-step__inner {
    transform-origin: 20% 80%;
    animation: pjs-stamp 560ms var(--pjs-ease) forwards;
  }
  .pjs-step[data-fx="sprout"].is-active .pjs-step__inner {
    transform-origin: 50% 100%;
    transform: scale(1.02, 1.05);
  }

  .pjs-step:active .pjs-step__inner { transform: scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  .pjs-step, .pjs-step__inner, .pjs-step__art, .pjs-step__shapes, .pjs__path {
    transition-duration: 1ms !important;
    animation: none !important;
  }
  .pjs__stage[data-scroll="on"] .pjs-step {
    opacity: 1 !important;
    transform: none !important;
  }
  .pjs__stage[data-scroll="on"] .pjs__path {
    -webkit-mask-image: none;
    mask-image: none;
  }
}