/* Статичный герб + заголовок вместо слайдера главной (из hero-title.html). */
#fp-hero-stage { container-type: size; }
.hero-stage-in {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2.2cqh, 24px);
  padding-inline: 12px; box-sizing: border-box;
}
.hero-emblem {
  display: block; flex: 0 1 auto; min-height: 0;
  height: auto; width: auto; max-width: min(70%, 520px); max-height: 52cqh;
  object-fit: contain; margin: 0;
}

.hero-title-wrap {
  --gold: #d6a94a; --gold-hi: #fff2c4; --gold-lo: #8d5f1c; --cream: #f6ead0;
  --sub-size: 1.25rem; --k-sub: 38.79; --k-main: 8.894; --k-greet: 18;
  container-type: inline-size;
  flex: 0 0 auto;
  /* третий предел — по высоте рамки: заголовок ~0.23 своей ширины в высоту,
     на низких экранах он иначе вылезал на пол */
  width: min(100%, calc(var(--k-sub) * var(--sub-size)), 175cqh);
  margin-inline: auto;
}
.hero-title { display: flex; flex-direction: column; align-items: center; gap: .45em; margin: 0; text-align: center; font-weight: normal; }
.hero-title > span { display: block; }

.hero-title__greet {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 500;
  font-size: calc(100cqi / var(--k-greet)); line-height: 1; color: var(--gold);
}
.hero-title__sub {
  font-family: 'Unbounded', 'Arial Black', system-ui, sans-serif; font-weight: 500;
  font-size: calc(100cqi / var(--k-sub)); letter-spacing: .3em; margin-inline-end: -.3em;
  text-transform: uppercase; white-space: nowrap; color: var(--cream);
}
.hero-title__main {
  font-family: 'Unbounded', 'Arial Black', system-ui, sans-serif; font-weight: 800;
  font-size: calc(100cqi / var(--k-main)); line-height: 1.05; white-space: nowrap;
  filter: drop-shadow(0 3px 0 var(--gold-lo)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

/* Низкая широкая рамка (телефон в ландшафте, 1280x480): герб слева, заголовок
   справа вместо колонки — в колонку герб сжимался до 12px. */
@container (max-height: 340px) and (min-aspect-ratio: 2/1) {
  .hero-stage-in { flex-direction: row; gap: 3cqw; padding-inline: 16cqw; }
  .hero-emblem { height: 84cqh; width: auto; max-height: none; max-width: 38cqw; }
  .hero-title-wrap { width: min(calc(100cqw - 32cqw - 84cqh - 3cqw), 330cqh); flex: 0 1 auto; }
}
/* совсем низкая рамка: «Вас вітає» уже не помещается */
@container (max-height: 170px) { .hero-title__greet { display: none; } }


/* ── Буквы: вылет из точки (все экраны), на десктопе — реакция на курсор (hero-title.js),
   на телефоне — бесконечная волна. Размеры шрифтов выше — максимальные, не меняются. ── */
.hero-title .zt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-title .letter { display: inline-block; transform-origin: 50% 50%; }
.zt-anim .letter { opacity: 0; will-change: transform, opacity; }
/* если скрипт не запустился — через 5 с показываем текст как есть */
.zt-anim:not(.zt-ready) .letter { animation: zt-letter-failsafe .01s 5s forwards; }
@keyframes zt-letter-failsafe { to { opacity: 1; transform: none; } }
.hero-title__main .letter { color: var(--gold); }

.hero-title-wrap.mobile-wave .letter {
  animation: theatre-mobile-wave 5.466666667s linear infinite;
  animation-delay: var(--wave-delay);
}
@keyframes theatre-mobile-wave {
  0%, 29.268292683% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  42.682926829% { transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(.15); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  56.097560976%, 100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .zt-anim .letter, .hero-title-wrap.mobile-wave .letter { animation: none; opacity: 1; transform: none; }
}

/* Телефон: «Житомирський» / «академічний обласний» двома рядками, «Театр Ляльок» ниже —
   всё в ширину задней стены (между шторами ≈ 66vw), а не поверх штор. */
@media (max-width: 767px) {
  .hero-title-wrap { --k-sub: 21.5; --k-main: 8.2; width: 62vw; }
  .hero-title__sub { display: flex; flex-direction: column; align-items: center; gap: .55em; white-space: normal; }
  .hero-title__l1, .hero-title__l2 { display: block; white-space: nowrap; }
  .hero-title__sub { letter-spacing: .26em; }
  .hero-title__main { font-size: calc(100cqi / var(--k-main)); }
}