/* v3 скетчбука: темнее и жутче (под сборку), всё кипит, режим «назад» — ластик. Поверх sketch.css и sketch2.css */
:root {
  --paper: #d6cab0;
  --graphite: #1e1b1a;
  --graphite-2: #4f4842;
  --red: #7a1c12;
  --blue: #22394a;
  --violet: #4b2c80;
}
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(40, 24, 10, .45) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .2  0 0 0 0 .15  0 0 0 .22 0'/></filter><rect width='260' height='260' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='4' seed='21' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .28  0 0 0 0 .15  0 0 0 .5 -.12'/></filter><rect width='1200' height='1200' filter='url(%23g)'/></svg>");
  background-attachment: fixed, scroll, fixed;
  background-size: auto, 260px 260px, cover;
  background-repeat: no-repeat, repeat, no-repeat;
}
/* обожжённые края листа */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 120px 20px rgba(30, 16, 6, .55), inset 0 0 18px 4px rgba(20, 10, 4, .6);
}
.sk-bar { background: linear-gradient(rgba(214, 202, 176, .96) 55%, rgba(214, 202, 176, 0)); }
.hero .title text { stroke: var(--graphite); }
.hero .sub { color: var(--red); }
.h { color: var(--graphite); text-shadow: .4px .4px 0 rgba(30, 27, 26, .35); }
.p, li { color: #2a2522; }
.note { color: var(--blue); }
.art-sk img { filter: contrast(1.15) brightness(.92) sepia(.25); }

/* ---------------------------------------------------------------- кипит всё, что на экране
   (фильтр только у видимых глав — так дешевле для слабых устройств) */
.stop .col.boil, .hero .boil { filter: none !important; }
[data-boil="0"] .live, [data-boil="0"] .sk-bar, [data-boil="0"] .critters { filter: url(#boil0); }
[data-boil="1"] .live, [data-boil="1"] .sk-bar, [data-boil="1"] .critters { filter: url(#boil1); }
[data-boil="2"] .live, [data-boil="2"] .sk-bar, [data-boil="2"] .critters { filter: url(#boil2); }
[data-boil] .live .hot { filter: none; }
[data-boil="0"] .live .hot { transform: translate(.6px, -.4px); } [data-boil="1"] .live .hot { transform: translate(-.5px, .5px); } [data-boil="2"] .live .hot { transform: translate(.3px, .6px); }

/* ---------------------------------------------------------------- ластик: листаешь вверх — стирается */
.erasing > .ink .pen { animation: undraw .55s cubic-bezier(.5, 0, .7, .4) forwards !important; }
@keyframes undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--len, 400); } }
.erasing .w { opacity: 0 !important; filter: blur(4px) !important; transition: opacity .3s, filter .3s; transition-delay: calc((500 - min(var(--i, 0), 500)) * .5ms); }
.erasing .art-sk { animation: sketchOut .6s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes sketchOut { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.erasing .tree, .erasing .runes, .erasing > .mnote, .erasing .tape { opacity: 0; transition: opacity .4s; }
/* след ластика — серая полоса проходит по главе */
.stop::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0) 42%, rgba(90, 78, 66, .22) 48%, rgba(240, 230, 210, .3) 52%, rgba(0, 0, 0, 0) 58%) 0 0 / 300% 100% no-repeat; }
.stop.erasing::after { animation: wipe .75s ease-in forwards; }
@keyframes wipe { 0% { opacity: 1; background-position: 0 0; } 100% { opacity: 0; background-position: 100% 0; } }

/* ---------------------------------------------------------------- жуть на полях */
.eyes { position: fixed; z-index: 6; pointer-events: none; display: flex; gap: 10px; }
.eyes i { position: relative; width: 22px; height: 13px; border-radius: 50%; background: rgba(214, 202, 176, .9);
  border: 1.6px solid var(--graphite); overflow: hidden; animation: blink 6s infinite; }
.eyes i::after { content: ""; position: absolute; left: calc(50% - 4px + var(--ex, 0px)); top: calc(50% - 4px + var(--ey, 0px)); width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 4px rgba(122, 28, 18, .8); }
.eyes.e2 i { animation-delay: 2.2s; } .eyes.e3 i { animation-delay: 4.1s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.cobweb { position: fixed; top: 52px; right: 0; width: 170px; z-index: 6; pointer-events: none; opacity: .75; }
.cobweb .pen, .drips .pen { stroke-dasharray: none; stroke: var(--graphite); stroke-width: 1.1; opacity: .7; }
.drips { position: fixed; top: 52px; left: 18%; width: 220px; z-index: 6; pointer-events: none; }
.drips .drop { fill: var(--graphite); opacity: .8; animation: drip 7s ease-in infinite; }
.drips .drop:nth-of-type(2) { animation-delay: 2.6s; } .drips .drop:nth-of-type(3) { animation-delay: 4.9s; }
@keyframes drip { 0%, 40% { transform: translateY(0); opacity: 0; } 45% { opacity: .8; } 100% { transform: translateY(260px); opacity: 0; } }
.critter .pen { stroke: var(--graphite); }
.fly { background: #c9b46a; box-shadow: 0 0 12px 5px rgba(201, 180, 106, .5); }
.trail-dash { stroke: #3b332d; }
.trail .stop-mark .pen, .pen.red { stroke: var(--red); }

@media (max-width: 820px) { .eyes.e3, .cobweb, .drips { display: none; } .eyes { transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .eyes i, .drips .drop { animation: none; } }