/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*---- Animacja Circle grow ----*/
/* Pozycjonowanie kontenera okregu */
.circle-grow-container {
  width: 80% !important;         /* skala jak w background-size */
  left: 50% !important;          /* ustawienie środka */
  transform: translateX(-50%);   /* wyrównanie */
  bottom: 0 !important;
  z-index: 1;
  pointer-events: none;
}

/* Pozycjonowanie okregu*/
.circle-grow-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* animacja na ścieżkach */
.fbm-circles path {
  stroke: #F3EFE1;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;
  animation: fbmFadeIn 0.7s ease forwards;
}

/* sekwencja od najmniejszego (12) do największego (1) */
.fbm-circles path:nth-of-type(12) { animation-delay: 0.00s; }
.fbm-circles path:nth-of-type(11) { animation-delay: 0.08s; }
.fbm-circles path:nth-of-type(10) { animation-delay: 0.16s; }
.fbm-circles path:nth-of-type(9)  { animation-delay: 0.24s; }
.fbm-circles path:nth-of-type(8)  { animation-delay: 0.32s; }
.fbm-circles path:nth-of-type(7)  { animation-delay: 0.40s; }
.fbm-circles path:nth-of-type(6)  { animation-delay: 0.48s; }
.fbm-circles path:nth-of-type(5)  { animation-delay: 0.56s; }
.fbm-circles path:nth-of-type(4)  { animation-delay: 0.64s; }
.fbm-circles path:nth-of-type(3)  { animation-delay: 0.72s; }
.fbm-circles path:nth-of-type(2)  { animation-delay: 0.80s; }
.fbm-circles path:nth-of-type(1)  { animation-delay: 0.88s; }

@keyframes fbmFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*---- Animacja strzalka na przyciskach ----*/
/* bazowo – bez kombinacji */
.elementor-button .elementor-button-icon svg {
  display: inline-block;
  transform-origin: center;
}

/* na hover odpalamy całą sekwencję */
.elementor-button:hover .elementor-button-icon svg {
  animation: arrow-escape 0.55s ease-out forwards;
}

@keyframes arrow-escape {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  /* ucieczka po skosie w górę-prawo + zanik */
  40% {
    transform: translate(8px, -8px);
    opacity: 0;
  }
  /* skok w dół-lewo, nadal niewidoczna */
  41% {
    transform: translate(-8px, 8px);
    opacity: 0;
  }
  /* powrót po skosie na miejsce + pojawienie się */
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*---- Animacja mala kropka -----*/

.fbm-dot {
  width: 10px;             /* możesz dać 6px, 8px, 12px */
  height: 10px;
  background-color: #C08382;  /* kolor FBM */
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;       /* odstęp od nagłówka */
  margin-left: 4px;
  animation: fbmDotPulse 1.8s ease-in-out infinite;
  position: relative;
}

/* halo */
.fbm-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #C08382;
  opacity: 0.4;
  animation: fbmDotHalo 1.8s ease-in-out infinite;
}

@keyframes fbmDotPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes fbmDotHalo {
  0%   { transform: scale(1);   opacity: 0.4; }
  50%  { transform: scale(2.2); opacity: 0;   }
  100% { transform: scale(1);   opacity: 0.4; }
}

@media (max-width: 767px) {
  .fbm-dot {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    margin-left: 3px;
    animation-duration: 1.4s; /* trochę szybszy puls na mobile */
  }

  .fbm-dot::after {
    animation-duration: 1.4s; /* żeby halo było zsynchronizowane */
  }
}

/*----- Animacja circle grow 2 -----*/

.fbm-circle-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Linie wewnątrz <g> – nasze "promienie" */
.fbm-circles g path {
  stroke: #F3EFE1;
  stroke-width: 7;
  stroke-linecap: round;   /* zaokrąglone końce */
  stroke-linejoin: round;
  fill: none;              /* ignorujemy fill ze środka SVG */
  opacity: 0;
  animation: fbmFadeIn 0.7s ease forwards;
}

/* sekwencja – 27 path po kolei, jak w SVG */
.fbm-circles g path:nth-of-type(1)  { animation-delay: 0.00s; }
.fbm-circles g path:nth-of-type(2)  { animation-delay: 0.06s; }
.fbm-circles g path:nth-of-type(3)  { animation-delay: 0.12s; }
.fbm-circles g path:nth-of-type(4)  { animation-delay: 0.18s; }
.fbm-circles g path:nth-of-type(5)  { animation-delay: 0.24s; }
.fbm-circles g path:nth-of-type(6)  { animation-delay: 0.30s; }
.fbm-circles g path:nth-of-type(7)  { animation-delay: 0.36s; }
.fbm-circles g path:nth-of-type(8)  { animation-delay: 0.42s; }
.fbm-circles g path:nth-of-type(9)  { animation-delay: 0.48s; }
.fbm-circles g path:nth-of-type(10) { animation-delay: 0.54s; }
.fbm-circles g path:nth-of-type(11) { animation-delay: 0.60s; }
.fbm-circles g path:nth-of-type(12) { animation-delay: 0.66s; }
.fbm-circles g path:nth-of-type(13) { animation-delay: 0.72s; }
.fbm-circles g path:nth-of-type(14) { animation-delay: 0.78s; }
.fbm-circles g path:nth-of-type(15) { animation-delay: 0.84s; }
.fbm-circles g path:nth-of-type(16) { animation-delay: 0.90s; }
.fbm-circles g path:nth-of-type(17) { animation-delay: 0.96s; }
.fbm-circles g path:nth-of-type(18) { animation-delay: 1.02s; }
.fbm-circles g path:nth-of-type(19) { animation-delay: 1.08s; }
.fbm-circles g path:nth-of-type(20) { animation-delay: 1.14s; }
.fbm-circles g path:nth-of-type(21) { animation-delay: 1.20s; }
.fbm-circles g path:nth-of-type(22) { animation-delay: 1.26s; }
.fbm-circles g path:nth-of-type(23) { animation-delay: 1.32s; }
.fbm-circles g path:nth-of-type(24) { animation-delay: 1.38s; }
.fbm-circles g path:nth-of-type(25) { animation-delay: 1.44s; }
.fbm-circles g path:nth-of-type(26) { animation-delay: 1.50s; }
.fbm-circles g path:nth-of-type(27) { animation-delay: 1.56s; }

/* proste fade-in jak w Twojej wersji */
@keyframes fbmFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*---- Automatyczne tworzenie konta przy zamowieniu ----*/