/* =========================================================================================
   HolyHome Web — СЦЕНА ГЛАВНОЙ «СОБИРАЕМ ДОМАШКУ».

   Замысел владельца (21.09.2026, по его референсу): люди вместе собирают пазл, и пазл —
   это наш дом. Смысл не декоративный: домашка и есть люди, которые приносят каждый своё,
   а вместе получается дом. Поэтому кусочки взяты в цветах наших форматов, а фигуры —
   живые люди, а не абстрактные руки (первая версия с руками была отвергнута: «руки
   слишком длинные, хочется баланса и красоты»).

   ТЕХНИЧЕСКИЕ РЕШЕНИЯ И ПРИЧИНЫ
   · Чистый CSS без скриптов: страницу открывают с телефона в зале со слабым интернетом,
     анимация обязана идти, даже если скрипт не догрузился.
   · Двигаются ТОЛЬКО transform и opacity — их считает видеокарта. Анимация ширины или
     отступов дёргается на слабых телефонах (этот дефект нам уже находил детектор).
   · 🔴 ОДИН ОБЩИЙ ПЕРИОД. Все анимации сцены длятся ровно --loop и зациклены. Внутри
     периода каждый элемент живёт своими процентами. Так десятки элементов идут синхронно
     БЕЗ единой строчки скрипта: раздельные длительности неизбежно разъезжаются через
     несколько повторов, и сцена начинает «сыпаться».
   ========================================================================================= */

