/* Start custom CSS for html, class: .elementor-element-b3f1f37 *//*
 * ==========================================================
 * HLAVNÍ KONTEJNER ANIMACE SRDCE
 * ==========================================================
 *
 * Tento prvek tvoří celou viditelnou plochu animace.
 * Určuje velikost widgetu, pozadí, zaoblení rohů
 * a ořezání obsahu, který by přesáhl mimo kontejner.
 */
.elementor-1958 .elementor-element.elementor-element-b3f1f37 .bh-heart-animation {
  /*
   * Umožňuje přesně umístit canvas a další vrstvy
   * uvnitř tohoto kontejneru.
   */
  position: relative;

  /*
   * Widget zabere celou dostupnou šířku
   * svého rodičovského kontejneru v Elementoru.
   */
  width: 100%;

  /*
   * Výška se automaticky přizpůsobuje šířce obrazovky.
   *
   * 360 px = nejmenší možná výška
   * 55 vw  = přizpůsobení podle šířky obrazovky
   * 620 px = největší možná výška
   */
  height: clamp(480px, 62vw, 670px);

  /*
   * Zajišťuje, že widget nebude příliš nízký
   * ani v menším kontejneru.
   */
  min-height: 480px;

  /*
   * Skryje světelné částice nebo záři,
   * které by se dostaly mimo hranice widgetu.
   */
  overflow: hidden;

  /*
   * Neutrální radiální přechod pozadí.
   *
   * Střed widgetu má světlejší šedou barvu #666666.
   * Směrem k okrajům postupně přechází
   * do velmi tmavé barvy #080709.
   *
   * Hodnota 50 % 50 % znamená,
   * že střed přechodu je přesně uprostřed widgetu.
   */
 background:
  radial-gradient(
    circle at 50% 50%,
    #555555 0%,
    #3f3f3f 18%,
    #242324 36%,
    #111011 52%,
    #080709 65%,
    #080709 100%
  );
 
  /*
   * Zaoblení rohů hlavní plochy animace.
   */
  border-radius: 0px;

  /*
   * Vytvoří samostatnou vrstvu pro vykreslování.
   * Pomáhá správnému fungování světelných efektů,
   * průhlednosti a režimu prolnutí canvasu.
   */
  isolation: isolate;
}


/*
 * ==========================================================
 * JEMNÉ NEUTRÁLNÍ PROSVĚTLENÍ STŘEDU
 * ==========================================================
 *
 * Tato vrstva nepřidává žádné barevné odstíny.
 * Pouze jemně zvýrazní střed plochy,
 * aby srdce působilo prostorověji.
 */
.elementor-1958 .elementor-element.elementor-element-b3f1f37 .bh-heart-animation::before {
  /*
   * Povinná vlastnost pro vytvoření pseudoprvku.
   */
  content: "";

  /*
   * Absolutní umístění vůči hlavnímu kontejneru.
   */
  position: absolute;

  /*
   * Vrstva je odsazena 14 % od všech okrajů.
   * Nevytváří proto příliš světlé kraje.
   */
  inset: 14%;

  /*
   * Vrstva se nachází pod canvasem,
   * ale nad hlavním pozadím.
   */
  z-index: 0;

  /*
   * Zabraňuje tomu, aby tato dekorativní vrstva
   * zachytávala kliknutí nebo pohyb myši.
   */
  pointer-events: none;

  /*
   * Eliptický tvar jemného světla.
   */
  border-radius: 50%;

  /*
   * Neutrální světelný přechod bez barevných odstínů.
   *
   * Uprostřed je průhledná světle šedá.
   * Směrem ven postupně zcela mizí.
   */
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(215, 215, 215, 0.055) 32%,
      rgba(150, 150, 150, 0.025) 54%,
      transparent 74%
    );

  /*
   * Rozostření vytvoří měkký a přirozený přechod
   * bez viditelného ostrého okraje.
   */
  filter: blur(38px);
}


/*
 * ==========================================================
 * CANVAS S ANIMACÍ SRDCE
 * ==========================================================
 *
 * Canvas je plocha, do které JavaScript vykresluje:
 *
 * - samotný obrys srdce,
 * - světelnou stopu,
 * - záři,
 * - pohybující se částice.
 */
.elementor-1958 .elementor-element.elementor-element-b3f1f37 .bh-heart-canvas {
  /*
   * Canvas je přesně umístěn
   * přes celou plochu hlavního kontejneru.
   */
  position: absolute;

  /*
   * Nulový odstup od horního, pravého,
   * spodního i levého okraje.
   */
  inset: 0;

  /*
   * Canvas je nad vrstvou pozadí
   * a nad jemným neutrálním prosvětlením.
   */
  z-index: 1;

  /*
   * Odstraní případnou mezeru,
   * která by se mohla objevit pod canvasem,
   * pokud by se choval jako běžný řádkový prvek.
   */
  display: block;

  /*
   * Canvas vyplní celou šířku kontejneru.
   */
  width: 100%;

  /*
   * Canvas vyplní celou výšku kontejneru.
   */
  height: 100%;
}


/*
 * ==========================================================
 * NASTAVENÍ PRO TABLETY
 * ==========================================================
 *
 * Použije se na obrazovkách širokých maximálně 1024 px.
 */
@media (max-width: 1024px) {
  .elementor-1958 .elementor-element.elementor-element-b3f1f37 .bh-heart-animation {
    /*
     * Na tabletu se výška více přizpůsobuje
     * šířce obrazovky.
     *
     * 380 px = minimální výška
     * 65 vw  = pružná výška podle šířky displeje
     * 540 px = maximální výška
     */
    height: clamp(380px, 65vw, 540px);
  }
}


/*
 * ==========================================================
 * NASTAVENÍ PRO MOBILNÍ TELEFONY
 * ==========================================================
 *
 * Použije se na obrazovkách širokých maximálně 767 px.
 */
@media (max-width: 767px) {
  .elementor-1958 .elementor-element.elementor-element-b3f1f37 .bh-heart-animation {
    /*
     * Pevná výška widgetu na mobilu.
     * Poskytuje dostatek prostoru kolem srdce.
     */
    height: 410px;

    /*
     * Zabraňuje zmenšení widgetu pod 410 px.
     */
    min-height: 410px;

    /*
     * Mírně menší zaoblení rohů,
     * které lépe odpovídá menšímu displeji.
     */
    border-radius: 14px;
  }
}/* End custom CSS */