/* Праздник роста Пыха (js/ui/grow.js) и трещинки на яйце в шапке карты. Стиль Б «книжка 60-х»: чернильный контур,
   бумажные обрывки 4 красок листа Б. Анимируются только transform и opacity; сцену двигает grow.js (Web Animations),
   здесь — покачивание яйца на карте, «говорит», кольцо «коснись» и вид обрывков. Спокойные герои (data-motion="off"),
   заморозка для снимков (?still: life.freeze ставит data-still) и «Уменьшить движение» — без покачивания и кольца. */

/* ---------- трещинки поверх яйца (карта: .pyh-pic; сцена: .grow-body) ---------- */
.egg-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.egg-cracks path { fill: var(--c-ink); stroke: var(--c-ink); stroke-width: 1.3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pyh-badge .egg-cracks path { stroke-width: 1.7px; }   /* яйцо в шапке 64 px: трещинка заметна и при плотности 1× */

/* две трещинки — яйцо в шапке карты покачивается ±2° от низа; трещинки качаются вместе с ним. Пых спит по лимиту
   (кнопка выключена) — яйцо тоже спит: не качается, даже если вылупление ждёт утра */
.pyh-badge[data-cracks="2"] .pyh-img, .pyh-badge[data-cracks="2"] .egg-cracks { transform-origin: 50% 96%; animation: grow-rock 3.4s ease-in-out infinite; }
.pyh-badge.is-asleep .pyh-img, .pyh-badge.is-asleep .egg-cracks { animation: none; }
@keyframes grow-rock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* ---------- сцена роста в гнезде ---------- */
.stage-bg.zone-nest { background-color: #f6e7b8; }
.grow { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: end center; padding-bottom: 2vh; }
.grow-pyh { position: relative; display: grid; place-items: end center; transform-origin: 50% 96%; }
.grow-body { position: relative; line-height: 0; transform-origin: 50% 96%; }
.grow-img { display: block; height: clamp(150px, 36vh, 320px); width: auto; filter: drop-shadow(0 3px 0 rgba(34, 48, 74, .18));
  -webkit-touch-callout: none; -webkit-user-drag: none; pointer-events: none; }
/* подросток после роста — выше: видно, что вырос */
.grow[data-stage="teen"] .grow-img { height: clamp(170px, 40vh, 360px); }
/* у картинки яйца справа обрезан чужой зелёный край — в крупной сцене он виден, подрезаем (пар и окошко не задеты) */
.grow.is-egg:not([data-stage]) .grow-img { clip-path: inset(0 5% 0 0); }
/* у малыша, ученика и подростка хвост и крыло срезаны ровно по левому краю картинки, снизу — полоска коврика: в крупной
   сцене на соломе гнезда это читается как вырезанный прямоугольник. Пока «Картинки» не перережут pyh-*.webp с полным
   хвостом, края растушёвываем (маска неподвижна — анимируются по-прежнему только transform и opacity) */
.grow:not(.is-egg) .grow-img, .grow[data-stage] .grow-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to top, transparent 0, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to top, transparent 0, #000 6%);
  mask-composite: intersect; }
/* мягкая тень на полу гнезда: Пых стоит, а не висит */
.grow-floor { position: absolute; left: 50%; bottom: -6px; width: 78%; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 48, 74, .22), rgba(34, 48, 74, 0)); }
/* затемнение «спокойной» смены картинки: тёмное пятно поверх Пыха, только opacity */
.grow-dim { position: absolute; inset: -12% -16%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 48, 74, .78), rgba(34, 48, 74, .5) 55%, rgba(34, 48, 74, 0)); }

/* говорит — медленное покачивание ±1° за 0,6 с (не прыжки: нарисованная земля не скачет) */
.grow-pyh.is-talking { animation: grow-talk .6s ease-in-out infinite alternate; }
@keyframes grow-talk { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }

/* обрывки и скорлупки вылетают из груди Пыха (точка .grow-fx) */
.grow-fx { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.grow-bit { position: absolute; left: -6px; top: -8px; width: 12px; height: 16px; background: var(--c); box-shadow: 1px 1px 0 rgba(34, 48, 74, .45); will-change: transform, opacity; }
.grow-bit.is-1 { width: 14px; height: 10px; clip-path: polygon(0 10%, 100% 0, 85% 100%, 8% 82%); }
.grow-bit.is-2 { width: 11px; height: 13px; clip-path: polygon(50% 0, 100% 100%, 0 88%); }
.grow-shell { position: absolute; left: -16px; top: -12px; width: 32px; height: 24px; display: block; will-change: transform, opacity; }
.grow-shell svg { display: block; width: 100%; height: 100%; }

/* ждём касания (без него браузер не пустит голос): вся сцена — кнопка, вокруг Пыха — пунктирное кольцо */
.grow-tap { position: absolute; inset: 0; z-index: 3; min-width: 72px; min-height: 72px; padding: 0; background: none; border: 0; cursor: pointer;
  touch-action: manipulation; -webkit-touch-callout: none; }
.grow-tap:focus-visible { outline: 3px solid var(--c-pyh); outline-offset: -6px; }
.grow.is-waiting .grow-pyh::before { content: ''; position: absolute; left: -14%; right: -14%; top: -8%; bottom: -10%; border: 3px dashed var(--c-pyh);
  border-radius: 50%; animation: grow-ring 1.4s ease-in-out infinite alternate; pointer-events: none; }
@keyframes grow-ring { from { opacity: .35; transform: scale(.96); } to { opacity: 1; transform: scale(1.03); } }

/* спокойно: ни покачивания, ни кольца в движении (сцену grow.js и так играет без тряски и конфетти) */
.grow.is-calm .grow-pyh.is-talking, .grow.is-calm.is-waiting .grow-pyh::before { animation: none; }
:root[data-motion="off"] .pyh-badge .pyh-img, :root[data-motion="off"] .pyh-badge .egg-cracks,
:root[data-motion="off"] .grow-pyh.is-talking, :root[data-motion="off"] .grow.is-waiting .grow-pyh::before,
:root[data-still] .pyh-badge .pyh-img, :root[data-still] .pyh-badge .egg-cracks,
:root[data-still] .grow-pyh.is-talking, :root[data-still] .grow.is-waiting .grow-pyh::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pyh-badge .pyh-img, .pyh-badge .egg-cracks, .grow-pyh.is-talking, .grow.is-waiting .grow-pyh::before { animation: none; }
}

@media (max-width: 700px) {
  .grow-img { height: clamp(140px, 30vh, 240px); }
  .grow[data-stage="teen"] .grow-img { height: clamp(160px, 34vh, 280px); }
}