header {
  position: relative;
  display: flex;
  justify-content: center; /* центрируем название */
  align-items: flex-start;
  background-color: #B0DA2A;
  padding: 10px 20px;
  animation: headerFade 0.8s ease-out;
  z-index: 9999; 
}

@keyframes headerFade {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---------------- Джин слева ---------------- */
.block-genie {
  position: absolute;
  left: 80px;   /* было 0px, теперь сдвиг вправо на 5px */
  top: 10px;
  z-index: 11; /* джин тоже выше рекламы */
  opacity: 0; /* начальная невидимость */
  animation: genieFadeIn 1.5s ease-out forwards, genieFloat 3s ease-in-out infinite alternate;
}

.block-genie img {
   max-width: clamp(150px, 25vw, 200px);
  height: clamp(180px, 28vw, 270px);
  display: block;

}

/* Анимация появления джина */
@keyframes genieFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Лёгкое плавание джина */
@keyframes genieFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* ---------------- Тигр справа ---------------- */
.block-tiger {
  position: absolute;
  right: 10px;
  top: 80px;
  z-index: 11; /* тигр выше всего внутри шапки */
  opacity: 0; /* начальная невидимость */
  animation: tigerFadeIn 1.5s ease-out forwards, tigerFloat 3s ease-in-out infinite alternate;
}

.block-tiger img {
  max-width: clamp(160px, 28vw, 220px);
  height: auto;
  display: block;
}

/* Анимация появления тигра */
@keyframes tigerFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Лёгкое покачивание тигра */
@keyframes tigerFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* ---------------- Название сайта ---------------- */
.header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-title .myImg {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
}

header h1 {
  margin: 0;
  font-size: 50px;
  font-family: 'Baloo 2', cursive;
  color: #2E4E2E;
  text-align: center;
}

/* 📱 Адаптация шапки */

/* Планшеты и небольшие экраны */
@media (max-width: 900px) {
  .block-genie {
    left: 10px;
    top: 30px;
  }

  .block-genie img {
    max-width: 150px;
    height: auto;
  }

  .block-tiger {
    right: 0;
    top: 50px;
  }

  .block-tiger img {
    max-width: 150px;
  }

  .header-title .myImg {
    max-width: 350px;
  }

  header h1 {
    font-size: 36px;
  }
}

/* Смартфоны и очень маленькие экраны */
@media (max-width: 480px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 5px;
  }

  .block-genie {
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 10px;
  }

  .block-tiger {
    position: relative;
    right: 0;
    top: 0;
    margin-top: 10px;
  }

  .block-genie img,
  .block-tiger img {
    max-width: 120px;
  }

  .header-title .myImg {
    max-width: 280px;
  }

  header h1 {
    font-size: 28px;
  }
}