/* ===================================================================
   Hero Block — «Освещённая свечами сцена»
   Единая тёплая byzantine-сцена, врастающая в кремовую страницу.
   =================================================================== */

.sh-hero,
.sh-hero * { box-sizing: border-box; }

/* Убираем скалоп-завитушку над рамкой на верхней границе hero
   (этот CSS грузится только на главной — другие страницы не затронуты) */
.iconostasis-frame::before { display: none !important; }

.sh-hero {
  /* ── Палитра (тёмно-зелёный · золото · песок) ── */
  --sh-page:        #fbf9f3;            /* фон страницы — точка перехода (светлая тема) */
  --sh-page-0:      rgba(251,249,243,0);/* тот же тон, нулевая альфа — для feather */
  --sh-green-1:     #173e2a;   /* центр сцены — затемнён ~12%, чтобы не перетягивать фокус с арки */
  --sh-green-2:     #143622;   /* базовый тёмно-зелёный (чуть глубже) */
  --sh-green-3:     #0e2418;   /* глубокие края/углы */

  --sh-gold-light:  #ffdea5;
  --sh-gold:        #e9c176;
  --sh-gold-deep:   #d4af37;
  --sh-gold-dark:   #775a19;

  --sh-cream:       #f5e2c8;   /* основной текст на тёмном */
  --sh-cream-soft:  #d8c4a4;   /* приглушённый текст */

  /* Тени — глубокий лесной зелёный (не серо-чёрные) */
  --sh-shadow:      rgba(6, 20, 12, .60);
  --sh-shadow-soft: rgba(6, 20, 12, .34);
  /* Золотое свечение — на зелёном ярче, золото «вспыхивает» */
  --sh-glow:        rgba(233, 193, 118, .55);
  --sh-glow-soft:   rgba(233, 193, 118, .28);
  --sh-glow-strong: rgba(255, 222, 165, .60);

  /* Растушёвка краёв в тон страницы (кремовое свечение по периметру) */
  --sh-feather:   132px;  /* верх/низ */
  --sh-feather-x: 88px;   /* лево/право */

  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* ── Фон: искры · свечение свечей · тёплый центр · растушёвка краёв ── */
  background:
    /* тёплое свечение от свечей в нижних углах — приглушено ~50%, рассеяннее */
    radial-gradient(ellipse 190px 240px at 13% 86%, rgba(233, 193, 118, .14) 0%, transparent 74%),
    radial-gradient(ellipse 190px 240px at 87% 86%, rgba(233, 193, 118, .14) 0%, transparent 74%),
    /* центральный свет сцены — тёмно-зелёный, плавнее к краям */
    radial-gradient(ellipse 120% 90% at 50% 36%,
        var(--sh-green-1) 0%, var(--sh-green-2) 58%, var(--sh-green-3) 100%);
}

/* Тёмная тема: feather уходит в зеленоватый тёмный фон страницы (#101e15) */
html.theme-dark .sh-hero,
html.dark .sh-hero {
  --sh-page:   #101e15;
  --sh-page-0: rgba(16, 30, 21, 0);
}

/* Деликатная золотая «искристая» текстура — связь со страницей */
.sh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e9c176' opacity='0.5'%3E%3Ccircle cx='20' cy='30' r='0.7'/%3E%3Ccircle cx='75' cy='15' r='0.6'/%3E%3Ccircle cx='100' cy='60' r='0.7'/%3E%3Ccircle cx='50' cy='80' r='0.6'/%3E%3Ccircle cx='15' cy='95' r='0.7'/%3E%3Ccircle cx='90' cy='105' r='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .20;
}

/* Свечение по внутреннему краю + глубина по углам.
   Кремовое inset-свечение имеет ЗАКРУГЛЁННЫЙ внутренний край (без квадратных углов). */
.sh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    /* кремовое свечение, закруглённое во внутреннем крае */
    inset 0 0 90px 34px var(--sh-page),
    inset 0 0 38px 6px var(--sh-page),
    /* лёгкая глубина по углам — мягче, чтобы свечи не сидели в тёмном «кармане» */
    inset 0 0 100px 14px rgba(7, 18, 11, .20);
}
/* Тёмная тема — край в тон зелёного фона + глубже виньетинг */
html.theme-dark .sh-hero::after,
html.dark .sh-hero::after {
  box-shadow:
    inset 0 0 80px 22px var(--sh-page),
    /* угловое затемнение мягче — свечи не сидят в тёмном «кармане» (читалось как тень) */
    inset 0 0 110px 14px rgba(7, 18, 11, .34);
}

