/* NADPIS: Přehled projektů Bear Hugs s.r.o.
   Animace: písmena se objevují odspodu nahoru*/

/* 1) HLAVNÍ OBAL
   Tento blok určuje šířku, zarovnání a prostor kolem nadpisu*/
   
.bh-title-wrap{
  width: 100%;                    /* blok zabere celou dostupnou šířku */
  text-align: center;             /* zarovnání obsahu doprostřed */
  padding: 10px 0 18px 0;         /* horní / pravé / dolní / levé odsazení */
  overflow: visible;              /* nic se nesmí ořezat */
}

/* 2) NADPIS
   Zde je hlavní nastavení pro PC */
.bh-reveal-title{
  --bh-offset-y: 34px;            /* počáteční svislý posun písmen směrem dolů */

  margin: 0;                      /* zrušení výchozího vnějšího odsazení nadpisu */
  padding: 0 0 0.14em 0;          /* spodní vnitřní prostor proti ořezu spodních tahů */
  font-size: 54px;                /* velikost písma na PC */
  font-weight: 300;               /* tloušťka písma */
  line-height: 1.22;              /* výška řádku */
  letter-spacing: 0.02em;         /* mezery mezi písmeny */
  text-transform: none;           /* bez automatické změny na velká/malá písmena */
  font-family: inherit;           /* přebere font z webu */
  color: #020202;                 /* barva textu */

  display: inline-flex;           /* nadpis se chová jako pružný inline blok */
  flex-wrap: wrap;                /* umožní zalomení na další řádek */
  justify-content: center;        /* obsah uvnitř nadpisu na střed */
  align-items: flex-end;          /* zarovnání písmen ke spodní hraně */
  gap: 0;                         /* bez mezer mezi prvky */

  overflow: visible;              /* důležité – neusekne spodní části písmen */
  text-shadow: 0 1px 0 rgba(0,0,0,0.03); /* velmi jemný stín textu */
}

/* 3) JEDNOTLIVÁ PÍSMENA
   Každé písmeno má vlastní animaci a zpoždění */
   
.bh-reveal-title span{
  display: inline-block;                          /* každé písmeno je samostatný blok */
  opacity: 0;                                    /* na začátku je neviditelné */
  transform: translateY(var(--bh-offset-y));     /* na začátku je posunuté dolů */
  animation-name: bhLetterLoop;                  /* název animace */
  animation-duration: 15s;                       /* délka celého cyklu */
  animation-timing-function: linear;             /* rovnoměrný průběh animace */
  animation-iteration-count: infinite;           /* animace se opakuje stále dokola */
  animation-delay: calc(var(--i) * 0.15s);       /* postupné zpoždění podle pořadí písmene */
  will-change: transform, opacity;               /* optimalizace pro prohlížeč */
}

/* 4) MEZERY MEZI SLOVY
   Speciální prvek, který vytváří mezery a neanimuje se
   */

.bh-reveal-title .bh-space{
  width: 0.38em;                 /* šířka mezery mezi slovy */
  opacity: 1;                    /* mezera je stále aktivní */
  transform: none;               /* bez posunu */
  animation: none;               /* mezera se neanimuje */
}

/* 5) ANIMACE
   Písmena se objeví odspodu, zůstanou viditelná a pak se resetují */

@keyframes bhLetterLoop{
  0%{
    opacity: 0;                                  /* písmeno je skryté */
    transform: translateY(var(--bh-offset-y));   /* písmeno je posunuté dolů */
  }

  4%{
    opacity: 1;                                  /* písmeno se zobrazí */
    transform: translateY(0);                    /* písmeno dojede na své místo */
  }

  90%{
    opacity: 1;                                  /* většinu času zůstává viditelné */
    transform: translateY(0);                    /* zůstává na místě */
  }

  100%{
    opacity: 0;                                  /* na konci cyklu zmizí */
    transform: translateY(var(--bh-offset-y));   /* a vrátí se dolů pro nový cyklus */
  }
}

/* 6) TABLET
   Nastavení pro zařízení do šířky 1024 px */

@media (max-width: 1024px){
  .bh-title-wrap{
    text-align: center;           /* zarovnání na střed i na tabletu */
    padding: 8px 0 16px 0;        /* mírně menší odsazení */
  }

  .bh-reveal-title{
    --bh-offset-y: 28px;          /* menší posun písmen při animaci */
    font-size: 40px;              /* velikost písma pro tablet */
    line-height: 1.24;            /* výška řádku */
    letter-spacing: 0.015em;      /* menší mezery mezi písmeny */
    justify-content: center;      /* obsah na střed */
    padding-bottom: 0.16em;       /* spodní prostor proti ořezu */
  }
}

/* 7) MOBIL NA VÝŠKU
   Nastavení pro zařízení do šířky 767 px */

@media (max-width: 767px){
  .bh-title-wrap{
    text-align: center;           /* zarovnání na střed i na mobilu */
    padding: 6px 0 14px 0;        /* menší odsazení pro mobil */
  }

  .bh-reveal-title{
    --bh-offset-y: 22px;          /* menší nájezd písmen odspodu */
    font-size: 28px;              /* velikost písma pro mobil */
    line-height: 1.28;            /* vyšší řádek kvůli čitelnosti */
    letter-spacing: 0.01em;       /* jemnější rozestup písmen */
    justify-content: center;      /* obsah doprostřed */
    padding-bottom: 0.18em;       /* spodní prostor proti ořezu */
  }
}

/* 8) PŘÍSTUPNOST
   Pokud má uživatel omezené animace, vše se zobrazí bez pohybu */

@media (prefers-reduced-motion: reduce){
  .bh-reveal-title span{
    animation: none !important;   /* vypnutí animace */
    opacity: 1 !important;        /* písmena budou stále vidět */
    transform: none !important;   /* bez posunu */
  }
}