/*
 ===================================================================
 C‑ICAS Group – index-inline.css
 Style SPECYFICZNE dla strony głównej (index.html):
 1. HERO – środkowe kółko z logo i animacją iskry
 1.1 NOWE ISKRY FIZYCZNE (Kolizje obsługiwane przez JS)
 2. Tytuły BUDOWNICTWO / OGRODNICTWO – wyrównanie wielkości
 3. Sowa w stopce – rozmiar delikatnie większy niż tekst
 4. Social media w sekcji Kontakt – układ i wygląd przycisków
 Uwaga:
 - Ten plik jest ładowany PO style.css, więc nadpisuje część styli.
 - Nie zmieniaj nazw klas/ID bez sprawdzenia powiązań w main.js.
 ===================================================================
*/

/* ---------------------------------------------------------------
 1. HERO – środkowe kółko z logo i animacją iskry
---------------------------------------------------------------- */
/* Kontener przycisku – DUŻY Z FLEXBOXEM DO CENTROWANIA */
.hero-center-circle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 320px !important;   
  height: 320px !important;  
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background-color: transparent !important;
  cursor: pointer;
  z-index: 10 !important;
  /* Elastyczne ustawienie elementów w pionie */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* GIF – wymuszone idealne koło */
.hero-center-gif {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: block !important;
  z-index: 2 !important;
  width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 50% !important; /* Wymuszenie koła */
  border: 2px solid rgba(159, 255, 165, 0.85) !important;
  box-shadow: 0 0 18px rgba(55, 214, 107, 0.9) !important;
}

/* Napis pod logo */
.hero-center-label {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  font-size: 15px !important;
  letter-spacing: 0.2em !important;
  color: #9fffa5 !important; /* Jasny zielony neon */
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9) !important;
}

/* ---------------------------------------------------------------
  1.1. NOWE ISKRY FIZYCZNE (Kolizje obsługiwane przez JS)
---------------------------------------------------------------- */
.hero-spark {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    will-change: transform;
}

.hero-spark::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.hero-spark-1::after {
    width: 8px; 
    height: 8px;
    background: #37d66b;
    box-shadow: 0 0 15px 5px rgba(55, 214, 107, 0.8), 0 0 30px 10px rgba(55, 214, 107, 0.4);
}

.hero-spark-2::after {
    width: 4px; 
    height: 4px; 
    background: #ffffff;
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.9), 0 0 20px 8px rgba(55, 214, 107, 0.5);
}

.hero-spark-flash {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    mix-blend-mode: screen;
}

.hero-spark-flash::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) scale(0.3);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ffffff 0%, rgba(55, 214, 107, 0.9) 30%, transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-spark-flash.flash-active {
    opacity: 1;
    transition: opacity 0.05s ease-in;
}

.hero-spark-flash.flash-active::after {
    transform: translateX(-50%) scale(1.3);
}
/* Wypełnienie środka */
.hero-center-circle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #050a0f;
  border-radius: 50%;
  z-index: 1;
}

/* ---------------------------------------------------------------
 2. HERO – wyrównanie wielkości napisów (PŁYNNE SKALOWANIE)
---------------------------------------------------------------- */
.hero-split-title {
  font-size: clamp(1.6rem, 4vw, 3.5rem) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 12px !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

.hero-split-subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1.3rem) !important;
  letter-spacing: 0.05em;
  color: #e5f5f0 !important; 
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

@media (max-width: 480px) {
  .hero-split-title {
    font-size: clamp(1.4rem, 6vw, 1.6rem) !important;
    letter-spacing: 0.1em;
  }
}

/* ---------------------------------------------------------------
 3. STOPKA – sowa
---------------------------------------------------------------- */
.footer-owl {
  height: 1.3em;
  width: auto;
  max-height: 1.6em;
  vertical-align: middle;
  margin-right: 12px;
  transition: transform 0.2s ease;
}
.footer-owl:hover {
  transform: scale(1.1);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 4. Social media w sekcji Kontakt
---------------------------------------------------------------- */
.contact-social {
  margin-top: 8px;
}
.contact-social-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}
.social-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(55, 214, 107, 0.45);
  color: var(--accent-soft);
  text-decoration: none;
  font-size: 1.1rem;
  background: #05090b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}
.social-link:hover {
  background: var(--accent-soft);
  color: #020406;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75);
}
.social-link i {
  display: block;
  line-height: 1;
}