/* =====================================================================
   POHYB, vstupní odkrývání a animace řízené scrollem
   Vše je progressive enhancement: bez JS i bez podpory scroll-driven
   animací zůstane obsah čitelný a na svém místě.
   ===================================================================== */

/* ---------- 1. Text po slovech ----------
   Nadpis se odkryje zpod neviditelné hrany, slovo po slovu.
   Maskuje se overflow rodiče, takže slovo doslova „vyjede" zdola. */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.js [data-split] .w-in{
  display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .95s var(--ease-expo),opacity .7s var(--ease-expo);
  transition-delay:calc(var(--i,0) * 55ms);
}
.js [data-split].in .w-in{transform:none;opacity:1}

/* ---------- 2. Řádkový perex ----------
   Jemnější varianta pro delší text: bez maskování, jen náběh zdola. */
.js [data-fade]{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.js [data-fade].in{opacity:1;transform:none}
[data-fade="1"]{transition-delay:.1s}
[data-fade="2"]{transition-delay:.18s}
[data-fade="3"]{transition-delay:.26s}
[data-fade="4"]{transition-delay:.34s}

/* ---------- 3. Odkrytí fotky clipem ----------
   Fotka se neobjeví, ale odroluje se zpod hrany a zároveň dojede
   z mírného přiblížení. Působí, jako by se do rámu zasunula. */
.js [data-uncover]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-expo)}
.js [data-uncover].in{clip-path:inset(0 0 0 0)}
.js [data-uncover] img{transform:scale(1.14);transition:transform 1.4s var(--ease-expo)}
.js [data-uncover].in img{transform:scale(1)}

/* ---------- 4. Počítadlo ----------
   Čísla ve statistikách naskočí zdola a rozjedou se od nuly (JS). */
.stat .num{display:inline-block}
[data-count]{font-variant-numeric:tabular-nums}

/* =====================================================================
   ANIMACE ŘÍZENÉ SCROLLEM
   Moderní CSS bez jediného řádku JS. Kde prohlížeč neumí, prostě se
   nic neděje, layout ani obsah tím netrpí.
   ===================================================================== */

@supports (animation-timeline: view()) {

  /* 4.1 Fotka roste, dokud projíždí obrazovkou.
         Efekt je vázaný na pozici v okně, ne na čas, takže se „přetáčí"
         i při scrollování nahoru. */
  .grow-on-scroll img,
  .grow-on-scroll .club-bg{
    animation:tj-grow linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes tj-grow{
    from{transform:scale(1.001)}
    to{transform:scale(1.13)}
  }

  /* 4.3 Sekce mění teplotu podkladu podle toho, kde je v okně.
         Studený písek nahoře, teplejší k plameni uprostřed.

         Nemění se barva pozadí, ale průhlednost teplé vrstvy pod obsahem.
         Barva pozadí se počítá na procesoru a překreslí celou sekci v každém
         snímku, průhlednost umí grafická karta sama. Vypadá to stejně, ale
         scrollování zůstane hladké i na slabším telefonu. */
  .warm-on-scroll{position:relative;isolation:isolate}
  .warm-on-scroll::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-color:#FBF0E6;opacity:0;will-change:opacity;
    animation:tj-warm linear both;
    animation-timeline:view();
    animation-range:entry 20% exit 80%;
  }
  @keyframes tj-warm{
    0%  {opacity:0}
    50% {opacity:1}
    100%{opacity:0}
  }

  /* 4.4 Ukazatel průběhu čtení v horní hraně stránky. */
  .read-progress{
    position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform-origin:0 50%;
    background:var(--grad-flame);will-change:transform;
    animation:tj-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes tj-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* 4.5 Nadpis sekce mírně dojíždí, dokud vjíždí do obrazovky. */
  .drift-on-scroll{
    animation:tj-drift linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 90%;
  }
  @keyframes tj-drift{
    from{transform:translateY(28px)}
    to{transform:translateY(0)}
  }
}

/* Bez podpory scroll-driven animací ukazatel průběhu jen zmizí. */
@supports not (animation-timeline: view()){
  .read-progress{display:none}
}

/* ---------- Hravé drobnosti ---------- */

/* Dlaždice rozcestníku se při najetí nezvedá. Barva se místo toho rozlije
   z prostředka do rohů, viz .dlazdice-vylitek v main.css. */

/* Podtržení odkazů v textu vyjede zleva. */
.prose a:not(.btn){
  text-decoration:none;background-image:linear-gradient(var(--flame-500),var(--flame-500));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-expo);color:var(--flame-700);font-weight:500;
}
.prose a:not(.btn):hover{background-size:100% 2px}

/* Číslo sekce se při vstupu roztočí o čtvrt otáčky zpět do nuly. */
.secnum{display:inline-block;font-family:var(--font-mono);font-size:.78rem;color:var(--flame-500);
  letter-spacing:.1em;transform:rotate(-8deg);opacity:0;
  transition:transform .8s var(--ease-pop),opacity .5s var(--ease-expo)}
[data-fade].in .secnum,.secnum.in{transform:none;opacity:1}

@media (prefers-reduced-motion: reduce){
  .js [data-split] .w-in,.js [data-fade],.js [data-uncover],.js [data-uncover] img{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .read-progress{display:none}
  .grow-on-scroll img,.grow-on-scroll .club-bg,.warm-on-scroll::before,.drift-on-scroll{animation:none!important}
  .warm-on-scroll::before{opacity:0!important}
}