/* Первый экран коллажем: картина-фон, крупный заголовок, вырезки из музейных вещей и рисованные штрихи */
.ch { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; background: var(--paper); --u: min(1vw, 1.62svh); --pmx: 0; --pmy: 0; --sp: 0; }
.ch__bg { position: absolute; inset: -3%; z-index: 0; transform: translate3d(calc(var(--pmx) * -14px), calc(var(--pmy) * -10px + var(--sp) * 90px), 0) scale(calc(1 + var(--sp) * .06)); will-change: transform; }
.ch__bgi { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.ch__bgi.is-on { opacity: 1; }
.ch__bgi img { width: 100%; height: 100%; object-fit: cover; }
.ch__bgi[data-w="fr"] img { object-position: 50% 26%; }
.ch__bgi[data-w="ar"] img { object-position: 50% 0%; }
.ch__bgi[data-w="cn"] img { object-position: 50% 0%; }
/* светлая дымка сверху под заголовок и лёгкая тень снизу, чтобы вырезки стояли на земле */
.ch__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(244, 237, 225, .9) 0%, rgba(244, 237, 225, .72) 24%, rgba(244, 237, 225, .25) 44%, rgba(244, 237, 225, 0) 58%), linear-gradient(0deg, rgba(30, 20, 12, .2), rgba(30, 20, 12, 0) 26%); }

/* коллаж внутри сцены: под ним миры, окно в мир раскрывается поверх */
.stage__sticky > .ch { position: absolute; inset: 0; height: auto; min-height: 0; z-index: 0; }
/* Пока окно в мир не раскрылось, слой мира невидим, но лежит поверх коллажа и
   забирал клики: кнопка «Записаться на пробный урок» не нажималась (25.10).
   Клики берёт только мир, который встал на место (is-active) */
.stage.is-col .world:not(.is-active) { pointer-events: none; }
.ch.is-covered .ch__stage, .ch.is-covered .ch__bg { visibility: hidden; }
/* рамка окна, которое раскрывается из коллажа: светлая линия снаружи и золотая внутри, видна на любой картине */
.stage.is-col .frame .frame__out { stroke: #F6EFE2; stroke-width: 3; }
.stage.is-col .frame .frame__in { stroke: var(--gold); stroke-width: 1.6; stroke-opacity: 1; }
.ch__head { position: absolute; z-index: 4; left: 0; right: 0; top: calc(64px + 4.5svh); padding: 0 var(--pad); text-align: center; transform: translate3d(0, calc(var(--sp) * -60px), 0); opacity: calc(1 - var(--sp) * 1.4); }
.ch__title { margin: 0; font: 400 min(7.2vw, 10.4svh)/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.ch__l1 { display: block; }
.ch__l2 { display: block; margin-top: .02em; font-family: var(--f-italic); font-style: italic; }
.ch__l2 .slot { vertical-align: top; }
.ch .slot > span + span { left: 0; right: 0; text-align: center; }
.ch__l2 [data-w="fr"] { color: var(--coral); }
.ch__l2 [data-w="ar"] { color: var(--teal); }
.ch__l2 [data-w="cn"] { color: var(--cinnabar); }
.ch__lead { margin: min(2.2svh, 20px) auto 0; max-width: 520px; font-size: 18px; line-height: 1.45; color: var(--ink); }
/* мягкая светлая дымка за заголовком и строкой: текст читается на любой картине */
.ch__head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -12%; width: min(1180px, 96vw); height: 124%; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgba(244, 237, 225, .9), rgba(244, 237, 225, .72) 48%, rgba(244, 237, 225, .3) 78%, rgba(244, 237, 225, 0)); }
.ch__cta { margin-top: min(3svh, 28px); }