/* ── Полноширинный breakout до внешней золотой рамки iconostasis ── */
.sh-hero-outer {
  width: calc(100% + 36px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -18px;
}
@media (min-width: 768px) {
  .sh-hero-outer { width: calc(100% + 76px); margin-top: -38px; }
}
@media (min-width: 1024px) {
  .sh-hero-outer { width: calc(100% + 84px); margin-top: -42px; }
}

/* ── Золотая кайма-«стежок» на самых краях ── */
.sh-edge {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  z-index: 5;
  background: linear-gradient(90deg,
      transparent 0%, var(--sh-gold-dark) 18%, var(--sh-gold-light) 50%,
      var(--sh-gold-dark) 82%, transparent 100%);
  opacity: .8;
  pointer-events: none;
}
.sh-edge--top    { top: 0; }
.sh-edge--bottom { bottom: 0; }

/* Золотая декоративная рамка вокруг всего блока */
.sh-frame {
  position: absolute;
  inset: 10px;
  z-index: 5;
  pointer-events: none;
  border: 2px solid var(--sh-gold-deep);
  box-shadow:
    0 0 0 1px rgba(255, 222, 165, .25),
    inset 0 0 18px rgba(233, 193, 118, .12);
}
/* Внутренняя тонкая линия — двойная кайма */
.sh-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(233, 193, 118, .4);
}
/* Угловые акценты */
.sh-frame-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sh-gold-light);
}
.sh-frame-corner--tl { top: -2px;    left: -2px;    border-right: none; border-bottom: none; }
.sh-frame-corner--tr { top: -2px;    right: -2px;   border-left: none;  border-bottom: none; }
.sh-frame-corner--bl { bottom: -2px; left: -2px;    border-right: none; border-top: none;    }
.sh-frame-corner--br { bottom: -2px; right: -2px;   border-left: none;  border-top: none;    }

/* Орнамент-фестон под верхней каймой */
.sh-edge-scallop {
  position: absolute;
  inset-inline: 0;
  top: 2px;
  height: 18px;
  z-index: 5;
  opacity: .35;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 C25 20 25 0 50 0 C75 0 75 20 100 20' fill='none' stroke='%23e9c176' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50px 18px;
}

/* ── Внутренняя колонка: вертикальная ритмика ── */
.sh-inner {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin: 0 auto;
  /* top: ~47% меньше (76→40px) — убирает «подушку» над заголовком,
     арка попадает в первый экран; bottom: ~21% меньше (68→54px) —
     сохраняет низовой ритм в пропорции к новому верхнему отступу */
  padding: clamp(26px, 3vw, 40px) 1.25rem clamp(36px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

/* ───────────────────────── 1. ЗАГОЛОВОК ───────────────────────── */
.sh-titleblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.sh-eyebrow {
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .62em;
  text-transform: uppercase;
  color: var(--sh-gold);
  opacity: .75;
  padding-left: .62em; /* компенсация tracking */
}
.sh-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0;
}
.sh-title-main {
  font-family: Cinzel, "PonomarUnicodeTTRegular", serif;
  font-weight: 700;
  text-transform: uppercase;
  /* Larger baseline on phones (38px min) — same desktop cap (60px). */
  font-size: clamp(38px, 6.5vw, 60px);
  line-height: 1.04;
  letter-spacing: .015em;
  background: linear-gradient(to bottom, var(--sh-gold-light) 0%, var(--sh-gold) 46%, var(--sh-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}
.sh-title-sub {
  font-family: Cinzel, "PonomarUnicodeTTRegular", serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.2;
  letter-spacing: .28em;
  padding-left: .28em;
  color: var(--sh-gold);
  opacity: .82;
}

/* Орнаментальная золотая линия */
.sh-ornament-line {
  width: min(300px, 70%);
  height: 10px;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50C20 50 25 30 50 30C75 30 80 50 100 50M0 50C20 50 25 70 50 70C75 70 80 50 100 50' stroke='%23e9c176' stroke-width='0.5' opacity='0.7'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23e9c176'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 80px 40px;
}

/* ──────────────────────── 2. МЕДАЛЬОНЫ ────────────────────────── */
.sh-medallions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}
.sh-med {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  width: 120px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sh-med-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sh-gold);
  /* Объём + эмалевая внутренняя подсветка (чеканка) */
  box-shadow:
    0 8px 20px var(--sh-shadow),
    0 0 0 1px rgba(255, 222, 165, .35),
    inset 0 2px 7px rgba(0, 0, 0, .55),
    inset 0 0 16px rgba(233, 193, 118, .28);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s ease;
}
.sh-med-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Без зума — иконка не обрезается при наведении/нажатии */
  transform: none !important;
}
.sh-med-label {
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sh-cream-soft);
  transition: color .35s ease;
  padding-left: .26em;
  text-align: center;
  line-height: 1.3;
}
.sh-med:hover .sh-med-ring {
  transform: translateY(-5px);
  border-color: var(--sh-gold-light);
  box-shadow:
    0 14px 30px var(--sh-shadow),
    0 0 0 1px var(--sh-glow-strong),
    0 0 34px var(--sh-glow-strong),
    inset 0 2px 7px rgba(7, 20, 12, .45),
    inset 0 0 20px rgba(233, 193, 118, .5);
}
.sh-med:hover .sh-med-label { color: var(--sh-gold-light); }
.sh-med:focus-visible .sh-med-ring {
  outline: 2px solid var(--sh-gold-light);
  outline-offset: 3px;
}

