/* =====================================================================
   KAIJU — мир «Гора под ногами» (world.html). Первый экран — как на главной (hero3d/),
   ниже — карта-гора: картина в слое .wd-cam едет за скроллом, остановки — обычные блоки поверх.
   Места на картине приходят переменными от js/world/world.js: --ph (высота куска), --adv (отрезок
   прокрутки куска), --<место>-x/y/w/h (slots из scene.json). Палитра — брендбук (STYLE.md):
   графит #353535, кирпичный #9D302B (линия маршрута, бирки), лёд — только в Технологиях.
   ===================================================================== */
.wd {
  --wd-ink: #353535;
  --wd-ink-2: #5a5560;
  --wd-paper: rgba(255, 255, 255, 0.94);
  --wd-paper-line: rgba(53, 53, 53, 0.1);
  --wd-brick: #9d302b;
  --wd-ice: rgba(236, 245, 251, 0.9);
  --wd-ice-ink: #9e312a;
  --wd-ice-text: #5b2a26;
  --wd-shadow: 0 1px 2px rgba(38, 42, 66, 0.12), 0 12px 32px -8px rgba(38, 42, 66, 0.3);
  --wd-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wd-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wd-pad: clamp(16px, 2.6vw, 40px);
  position: relative;
  z-index: 2;
  margin-top: calc(var(--hero-ov, 0px) * -1);
  overflow-x: clip;
  container-type: inline-size;
  color: var(--wd-ink);
}

html[data-theme="dark"] .wd {
  --wd-ink: #eef1f7;
  --wd-ink-2: #c6cad6;
  --wd-paper: rgba(17, 20, 28, 0.9);
  --wd-paper-line: rgba(255, 255, 255, 0.1);
  --wd-ice: rgba(14, 26, 38, 0.88);
  --wd-ice-ink: #f4aea6;
  --wd-ice-text: #e9d9d6;
  --wd-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -8px rgba(0, 0, 0, 0.6);
}

.wd ::selection {
  background: #e8c1d7;
  color: #353535;
}

/* ----------------------------- камера ----------------------------- */
.wd-cam,
.wd-over {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  pointer-events: none;
}

.wd-cam { z-index: 0; }

/* маскот едет по картине под наклейками-подписями: тропа уходит за них, как за предметы на карте */
.wd-over { z-index: 1; }
/* реплики маскота — над подписями, чтобы не прятались за ними */
.wd-over.wd-over--say { z-index: 3; }
.wd-stops { position: relative; z-index: 2; pointer-events: none; }
.wd-stops > * { pointer-events: auto; }
.wd-stops > .ws-gap { pointer-events: none; }

.wd-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  will-change: transform;
}

.wd-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.wd-piece img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--wd-ease);
}

.wd-piece.is-in img { opacity: 1; }

/* нахлёст: кусок проявляется поверх предыдущего (первый — поверх пола раздевалки) */
.wd-piece.has-ov {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ov));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ov));
}

/* первый кусок: пол раздевалки рвётся бумажным краем — css/world-tear.css (scripts/world/tear.py) */

.wd-polaroid[hidden],
.wd-pass[hidden] { display: none; }

/* край карты: бумажные «клыки» брендбука, за ними ночь */
.wd-edge {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--strip-h) - 3px);
  height: clamp(16px, 2.4cqw, 38px);
  background: linear-gradient(#f4f1ec, #d9cfc1);
  -webkit-mask: var(--hb-fangs) 0 0 / 720px 100% repeat-x;
  mask: var(--hb-fangs) 0 0 / 720px 100% repeat-x;
  filter: drop-shadow(0 6px 6px rgba(8, 8, 24, 0.5));
}

.wd-edge::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 300vh;
}

/* склейка (29.10) сама кончается нарисованным тёмным листом с «клыками» — CSS-край не нужен */
.wd-edge { display: none; }

/* ночное небо — продолжение картины вниз, под ним звёзды (canvas) */
#wdStrip::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--strip-h, 0px) - 2px);
  height: 320vh;
  z-index: -1;
  background: linear-gradient(#242342 0, #1f1e3b 30vh, #15162a 90vh, #0e0f1d 200vh); /* начало — цвет нарисованного тёмного листа d7/m7 */
}

.wd-stars,
.wd-snow,
.wd-carve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wd-stars { z-index: 1; }
.wd-strip { z-index: 0; }
.wd-tone { position: absolute; inset: 0; z-index: 2; }
.wd-carve { z-index: 3; }
.wd-snow { z-index: 4; }

