/* Герой главной: три сцены по времени суток.
   Цвета приходят из assets/design/hero-scenes.json через inline-переменные
   на .hscene — здесь только форма и движение, времён суток этот файл не знает.

   Свой неймспейс .hscene вместо .hero намеренно: старый герой размазан по
   пяти файлам с !important, и дописываться в ту кучу — значит воевать
   с собственным кодом на каждой правке. */

.hscene {
  --hs-inset: 12px;
  --hs-radius: 24px;
  --hs-pad-x: 56px;

  position: relative;
  padding: var(--hs-inset);
  background: var(--hs-frame, #0e1d1a);
}

.hscene__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--hs-radius);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

/* ── кадр ────────────────────────────────────────────────────────── */
.hscene__shot,
.hscene__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hscene__shot img {
  object-fit: cover;
  object-position: 50% 62%;   /* держим бассейн и веранду, небо можно срезать */
  transform-origin: 56% 58%;
}

/* Затемнение только слева, под текстом: справа кадр остаётся чистым. */
.hscene__scrim {
  position: absolute;
  inset: 0;
  background: var(--hs-scrim, linear-gradient(90deg, rgba(10,18,14,.6), transparent 70%));
  pointer-events: none;
}
/* Мягкая тень снизу — под чипы переключателя и кнопки. */
.hscene__frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6,12,10,.55), transparent);
  pointer-events: none;
}

/* ── содержимое ──────────────────────────────────────────────────── */
.hscene__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--hs-pad-x) 56px;
  max-width: 920px;
  color: var(--hs-ink, #fff);
}

