/* «Карта нашей семьи» — 3D-режим. Слой поверх styles.css */

body.three-d {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #2a1a0e 0%, #1a0f08 35%, #0a0604 100%);
}

#stage3d {
  position: fixed; inset: 0;
  overflow: hidden;
  cursor: grab;
}
#stage3d.dragging { cursor: grabbing; }
#stage3d.over-node { cursor: pointer; }

#scene {
  display: block;
  width: 100%; height: 100%;
  outline: none;
  /* «парчментная рамка» вокруг сцены */
  box-shadow:
    inset 0 0 0 8px rgba(40, 22, 8, 0.45),
    inset 0 0 0 9px rgba(210, 169, 78, 0.35),
    inset 0 0 120px 0 rgba(8, 6, 4, 0.55),
    inset 0 -60px 90px -20px rgba(0,0,0,0.5);
}

/* HTML-лейблы поверх 3D-сцены */
#labels3d {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.lbl3d {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  color: var(--text);
  text-align: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85));
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.lbl3d .ribbon {
  display: inline-block;
  padding: 4px 14px 5px;
  background: linear-gradient(180deg, rgba(240,222,180,0.96), rgba(214,184,118,0.92));
  color: #2A1A0A;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid rgba(120, 80, 30, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.5) inset,
    0 -1px 2px rgba(100, 60, 10, 0.4) inset,
    0 4px 14px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.lbl3d.lead .ribbon { font-size: 15.5px; padding: 5px 16px 6px; }
.lbl3d.sub .ribbon {
  background: linear-gradient(180deg, rgba(60, 40, 22, 0.85), rgba(40, 26, 14, 0.85));
  color: #F2DDB0;
  font-size: 12.5px;
  font-weight: 500;
  border-color: rgba(200, 160, 90, 0.4);
}
.lbl3d.dimmed { opacity: 0.18; }
.lbl3d.hidden { opacity: 0; transform: translate(-50%, -120%); }
.lbl3d .status-pin {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 0 1px rgba(60, 30, 8, 0.45);
}
.lbl3d .status-pin.active { background: #3FA075; }
.lbl3d .status-pin.construction { background: #E2B852; }
.lbl3d .status-pin.needs-dev { background: #C7553E; }
.lbl3d .status-pin.built { background: #5085BD; }

/* Cluster banners (большие пергаментные плашки кластеров) */
.cluster-banner {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--font-display);
  text-align: center;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7));
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.cluster-banner .scroll {
  position: relative;
  display: inline-block;
  padding: 10px 28px 12px;
  background:
    linear-gradient(180deg, #f3e2b5 0%, #ddc282 50%, #c2a35e 100%);
  color: #2A1A0A;
  border-radius: 4px;
  border: 1px solid rgba(120, 80, 30, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 215, 0.7),
    inset 0 -2px 4px rgba(100, 60, 10, 0.35),
    0 8px 22px rgba(0,0,0,0.6);
}
.cluster-banner .scroll::before,
.cluster-banner .scroll::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 22px;
  background: linear-gradient(180deg, #b08a48, #d2a94e, #b08a48);
  border-radius: 50% / 4px;
  box-shadow: inset -2px 0 4px rgba(80, 50, 10, 0.4);
}
.cluster-banner .scroll::before { left: -12px; }
.cluster-banner .scroll::after  { right: -12px; }
.cluster-banner .title {
  display: block;
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.5px;
}
.cluster-banner .sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #5A3A14;
  text-transform: uppercase;
  margin-top: 2px;
}
.cluster-banner.dimmed { opacity: 0.25; }
.cluster-banner.active .scroll { box-shadow: inset 0 1px 0 rgba(255, 245, 215, 0.7), 0 0 22px rgba(224, 184, 92, 0.7), 0 8px 22px rgba(0,0,0,0.6); }

/* Compass (декоративный, верхний левый угол) */
.compass3d {
  position: fixed;
  top: 78px; left: 28px;
  width: 90px; height: 90px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 6;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}
@media (max-width: 700px) { .compass3d { top: 68px; left: 14px; width: 64px; height: 64px; } }

/* Intro поверх — затемнить для 3D */
body.three-d #intro {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(40, 22, 8, 0.5) 0%, rgba(8, 6, 4, 0.95) 80%);
}

/* Чтобы основной HUD (panel, quote, etc.) выглядел уместно поверх 3D */
body.three-d .hud,
body.three-d #panel,
body.three-d #room,
body.three-d #quote,
body.three-d #coach { z-index: 8; }
body.three-d #labels3d { z-index: 5; }

/* Подсветка под выбранным зданием — золотая «лужица» через CSS-эффект (для тех, кому нужно эстетично) */
.spot-hl {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 130, 0.55) 0%, rgba(255, 200, 80, 0.0) 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* ── Мобильная адаптация 3D ── */
@media (max-width: 900px) {
  /* bottom-sheet ниже, чтобы карта оставалась видимой сверху */
  body.three-d #panel { height: 60vh; }
  body.three-d #scene {
    box-shadow:
      inset 0 0 0 5px rgba(40, 22, 8, 0.4),
      inset 0 0 0 6px rgba(210, 169, 78, 0.3),
      inset 0 0 70px 0 rgba(8, 6, 4, 0.5);
  }
  /* ленты-подписи компактнее, чтобы не сливались на узком экране */
  .lbl3d .ribbon { font-size: 11.5px; padding: 3px 9px 4px; }
  .lbl3d.lead .ribbon { font-size: 12.5px; padding: 3px 10px 4px; }
  .lbl3d.sub .ribbon { font-size: 10.5px; }
  .cluster-banner .title { font-size: 16px; }
  .cluster-banner .sub { font-size: 9px; letter-spacing: 1.5px; }
  .cluster-banner .scroll { padding: 7px 18px 8px; }
  /* на мобиле второстепенные подписи прячем в обзоре — открываются на фокусе кластера */
  body.three-d.compact-labels .lbl3d.sub { opacity: 0; }
}
@media (max-width: 560px) {
  .lbl3d.sub { display: none; }   /* совсем узкий экран — только ключевые блоки */
}

/* ════════════════ ИММЕРСИВНЫЙ ФОТО-ПОРТАЛ (Казанский храм) ════════════════ */
#hram {
  position: fixed; inset: 0; z-index: 40;
  display: none; opacity: 0;
  background: #0a0604;
  overflow: hidden;
  transition: opacity .6s var(--ease-soft);
}
#hram.open { display: block; opacity: 1; pointer-events: auto; }

