/* v5: ещё мрачнее; клик — клякса с трещинами, зажатие — кровавый уголь; рисунки облетают текст (js/dread.js) */
:root { --paper: #c3b393; --graphite: #17120f; --graphite-2: #463c33; --red: #6a130b; --blue: #1d2c38; }
body { background-color: var(--paper); }
body::before { box-shadow: inset 0 0 180px 50px rgba(18, 8, 2, .7), inset 0 0 26px 6px rgba(12, 5, 1, .75); animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { to { box-shadow: inset 0 0 230px 80px rgba(18, 8, 2, .78), inset 0 0 30px 8px rgba(12, 5, 1, .8); } }
.sk-bar { background: linear-gradient(rgba(195, 179, 147, .97) 55%, rgba(195, 179, 147, 0)); }
.p, li { color: #211a15; }
.hero .sub { text-shadow: 0 0 10px rgba(106, 19, 11, .35); }

/* компоновка: подсказка не налезает на рамку рисунка */
.hero-art { margin-bottom: 26px; }
.scroll-hint { margin-top: 52px; }

/* рисунки над текстом почти исчезают — читать не мешают */
.critter, .eyes, .cobweb, .drips, .mdoodle { transition: opacity .5s; }
.critter.over, .eyes.over, .cobweb.over, .drips.over { opacity: .12 !important; }
.drawn > .mdoodle.over, .settled > .mdoodle.over { opacity: .1; }
.skelwing, .bat { top: 0; left: 0; will-change: transform; }
.eyes.stare .frames { transform: scale(1.25); transition: transform .12s; animation: none; }

/* клик: чернила расплываются, от удара бегут трещины */
.blot { position: absolute; z-index: 7; width: 70px; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot)) scale(.2);
  animation: blotIn .35s cubic-bezier(.2, 1.4, .4, 1) forwards, blotOut 6.5s .4s ease-in forwards; }
.blot > img { display: block; width: 100%; filter: sepia(1) saturate(4) hue-rotate(-35deg) brightness(.45); }
.blot > img + img { position: absolute; inset: 0; }
@keyframes blotIn { to { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } }
@keyframes blotOut { 0%, 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40%) rotate(var(--rot)) scale(1.08); } }
.cracks { position: absolute; z-index: 7; pointer-events: none; overflow: visible; animation: blotOut 5s .3s ease-in forwards; }
.crack { fill: none; stroke: #1a0f0b; stroke-width: 1.1; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw .5s var(--d) ease-out forwards; }

/* зажатие: холст поверх, пока мажешь — текст не выделяется */
.smear { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 7; pointer-events: none; mix-blend-mode: multiply; }
body.smearing { user-select: none; -webkit-user-select: none; cursor: crosshair; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* бумага: волокна, неровная проклейка, пятна старости (фоксинг), мелкое зерно, следы сгибов */
body {
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0, 0, 0, 0) 50%, rgba(40, 22, 8, .5) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .17  0 0 0 0 .12  0 0 0 .3 -.02'/></filter><rect width='300' height='300' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.03 .22' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .14  0 0 0 .9 -.52'/></filter><rect width='600' height='600' filter='url(%23w)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='41' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .26  0 0 0 0 .1  0 0 0 3.4 -2.35'/></filter><rect width='900' height='900' filter='url(%23s)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.0035' numOctaves='4' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .75 -.2'/></filter><rect width='1400' height='1400' filter='url(%23g)'/></svg>"),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 49.6%, rgba(60, 40, 20, .1) 50%, rgba(255, 245, 225, .08) 50.4%, rgba(0, 0, 0, 0) 51%),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 33%, rgba(60, 40, 20, .07) 33.3%, rgba(0, 0, 0, 0) 33.8%);
  background-attachment: fixed, scroll, scroll, scroll, fixed, scroll, scroll;
  background-size: auto, 300px 300px, 600px 600px, 900px 900px, cover, 100% 100%, 100% 1800px;
  background-repeat: no-repeat, repeat, repeat, repeat, no-repeat, no-repeat, repeat-y;
}

/* верхняя полоса: не светлая заливка, а тень сверху — в тон обожжённым краям */
.sk-bar { background: linear-gradient(rgba(30, 16, 6, .42), rgba(30, 16, 6, .16) 60%, rgba(30, 16, 6, 0)); }
.sk-btn { color: #120d0a; text-shadow: 0 0 6px rgba(195, 179, 147, .9), 0 0 2px rgba(195, 179, 147, 1); }

/* конец тропы */
.epilogue { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 30px; }
.end-tree { width: min(340px, 70vw); filter: contrast(1.5) brightness(.6); opacity: 0; transform: translateY(20px); transition: opacity 2s, transform 2s; }
.end-h { font: 40px var(--hand); color: var(--red); margin: 18px 0 4px; text-shadow: 0 0 12px rgba(106, 19, 11, .35); opacity: 0; transition: opacity 1.5s 1s; }
.end-p { font: 24px var(--hand); color: var(--graphite-2); margin: 0 0 26px; opacity: 0; transition: opacity 1.5s 1.8s; }
.end-up { pointer-events: auto; opacity: 0; transition: opacity 1s 2.6s; }
.epilogue.seen .end-tree { opacity: 1; transform: none; }
.epilogue.seen .end-h, .epilogue.seen .end-p { opacity: 1; }
.epilogue.seen .end-up { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .epilogue * { opacity: 1 !important; transform: none !important; transition: none !important; } }
.sk { padding-bottom: 30px; } .epilogue { min-height: 80vh; justify-content: center; }

/* значки панели нарисованы карандашом; звук: включён — дуги, выключен — красный крест */
.sk-btn:has(.btn-ico) { padding: 4px 10px; line-height: 0; }
.btn-ico { display: block; overflow: visible; }
.btn-ico .pen { stroke: #120d0a; stroke-width: 1.7; opacity: .9; }
.btn-ico .pen.thin { stroke-width: 1.1; opacity: .7; }
.btn-ico .pen.red { stroke: var(--red); stroke-width: 2.2; }
.sk-btn:hover .btn-ico .pen:not(.red) { stroke: var(--red); }
#b-sound[aria-pressed="true"] .off-cross, #b-sound[aria-pressed="false"] .on-wave { display: none; }
#b-sound[aria-pressed="false"] .btn-ico { opacity: .75; }
/* язык: «ру / en», текущий обведён красным от руки (жирный и с подчёркиванием-штрихом) */
#b-lang .sl { margin: 0 4px; opacity: .5; }
#b-lang .lg { opacity: .55; }
#b-lang .lg.on { opacity: 1; color: var(--red); text-decoration: underline wavy rgba(106, 19, 11, .6) 1.2px; text-underline-offset: 5px; }

/* крылатый скелет: тело висит обмякшее и чуть покачивается, крылья машут вокруг плеч — лениво, как во сне */
.skelwing .frames { position: absolute; inset: 0; clip-path: none; }
.skelwing .frames > img { width: 100%; height: 100%; object-fit: contain; }
.skelwing .sw-wl { transform-origin: 36% 37%; animation: swL 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.skelwing .sw-wr { transform-origin: 64% 35%; animation: swR 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.skelwing .sw-body { transform-origin: 50% 30%; animation: swB 3.2s ease-in-out infinite; }
@keyframes swL { 0%, 100% { transform: rotate(6deg); } 45% { transform: rotate(-26deg) scaleY(.92); } }
@keyframes swR { 0%, 100% { transform: rotate(-6deg); } 45% { transform: rotate(26deg) scaleY(.92); } }
@keyframes swB { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(4px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .skelwing .frames { animation: none; } }

/* ---------------------------------------------------------------- скорость
   Раньше фильтр-«кипение» искажал целиком видимые главы с текстом 8 раз в секунду — это и тормозило.
   Текст неподвижен; линии и рисунки кипят своими тремя заранее нарисованными кадрами — это дёшево. */
[data-boil] .live, [data-boil] .sk-bar, [data-boil] .critters { filter: none; }
/* фон не закреплён — иначе весь экран перерисовывается при каждом шаге прокрутки */
body { background-attachment: scroll; }
/* «дыхание» краёв: меняется только прозрачность готового слоя, а не тень (тень перерисовывала весь экран) */
body::before { animation: none; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 240px 90px rgba(18, 8, 2, .55);
  opacity: 0; animation: breathe2 9s ease-in-out infinite alternate; will-change: opacity; }
@keyframes breathe2 { to { opacity: 1; } }
.smear { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------------------------------------------------------------- кипение заголовков (дёшево: без svg-фильтров)
   Каждое слово на каждом из трёх кадров чуть сдвинуто и повёрнуто по-своему, а за буквами — бледный второй
   штрих угля, который тоже прыгает. Меняются только transform и тень заголовка, поэтому на скорость не влияет. */
.h .w, .end-h, .hero .sub { display: inline-block; }
[data-boil="0"] .h .w:nth-child(3n+1) { transform: translate(.4px, -.5px) rotate(-.5deg); }
[data-boil="0"] .h .w:nth-child(3n+2) { transform: translate(-.5px, .3px) rotate(.4deg); }
[data-boil="0"] .h .w:nth-child(3n)   { transform: translate(.2px, .6px) rotate(-.2deg); }
[data-boil="1"] .h .w:nth-child(3n+1) { transform: translate(-.5px, .4px) rotate(.45deg); }
[data-boil="1"] .h .w:nth-child(3n+2) { transform: translate(.3px, -.6px) rotate(-.35deg); }
[data-boil="1"] .h .w:nth-child(3n)   { transform: translate(-.4px, -.2px) rotate(.5deg); }
[data-boil="2"] .h .w:nth-child(3n+1) { transform: translate(.1px, .5px) rotate(.1deg); }
[data-boil="2"] .h .w:nth-child(3n+2) { transform: translate(.5px, .2px) rotate(.3deg); }
[data-boil="2"] .h .w:nth-child(3n)   { transform: translate(.3px, -.5px) rotate(-.45deg); }
/* второй штрих угля: бледная копия букв, каждый кадр в другом месте */
[data-boil="0"] .h { text-shadow: .9px -.5px 0 rgba(23, 18, 15, .28), -.4px .7px 0 rgba(23, 18, 15, .14); }
[data-boil="1"] .h { text-shadow: -.8px .4px 0 rgba(23, 18, 15, .28), .6px -.6px 0 rgba(23, 18, 15, .14); }
[data-boil="2"] .h { text-shadow: .3px .9px 0 rgba(23, 18, 15, .28), -.7px -.3px 0 rgba(23, 18, 15, .14); }
/* название на обложке, подзаголовок, конец тропы — то же целиком */
[data-boil="0"] .hero .title { transform: translate(.6px, -.4px) rotate(-.12deg); }
[data-boil="1"] .hero .title { transform: translate(-.5px, .5px) rotate(.1deg); }
[data-boil="2"] .hero .title { transform: translate(.2px, .3px) rotate(.05deg); }
[data-boil="0"] .hero .title text { paint-order: stroke; stroke-width: 1.4; }
[data-boil="1"] .hero .title text { paint-order: stroke; stroke-width: 2.1; }
[data-boil="2"] .hero .title text { paint-order: stroke; stroke-width: 1.7; }
[data-boil="0"] .hero .sub, [data-boil="0"] .end-h { transform: translate(.5px, -.4px) rotate(-.4deg); }
[data-boil="1"] .hero .sub, [data-boil="1"] .end-h { transform: translate(-.4px, .5px) rotate(.35deg); }
[data-boil="2"] .hero .sub, [data-boil="2"] .end-h { transform: translate(.2px, .2px) rotate(-.1deg); }
@media (prefers-reduced-motion: reduce) { .h .w, .hero .title, .hero .sub, .end-h { transform: none !important; } }

/* «Скачать лаунчер» всегда под рукой — красным, обведён толще остальных */
.sk-dl { color: var(--red); text-decoration: none; font-weight: 700; white-space: nowrap; }
.sk-dl .btn-ink .pen { stroke: var(--red); stroke-width: 2; }
@media (max-width: 520px) { .sk-dl { font-size: 16px; padding: 4px 6px; } }

/* существа привязаны к местам на странице, а не к экрану; тропа не дрожит — всегда первый кадр */
.critters { position: absolute; inset: 0 0 auto 0; }
.eyes, .cobweb, .drips { position: absolute; }
.cobweb { top: 0; } .drips { top: 0; }
.hero, .stop { position: relative; }
svg.trail .frames > g, svg.trail > g { visibility: hidden !important; }
svg.trail > g.f0 { visibility: visible !important; }