.hscene__chips {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}
.hscene__chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  color: var(--hs-chip-ink, #fff);
  background: var(--hs-chip-bg, rgba(14,29,26,.55));
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hscene__title {
  margin: 0 0 22px;
  font-family: var(--font-title, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(42px, 4.2vw, 62px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hscene__lead {
  margin: 0 0 40px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--hs-ink-soft, rgba(255,255,255,.86));
  text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}

.hscene__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hscene__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 68px;
  padding: 0 34px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background .3s ease;
}
.hscene__btn--primary {
  background: var(--hs-btn-bg, #7c8560);
  color: var(--hs-btn-ink, #fff);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.hscene__btn--ghost {
  background: var(--hs-btn2-bg, rgba(22,36,33,.82));
  color: var(--hs-btn2-ink, #fff);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hscene__btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.hscene__btn:active { transform: translateY(0); }
.hscene__btn-leaf { flex: 0 0 auto; opacity: .9; }

/* ══ ОЖИВЛЕНИЕ ════════════════════════════════════════════════════
   Только ПК: на телефоне это лишняя нагрузка на батарею ради фона,
   который прокручивают за секунду. Включается ниже в @media.       */
.hscene__life { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hscene__life > span { position: absolute; display: block; opacity: 0; }

/* Точки огней сняты с ночного кадра: камера у всех трёх сцен одна,
   поэтому проценты совпадают и с вечерним, и с дневным. */
.hscene__lamp {
  width: 12%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--hs-atm-hue, #f0a64b) 70%, transparent) 0%,
              transparent 68%);
  filter: blur(6px);
}
.hscene__lamp--near { left: 69.3%; top: 77%; width: 15%; }
.hscene__lamp--left { left: 36.9%; top: 62%; }
.hscene__lamp--far  { left: 93.8%; top: 64%; width: 9%; }

.hscene__garland {
  left: 36%; top: 30%;
  width: 40%; height: 14%;
  background: radial-gradient(ellipse at 50% 50%,
              color-mix(in srgb, var(--hs-atm-hue, #f0a64b) 55%, transparent) 0%,
              transparent 70%);
  filter: blur(10px);
}

.hscene__sun {
  left: 72.5%; top: 35%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--hs-atm-hue, #f3b26a) 60%, transparent) 0%,
              transparent 62%);
  filter: blur(16px);
}

.hscene__water {
  left: 46%; top: 58%;
  width: 52%; height: 34%;
  background: linear-gradient(105deg,
              transparent 0%,
              color-mix(in srgb, var(--hs-atm-hue, #eaf2f5) 42%, transparent) 46%,
              transparent 70%);
  filter: blur(14px);
  mix-blend-mode: screen;
}

@media (min-width: 1024px) {
  /* Медленный наезд — кадр дышит, но не «едет». */
  .hscene__shot img { animation: hs-drift 28s ease-in-out infinite alternate; }

  .hscene[data-scene="night"] .hscene__lamp { animation: hs-flicker var(--hs-atm-speed, 7s) ease-in-out infinite; }
  .hscene[data-scene="night"] .hscene__lamp--left { animation-delay: -2.3s; }
  .hscene[data-scene="night"] .hscene__lamp--far  { animation-delay: -4.1s; }
  .hscene[data-scene="night"] .hscene__garland { animation: hs-twinkle 4.5s ease-in-out infinite; }
  .hscene[data-scene="night"] .hscene__water { animation: hs-shimmer 16s ease-in-out infinite; }

  .hscene[data-scene="evening"] .hscene__sun { animation: hs-breathe var(--hs-atm-speed, 14s) ease-in-out infinite; }
  .hscene[data-scene="evening"] .hscene__lamp--near { animation: hs-flicker 8s ease-in-out infinite; }

  .hscene[data-scene="day"] .hscene__water { animation: hs-shimmer var(--hs-atm-speed, 26s) ease-in-out infinite; }

  /* Появление блоков лесенкой при загрузке. */
  .hscene [data-rise] { opacity: 0; transform: translateY(18px); }
  .hscene.is-ready [data-rise] {
    opacity: 1;
    transform: none;
    transition: opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1);
  }
  .hscene.is-ready [data-rise="1"] { transition-delay: .05s; }
  .hscene.is-ready [data-rise="2"] { transition-delay: .16s; }
  .hscene.is-ready [data-rise="3"] { transition-delay: .27s; }
  .hscene.is-ready [data-rise="4"] { transition-delay: .38s; }
  .hscene.is-ready [data-rise="5"] { transition-delay: .49s; }
}

@keyframes hs-drift {
  from { transform: scale(1);    }
  to   { transform: scale(1.07); }
}
@keyframes hs-flicker {
  0%, 100% { opacity: calc(var(--hs-atm-opacity, .34) * 1);   }
  38%      { opacity: calc(var(--hs-atm-opacity, .34) * .62); }
  52%      { opacity: calc(var(--hs-atm-opacity, .34) * 1.15);}
  71%      { opacity: calc(var(--hs-atm-opacity, .34) * .78); }
}
@keyframes hs-twinkle {
  0%, 100% { opacity: calc(var(--hs-atm-opacity, .34) * .7); }
  50%      { opacity: calc(var(--hs-atm-opacity, .34) * 1.1); }
}
@keyframes hs-breathe {
  0%, 100% { opacity: calc(var(--hs-atm-opacity, .3) * .75); transform: translate(-50%, -50%) scale(1);    }
  50%      { opacity: calc(var(--hs-atm-opacity, .3) * 1.1); transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes hs-shimmer {
  0%, 100% { opacity: 0; transform: translateX(-6%); }
  45%      { opacity: var(--hs-atm-opacity, .2); }
  100%     { transform: translateX(8%); }
}

/* Смена сцены по клику — кадр меняется мягко, без «щелчка». */
.hscene.is-swapping .hscene__shot img { opacity: 0; transition: opacity .45s ease; }
.hscene__shot img { transition: opacity .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .hscene__shot img,
  .hscene__life > span { animation: none !important; }
  .hscene [data-rise] { opacity: 1 !important; transform: none !important; }
  .hscene__life > span { opacity: var(--hs-atm-opacity, .25); }
}

/* ── телефон и планшет: пока просто и аккуратно ──────────────────── */
@media (max-width: 1023px) {
  .hscene { --hs-pad-x: 20px; --hs-radius: 18px; --hs-inset: 8px; }
  .hscene__frame { min-height: 78vh; }
  .hscene__inner { padding-bottom: 92px; max-width: none; }
  .hscene__title { font-size: clamp(28px, 7vw, 40px); }
  .hscene__lead { font-size: 15px; margin-bottom: 28px; }
  .hscene__actions { flex-direction: column; align-items: stretch; }
  .hscene__btn { min-height: 56px; }
  .hscene__switch { left: var(--hs-pad-x); right: var(--hs-pad-x); bottom: 20px; gap: 18px; }
  .hscene__dot-label { display: none; }
  .hscene__life { display: none; }
}


/* ══ ШАПКА ПОВЕРХ КАДРА ═══════════════════════════════════════════
   На макете навигация лежит на фотографии, а не белой плашкой над ней.
   Делаем это только на странице нового героя (класс hs-page): на других
   страницах фона нет и белый текст лёг бы на белое. */

.hs-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent !important;
  overflow: visible;
  margin: 0 !important;   /* у темы был отступ сверху — фиксированной шапке он не нужен */
  transition: background .3s ease, box-shadow .3s ease;
}

/* Прокрутили первый экран — шапка становится обычной плашкой и едет
   дальше вместе со страницей. Прозрачной ей быть уже не на чем. */
.hs-page .site-header.is-stuck {
  background: var(--color-bg, #f4f1ea) !important;
  box-shadow: 0 6px 30px rgba(23, 22, 17, .10);
}
.hs-page .site-header.is-stuck .header__inner { min-height: 72px; }
.hs-page .site-header.is-stuck .logo,
.hs-page .site-header.is-stuck .header-nav-link,
.hs-page .site-header.is-stuck .header__nav a,
.hs-page .site-header.is-stuck .header__actions > a:not(.header__vk):not(.header__button) {
  color: var(--color-text, #171611) !important;
}
.hs-page .site-header.is-stuck::before { display: none !important; }
.hs-page .site-header.is-stuck .header__vk {
  background: #0077FF !important;
  border-color: transparent !important;
  border-radius: 50% !important;
}
.hs-page .site-header.is-stuck .header__button {
  background: var(--color-dark, #151713) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.hs-page .site-header::before,
.hs-page .site-header::after { display: none !important; }

.hs-page .header__inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 88px;
  padding-left: 44px;
  padding-right: 44px;
  max-width: none;
}

/* Цвет навигации — свой у каждой сцены. Белый на дневном кадре не читается:
   вверху светлое небо, а не тёмный лес. */
.hs-page .header-nav-link,
.hs-page .header__nav a,
.hs-page .header__actions > a:not(.header__vk):not(.header__button) {
  color: var(--hs-nav-ink, #fff) !important;
}
.hs-page .logo { color: var(--hs-logo-ink, #fff) !important; }
.hs-page .logo::after { display: none !important; }
.hs-page .header-nav-link:hover { opacity: .78; }

/* Кнопки шапки — как на макете: стеклянные, одной формы и размера.
   Фирменный синий ВК выбивался из кадра, на макете он такой же
   полупрозрачный, как и соседняя кнопка. */
.hs-page .header__vk {
  background: var(--hs-head-btn-bg, rgba(255,255,255,.16)) !important;
  color: var(--hs-head-btn-ink, #fff) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 16px !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none !important;
}
.hs-page .header__vk svg,
.hs-page .header__vk img { filter: none; opacity: .92; }
.hs-page--day .header__vk { border-color: rgba(23,22,17,.10) !important; }

.hs-page .header__button {
  background: var(--hs-head-btn-bg, rgba(255,255,255,.16)) !important;
  color: var(--hs-head-btn-ink, #fff) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 16px !important;
  min-height: 52px;
  padding: 0 28px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none !important;
}
.hs-page--day .header__button { border-color: rgba(23,22,17,.10) !important; }

/* Вуаль над шапкой — она есть и на макете, но почти незаметная:
   ровно столько, чтобы навигация не терялась в небе. */
.hs-page .site-header::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0 0 auto 0;
  top: 0; right: 0;
  width: auto;
  height: 148px;
  background: var(--hs-head-veil, linear-gradient(to bottom, rgba(10,16,13,.3), transparent));
  pointer-events: none;
  opacity: 1;
}

/* Герой начинается от самого верха — шапка лежит на нём. */
.hs-page .hscene { margin-top: 0; }

/* Падающие листья сезонной темы с новым кадром спорят: на рендере
   чистое небо, а листья летят поверх фонарей и воды. Снимаем. */
.hs-page .bd-atmos,
.hs-page #bd-leaves,
.hs-page .bd-leaf { display: none !important; }