/* Мир Xantara — три экрана в стиле Marbert Rocel.
   Тёмное сливовое небо, мягкие рисованные слои, зерно бумаги. */
:root{
  --night:#2b2431;
  --night-2:#3a3140;
  --ink:#b3ab9f;            /* цвет букв у них: тёплый серо-бежевый, не белый */
  --muted:#8f877d;
  --peach:#e9b48f;
  --red:#d2493e;
  --f-hand:'Balsamiq Sans', 'Comic Sans MS', cursive;   /* один шрифт на весь сайт — как в меню */
  --f-head:'Balsamiq Sans', 'Comic Sans MS', cursive;
  --f-type:'Balsamiq Sans', 'Comic Sans MS', cursive;
  --soft:0 0 1px rgba(179,171,159,.75), 0 0 2.5px rgba(179,171,159,.28);   /* мягкий край букв, как у них */
}
*{ box-sizing:border-box; }
html{ background:#1d1a1d; }
body{ margin:0; background:#1d1a1d; color:var(--ink); font:400 17px/1.5 var(--f-type); -webkit-font-smoothing:antialiased; overflow-x:clip; text-shadow:var(--soft); }
img{ display:block; max-width:100%; }

/* Бумага поверх всего, как у них: мелкое ровное зерно с волокнами —
   одним слоем на весь экран, поэтому сцена читается как одна
   напечатанная картинка. Цвета чуть приглушены. */
/* зерно бумаги — только на фоне: на сиреневой колонке-арке и чуть
   слабее на тёмных полях. Картинки (облака, звери, банка, горы, видео)
   без зерна. */
.sky::after, .col::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:url(mir/bumaga.png) 0 0 / 256px 256px repeat; mix-blend-mode:soft-light; }
.sky::after{ opacity:.09; }
.col::after{ opacity:.14; }
.stage{ filter:saturate(.97) contrast(.99); }

/* ---------- мир ---------- */
.mir{ position:relative; height:360vh; height:360svh; }
/* телефон: та же хореография, но скролл короче — 2,05 экрана вместо 2,6 */
@media (max-width:759px){ .mir{ height:305vh; height:305svh; } }
.stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
/* фон как у них: тёплый тёмный, по центру чуть светлее, к краям уходит в #1d1a1d */
.sky{ position:absolute; inset:0; background:radial-gradient(120% 95% at 50% 52%, #2d282c 0%, #29242a 40%, #221e22 72%, #1d1a1d 100%); }
/* колонка мира, как у них: светлее боков, с бумажным зерном */
.col{ height:420vh; background-color:#3b3243;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .95 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(#3d3446, #3d3446); }
.L{ position:absolute; left:50%; top:0; visibility:hidden; will-change:transform, opacity; pointer-events:none; }
img.L{ max-width:none; }

/* фильм */
.film{ text-align:center; pointer-events:auto; }
.film .kicker{ margin:0 0 16px; font:400 15px/1 var(--f-hand); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.screen{ position:relative; aspect-ratio:16/9; border-radius:0; overflow:hidden; background:#000;
}
.screen .poster, .screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* обложка — чёрный экран с тем же бумажным зерном, что фон сайта, по
   центру кнопка в стиле «Велком в лс»: персиковая таблетка, тёмный текст.
   Весь экран — кнопка. */
.screen .poster{ cursor:pointer; display:grid; place-items:center; background:#0d0b0e; transition:opacity .4s; }
.screen .poster::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:url(mir/bumaga.png) 0 0 / 256px 256px repeat; mix-blend-mode:screen; opacity:.035; }
.vkl{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px; padding:16px 30px 16px 26px; border-radius:999px; background:var(--peach);
  transition:transform .3s cubic-bezier(.2,0,0,1); }
.vkl .krug{ display:contents; }
.vkl .krug svg{ width:20px; height:20px; fill:var(--night); }
.vkl b{ font:700 clamp(17px, 1.5vw, 22px)/1 var(--f-hand); letter-spacing:.1em; text-transform:uppercase; color:var(--night); text-shadow:none; }
.screen .poster:hover .vkl{ transform:translateY(-2px); }
@media (max-width:600px){ .vkl{ padding:12px 22px 12px 18px; } .vkl b{ font-size:16px; } .vkl .krug svg{ width:16px; height:16px; } }
.screen video{ object-fit:contain; background:#000; opacity:0; pointer-events:none; transition:opacity .4s; }
.film.playing video{ opacity:1; pointer-events:auto; }
.film.playing .play, .film.playing .poster{ opacity:0; pointer-events:none; }
/* языки: тонкие стрелки маркером по бокам плеера, как линии меню */
.strelka{ position:absolute; top:50%; width:clamp(40px, 5.6vw, 80px); padding:14px 0; border:0; background:none; cursor:pointer;
  color:var(--ink); opacity:.8; transition:opacity .3s, color .3s, transform .3s; -webkit-tap-highlight-color:transparent; }
.strelka svg{ display:block; width:100%; height:auto; overflow:visible; filter:blur(.3px); }
.strelka path{ fill:currentColor; }   /* мазки маркера — залитые контуры с переменной толщиной */
.strelka.l{ right:calc(100% + clamp(10px, 2.6vw, 40px)); transform:translateY(-50%); }
.strelka.r{ left:calc(100% + clamp(10px, 2.6vw, 40px)); transform:translateY(-50%); }
.strelka:hover{ opacity:1; color:#e6e1d8; }
.strelka.l:hover{ transform:translate(-4px, -50%); }
.strelka.r:hover{ transform:translate(4px, -50%); }
/* стрелка вниз под видео: чуть крупнее боковых, медленно «кивает» */
.vniz{ position:absolute; left:50%; top:calc(100% + clamp(16px, 3vh, 34px)); width:clamp(22px, 2.6vw, 34px); padding:6px 10px; box-sizing:content-box;
  translate:-50% 0; border:0; background:none; cursor:pointer; color:var(--ink); opacity:.85; transition:opacity .3s, color .3s;
  animation:kivok 3.6s ease-in-out infinite; -webkit-tap-highlight-color:transparent; }
.vniz svg{ display:block; width:100%; height:auto; overflow:visible; filter:blur(.3px); }
.vniz path{ fill:currentColor; }
.vniz:hover{ opacity:1; color:#e6e1d8; }
@keyframes kivok{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@media (prefers-reduced-motion:reduce){ .vniz{ animation:none; } }
/* телефон: стрелка маленькая — без размытия (Safari растит его из низкого разрешения),
   мазок толще за счёт обводки тем же цветом, без полупрозрачности */
@media (max-width:759px){
  .strelka{ opacity:1; }
  .strelka svg{ filter:none; }
  .strelka path{ stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; paint-order:stroke; }
  .vniz{ opacity:1; } .vniz svg{ filter:none; }
  .vniz path{ stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; paint-order:stroke; }
}
.play{ position:absolute; left:50%; top:calc(50% + 52px); translate:-50% -50%; width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#000; display:grid; place-items:center; transition:transform .35s cubic-bezier(.2,0,0,1), opacity .3s;
}
.play svg{ width:22px; height:22px; fill:currentColor; margin-left:3px; }
.play:hover{ transform:scale(1.07); }
.film .hint{ margin:18px 0 0; font:400 14px/1 var(--f-hand); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* надписи в мире — тем же рукописным, что меню у них */
.say{ text-align:center; }
.say p{ margin:0; font:700 clamp(18px, 2.1vw, 30px)/1.3 var(--f-hand); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.say .go{ display:inline-block; margin-top:18px; pointer-events:auto; padding:12px 22px; border-radius:999px; background:var(--peach); color:var(--night);
  font:700 15px/1 var(--f-hand); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:transform .3s; text-shadow:none; }
.say .go:hover{ transform:translateY(-2px); }

/* ---------- меню справа, как у Marbert Rocel ---------- */
.menu{ position:fixed; z-index:40; left:min(calc(50% + 440px), calc(100% - 150px)); top:60%; display:flex; flex-direction:column; align-items:center; gap:10px;
  gap:8px; padding:14px 4px; translate:0 -50%; opacity:0; transition:none; }
.menu::before, .menu::after{ content:''; width:66px; height:5px; background:center / 100% 100% no-repeat; filter:blur(.3px); }
/* полоски как у них — нарисованы маркером: неровная толщина, тонкие
   концы, верхняя и нижняя разной формы */
.menu::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%207%22%3E%3Cpath%20fill%3D%22%23b3ab9f%22%20d%3D%22M1.2%203.4C14%202%2038%201.8%2062%202.1C84%202.3%20103%202.6%20117.6%203.1C119.6%203.3%20119.4%204.2%20117.2%204.3C98%204.6%2074%204.7%2050%204.9C30%205.1%2013%205.2%202.4%204.9C0.2%204.8%20-0.2%203.6%201.2%203.4Z%22/%3E%3C/svg%3E"); }
.menu::after{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%207%22%3E%3Cpath%20fill%3D%22%23b3ab9f%22%20d%3D%22M2.6%203.6C10%202.9%2024%202.5%2044%202.4C66%202.3%2090%202.6%20108%203C114%203.1%20118.6%203.3%20119.3%203.7C119.8%204.1%20116%204.4%20108%204.5C88%204.8%2062%204.6%2040%204.7C22%204.8%209%204.9%203.4%204.6C0.9%204.4%200.6%203.8%202.6%203.6Z%22/%3E%3C/svg%3E"); }
.menu{ --menu-ink:var(--ink); }
/* как у них: не «белый шрифт», а нарисованные от руки толстые круглые
   буквы тёплого молочного цвета с мягким, чуть впитавшимся краем */
.menu a{ font:700 14px/1.15 'Balsamiq Sans', var(--f-hand); letter-spacing:.1em; padding-left:.1em; text-transform:uppercase;
  color:var(--menu-ink); text-decoration:none; transition:color .3s;
  text-shadow:var(--soft); -webkit-font-smoothing:antialiased; }
.menu a:hover{ color:#e6e1d8; }
@media (max-width:1100px){
  .menu{ top:auto; bottom:0; right:0; left:0; flex-direction:row; justify-content:space-around; gap:0; padding:14px 6px calc(14px + env(safe-area-inset-bottom));
    translate:0 0; left:0; background:rgba(43,36,49,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .menu::before, .menu::after{ display:none; }
  .menu a{ font-size:13px; letter-spacing:.1em; padding-left:0; }
  /* пять пунктов на узком телефоне: мельче и плотнее, чтобы между словами был воздух */
  @media (max-width:480px){ .menu{ padding-left:4px; padding-right:4px; } .menu a{ font-size:11px; letter-spacing:.05em; } }
}

/* ---------- шторки разделов ---------- */

.play[hidden]{ display:none; }

/* ---------- кнопки — нарисованная мягкая капсула ----------
   Заливка — середина нарисованной капсулы (knopka-mid.webp: мягкий объём
   и зерно), форма — обычное скругление, к краям чуть темнее, как
   в оригинале. Цельный слой — без швов при наведении. */
.say .go, .vkl{
  position:relative; border:0; border-radius:999px; box-shadow:none; color:var(--night); text-shadow:none;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(170,100,70,.18), transparent 60%),
    radial-gradient(60% 120% at 100% 50%, rgba(170,100,70,.18), transparent 60%),
    url(mir/knopka-mid.webp) center / 100% 100% no-repeat;
  padding:16px 34px; transition:transform .35s cubic-bezier(.2,0,0,1), filter .35s;
}
.vkl{ padding:20px 40px 20px 34px; }
.say .go:hover, .screen .poster:hover .vkl{ transform:scale(1.05); filter:brightness(1.05); color:var(--night); }


/* ---------- кошка подмигивает, собака высовывает язык ----------
   Нарисовано поверх картинок, поэтому звери не сдвигаются ни на пиксель.
   Координаты — в процентах картинки (cat.webp / dog.webp 1000 px). */
.zver{ pointer-events:auto; }
.zver img{ display:block; width:100%; }
.veko{ position:absolute; left:10.15%; top:23.4%; width:3.3%; height:8.4%; border-radius:55% 45% 50% 50% / 60% 55% 45% 40%; rotate:-10deg;
  background:radial-gradient(90% 90% at 40% 45%, #594865, #4b3e57 60%, #43384e); filter:blur(.5px);
  transform-origin:50% 0; transform:scaleY(0); }
/* закрытый глаз — тонкая дуга ресниц по нижнему краю века */
.veko::after{ content:''; position:absolute; left:16%; right:12%; bottom:26%; height:40%; border-bottom:2px solid #2a2230; border-radius:0 0 50% 50%; opacity:.9; }
.zver[data-l="cat"]:hover .veko, .zver[data-l="cat"].morg .veko{ animation:podmig .34s cubic-bezier(.4,0,.6,1) both; }
/* глаз закрывается резко, держится миг и открывается чуть мягче */
@keyframes podmig{ 0%{ transform:scaleY(0) } 32%{ transform:scaleY(1) } 52%{ transform:scaleY(1) } 100%{ transform:scaleY(0) } }

/* хвосты — отдельные кусочки с нахлёстом, качаются вокруг места среза */
.zver .hvost{ position:absolute; width:auto; }
.zver[data-l="cat"] .hvost{ left:85.2%; top:8.14%; width:14.8%; transform-origin:5.41% 72.78%; }
/* кошка: кончик хвоста дёргается ровно в такт морганию */
.zver[data-l="cat"]:hover .hvost{ animation:hvostKot .34s cubic-bezier(.4,0,.6,1) both; }
@keyframes hvostKot{ 0%{ rotate:0deg } 35%{ rotate:-7deg } 70%{ rotate:2.5deg } 100%{ rotate:0deg } }
.yazyk{ position:absolute; left:86.6%; top:23.8%; width:2.6%; height:auto; transform-origin:50% 0; transform:scaleY(0) rotate(12deg);
  transition:transform .45s cubic-bezier(.2,0,0,1); }
.zver[data-l="dog"]:hover .yazyk{ transform:scaleY(1) rotate(12deg); animation:lizh 1.2s .45s ease-in-out infinite; }
@keyframes lizh{ 0%,100%{ transform:scaleY(1) rotate(12deg) } 50%{ transform:scaleY(.9) rotate(4deg) } }
@media (hover:none){ .zver{ pointer-events:none; } }

/* хвост собаки гнётся, а не поворачивается: он нарезан на тонкие
   вертикальные полоски (их строит mir.js), каждая сдвигается чуть
   сильнее соседней — у основания ноль, поэтому стыка нет */
.hvost-gib{ position:absolute; left:0; top:17.094%; width:27%; height:37.037%; pointer-events:none; }