/* время суток: только оттенок неба сверху кадра — свет нарисован на самой картине */
.wd-tone i {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.wd-tone-a { background: linear-gradient(to bottom, rgba(214, 196, 255, 0.34), rgba(255, 220, 236, 0.12) 30%, transparent 50%); }
.wd-tone-b { background: linear-gradient(to bottom, rgba(255, 212, 150, 0.22), transparent 45%); }
.wd-tone-c { background: linear-gradient(to bottom, rgba(64, 48, 118, 0.26), rgba(236, 132, 170, 0.12) 36%, transparent 60%); }

/* ----------------------------- маршрут ----------------------------- */
/* 30.10 (REDESIGN-30): красная линия снята — путь видно по нарисованной тропе и по фигурке; разметка тропы осталась для маскота */
.wd-route { display: none; }
.wd-route {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  will-change: transform;
}

.wd-route-in { will-change: transform; }

.wd-route-svg {
  display: block;
  width: 100%;
  height: var(--strip-h);
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-route-case { stroke: #fff; stroke-width: clamp(6px, 0.62cqw, 12px); opacity: 0.9; }
.wd-route-ink { stroke: var(--wd-brick); stroke-width: clamp(3px, 0.34cqw, 7px); }
.wd-route-gap { stroke: var(--wd-brick); stroke-width: clamp(3px, 0.3cqw, 6px); stroke-dasharray: 0.1 clamp(9px, 0.9cqw, 16px); opacity: 0.75; }
.wd-route-marks circle { fill: #fff; stroke: var(--wd-brick); stroke-width: clamp(3px, 0.3cqw, 5px); }

/* ----------------------------- свет остановок -----------------------------
   Солнце сверху справа, тени вниз влево (ARTDIRECTION.md, «Свет по времени суток»). Тень любого носителя —
   filter: drop-shadow по его форме, цвет и длина — от остановки (data-light на блоке). */
.wd { --sh: -3px 5px 4px rgba(126, 128, 194, 0.34); }
[data-light="morning"] { --sh: -3px 5px 4px rgba(126, 128, 194, 0.34); --sh-c: rgba(126, 128, 194, 0.32); }
[data-light="day"] { --sh: -2px 4px 2px rgba(138, 143, 200, 0.32); --sh-c: rgba(138, 143, 200, 0.3); }
[data-light="golden"] { --sh: -6px 7px 5px rgba(122, 90, 140, 0.36); --sh-c: rgba(122, 90, 140, 0.34); }
[data-light="sunset"] { --sh: -7px 8px 6px rgba(107, 78, 134, 0.38); --sh-c: rgba(107, 78, 134, 0.36); }
[data-light="dusk"] { --sh: -2px 3px 6px rgba(43, 38, 80, 0.5); --sh-c: rgba(43, 38, 80, 0.45); }

/* ----------------------------- маскот ----------------------------- */
.wd-strip--over { z-index: 1; }

.wd-rider {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(84px, 8.6cqw, 140px);
  aspect-ratio: 308 / 360;
  opacity: 0;
  will-change: transform, opacity;
}

.wd.is-armed .wd-rider { opacity: 1; }

/* контактная тень-эллипс под фигуркой, цвет — тень остановки */
.wd-rider::before {
  content: "";
  position: absolute;
  left: -4%;
  right: 4%;
  bottom: -5%;
  height: 12%;
  background: radial-gradient(closest-side, var(--rider-sh, rgba(126, 128, 194, 0.5)), transparent);
  mix-blend-mode: multiply;
  translate: -8% 0;
}

/* 02.11: без filter — фигурка анимируется каждый кадр, а фильтр на ней заставлял Safari перерисовывать слой */
.wd-rider-in { position: absolute; inset: 0; }

/* фигурка тонируется под свет остановки (рендер студийный — без тона она «выцветшая» на картине) */
.wd[data-light="morning"] { --rider-tone: saturate(1.08); --rider-sh: rgba(126, 128, 194, 0.55); }
.wd[data-light="day"] { --rider-tone: saturate(1.05); --rider-sh: rgba(138, 143, 200, 0.5); }
.wd[data-light="golden"] { --rider-tone: saturate(1.1) sepia(0.06); --rider-sh: rgba(122, 90, 140, 0.55); }
.wd[data-light="sunset"] { --rider-tone: saturate(1.1) sepia(0.05); --rider-sh: rgba(107, 78, 134, 0.6); }
.wd[data-light="dusk"] { --rider-tone: brightness(0.9); --rider-sh: rgba(43, 38, 80, 0.6); }

.wd-rider img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}

.wd-rider img[data-v="back"] { width: 96%; left: 2%; }
.wd-rider img.is-on { opacity: 1; }


@keyframes wd-breathe {
  50% { transform: translateY(-3px) scaleY(1.015); }
}

/* реплика — бумажный флажок на деревянной шпажке, воткнутой в снег рядом с фигуркой (кадр ui-flag-pick — потом).
   Ширина по тексту, переносится; вырастает из снега от основания шпажки. */
.wd-say {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: max-content;
  max-width: min(230px, 62vw);
  padding: 8px 18px 9px 12px;
  color: #353535;
  font: 700 12.5px/1.3 var(--font-wide, "Montserrat", sans-serif);
  letter-spacing: 0.01em;
  text-wrap: balance;
  isolation: isolate;
  filter: drop-shadow(var(--sh));
  opacity: 0;
  transform-origin: 0 100%;
  scale: 1 0.6;
  transition: opacity 0.16s var(--wd-ease), scale 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wd-say::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(200deg, #fffaf6, #fce8f1 70%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

/* шпажка: от нижнего левого угла флажка вниз, к снегу */
.wd-say::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: calc(100% + 34px);
  background: linear-gradient(90deg, #b88a5e, #8a6140);
  z-index: -2;
}

.wd-say.has-art::before { background: var(--art) center / 100% 100% no-repeat; clip-path: none; }
.wd-say.is-on { opacity: 1; scale: 1; }
.wd-say.is-on.is-hid { opacity: 0; scale: 1 0.6; }

.wd-stamp {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  left: 50%;
  top: 40%;
  margin: 0;
  padding: 10px 22px 12px;
  border: 4px solid var(--wd-brick);
  color: var(--wd-brick);
  background: rgba(252, 232, 241, 0.9);
  font: 700 clamp(20px, 3vw, 44px)/1 var(--font-wide, "Montserrat", sans-serif);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--st-r, -4deg)) scale(1.25);
}

.wd-stamp.is-on { animation: wd-stamp 1.3s var(--wd-ease) both; }

@keyframes wd-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--st-r)) scale(1.3); }
  16% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--st-r)) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--st-r)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--st-r)) scale(0.98); }
}