/* Декоративные разделители между медальонами */
.sh-med-sep {
  align-self: center;
  margin-top: -1.6rem; /* поднять к центру кружков */
  color: var(--sh-gold);
  opacity: .45;
  font-size: 13px;
  user-select: none;
  line-height: 1;
}
@media (max-width: 560px) { .sh-med-sep { display: none; } }

/* ───────────────────── 3. АРКА + АНГЕЛЫ ───────────────────────── */
.sh-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  gap: 0;
}

/* Ангелы — обрамляют арку, опираются на нижнюю линию.
   Кликабельны — запускают колокольный звон. */
.sh-angel {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease;
}
.sh-angel:hover    { transform: translateY(-3px) scale(1.02); }
.sh-angel:active   { transform: translateY(-1px) scale(1.0); }
.sh-angel:focus-visible {
  outline: 2px solid var(--sh-gold-light);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Состояние звона — усиленное золотое свечение ангела */
.sh-angel--ringing img {
  filter:
    drop-shadow(0 14px 20px rgba(6, 20, 12, .60))
    drop-shadow(0 2px 5px rgba(6, 20, 12, .45))
    drop-shadow(0 0 26px var(--sh-glow-strong)) !important;
}
.sh-angel img {
  height: 300px;
  width: auto;
  opacity: .92;
  /* Тёплая падающая тень — стоят на сцене.
     !important — выводим ангелов из глобальной системы img.lazy-blur
     (та ставит filter:blur + transform:scale с transition, что
     перекрывало флип и анимировало «поворот» при загрузке). */
  filter:
    drop-shadow(0 14px 20px rgba(6, 20, 12, .60))
    drop-shadow(0 2px 5px rgba(6, 20, 12, .45))
    drop-shadow(0 0 14px var(--sh-glow-soft)) !important;
  transition: none !important;
}
.sh-angel--left  img { transform: scaleX(1)  !important; }
.sh-angel--right img { transform: scaleX(-1) !important; }

/* Полукруглая арка — смысловой центр */
.sh-arch {
  position: relative;
  flex: 1;
  max-width: 600px;
  margin: 0 -22px; /* лёгкий нахлёст ангелов на арку */
  z-index: 2;
}
/* Деликатная подсветка вершины арки — мягко притягивает взгляд к храму */
.sh-arch::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 130px;
  height: 58px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, var(--sh-glow-strong) 0%, transparent 72%);
  opacity: .5;
  pointer-events: none;
  z-index: 3;
}
.sh-arch-rim {
  position: relative;
  padding: 13px 13px 0;            /* толще золотая окантовка — арка весомее */
  background: linear-gradient(to bottom,
      var(--sh-gold-light) 0%, var(--sh-gold) 30%, var(--sh-gold-dark) 60%, var(--sh-gold) 100%);
  clip-path: ellipse(50% 100% at 50% 100%);
  /* Тень под аркой (зелёная) + усиленное золотое свечение ободка */
  filter:
    drop-shadow(0 18px 30px var(--sh-shadow))
    drop-shadow(0 0 34px var(--sh-glow))
    drop-shadow(0 0 12px var(--sh-glow-strong));
}
.sh-arch-frame {
  position: relative;
  height: 340px;
  clip-path: ellipse(50% 100% at 50% 100%);
  overflow: hidden;
}
/* Зум выведен в отдельный анимируемый канал (--sh-pz), а параллакс —
   в --sh-py. Так JS-параллакс (мгновенный, сглаживается в JS) и плавный
   hover-зум (transition только у --sh-pz) не дерутся за один transform. */
