/* css/style.css */

/* Płynne przewijanie do sekcji (Smooth Scroll) */
html {
    scroll-behavior: smooth;
}

/* Konfiguracja ikon Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Główne fonty */
body { 
    font-family: 'Inter', sans-serif; 
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
}



.floating-logo {
  width: 100%;
  height: 100%;
  min-height: 200px; 
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* WARSTWA LOGO */
.floating-logo::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  
  background-image: url('../assets/images/big_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Animacja lewitacji przypisana tylko do obrazka */
  animation: moveLogo 4s ease-in-out infinite;
}

/* WARSTWA CIENIA */
.floating-logo::after {
  content: "";
  position: absolute;
  bottom: 20px; /* Cień na dole kontenera */
  
  width: 150px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  filter: blur(8px);
  
  /* Animacja cienia - tylko skala i opacity */
  animation: scaleShadow 4s ease-in-out infinite;
}

/* LOGO LATRA GÓRA-DÓŁ */
@keyframes moveLogo {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px); /* Tutaj ustawiasz wysokość skoku */
  }
}

/* CIEŃ TYLKO PULSUJE W MIEJSCU */
@keyframes scaleShadow {
  0%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.4); /* Cień rośnie, gdy logo jest w górze */
    opacity: 0.3;          /* I staje się jaśniejszy */
  }
}