.ch__stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cset { position: absolute; inset: 0; visibility: hidden; }
.cset.is-on, .cset.is-out { visibility: visible; }
.pc { --ew: var(--w); position: absolute; z-index: var(--z, 1); left: calc(50% + (var(--x) - var(--w) / 2) * var(--u)); top: max(calc(var(--y) * 1%), calc(var(--hb, 0px) + var(--hg, -9999px))); width: calc(var(--w) * var(--u)); }
.pc__p { transform: translate3d(calc(var(--pmx) * var(--d, .5) * 46px + var(--sp) * var(--dir, 0) * 160px), calc(var(--pmy) * var(--d, .5) * 30px - var(--sp) * var(--d, .5) * 220px), 0); will-change: transform; }
.pc__e { opacity: 0; transform: translate3d(0, 40px, 0) scale(.84) rotate(var(--r0, -5deg)); transition: opacity .5s var(--ease), transform 1s cubic-bezier(.3, 1.45, .55, 1); transition-delay: calc(var(--i, 0) * 70ms + 60ms); }
.cset.is-on .pc__e { opacity: 1; transform: none; }
.cset.is-out .pc__e { opacity: 0; transform: translate3d(0, -30px, 0) scale(.94); transition: opacity .42s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 35ms); }
.pc__f { rotate: var(--r, 0deg); animation: pfloat var(--fd, 6s) ease-in-out infinite; animation-delay: var(--fdl, 0s); transform-origin: var(--fo, 50% 50%); }
@keyframes pfloat { 50% { translate: 0 calc(var(--fa, 8) * -1px); rotate: calc(var(--r, 0deg) + var(--fr, 1deg)); } }
.pc img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(35, 22, 12, .26)); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pc--ground img { filter: drop-shadow(0 6px 6px rgba(35, 22, 12, .34)) drop-shadow(0 24px 30px rgba(35, 22, 12, .18)); }
/* город из вырезанных открыток: бумажный край и короткая тень, будто наклеено на картину */
.pc--city img { filter: drop-shadow(0 3px 4px rgba(35, 22, 12, .3)) drop-shadow(0 14px 18px rgba(35, 22, 12, .16)); }
/* лампа висит на рисованной цепочке и качается */
.pc--hang .pc__f { transform-origin: 50% -40%; animation-name: pswing; }
@keyframes pswing { 0%, 100% { rotate: calc(var(--r, 0deg) - 3deg); } 50% { rotate: calc(var(--r, 0deg) + 3deg); } }

/* рисованные штрихи: три варианта линии мигают по очереди, линия «дышит» */
.dd svg { display: block; width: 100%; height: auto; overflow: visible; }
.dd path { fill: none; stroke: var(--ink); stroke-width: var(--sw, 2.2); stroke-linecap: round; stroke-linejoin: round; }
.pc__f { position: relative; }
.pc--hang svg { position: absolute; left: 50%; bottom: 96%; width: 12%; translate: -50% 0; }
.dd .fill path { fill: #F7F0E3; }
.dd .b { visibility: hidden; animation: boil .48s steps(1, end) infinite; }
.dd .b1 { animation-delay: -.16s; }
.dd .b2 { animation-delay: -.32s; }
@keyframes boil { 0% { visibility: visible; } 33.33% { visibility: hidden; } }
.dd__t { position: absolute; left: 0; right: 0; top: 0; height: 74%; display: grid; place-items: center; font-size: calc(var(--ew) * var(--u) * .2); line-height: 1; color: var(--ink); white-space: nowrap; }
.dd__t[lang="fr"] { font-family: var(--f-italic); font-style: italic; }
.dd__t[lang="ar"] { font-family: var(--f-ar); font-size: calc(var(--ew) * var(--u) * .25); }
.dd__t[lang="zh"] { font-family: var(--f-cn); font-size: calc(var(--ew) * var(--u) * .23); }

@media (max-width: 899px) {
  .ch { --u: 1vw; min-height: 600px; }
  .ch__head { top: calc(64px + 2.5svh); }
  .ch__title { font-size: min(12.2vw, 7.4svh); }
  .ch__lead { max-width: 330px; font-size: 15px; }
  .ch__cta .btn { height: 50px; padding: 0 22px; font-size: 15px; }
  /* на телефоне ни одна вещь не поднимается выше кнопки записи, даже на коротком экране */
  .pc { --ew: var(--mw, var(--w)); left: calc(50% + (var(--mx, var(--x)) - var(--mw, var(--w)) / 2) * var(--u)); top: max(calc(var(--my, var(--y)) * 1%), calc(var(--hb, 0px) + var(--hg, 14px))); width: calc(var(--mw, var(--w)) * var(--u)); }
  .pc[data-m="0"] { display: none; }
  .ch__veil { background: linear-gradient(180deg, rgba(244, 237, 225, .9) 0%, rgba(244, 237, 225, .75) 30%, rgba(244, 237, 225, .2) 46%, rgba(244, 237, 225, 0) 56%), linear-gradient(0deg, rgba(30, 20, 12, .2), rgba(30, 20, 12, 0) 24%); }
}
@media (prefers-reduced-motion: reduce) {
  .pc__f, .dd .b { animation: none; }
  .dd .b0 { visibility: visible; }
  .pc__e { transition: opacity .3s; transform: none; }
}