body {
  background-color: black;
  display: flex;
  justify-content: center;
}

.site-container {
  max-width: 1280px;
  min-width: 320px;
  width: 100%;
}

/* -------- HERO -------- */
.bg-image-hero-1 {
  opacity: 0;
  animation: fadeUp 1.8s ease forwards;
}

.hero-typing {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 2.6s ease 1.2s forwards;
  font-family: "Playfair Display", serif;
  font-style: italic;
}

.hero-first { position: relative; overflow: hidden; }  /* важно! */


.hero-section-1 .header-text { font-size: 3rem; }
.hero-section-1 .subheader-text { font-size: 1.2rem; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* -------- АДАПТИВ -------- */
@media (max-width: 991px){
  .hero-section-1 .header-text { font-size: 2.5rem; }
  .hero-section-1 .subheader-text { font-size: 1.1rem; }
}
@media (max-width: 767px){
  .hero-section-1 .header-text { font-size: 2rem; }
  .hero-section-1 .subheader-text { font-size: 1rem; }
}
@media (max-width: 479px){
  .hero-section-1 .header-text { font-size: 1.6rem; }
  .hero-section-1 .subheader-text { font-size: 0.9rem; }
}

.scroll-cue {
  position: absolute;
  bottom: 20px;   /* расстояние от нижнего края секции */
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);

  opacity: 0;                       /* невидима изначально */
  transition: opacity .6s ease;     /* плавное проявление */
  z-index: 3;                       /* всегда поверх фона/оверлея */
}

.scroll-cue.is-ready {
  opacity: .85;                     /* проявляется */
}

.scroll-cue__icon {
  width: 28px;
  height: 28px;
  animation: none;                   /* отключено по умолчанию */
}

/* когда стрелка активна */
.scroll-cue.is-ready .scroll-cue__icon {
  animation: bounce 2.4s ease-in-out infinite; /* включаем "плавание" */
}

.scroll-cue.is-hidden { opacity:0; pointer-events:none; }

/* анимация только по оси Y */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}