/* ---------- 3D-сцена первого экрана (hero3d) ---------- */

/* постер-фото лежит под канвасом; канвас проявляется после первого кадра */
.hero-bg { z-index: 0; }
#scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 1; touch-action: pan-y;
  opacity: 0; transition: opacity .6s ease;
}
.hero.scene-ready #scene { opacity: 1; }

.scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .9s ease; }
/* дымка держится под колонкой текста (левый край .container + 600px) и гаснет за ней; город справа */
.scrim { --txt-r: calc(max(20px, 50% - 600px) + 560px); --scrim-end: min(calc(var(--txt-r) + 340px), 88%); }
.scrim-golden { background: linear-gradient(90deg, rgba(22,19,24,.8) 0, rgba(22,19,24,.56) var(--txt-r), rgba(22,19,24,0) var(--scrim-end)); }
.scrim-day { opacity: 0; background: linear-gradient(90deg, rgba(245,241,234,.95) 0, rgba(245,241,234,.78) var(--txt-r), rgba(245,241,234,0) var(--scrim-end)); }
.hero[data-mode="day"] .scrim-golden { opacity: 0; }
.hero[data-mode="day"] .scrim-day { opacity: 1; }

/* текст первого экрана поверх сцены; день — тёмный текст, золотой час — белый */
.hero-inner { position: relative; z-index: 4; transition: color .9s ease, opacity .5s ease; }
.hero h1 { transition: color .9s ease; }
.hero-role, .hero-sub { transition: color .9s ease; }
.hero[data-mode="day"] h1 { color: #1c1c1e; }
.hero[data-mode="day"] .hero-sub { color: rgba(28,28,30,.78); }
.hero[data-mode="day"] .hero-role { color: #93744a; }
.hero[data-mode="day"] .btn-glass { border-color: rgba(28,28,30,.22); color: #1c1c1e; background: rgba(255,255,255,.62); }
.hero[data-mode="day"] .btn-glass:hover { background: rgba(255,255,255,.78); }

/* Заголовок стоит прямо на домах сцены (скрим закрывает только левую колонку,
   на телефоне — низ): мягкое свечение под ним, светлое днём, тёмное в золотой час */
.hero h1 {
  position: relative; isolation: isolate;
  text-shadow: 0 0 2px rgba(22,19,24,.55), 0 0 14px rgba(22,19,24,.5), 0 0 30px rgba(22,19,24,.35);
}
.hero[data-mode="day"] h1 {
  text-shadow: 0 0 2px rgba(245,241,234,.95), 0 0 12px rgba(245,241,234,.9), 0 0 28px rgba(245,241,234,.8);
}
.hero h1::before,
.hero h1::after {
  content: ""; position: absolute; inset: -32% -20%; z-index: -1; pointer-events: none;
  transition: opacity .9s ease;
}
.hero h1::before { background: radial-gradient(farthest-side, rgba(22,19,24,.6), rgba(22,19,24,.45) 55%, rgba(22,19,24,0)); }
.hero h1::after { opacity: 0; background: radial-gradient(farthest-side, rgba(245,241,234,.9), rgba(245,241,234,.8) 55%, rgba(245,241,234,0)); }
.hero[data-mode="day"] h1::before { opacity: 0; }
.hero[data-mode="day"] h1::after { opacity: 1; }
/* на компе заголовок стоит на дымке слева — пятно-подложка не нужна (оставлена для телефона, где он на домах) */
@media (min-width: 761px) {
  .hero h1::before, .hero h1::after { display: none; }
}
.hero.no3d h1 { text-shadow: none; }
.hero.no3d h1::before, .hero.no3d h1::after { display: none; }

.hero.text-off .hero-inner { opacity: 0; pointer-events: none; }
.hero.text-off .scrim-golden, .hero.text-off .scrim-day { opacity: 0; }
.hero.scene-ready .hero-caption { display: none; }

/* маркер-объект: кликабельная ссылка на страницу объекта */
.pin-label {
  position: absolute; left: 0; top: 0; z-index: 3;
  display: grid; gap: 1px; min-width: 190px; max-width: 250px;
  padding: 10px 14px 11px; border-radius: 12px;
  background: #fffdf9; color: #1c1c1e;
  box-shadow: 0 14px 34px rgba(20,14,6,.25);
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease; will-change: transform;
  text-decoration: none;
}
.pin-label.is-on { opacity: 1; pointer-events: auto; cursor: pointer; }
.pin-label.is-on:hover { box-shadow: 0 16px 40px rgba(20,14,6,.34); }
.pin-label::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 12px; height: 12px; background: #fffdf9;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.pl-type { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #93744a; }
.pl-price { font-family: var(--serif); font-size: 21px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pl-title { font-size: 13px; font-weight: 600; }
.pl-place { font-size: 12px; color: #6f6a62; }

/* подпись имени у человечков */
.person-tag {
  position: absolute; left: 0; top: 0; z-index: 5;
  display: grid; justify-items: center; gap: 1px;
  padding: 4px 9px 5px; border-radius: 8px;
  background: rgba(28,24,20,.84); color: #fff;
  font: 600 12px/1.25 var(--sans); white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .18s ease; will-change: transform;
}
.person-tag.is-on { opacity: 1; }
.person-tag.is-daria { background: #b08d57; }
.pt-sub { font-size: 10.5px; font-weight: 500; color: #e8cb98; }
.person-tag.is-daria .pt-sub { color: #fff4e0; }
.pt-sub:empty { display: none; }

/* группа «стеклянных» кнопок управления сценой */
.scene-ctl {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  display: grid; gap: 8px; justify-items: end;
}
.zoom-ctl { display: grid; gap: 6px; }
.zoom-ctl button,
.ctl-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12); color: #fff;
  font: 600 18px/1 var(--sans); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, color .9s ease, border-color .9s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.zoom-ctl button { font-size: 20px; }
.zoom-ctl button:hover, .ctl-btn:hover { background: rgba(255,255,255,.28); }
.ctl-btn:focus-visible, .zoom-ctl button:focus-visible,
a.pin-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctl-btn[aria-pressed="true"] { background: rgba(176,141,87,.85); border-color: rgba(255,255,255,.6); }
.hero[data-mode="day"] .zoom-ctl button,
.hero[data-mode="day"] .ctl-btn {
  border-color: rgba(28,28,30,.2); background: rgba(255,255,255,.72); color: #1c1c1e;
}
.hero[data-mode="day"] .zoom-ctl button:hover,
.hero[data-mode="day"] .ctl-btn:hover { background: rgba(255,255,255,.92); }
.hero[data-mode="day"] .ctl-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

.ctl-next {
  width: auto; padding: 0 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  /* в grid у .ctl-btn стрелка из ::after уезжала отдельной строкой */
  display: inline-flex; align-items: center; gap: 6px;
}
.ctl-next::after { content: "→"; }

/* 3D недоступно — остаётся постер-фото, все слои сцены прячем */
.hero.no3d #scene, .hero.no3d .scrim, .hero.no3d .pin-label,
.hero.no3d .person-tag, .hero.no3d .scene-ctl, .hero.no3d .fallback { display: none; }

.fallback {
  position: absolute; right: 16px; bottom: 14px; z-index: 5;
  margin: 0; max-width: 320px; font-size: 12px; line-height: 1.4;
  color: #fff; background: rgba(20,18,20,.55);
  padding: 8px 12px; border-radius: 10px;
}

@media (max-width: 760px) {
  /* кнопки — строкой внизу первого экрана (он на телефоне кончается ровно над
     липкой панелью «MAX / Позвонить», см. style.css), не поверх заголовка;
     масштаб и день/вечер на телефоне не нужны — остаются пауза, «глаз» (город без
     текста) и «следующий» */
  .scene-ctl { top: auto; bottom: 14px; right: 12px; gap: 8px; grid-auto-flow: column; align-items: center; }
  .zoom-ctl, #btn-mode { display: none !important; }
  .zoom-ctl button, .ctl-btn { width: 40px; height: 40px; min-height: 40px; font-size: 17px; }
  .ctl-next { width: auto; padding: 0 14px; font-size: 13px; }
  .pin-label { max-width: 230px; }
  /* мобильные скримы — снизу вверх, под текст */
  .scrim-golden { background: linear-gradient(0deg, rgba(22,19,24,.9) 0%, rgba(22,19,24,.62) 44%, rgba(22,19,24,0) 70%); }
  .scrim-day { background: linear-gradient(0deg, rgba(245,241,234,.97) 0%, rgba(245,241,234,.78) 44%, rgba(245,241,234,0) 70%); }
}

@media (prefers-reduced-motion: reduce) {
  .scrim, .hero-inner, .hero h1, .pin-label, #scene { transition: none; }
}