/* v2 скетчбука: кипение, тропа, живые каракули, следы работы (поверх sketch.css) */
/* кипение: у .frames виден только текущий из трёх вариантов; .boil дрожит фильтром */
.frames > :not(defs) { visibility: hidden; }
[data-boil="0"] .frames > .f0, [data-boil="1"] .frames > .f1, [data-boil="2"] .frames > .f2 { visibility: visible; }
[data-boil="0"] .boil { filter: url(#boil0); } [data-boil="1"] .boil { filter: url(#boil1); } [data-boil="2"] .boil { filter: url(#boil2); }
[data-boil="0"] .hot { filter: url(#boil-hi0); } [data-boil="1"] .hot { filter: url(#boil-hi1); } [data-boil="2"] .hot { filter: url(#boil-hi2); }
.frames.stack { position: relative; }
.frames.stack > img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.frames.stack > img + img { position: absolute; inset: 0; height: 100%; }
/* существа ходят в два кадра */
.walk > g { visibility: hidden; }
[data-boil="0"] .walk > .w0, [data-boil="1"] .walk > .w1, [data-boil="2"] .walk > .w0 { visibility: visible; }

/* линии тянутся волной (по несколько сразу), потом кипят */
.ink .pen, .btn-ink .pen, .scribble .pen { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); opacity: .85; }
.drawn > .ink .pen, .btn-ink .pen, .scribble.go .pen { animation: draw .55s var(--d, 0s) cubic-bezier(.4, 0, .3, 1) forwards; }
.settled > .ink .pen { animation: none; stroke-dashoffset: 0; }
.btn-ink.redraw .pen { animation: draw2 .35s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes draw2 { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
.pen.frame { stroke: var(--graphite-2); stroke-width: 1.3; }
.pen.violet { stroke: var(--violet); stroke-width: 2; }

/* текст пишется быстрее, слова идут потоком */
.w { transition-delay: calc(min(var(--i, 0), 500) * 5ms); }
.drawn .w { opacity: 1; filter: none; }

/* картинки проявляются «прорисовкой» по диагонали */
.art-sk { position: relative; -webkit-mask: linear-gradient(115deg, #000 40%, transparent 60%) 100% 0 / 260% 100% no-repeat; mask: linear-gradient(115deg, #000 40%, transparent 60%) 100% 0 / 260% 100% no-repeat; }
.drawn .art-sk { animation: sketchIn 1.6s .2s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes sketchIn { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.art-sk .vec { display: block; width: 100%; max-height: 420px; object-fit: contain; filter: grayscale(1); }

/* заголовок: контур, потом заливка */
.hero.drawn .title text { animation: write 2.2s cubic-bezier(.5, 0, .4, 1) forwards, fillin .8s 2s forwards; }
@keyframes fillin { to { fill: var(--graphite); } }

/* ---------------------------------------------------------------- главы вдоль тропы */
.sk { position: relative; max-width: 1180px; }
.stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 70px 70px 90px; width: calc(100% - 130px); }
.stop.left { margin-right: auto; } .stop.right { margin-left: auto; }
.stop .col { position: relative; z-index: 1; min-width: 0; }
.stop .col > :first-child { margin-top: 0; }
svg.trail { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.trail-dash { fill: none; stroke: var(--graphite-2); stroke-width: 2.2; stroke-dasharray: 7 9 !important; stroke-dashoffset: 0 !important; opacity: .7; }
.trail-reveal { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: round; }
.trail .stop-mark { stroke-dasharray: none; opacity: 0; transition: opacity .4s; }
.trail .stop-mark.on { opacity: 1; }
.finale .links a.main { font-size: 36px; }

/* ---------------------------------------------------------------- следы работы */
.trace { position: absolute; pointer-events: none; z-index: 0; }
.mnote { font: 22px var(--hand); color: var(--graphite-2); transform: rotate(var(--rot, 0deg)); white-space: nowrap; opacity: 0; transition: opacity .6s 1s; }
.drawn > .mnote { opacity: .8; }
.mnote.struck { text-decoration: line-through wavy rgba(176, 65, 47, .7); }
.smudge { width: 220px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(70, 70, 75, .12), rgba(70, 70, 75, 0) 70%); transform: rotate(var(--rot)); filter: blur(4px); }
.thumb { width: 70px; height: 90px; border-radius: 45%; transform: rotate(var(--rot)); opacity: .14;
  background: repeating-radial-gradient(ellipse at 50% 55%, #3a3a3e 0 1.2px, transparent 1.2px 4px); -webkit-mask: radial-gradient(ellipse, #000 55%, transparent 72%); mask: radial-gradient(ellipse, #000 55%, transparent 72%); }
.ring { width: 150px; height: 150px; border-radius: 50%; border: 6px solid rgba(140, 95, 50, .12); box-shadow: inset 0 0 0 2px rgba(140, 95, 50, .1); transform: rotate(var(--rot)) scale(1, .96); }

/* ---------------------------------------------------------------- живые каракули */
.critters { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.critter { position: absolute; }
.critter .pen { stroke-dasharray: none; stroke: var(--graphite); stroke-width: 1.8; opacity: .8; }
.skel { bottom: 6px; left: -70px; width: 46px; animation: stroll 38s linear infinite; }
.skel .eye { fill: var(--red); }
@keyframes stroll { 0% { transform: translateX(0); } 48% { transform: translateX(calc(100vw + 80px)); } 50% { transform: translateX(calc(100vw + 80px)) scaleX(-1); } 98% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0); } }
.fly { right: 40px; top: 40%; width: 7px; height: 7px; border-radius: 50%; background: #e8d36a; box-shadow: 0 0 10px 4px rgba(232, 211, 106, .55); animation: buzz 9s ease-in-out infinite alternate, glowf 1.4s ease-in-out infinite alternate; }
@keyframes buzz { 0% { transform: translate(0, 0); } 25% { transform: translate(-30px, -40px); } 50% { transform: translate(-10px, 30px); } 75% { transform: translate(-50px, 10px); } 100% { transform: translate(-20px, -60px); } }
@keyframes glowf { from { opacity: .35; } to { opacity: 1; } }
.bat { top: 18%; left: -80px; width: 54px; animation: batfly 26s linear 6s infinite; }
@keyframes batfly { 0% { transform: translate(0, 0); } 30% { transform: translate(calc(100vw + 160px), -60px); } 100% { transform: translate(calc(100vw + 160px), -60px); } }

/* закорючка от клика */
.scribble { position: absolute; pointer-events: none; z-index: 30; overflow: visible; animation: fadeout 4.2s forwards; }
@keyframes fadeout { 70% { opacity: 1; } to { opacity: 0; } }

@media (max-width: 820px) {
  .stop { grid-template-columns: 1fr; width: calc(100% - 26px); margin-left: 26px !important; padding: 44px 6px 60px 14px; gap: 18px; }
  .mnote { display: none; }
  .skel { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ink .pen, .btn-ink .pen { animation: none; stroke-dashoffset: 0; }
  .art-sk { -webkit-mask: none; mask: none; animation: none; }
  .critters { display: none; }
}
.ink .pen:not(.ready) { opacity: .85; }
.art > .tape { z-index: 3; }
@media (max-width: 820px) { .tree { width: 66%; margin: 0 auto; } }