.scene{
  --loop:11s;              /* полный цикл: сборка → любование → мягкий роспуск */
  --skin:#E8B99A;          /* тёплый нейтральный тон кожи */
  --skin-2:#D9A57F;        /* вторая фигура — чуть глубже, люди разные */
  --hair:#2C2620;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin:10px 0 30px;
}
:root[data-theme="light"] .scene{ --hair:#3A3129; }

.scene svg{
  width:100%; max-width:440px; height:auto; overflow:visible;
}

/* Мягкое пятно за сценой — то же, что в референсе: фигуры не висят в пустоте,
   а стоят «в комнате». Только фон, никакой информации. */
.sc-glow{ fill:var(--brand-soft); opacity:.8; }
:root[data-theme="light"] .sc-glow{ fill:var(--accent-soft); opacity:.55; }

/* ═══════════ КУСОЧКИ ПАЗЛА ═══════════ */
.pc{ transform-box:fill-box; transform-origin:center; }
.pc .tint{
  fill:var(--fmt); fill-opacity:.3;
  stroke:var(--fmt); stroke-opacity:.66; stroke-width:1.5;
  stroke-linejoin:round;
}
/* В светлой теме подобранные мягкие тона работают как задумано; в тёмной они
   рассчитаны на мелкие плашки и на крупной фигуре сливаются в один тёмный квадрат. */
:root[data-theme="light"] .pc .tint{
  fill:var(--fmt-soft); fill-opacity:1;
  stroke:var(--fmt-line); stroke-opacity:1;
}
.pc .fill{ fill:var(--surface); }

/* ═══════════ ЛЮДИ ═══════════
   Плоские фигуры без контура — как в референсе. Свитер у каждого в цвете своего
   кусочка: видно, кто что принёс. */
.person .cloth{ fill:var(--fmt); }
.person .pants{ fill:var(--ink); opacity:.88; }
.person .skin{ fill:var(--skin); }
.person.alt .skin{ fill:var(--skin-2); }
.person .hair{ fill:var(--hair); }
.person .arm.far{ opacity:.55; stroke-width:7; }
.person .arm{
  stroke:var(--skin); stroke-width:8.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.person.alt .arm{ stroke:var(--skin-2); }
.person .sleeve{
  stroke:var(--fmt); stroke-width:11.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.person .shoe{ fill:var(--ink); }
.person .shadow{ fill:var(--ink); opacity:.09; }
:root[data-theme="light"] .person .shadow{ opacity:.07; }

/* ═══════════ ДОМ ═══════════ */
.sc-logo path{
  stroke:var(--ink); stroke-width:5.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.sc-logo .heart{ fill:var(--accent); stroke:none; }

/* ═══════════ ДЕКОР ═══════════
   Несколько штрихов вокруг — в референсе они держат композицию и не дают ей
   выглядеть вырезанной. Двигаются еле заметно, чтобы кадр дышал. */
.sc-dot{ fill:var(--accent); }
.sc-ring{ stroke:var(--sage); stroke-width:2.4; fill:none; }
.sc-wave{ stroke:var(--sand); stroke-width:2.6; fill:none; stroke-linecap:round; }
.sc-spark{ stroke:var(--brand); stroke-width:2.8; fill:none; stroke-linecap:round; }

/* ═══════════ ДВИЖЕНИЕ ═══════════
   Раскадровка общего периода (проценты от --loop):
     0–18   люди подносят кусочки, пазл складывается
     18–34  дом прорисовывается, появляется сердце и имя
     34–74  ЛЮБОВАНИЕ: всё на месте, сцена еле заметно дышит
     74–88  люди мягко забирают кусочки обратно
     88–100 пауза перед новым кругом
   Пауза в конце важна: без неё цикл ощущается как дёрганый конвейер. */

.pc{
  animation:pc-loop var(--loop) var(--ease, cubic-bezier(.34,.9,.3,1)) infinite;
  animation-delay:var(--d);
}
@keyframes pc-loop{
  0%   { opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9); }
  8%   { opacity:1; }
  16%  { opacity:1; transform:translate(0,0) rotate(0) scale(1.03); }
  20%, 74% { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
  88%, 100%{ opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9); }
}

.person{
  transform-box:fill-box; transform-origin:center bottom;
  animation:person-loop var(--loop) cubic-bezier(.34,.9,.3,1) infinite;
  animation-delay:var(--d);
}
@keyframes person-loop{
  0%   { opacity:0; transform:translate(var(--px), var(--py)); }
  10%  { opacity:1; }
  18%, 72% { opacity:1; transform:translate(0,0); }
  86%, 100%{ opacity:0; transform:translate(var(--px), var(--py)); }
}

/* Дыхание фигуры во время любования — крошечное, на грани заметности. Именно оно
   отличает живую сцену от замершей картинки: глазу есть за что зацепиться. */
.person .body{
  transform-box:fill-box; transform-origin:center bottom;
  animation:breathe var(--loop) ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes breathe{
  0%, 30%, 100% { transform:translateY(0) scaleY(1); }
  46% { transform:translateY(-.6px) scaleY(1.012); }
  62% { transform:translateY(0) scaleY(1); }
}

.sc-logo path{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:draw-loop var(--loop) ease infinite;
  animation-delay:var(--d);
}
@keyframes draw-loop{
  0%, 18% { stroke-dashoffset:var(--len); opacity:1; }
  30%     { stroke-dashoffset:0; }
  30.01%, 74% { stroke-dashoffset:0; opacity:1; }
  84%, 100%   { stroke-dashoffset:0; opacity:0; }
}
.sc-logo .heart{
  transform-box:fill-box; transform-origin:center;
  animation:heart-loop var(--loop) cubic-bezier(.2,1.5,.4,1) infinite;
}
@keyframes heart-loop{
  0%, 31% { opacity:0; transform:scale(.3); }
  36%     { opacity:1; transform:scale(1.14); }
  40%, 52%{ opacity:1; transform:scale(1); }
  /* один тихий удар сердца в середине любования — «дом живой» */
  57%     { transform:scale(1.1); }
  62%, 74%{ opacity:1; transform:scale(1); }
  84%, 100%{ opacity:0; transform:scale(.3); }
}

.scene-word{
  font-size:clamp(21px, 2.7vw, 28px); font-weight:900; letter-spacing:-.02em;
  animation:word-loop var(--loop) ease infinite;
}
.scene-word .ho{ color:var(--ink); }
.scene-word .me{ color:var(--accent); }
@keyframes word-loop{
  0%, 32% { opacity:0; transform:translateY(7px); }
  40%, 74%{ opacity:1; transform:translateY(0); }
  84%, 100%{ opacity:0; transform:translateY(7px); }
}

.sc-deco{
  transform-box:fill-box; transform-origin:center;
  animation:deco-loop var(--loop) ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes deco-loop{
  0%, 20% { opacity:0; transform:translateY(4px) scale(.7); }
  34%     { opacity:.9; transform:translateY(0) scale(1); }
  50%     { transform:translateY(-2.5px) scale(1); }
  66%     { transform:translateY(0) scale(1); }
  74%     { opacity:.9; }
  84%, 100%{ opacity:0; transform:translateY(4px) scale(.7); }
}

/* 🔴 ДОСТУПНОСТЬ. От движения на экране часть людей укачивает — это настоящая причина
   закрыть страницу, а не придирка. Кому оно неприятно, тот видит собранный дом сразу
   и неподвижно: ни одного перемещения, ни одного повтора. */
@media (prefers-reduced-motion:reduce){
  .scene *{ animation:none !important; }
  .pc, .person, .sc-deco{ opacity:1; transform:none; }
  .sc-logo path{ stroke-dashoffset:0; }
  .sc-logo .heart, .scene-word{ opacity:1; transform:none; }
}