@property --sh-pz {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.06;
}
.sh-arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Базовый лёгкий оверскейл (1.06) даёт запас под вертикальный сдвиг
     параллакса (±~10px), чтобы края фото не выглядывали из арки. */
  transform: translate3d(0, var(--sh-py, 0px), 0) scale(var(--sh-pz, 1.06));
  transition: --sh-pz 2.2s ease;
  will-change: transform;
  /* Деликатное усиление: больше локального контраста и яркости (без HDR),
     чтобы храм и купола читались отчётливее. !important выводит фото из
     глобальной системы img.lazy-blur (та ставит filter:blur(0) при загрузке
     и перетёрла бы наш фильтр). */
  filter: contrast(1.06) saturate(1.04) brightness(1.03) !important;
}
.sh-arch:hover .sh-arch-frame img { --sh-pz: 1.1; }
/* Внутренняя тень по краю арки + лёгкое затемнение низа */
.sh-arch-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: ellipse(50% 100% at 50% 100%);
  /* Периферийная виньетка глубже (фокус на куполах/центре) + мягкое
     внутреннее золотистое свечение по краю арки. */
  box-shadow:
    inset 0 0 54px 16px rgba(7, 20, 12, .62),
    inset 0 0 22px 3px rgba(233, 193, 118, .20);
  /* Светлая тема: усиленный нижний контур — храм «садится» в основание арки */
  background: linear-gradient(to top, rgba(7, 20, 12, .72) 0%, rgba(7, 20, 12, .30) 22%, transparent 48%);
}
/* Тёмная тема: мягче нижний контур (фото уже тёмное) */
html.theme-dark .sh-arch-vignette,
html.dark .sh-arch-vignette {
  background: linear-gradient(to top, rgba(7, 20, 12, .55) 0%, transparent 42%);
}

/* Переключение день/ночь */
.sh-church-dark  { display: none !important; }
.sh-church-light { display: block !important; }
html.dark .sh-church-light { display: none !important; }
html.dark .sh-church-dark  { display: block !important; }

/* Кадрирование: храм по центру арки.
   Светлое фото выровнено так же, как тёмное (центр по горизонтали),
   вертикаль опущена — храм встаёт в центр, виден нижний контур. */
.sh-church-light { object-position: 50% 66%; }
.sh-church-dark  { object-position: 50% 52%; }

/* ──────────────────── 4. ЦИТАТА + СВЕЧИ ───────────────────────── */
.sh-quoteblock {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-top: .5rem;
}

.sh-ornament-mini,
.sh-ornament-mini2 {
  width: 160px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sh-glow), transparent);
}

.sh-quote {
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 38px);
  line-height: 1.38;
  letter-spacing: .04em;
  color: var(--sh-cream);
  max-width: 680px;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 0 30px rgba(233, 193, 118, .12);
}

.sh-quote-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
}
.sh-quote-sep .line {
  height: 1px;
  flex-grow: 1;
  max-width: 120px;
  background: linear-gradient(to right, transparent, var(--sh-glow), transparent);
}
.sh-quote-sep svg {
  color: var(--sh-gold);
  opacity: .75;
  flex-shrink: 0;
}
/* Крест-разделитель — как в цитате внизу страницы (без анимаций) */
.sh-quote-cross {
  width: auto;
  height: 26px;
  flex-shrink: 0;
  opacity: .9;
  filter: drop-shadow(0 0 10px var(--sh-glow-soft));
}

.sh-ref {
  font-family: "PonomarUnicodeTTRegular", "Cormorant Garamond", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .58em;
  text-transform: uppercase;
  color: var(--sh-gold-deep);
  padding-left: .58em;
}