/* ============================== ТОПОНИМЫ (REDESIGN-30) ==============================
   Название раздела напечатано прямо на снегу, как название места на карте: без бумажки и рамки,
   в наклоне земли (вид сверху под углом). Место — переменные --wt-x / --wt-y блока (слоты scene.json или свои),
   наклон — --wt-rx (наклон земли к зрителю) и --wt-rz (поворот по тропе). */
.wt {
  position: absolute;
  left: var(--wt-x, 6%);
  top: var(--wt-y, 0px);
  z-index: 3;
  margin: 0;
  font-family: "Unbounded", "Montserrat", sans-serif;
  font-weight: 600;
  font-size: var(--wt-size, 56px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(53, 53, 53, 0.88);
  white-space: nowrap;
  transform-origin: 0 100%;
  /* наклон земли — плоско: поворот по тропе ≤ 6° и сжатие по высоте 12 %, без перспективы (размер одинаковый у всех) */
  transform: rotate(var(--wt-rz, -3deg)) scaleY(0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.wt--sub { --wt-size: 30px; letter-spacing: 0.1em; }
.wt { color: #2f2a33; }
@media (max-width: 767px) {
  .wt { --wt-size: 30px; }
  .wt--sub { --wt-size: 22px; }
}

/* ============================== НОСИТЕЛИ ТЕКСТА ==============================
   Каждый текст лежит на предмете мира. Пока предметы нарисованы CSS-заглушками (форма — clip-path на ::before,
   тень — drop-shadow по форме, без скруглений и box-shadow); когда генератор сдаст кадр, js/world/world-blocks.js
   ставит его в --art и класс has-art — заглушка уходит, текст остаётся. */
.ws { position: relative; }
.ws-gap { position: relative; pointer-events: none; }
.ws-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wo-label,
.wo-tag,
.wo-sticker,
.wo-sign,
.wo-note,
.wo-ice,
.wo-plank {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(var(--sh));
  color: #353535;
}

.wo-label::before,
.wo-tag::before,
.wo-sticker::before,
.wo-sign::before,
.wo-note::before,
.wo-ice::before,
.wo-plank::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.wo-label.has-art::before,
.wo-tag.has-art::before,
.wo-sticker.has-art::before,
.wo-sign.has-art::before,
.wo-note.has-art::before,
.wo-ice.has-art::before,
.wo-plank.has-art::before {
  background: var(--art) center / 100% 100% no-repeat;
  clip-path: none;
}

.wo-label.has-art::after,
.wo-tag.has-art::after,
.wo-note.has-art::after { display: none; }

/* бумажная этикетка на булавке: бледно-розовая бумага, кирпичная рамка-линия в 2 мм от края, надорванный угол */
.wo-label {
  margin: 0;
  padding: 18px 22px 18px;
  rotate: var(--rot, -1.5deg);
}

.wo-label::before {
  background:
    linear-gradient(#9d302b, #9d302b) 7px 7px / calc(100% - 14px) 1px no-repeat,
    linear-gradient(#9d302b, #9d302b) 7px calc(100% - 7px) / calc(100% - 22px) 1px no-repeat,
    linear-gradient(#9d302b, #9d302b) 7px 7px / 1px calc(100% - 14px) no-repeat,
    linear-gradient(#9d302b, #9d302b) calc(100% - 7px) 7px / 1px calc(100% - 22px) no-repeat,
    linear-gradient(205deg, #fff6fa 0%, #fce8f1 45%, #f4d8e6 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 7px) calc(100% - 9px), calc(100% - 13px) 100%, 0 100%);
}

/* булавка: кирпичная головка, игла уходит в снег */
.wo-label::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  translate: -50% 0;
  background: radial-gradient(circle at 35% 35%, #d06a63 0 2px, #9d302b 3px 6px, transparent 7px);
}

.wo-label--small { padding: 9px 14px 10px; }
.wo-label--small::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.wo-label--small::after { top: -6px; width: 11px; height: 11px; }

.wo-label-title {
  display: block;
  margin: 0;
  font: 700 clamp(22px, 2.1cqw, 36px)/1 var(--font-wide, "Montserrat", sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #353535;
}

.wo-label--small .wo-label-title { font-size: clamp(12px, 0.95cqw, 15px); }

.wo-label-text {
  margin: 10px 0 0;
  max-width: 38ch;
  font: 500 15px/1.5 var(--font-ui, "Montserrat", sans-serif);
  color: #353535;
}

/* бирка на нитке: картон цвета вещи, скошенные углы, люверс, белая нитка вверх */
.wo-tag {
  display: inline-grid;
  justify-items: start;
  gap: 0.15em;
  padding: 1.5em 1em 0.8em;
  color: var(--ink, #353535);
  text-decoration: none;
  transform-origin: 50% -1.2em;
}

.wo-tag::before {
  background:
    radial-gradient(circle at 50% 0.7em, rgba(255, 255, 255, 0.85) 0 0.18em, #f4f1ec 0.2em 0.32em, rgba(0, 0, 0, 0.18) 0.34em, transparent 0.38em),
    linear-gradient(#9d302b, #9d302b) 0.4em 0.4em / calc(100% - 0.8em) 1px no-repeat,
    linear-gradient(#9d302b, #9d302b) 0.4em calc(100% - 0.4em) / calc(100% - 0.8em) 1px no-repeat,
    linear-gradient(#9d302b, #9d302b) 0.4em 0.4em / 1px calc(100% - 0.8em) no-repeat,
    linear-gradient(#9d302b, #9d302b) calc(100% - 0.4em) 0.4em / 1px calc(100% - 0.8em) no-repeat,
    linear-gradient(200deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.06)),
    var(--tone, #fab8d2);
  clip-path: polygon(0.7em 0, calc(100% - 0.7em) 0, 100% 0.7em, 100% 100%, 0 100%, 0 0.7em);
}

.wo-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.7em);
  width: 1.5px;
  height: 1.6em;
  background: #fff;
  translate: -50% 0;
  z-index: -2;
}

/* виниловая наклейка-кнопка: белая вырубка по контуру и блик плёнки */
.wo-sticker {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: #353535;
  font: 700 12px/1 var(--font-wide, "Montserrat", sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--wd-ease), rotate 0.2s var(--wd-ease);
}

.wo-sticker::before {
  inset: 6px 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0 22%, transparent 23%) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
    linear-gradient(var(--st, #fce8f1), var(--st, #fce8f1)) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat,
    #fff;
  clip-path: polygon(3px 0, calc(100% - 6px) 0, 100% 4px, calc(100% - 2px) 100%, 5px 100%, 0 calc(100% - 3px));
}

.wo-sticker--ink { color: #fce8f1; --st: #353535; }
.wo-sticker:active { transform: scale(0.98); }

/* деревянный указатель: доска-стрелка со снегом сверху на столбике */
.wo-sign {
  display: inline-block;
  min-height: 44px;
  padding: 12px 34px 30px 14px;
  color: #2c2219;
  font: 700 13px/1.1 var(--font-wide, "Montserrat", sans-serif);
  text-decoration: none;
  rotate: -2deg;
  transition: transform 0.16s var(--wd-ease), rotate 0.2s var(--wd-ease);
}

.wo-sign::before {
  background:
    linear-gradient(#f7fbff, #e6eef8) 0 0 / 100% 7px no-repeat,
    linear-gradient(90deg, #6d5848, #5a4638) 18px 0 / 9px 100% no-repeat,
    linear-gradient(175deg, #b49a80, #8f765f) 0 4px / 100% calc(100% - 22px) no-repeat;
  clip-path: polygon(0 4px, calc(100% - 22px) 4px, 100% calc((100% - 18px) / 2 + 2px), calc(100% - 22px) calc(100% - 18px), 27px calc(100% - 18px), 27px 100%, 18px 100%, 18px calc(100% - 18px), 0 calc(100% - 18px));
}

.wo-sign span { position: relative; }

/* записка под скотчем: бумага + полоска мятого серебристого скотча сверху */
.wo-note {
  margin: 0;
  padding: 18px 20px 16px;
  font: 500 15px/1.5 var(--font-ui, "Montserrat", sans-serif);
  rotate: var(--rot, 1deg);
}

.wo-note::before {
  background: linear-gradient(200deg, #fffaf6, #fce8f1 60%, #f6dde9);
  clip-path: polygon(0 3px, 100% 0, calc(100% - 2px) 100%, 3px calc(100% - 2px));
}

.wo-note::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 92px;
  height: 20px;
  translate: -50% 0;
  rotate: -3deg;
  background: linear-gradient(100deg, #d9dde3, #f4f6f8 30%, #c3c8d0 55%, #eef0f3 80%, #cfd3da);
  opacity: 0.88;
  clip-path: polygon(2% 0, 98% 6%, 100% 30%, 97% 52%, 100% 78%, 97% 100%, 3% 94%, 0 70%, 3% 45%, 0 20%);
}

/* ледяная плита: голубой лёд со сколотыми краями и изморозью; текст кирпичный, «вморожен» */
.wo-ice { color: #9d302b; }

.wo-ice::before {
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(50% 35% at 100% 100%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(165deg, rgba(240, 249, 254, 0.94), rgba(206, 230, 244, 0.92) 60%, rgba(186, 218, 238, 0.92));
  clip-path: polygon(2% 3%, 30% 0, 62% 2%, 98% 0, 100% 34%, 98% 70%, 100% 97%, 66% 100%, 34% 98%, 0 100%, 1% 62%, 0 30%);
}

/* деревянная планка-подставка */
.wo-plank::before {
  background:
    linear-gradient(#f7fbff, #e8eef7) 0 0 / 100% 6px no-repeat,
    linear-gradient(176deg, #c8ae92, #a78a6e 60%, #8e7259);
  clip-path: polygon(0 3px, 100% 0, 100% calc(100% - 3px), 0 100%);
}

/* кнопки и ссылки на носителях: фокус — кирпичная обводка по форме, наведение — носитель приподнимается */
.wd a:focus-visible,
.wd button:focus-visible {
  outline: 2px solid var(--wd-brick);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .wo-sticker:hover,
  .wo-sign:hover,
  .wo-tag:hover { transform: translateY(-2px); rotate: 1.5deg; }
}

.on-touch { display: none; }

@media (hover: none), (pointer: coarse) {
  .wd .on-touch { display: inline; }
  .wd .on-mouse { display: none; }
}

/* коллекция (канатка) — css/world-lift.css */

/* технологии — css/world-tech.css */

/* ============================== ЖУРНАЛ ============================== */
/* Журнал лежит раскрытым на нарисованном развороте: холст журнала накрывает кусок картины целиком,
   камера журнала решается по углам разворота (data-spread). Механика журнала прежняя. */
.wd .jr3 { margin-top: 0; }
.ws-jr { overflow: visible; }

.ws-jr-box,
.ws-jr .jr3-sticky {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--ph, 60vw);
  pointer-events: none;
}

.ws-jr .jr3-sticky { display: block; min-height: 0; max-height: none; padding: 0; }

.ws-jr .jr3-stage {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  outline-offset: -4px;
}

.ws-jr .jr3-stage:focus-visible { box-shadow: none; outline: 2px solid var(--wd-brick); }

/* под разворотом (REDESIGN-30): планки, «В каталог» и подсказки-таблетки нет. «Журнал» напечатан на снегу справа от доски,
   «Звук» и «Читать крупно» — наклейки на ближнем крае доски, стрелки — круглые наклейки у краёв доски */
.ws-jr .ws-jr-tag {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
}
.ws-jr .ws-jr-tag > * { pointer-events: auto; }
.ws-jr .jr3-title.wt {
  --wt-x: calc(var(--sp-r, 60%) + 28px);
  --wt-y: calc(var(--sp-t, 40%) + 6px);
  --wt-rz: -6deg;
  pointer-events: none;
}
.ws-jr .jr3-track { display: none; }
.ws-jr .jr3-sound,
.ws-jr .ws-jr-open {
  position: absolute;
  top: calc(var(--sp-b, 75%) + 14px);
  min-height: 40px;
  font: 600 12px/1 "Unbounded", "Montserrat", sans-serif;
}
.ws-jr .jr3-sound { left: calc(var(--sp-l, 20%) + 10px); rotate: -3deg; opacity: 1; }
.ws-jr .ws-jr-open { left: calc(var(--sp-l, 20%) + 140px); rotate: 2deg; }
.ws-jr .jr3-sound[aria-pressed="false"] { --st: #e5e3e3; }

.ws-jr .jr3-stage:not(.is-lifted) .jr3-btn {
  top: calc((var(--sp-t, 40%) + var(--sp-b, 75%)) / 2);
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fce8f1;
  color: #353535;
  font: 600 16px/1 "Unbounded", "Montserrat", sans-serif;
  filter: drop-shadow(var(--sh));
}
.ws-jr .jr3-stage:not(.is-lifted) .jr3-btn--prev { left: calc(var(--sp-l, 20%) - 58px); right: auto; }
.ws-jr .jr3-stage:not(.is-lifted) .jr3-btn--next { left: calc(var(--sp-r, 80%) + 14px); right: auto; }
.ws-jr .jr3-stage:not(.is-lifted) .jr3-hint { display: none; }

/* поднятый журнал: на весь экран поверх мира */
.ws-jr .jr3-stage.is-lifted { position: fixed; inset: 0; z-index: 1000; }

.ws-jr .jr3-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 20, 38, 0.78);
  opacity: var(--lift, 0);
  pointer-events: none;
}

.jr3-world-x {
  position: absolute;
  z-index: 4;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background:
    linear-gradient(#fce8f1, #fce8f1) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat,
    #fff;
  clip-path: polygon(3px 0, 100% 2px, calc(100% - 2px) 100%, 0 calc(100% - 3px));
  color: #353535;
  font: 700 13px/1 var(--font-wide, "Montserrat", sans-serif);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.16s var(--wd-ease);
}

.jr3-stage.is-lifted .jr3-world-x { opacity: 1; pointer-events: auto; }
.jr3-world-x:active { transform: scale(0.98); }
.ws-jr.is-flat .jr3-stage { background: #fce8f1; overflow: auto; }

/* ============================== КРАЙ КАРТЫ: растяжка ============================== */
.ws-end-banner {
  position: absolute;
  z-index: 3;
  left: max(16px, var(--sky-x, 22%));
  top: var(--sky-y, 14%);
  width: min(var(--sky-w, 60%), 900px);
  filter: drop-shadow(var(--sh));
}

.wo-banner-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wo-banner-cloth { fill: #e8c1d7; }
.wo-banner-text { font: 700 46px/1 "Unbounded", "Montserrat", sans-serif; letter-spacing: 0.02em; fill: #353535; }
.wo-banner-post { stroke: #6d5848; stroke-width: 12; stroke-linecap: round; }
.ws-end-banner.has-art .wo-banner-cloth,
.ws-end-banner.has-art .wo-banner-post { display: none; }
.ws-end-banner.has-art { background: var(--art) center / 100% 100% no-repeat; }

/* ============================== НОЧЬ ============================== */
.ws-night {
  --ink: #eef0f8;
  --ink-2: #c9cde0;
  --muted: #a9aec7;
  --muted-2: #8e93ad;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  position: relative;
  padding: clamp(36px, 4cqw, 72px) 0 0;
  color: var(--ink);
}

/* нарисованная гирлянда (edge-garland): кадр 3168×1344, свечение ламп — радиальные пятна по альфе лампы, screen */
.ws-garland { position: relative; width: min(100%, 1400px); margin: 0 auto; aspect-ratio: 3168 / 1344; margin-top: -4%; }
.ws-garland img { position: relative; display: block; width: 100%; height: auto; }
.ws-glow {
  position: absolute;
  width: 9.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.85), rgba(255, 200, 120, 0.3) 45%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.ws-glow.is-pink { background: radial-gradient(closest-side, rgba(255, 160, 200, 0.85), rgba(255, 140, 190, 0.3) 45%, transparent); }
.ws-night.is-lit .ws-glow { opacity: 1; transition-delay: calc(var(--i, 0) * 45ms); }

@media not all {
  .ws-night.is-lit .ws-glow { animation: ws-glow 2.6s ease-in-out calc(var(--i, 0) * 0.37s + 1.2s) infinite alternate; }
}

@keyframes ws-glow {
  from { opacity: 1; }
  to { opacity: 0.8; }
}

/* GO КАТАТЬ — наклейка бренда на последнем бумажном крае: контактная тень по форме, без свечения */
.ws-go {
  display: block;
  width: clamp(200px, 22cqw, 360px);
  margin: clamp(10px, 2cqw, 40px) auto clamp(36px, 5cqw, 80px);
  rotate: -6deg;
  filter: drop-shadow(-4px 6px 3px rgba(8, 6, 24, 0.6));
  transition: transform 0.16s var(--wd-ease);
  -webkit-tap-highlight-color: transparent;
}

.ws-go img { display: block; width: 100%; height: auto; }
.ws-go:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .ws-go:hover { transform: translateY(-2px) rotate(1.5deg); }
}

.ws-night .site-footer,
.ws-night .site-footer.sf { background: transparent; border-top: 1px solid var(--line); color: var(--ink); }
.ws-night .sf-logo img { filter: invert(1) brightness(1.4); }

/* ============================== ТЕЛЕФОН ============================== */
@media (max-width: 767px) {
  .wd-rider { width: 76px; }
  .wd-say { font-size: 12px; max-width: min(200px, calc(100vw - 48px)); }

  /* первый экран (кадр не трогаем): белая зона под кадром становится бумагой макета, кнопки — бирка и наклейка */
  .reel--hero3d .reel-ui { background: linear-gradient(200deg, #fffaf6, #fce8f1 70%); }
  .reel--hero3d .sc-cta {
    position: relative;
    isolation: isolate;
    border-radius: 0;
    background: none;
    color: #fce8f1;
    filter: drop-shadow(-3px 5px 4px rgba(126, 128, 194, 0.34));
  }
  .reel--hero3d .sc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #353535;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  }
  .reel--hero3d .h3d-cam {
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(#e8c1d7, #e8c1d7) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat,
      #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: polygon(3px 0, 100% 2px, calc(100% - 2px) 100%, 0 calc(100% - 3px));
    color: #353535;
  }

  /* журнал: тап по развороту поднимает журнал на весь экран; стрелки — только поднятому */
  .ws-jr .jr3-title.wt { --wt-x: 16px; --wt-y: calc(var(--sp-t, 40%) - 52px); --wt-rz: -3deg; }
  .ws-jr .jr3-sound { left: 16px; }
  .ws-jr .ws-jr-open { left: 128px; }
  .ws-jr .jr3-stage:not(.is-lifted) .jr3-btn,
  .ws-jr .jr3-stage:not(.is-lifted) .jr3-hint { display: none; }

  .ws-end { padding: calc(var(--ph, 480px) * 0.12) 16px 0; }
  .ws-end-banner { position: relative; left: auto; top: auto; width: 100%; }
  /* реплика на телефоне — под носителями текста: подписи во всю ширину, флажок виден в просветах картины */
  .wd-over.wd-over--say { z-index: 1; }

  .ws-night { padding-top: 28px; }
}

@media all {
  .wd-piece img { transition: none; }
  .wd-say { transition: opacity 0.2s linear; scale: 1; }
}

/* ============================== ПОД РАЗРЫВОМ ПОЛА: фраза первого экрана (REDESIGN-30) ==============================
   Кадр раздевалки — без текста. Фраза напечатана на снегу сразу под рваным краем пола, как надпись на карте:
   без подложки, с белым ореолом, как у подписей на настоящих картах. Указатель «Смотреть каталог» — у тропы. */
.reel--hero3d .reel-copy { display: none; }
.reel--hero3d .reel-ui { justify-content: flex-end; align-items: flex-end; }
.reel--hero3d .reel-foot { align-items: flex-end; }

.ws-in-copy {
  position: absolute;
  left: var(--title-x, 4%);
  top: var(--title-y, 30%);
  width: var(--title-w, 44%);
  z-index: 3;
  pointer-events: none;
}
.ws-in-title {
  margin: 0;
  max-width: 24ch;
  font-family: "Unbounded", "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #2f2a33;
  text-wrap: balance;
}
.ws-in-sub {
  margin: 12px 0 0;
  font: 500 17px/1.4 "Montserrat", sans-serif;
  color: #353535;
}
.ws-in-title,
.ws-in-sub,
.wt {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 1px rgba(255, 255, 255, 0.6);
}
.ws-in-go {
  position: absolute;
  left: var(--sign-x, 58%);
  top: var(--sign-y, 31%);
  z-index: 3;
  font-family: "Unbounded", "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
}

@media not all {
  .ws-in .ws-in-title { clip-path: inset(0 100% 0 0); transition: clip-path 640ms cubic-bezier(0.22, 1, 0.36, 1); }
  .ws-in .ws-in-sub { opacity: 0; transition: opacity 400ms ease-out 120ms; }
  .ws-in .ws-in-go { opacity: 0; translate: 0 -10px; transition: opacity 200ms ease-out 240ms, translate 260ms cubic-bezier(0.34, 1.4, 0.64, 1) 240ms; }
  .ws-in.is-on .ws-in-title { clip-path: inset(0 -2% -10% 0); }
  .ws-in.is-on .ws-in-sub,
  .ws-in.is-on .ws-in-go { opacity: 1; translate: 0 0; }
}

@media (max-width: 767px) {
  /* первый экран целиком — кадр: без белой полосы под ним; «3D» — маленькая наклейка в правом нижнем углу */
  .reel--hero3d .reel-view { bottom: 0; }
  .reel--hero3d .reel-ui { top: auto; bottom: 0; background: none; padding: 0 16px 16px; }
  .ws-in-title { font-size: 24px; max-width: 15ch; }
  .ws-in-sub { font-size: 15px; margin-top: 12px; }
}
/* наклейка «3D» не должна прятаться под картой, наехавшей на низ кадра */
.reel--hero3d .reel-ui { padding-bottom: calc(var(--world-hero-ov, 0px) + 16px); }
.ws-in-go { white-space: nowrap; font-size: 13px; padding: 16px 40px 52px 18px; min-width: 190px; }
.ws-in-sub { font-weight: 600; }
/* «3D по камере» — маленькая наклейка в углу кадра, а не таблетка посреди пола */
.reel--hero3d .h3d-cam {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  background: #fce8f1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #353535;
  font: 600 11px/1 "Unbounded", "Montserrat", sans-serif;
  letter-spacing: 0.06em;
  rotate: -3deg;
  filter: drop-shadow(-2px 4px 3px rgba(126, 128, 194, 0.4));
  outline: 3px solid #fff;
  outline-offset: -1px;
  position: relative;
}
.reel--hero3d .h3d-cam::after { content: ""; position: absolute; inset: -6px; }
@media (max-width: 767px) {
  .ws-in-go { min-width: 160px; padding: 14px 34px 44px 14px; }
}

/* журнал на доске: тень по форме самого журнала (drop-shadow холста — прозрачен везде, кроме журнала)
   и лёгкий тёплый тон золотого часа, чтобы страницы не были белее снега */
.ws-jr .jr3-stage:not(.is-lifted) canvas {
  filter: sepia(0.08) saturate(1.04) drop-shadow(-2px 3px 2px rgba(110, 72, 90, 0.35)) drop-shadow(-8px 12px 10px rgba(122, 90, 140, 0.32));
}
.ws-jr .ws-jr-open { color: #353535; --st: #fce8f1; }
/* «Журнал» — над дальним краем доски, в стороне от тропы маскота */
.ws-jr .jr3-title.wt { --wt-x: calc(var(--sp-l, 20%) + 10px); --wt-y: calc(var(--sp-t, 40%) - 96px); }
@media (max-width: 767px) {
  .ws-jr .jr3-title.wt { --wt-x: 16px; --wt-y: calc(var(--sp-t, 40%) - 52px); }
}

.ws-in-go { min-width: 220px; padding: 16px 62px 52px 22px; }
@media (max-width: 767px) {
  .ws-in-go { min-width: 180px; padding: 14px 48px 44px 16px; }
}

.ws-jr .ws-jr-tag > *,
.ws-jr .jr3-btn { transition: opacity 200ms ease-out; }
.ws-jr.is-past .ws-jr-tag > *,
.ws-jr.is-past .jr3-stage:not(.is-lifted) .jr3-btn { opacity: 0; pointer-events: none; }
.wd.is-lens-col .wd-rider { opacity: 0; }
/* «Читать крупно» на телефоне — крупная наклейка по центру под доской; тап по самому журналу тоже поднимает его */
@media (max-width: 767px) {
  .ws-jr .jr3-sound { left: 16px; top: calc(var(--sp-b, 75%) + 70px); }
  .ws-jr .ws-jr-open { left: 50%; translate: -50% 0; min-width: 168px; min-height: 48px; font-size: 13px; }
}

/* фигурка прячется, когда её рамка пересекает текст или предмет остановки (world.js, AVOID) */
.wd-rider.is-ducked { opacity: 0 !important; transition: opacity 160ms ease-out; }

/* «О создателях» — меньше, над лентой; журнал прячет наклейки раньше, чем лента подойдёт */
.ws-fd .wt { --wt-size: 30px; letter-spacing: 0.12em; }
@media (max-width: 767px) {
  .ws-fd .wt { --wt-size: 22px; }
  .ws-jr .jr3-title.wt { --wt-y: max(14px, calc(var(--sp-t, 40%) - 52px)); }
}

/* «3D» — наклейка-ассет ui-sticker-btn pill, 132×40 в правом нижнем углу кадра */
.reel--hero3d .h3d-cam {
  min-width: 132px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 0;
  outline: 0;
  background: url("/img/world/assets/ui-sticker-btn/pill-fce8f1-720.webp") center / 100% 100% no-repeat;
  clip-path: none;
  filter: drop-shadow(-2px 4px 3px rgba(126, 128, 194, 0.4));
  color: #353535;
}
@media (max-width: 767px) {
  .reel--hero3d .h3d-cam { background: url("/img/world/assets/ui-sticker-btn/pill-fce8f1-720.webp") center / 100% 100% no-repeat; }
  .ws-in-title { font-size: 22px; max-width: 340px; }
  .ws-in-go { left: auto; right: 16px; }
}
@media (max-width: 767px) {
  .ws-jr .jr3-sound { left: 16px; top: calc(var(--sp-b, 75%) + 14px); }
  .ws-jr .ws-jr-open { left: auto; right: 16px; translate: none; min-width: 168px; }
}
/* компьютер: лента создателей подходит под самую доску — наклейки журнала справа от доски, у дальнего края */
@media (min-width: 768px) {
  .ws-jr .jr3-sound { left: calc(var(--sp-r, 60%) + 18px); top: calc(var(--sp-t, 40%) + 4px); }
  .ws-jr .ws-jr-open { left: calc(var(--sp-r, 60%) + 26px); top: calc(var(--sp-t, 40%) + 58px); }
  .ws-jr .jr3-stage:not(.is-lifted) .jr3-btn { top: calc(var(--sp-t, 40%) + (var(--sp-b, 75%) - var(--sp-t, 40%)) * 0.62); }
}

/* 01.11 фраза под разрывом: вместо ореола у каждой буквы (на ёлках давал грязь — «поплыло») — мягкий снежный просвет под всем блоком */
.ws-in-title,
.ws-in-sub { text-shadow: none; }
.ws-in-copy { isolation: isolate; }
.ws-in-copy::before {
  content: "";
  position: absolute;
  inset: -34% -12% -40% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(250, 248, 252, 0.94) 0%, rgba(250, 248, 252, 0.86) 55%, rgba(250, 248, 252, 0) 100%);
  filter: blur(6px);
  pointer-events: none;
}
/* указатель: надпись лежит вдоль доски (доска нарисована с наклоном вниз вправо) и не вылезает за её острый край */
.ws-in-go { rotate: 0deg; text-align: center; padding: 16px 40px 52px 40px; }
.ws-in-go span { display: inline-block; rotate: 4deg; translate: 0 2px; }
@media (max-width: 767px) {
  .ws-in-copy::before { inset: -10% -24px -34% -24px; filter: blur(4px); background: linear-gradient(rgba(250, 248, 252, 0) 0%, rgba(250, 248, 252, 0.9) 16%, rgba(250, 248, 252, 0.9) 78%, rgba(250, 248, 252, 0) 100%); }
  .ws-in-go { padding: 14px 30px 44px 32px; }
}

/* 02.11 маскот на сноуборде: поворот, наклон и разворот считает world.js (transform у .wd-rider-in, вокруг доски);
   два ракурса смешиваются по opacity, без резкой подмены; на месте — дышит */
.wd-rider-in { transform-origin: 50% 88%; will-change: transform; }
.wd-rider img { transition: none; transform-origin: 50% 100%; }
.wd-rider.is-still img { animation: wd-rider-breathe 2.6s ease-in-out infinite; }
@keyframes wd-rider-breathe { 50% { transform: translateY(-1.5%) scaleY(1.012); } }
/* раскадровка езды: лента 24 кадра, кадр выбирает world.js (background-position) */
.wd-rider-run {
  position: absolute;
  inset: 0;
  background: no-repeat 0 100% / 2400% 100%;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wd-rider.is-still img { animation: none; }
}

/* 02.11 Safari: полноэкранные холсты над картой — лишние слои на каждом кадре прокрутки.
   Снег и след доски при выключенном движении не рисуются — убираем слои совсем; звёзды прячет world-fx, пока ночь не в кадре */
.wd-snow,
.wd-carve { display: none; }
.wd-stars.is-off { visibility: hidden; }