/* фото-слои на весь экран (проявление через transition, без fill-mode-залипания) */
.hram-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 42%;
  opacity: 0;
  transform: scale(1.28);
  filter: blur(18px) brightness(0.65);
  will-change: transform, opacity, filter;
  transition: opacity 1.5s ease, transform 2.1s cubic-bezier(.2,.7,.25,1), filter 1.7s ease;
}
/* фото 1 проявляется «из дымки» */
#hram.show1 .hram-photo-1 { opacity: 1; transform: scale(1.06); filter: blur(0) brightness(1); }
#hram.show2 .hram-photo-1 { opacity: 0; transform: scale(1.16); filter: blur(10px) brightness(0.8); }
/* фото 2 — «храм с другой стороны» */
#hram.show2 .hram-photo-2 { opacity: 1; transform: scale(1.06); filter: blur(0) brightness(1); }

/* дымка/облака — несколько мягких слоёв, расходятся при проявлении */
.hram-mist { position: absolute; inset: -10%; pointer-events: none; z-index: 2; }
.hram-mist span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,238,226,0.9) 0%, rgba(240,234,220,0.5) 38%, rgba(240,234,220,0) 72%);
  filter: blur(8px);
}
.hram-mist span:nth-child(1){ width:90vw; height:90vw; left:-20vw; top:-25vw; }
.hram-mist span:nth-child(2){ width:80vw; height:80vw; right:-22vw; top:-10vw; }
.hram-mist span:nth-child(3){ width:95vw; height:95vw; left:-10vw; bottom:-30vw; }
.hram-mist span:nth-child(4){ width:75vw; height:75vw; right:-18vw; bottom:-22vw; }
#hram.open .hram-mist span { animation: mistPart 2.3s ease-out forwards; }
#hram.open .hram-mist span:nth-child(2){ animation-duration: 2.6s; }
#hram.open .hram-mist span:nth-child(3){ animation-duration: 2.4s; }
#hram.open .hram-mist span:nth-child(4){ animation-duration: 2.7s; }
@keyframes mistPart {
  0%   { opacity: 1; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.7); }
}
/* короткий «выдох» дымки при перелистывании на фото 2 */
#hram.flipping .hram-mist span { animation: mistPuff 1.1s ease-out forwards; }
@keyframes mistPuff {
  0%   { opacity: 0; transform: scale(1.2); }
  35%  { opacity: 0.8; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* затемнение снизу под текст */
.hram-grad {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,6,4,0.55) 0%, rgba(8,6,4,0) 22%, rgba(8,6,4,0) 45%, rgba(8,6,4,0.35) 70%, rgba(8,6,4,0.9) 100%);
}