/* Свечи — стоят на нижней кайме сцены. Только PNG (2:3) + анимация огонька.
   mix-blend-mode:screen растворяет тёмный фон PNG на зелёном hero:
   чёрные углы исчезают, тёплое янтарное свечение естественно вливается в сцену. */
.sh-candle {
  position: absolute;
  bottom: clamp(16px, 3vw, 40px);
  /* контейнер строго 2:3 — соотношение нового PNG */
  width: clamp(70px, 8vw, 110px);
  height: clamp(105px, 12vw, 165px);
  display: block;
  z-index: 2;
}
.sh-candle--left  { left:  clamp(12px, 7vw, 90px); }
.sh-candle--right { right: clamp(12px, 7vw, 90px); }

.sh-candle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* растворяет тёмный фон PNG — чёрное = прозрачное, янтарное = свечение */
  mix-blend-mode: screen;
}

/* Живой огонёк — единственная анимация на свече.
   Пламя в PNG находится на ~3% сверху изображения.
   С contain 2:3 в контейнере 2:3 изображение заполняет его полностью. */
.sh-flame {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  transform-origin: 50% 100%;
  width: 14px;
  height: 22px;
  background: radial-gradient(ellipse 58% 62% at 50% 72%,
      #fffdf3 0%, #ffe9a8 16%, #ffc24d 38%, #ff8a1e 62%, #ff5e10 82%, rgba(255,94,16,0) 100%);
  border-radius: 50% 50% 47% 47% / 74% 74% 32% 32%;
  filter: blur(.7px);
  opacity: .92;
  animation: sh-flame-flicker 2.4s infinite ease-in-out;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Бело-горячее внутреннее ядро */
.sh-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 50%;
  height: 48%;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46% / 66% 66% 34% 34%;
  background: radial-gradient(ellipse at 50% 64%,
      #ffffff 0%, #fff3c4 42%, rgba(255,224,140,0) 100%);
  filter: blur(.4px);
  animation: sh-core-flicker 1.7s infinite ease-in-out;
}
/* Голубоватое основание у фитиля */
.sh-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(125, 170, 255, .6) 0%, rgba(90, 140, 255, 0) 75%);
  filter: blur(.6px);
}

/* ── Парящие золотые искры ── */
.sh-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.sh-sparks span {
  position: absolute;
  bottom: 12%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sh-gold-light) 0%, var(--sh-gold) 50%, transparent 75%);
  opacity: 0;
  animation: sh-spark-drift 11s infinite ease-in;
  /* Композитим искру на отдельном GPU-слое — её покадровая анимация
     не перерисовывает сцену при прокрутке. */
  will-change: transform, opacity;
  transform: translateZ(0);
}
/* Меньше частиц и симметричнее — фон меньше «шумит». Лишние скрыты. */
.sh-sparks span:nth-child(1) { left: 15%; animation-delay: 0s;   }
.sh-sparks span:nth-child(2) { left: 40%; animation-delay: 3.6s; }
.sh-sparks span:nth-child(3) { left: 60%; animation-delay: 1.8s; }
.sh-sparks span:nth-child(4) { left: 85%; animation-delay: 5.4s; }
.sh-sparks span:nth-child(n+5) { display: none; }

/* ── Плавность прокрутки на ПК ──
   Геро-сцена тяжёлая для отрисовки (несколько radial-gradient, SVG-искры,
   крупная box-shadow-виньетка, тройные drop-shadow у ангелов). Без своего
   слоя браузер перерисовывает всё это, пока секция проходит вьюпорт, —
   отсюда рывки при скролле. Выносим сцену на отдельный композитный слой:
   статичная часть кешируется как текстура, при прокрутке лишь композитится.
   Только для десктопа (hover+точный курсор) — на мобильных экономим память
   слоёв и избегаем артефактов промоушена. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .sh-hero { transform: translateZ(0); }
}

/* ───────────────────────── АНИМАЦИИ ───────────────────────────── */
@keyframes sh-rise-in {
  from { opacity: 0; transform: translateY(11px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sh-rise {
  opacity: 0;
  animation: sh-rise-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes sh-flame-flicker {
  0%, 100% { transform: translateX(-50%) translateZ(0) scale(1)         skewX(0deg);    opacity: .95; }
  20%      { transform: translateX(-50%) translateZ(0) scale(.96, 1.06) skewX(-2deg);   opacity: .88; }
  45%      { transform: translateX(-50%) translateZ(0) scale(1.05, .96) skewX(2deg);    opacity: 1;   }
  68%      { transform: translateX(-50%) translateZ(0) scale(.98, 1.04) skewX(-1.5deg); opacity: .9;  }
  85%      { transform: translateX(-50%) translateZ(0) scale(1.03, .98) skewX(1deg);    opacity: .96; }
}
@keyframes sh-core-flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1);    opacity: .62; }
  50%      { transform: translateX(-50%) scaleY(1.14); opacity: .8;  }
}
@keyframes sh-spark-drift {
  0%   { transform: translateY(0) scale(.7);    opacity: 0; }
  15%  { opacity: .42; }
  85%  { opacity: .2; }
  100% { transform: translateY(-220px) scale(1.15); opacity: 0; }
}

/* ───────────────────────── АДАПТИВ ────────────────────────────── */
@media (max-width: 900px) {
  .sh-angel img    { height: 200px; }
  .sh-arch-frame   { height: 250px; }
  .sh-arch         { max-width: 460px; }
}
@media (max-width: 640px) {
  /* Ангелы остаются — уменьшаются и обрамляют арку */
  .sh-angel img    { height: 132px; }
  .sh-arch         { max-width: 100%; margin: 0 -10px; }
  .sh-arch-frame   { height: 190px; }
  .sh-med-ring     { width: 74px; height: 74px; }
  .sh-med          { width: 96px; }
  /* Свечи компактнее на мобильных (2:3) */
  .sh-candle       { width: 54px; height: 81px; bottom: 12px; }
  .sh-candle--left { left: 10px; }
  .sh-candle--right{ right: 10px; }
  .sh-flame        { top: 0px; width: 9px; height: 14px; left: 50%; }
}
@media (max-width: 380px) {
  .sh-angel img    { height: 108px; }
  .sh-arch-frame   { height: 165px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ВИЗУАЛЬНАЯ ИЕРАРХИЯ — деликатные правки без редизайна.
   Маршрут взгляда: храм в арке → цитата → навигация.
   Все изменения — переопределения значений через один блок.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Фон: затемнить центр, убрать половину бокового свечения ─── */
.sh-hero {
  /* центр сцены чуть темнее → арка «вспыхивает» на его фоне */
  --sh-green-1: #122b20;
  /* боковое свечение свечей вдвое тише → не конкурирует с аркой */
  --sh-glow-soft: rgba(233, 193, 118, .13);
  background:
    /* уменьшенные эллипсы подсветки свечей */
    radial-gradient(ellipse 140px 170px at 13% 86%, var(--sh-glow-soft) 0%, transparent 65%),
    radial-gradient(ellipse 140px 170px at 87% 86%, var(--sh-glow-soft) 0%, transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 36%,
        var(--sh-green-1) 0%, var(--sh-green-2) 52%, var(--sh-green-3) 100%);
}

/* Меньше декоративной «пыльцы» — меньше шума */
.sh-hero::before { opacity: .15; }

/* Искры: реже и заметно тише */
@keyframes sh-spark-drift {
  0%   { transform: translateY(0) scale(.7);         opacity: 0;   }
  15%  { opacity: .32; }
  85%  { opacity: .14; }
  100% { transform: translateY(-220px) scale(1.15);  opacity: 0;   }
}

/* ── 2. Свечи: только PNG + огонёк (размер задан в базовых правилах) ─ */

/* ── 3. Арка: выразительнее, золотой нимб в апексе ─────────────── */
/* Толще ободок → весомее, усиленное свечение ободка */
.sh-arch-rim {
  padding: 12px 12px 0;
  filter:
    drop-shadow(0 20px 36px var(--sh-shadow))
    drop-shadow(0 0 38px rgba(233, 193, 118, .64));
}

/* Тонкий золотой нимб в точке апекса — притягивает взгляд наверх */
.sh-arch::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
  background: radial-gradient(ellipse 72% 52% at 50% 0%,
      rgba(255, 222, 165, .30) 0%,
      rgba(233, 193, 118, .10) 52%,
      transparent 82%);
  pointer-events: none;
  z-index: 10;
}

/* Виньетка: темнее по периметру, центр подсвечен — выделяет купола */
.sh-arch-vignette {
  box-shadow: inset 0 0 58px 14px rgba(7, 20, 12, .65);
  background:
    /* тёплый акцент на куполах (центр/верх арки) */
    radial-gradient(ellipse 58% 46% at 50% 38%,
        rgba(255, 248, 235, .07) 0%, transparent 70%),
    /* периферийное затемнение */
    linear-gradient(to top,
        rgba(7, 20, 12, .82) 0%,
        rgba(7, 20, 12, .28) 22%,
        transparent 52%);
}
html.theme-dark .sh-arch-vignette,
html.dark .sh-arch-vignette {
  background:
    radial-gradient(ellipse 58% 46% at 50% 38%,
        rgba(255, 248, 235, .05) 0%, transparent 70%),
    linear-gradient(to top, rgba(7, 20, 12, .64) 0%, transparent 44%);
}

/* ── 4. Мобильный пересчёт свечей ────────────────────────────────
   Обрабатывается в первом @media (max-width: 640px) выше (54×81, 2:3). */

/* ── Уважение к prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .sh-rise        { opacity: 1; animation: none; }
  .sh-flame,
  .sh-flame::before,
  .sh-candle-glow,
  .sh-sparks span { animation: none; }
  .sh-sparks      { display: none; }
  .sh-flame       { opacity: .9; }
  .sh-med:hover .sh-med-ring img { transform: none; }
  /* Параллакс/зум фото отключаем, но сохраняем базовый оверскейл */
  .sh-arch-frame img { --sh-py: 0px; --sh-pz: 1.06; }
  .sh-arch:hover .sh-arch-frame img { --sh-pz: 1.06; }
}

/* ============================================================
   МОБИЛЬНЫЙ РЕДИЗАЙН HERO (2026-06-04)
   Убрать прямоугольную золотую рамку, крупное фото храма,
   аккуратные медальоны без обрезки, свежий воздух.
   Блок в конце файла — переопределяет правила выше.
   ============================================================ */
@media (max-width: 640px) {
  /* Hero — точно в край экрана (контейнер с внутренним p-4 = 16px) */
  .sh-hero-outer { width: calc(100% + 32px); margin-top: -16px; }

  /* Прямоугольная золотая рамка и углы — убрать
     (тонкая кайма sh-edge сверху/снизу остаётся как деликатный акцент) */
  .sh-frame,
  .sh-frame::before,
  .sh-frame-corner { display: none; }

  /* Внутренние поля сцены компактнее */
  .sh-inner { padding: 22px 0.9rem 30px; gap: 1.4rem; }

  /* На мобилке — крупнее и заметнее, но плотнее по трекингу. */
  .sh-title-main { font-size: clamp(34px, 8.4vw, 46px); }
  .sh-title-sub  { font-size: clamp(15px, 3.8vw, 19px); letter-spacing: .22em; padding-left: .22em; }
  .sh-eyebrow    { letter-spacing: .42em; padding-left: .42em; }

  /* Медальоны — компактные, помещаются втроём без обрезки */
  .sh-medallions { gap: 12px; }
  .sh-med        { width: 84px; gap: .5rem; }
  .sh-med-ring   { width: 62px; height: 62px; border-width: 2px; }
  .sh-med-label  { font-size: 9px; letter-spacing: .14em; padding-left: .14em; line-height: 1.25; }

  /* Фото храма крупным планом: убираем ангелов, арка во всю ширину */
  .sh-angel      { display: none; }
  .sh-arch       { max-width: 100%; margin: 0; }
  .sh-arch-frame { height: 300px; }
  .sh-arch-rim   { padding: 10px 10px 0; }

  /* Цитата компактнее */
  .sh-quote          { font-size: clamp(18px, 5vw, 24px); line-height: 1.32; }
  .sh-ornament-mini,
  .sh-ornament-mini2 { width: 120px; }
}

@media (max-width: 400px) {
  .sh-medallions { gap: 8px; }
  .sh-med        { width: 72px; }
  .sh-med-ring   { width: 56px; height: 56px; }
  .sh-med-label  { font-size: 8.5px; letter-spacing: .1em; padding-left: .1em; }
  .sh-arch-frame { height: 250px; }
  .sh-inner      { padding: 18px 0.7rem 24px; }
}