/* выход к карте */
.hram-exit {
  position: absolute; top: 26px; left: 26px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px 11px 13px;
  background: rgba(12,18,22,0.5); backdrop-filter: blur(10px);
  border: 1px solid var(--gold-40); border-radius: var(--r-chip);
  color: var(--text-gold); font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-pop);
  transition: background .25s, transform .25s;
}
.hram-exit svg { width: 18px; height: 18px; }
.hram-exit:hover { background: rgba(20,30,36,0.7); transform: translateX(-2px); }

/* карточка с информацией */
.hram-card {
  position: absolute; z-index: 5;
  left: 40px; bottom: 40px;
  width: min(560px, 44vw);
  height: 0;                 /* страницы позиционируются абсолютно от низа */
  overflow: visible;
}
.hram-page {
  position: absolute; left: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, rgba(10,16,20,0.34), rgba(8,12,16,0.74));
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  padding: 26px 28px;
  max-height: 76vh; overflow-y: auto;
  transition: opacity .55s var(--ease-soft), transform .55s var(--ease-soft);
}
.hram-page-1 { opacity: 1; transform: translateY(0); }
.hram-page-2 { opacity: 0; transform: translateY(24px); pointer-events: none; }
#hram.show2 .hram-page-1 { opacity: 0; transform: translateY(-24px); pointer-events: none; }
#hram.show2 .hram-page-2 { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hram-page .h-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gold); margin: 0 0 6px; }
.hram-page h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); color: var(--text); margin: 0 0 12px; line-height: 1.1; }
.hram-page p { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 12px; opacity: .92; }
.hram-page h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gold); margin: 16px 0 8px; }
.hram-page ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hram-page ul a { color: var(--text); display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.hram-page ul a:hover { color: var(--text-gold); }
.hram-page ul .net { color: var(--text-gold); width: 16px; text-align: center; }
.hram-page .h-people { display: flex; flex-direction: column; gap: 8px; }
.hram-page .h-people .pp b { display: block; font-size: 14px; color: var(--text); }
.hram-page .h-people .pp i { font-style: normal; font-size: 12px; color: var(--text-muted); }

/* кнопка «О храме» / «к контактам» */
.hram-flip {
  position: absolute; z-index: 6;
  right: 40px; bottom: 44px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--gold-warm), var(--gold-deep));
  color: #2A1A0A; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .3px;
  border-radius: var(--r-chip);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,245,215,.5);
  transition: transform .25s var(--ease-iconic), box-shadow .25s, filter .25s;
}
.hram-flip .flip-ic { font-size: 17px; }
.hram-flip:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 38px -10px rgba(0,0,0,.75), var(--glow-gold); }
.hram-flip:active { transform: translateY(-1px) scale(.99); }

/* мобильная адаптация портала */
@media (max-width: 900px) {
  .hram-card { left: 0; right: 0; bottom: 0; width: 100%; max-height: 58vh; }
  .hram-page { border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 58vh; }
  .hram-flip { right: 16px; bottom: calc(58vh + 14px); padding: 11px 18px; font-size: 14px; }
  .hram-exit { top: 14px; left: 14px; }
  .hram-photo { background-position: center 38%; }
}

@media (prefers-reduced-motion: reduce) {
  #hram.open .hram-mist span { animation: none; opacity: 0; }
  .hram-photo { transition-duration: .2s; filter: none !important; }
  .hram-page { transition-duration: .15s; }
}