/* ---------------------------------------------------------------- рисунки по референсам (art/line, tools/grimoire/refart.py) */
.frames.stack > img { filter: none; }

/* древо T0–T7 растёт: стадии в ряд, от семечка до большого тёмного дерева */
.growth { list-style: none; margin: 10px 0 0; padding: 0 0 6px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 18px 8px;
  border-bottom: 1.5px solid rgba(54, 54, 58, .55); }
.growth li { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transition: opacity .5s calc(var(--i) * .18s); }
.drawn .growth li, .settled .growth li { opacity: 1; }
.growth .frames { width: 100%; height: calc(150px * var(--sz)); display: flex; align-items: flex-end; justify-content: center; }
.growth .frames > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.growth .g5 .frames > img { filter: brightness(.9); } .growth .g6 .frames > img { filter: contrast(1.15) brightness(.8); } .growth .g7 .frames > img { filter: contrast(1.4) brightness(.7); }
.growth b { font: 17px var(--hand); color: var(--red); margin-top: 4px; }
.growth span { font: 15px/1.15 var(--hand); color: var(--graphite-2); min-height: 2.3em; }
.growth li.hot .frames { filter: url(#boil-hi0); }
@media (max-width: 820px) { .growth .frames { height: calc(110px * var(--sz)); } }

/* крылатый скелет: обмякший, крылья лениво машут, дрейфует, будто спит на лету */
.skelwing { top: 58%; left: -140px; width: 110px; height: 150px; animation: sleepfly 46s linear 3s infinite; }
.skelwing .frames { position: absolute; inset: 0; }
.skelwing .frames > img { height: 100%; object-fit: contain; }
.skelwing .wl { clip-path: inset(0 50% 0 0); transform-origin: 50% 24%; animation: flapL 2.6s ease-in-out infinite; }
.skelwing .wr { clip-path: inset(0 0 0 50%); transform-origin: 50% 24%; animation: flapR 2.6s ease-in-out infinite; }
@keyframes flapL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg) scaleY(.94); } }
@keyframes flapR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg) scaleY(.94); } }
@keyframes sleepfly {
  0% { transform: translate(0, 0) rotate(-6deg); } 15% { transform: translate(20vw, -40px) rotate(4deg); } 30% { transform: translate(40vw, 10px) rotate(-5deg); }
  45% { transform: translate(62vw, -30px) rotate(6deg); } 60% { transform: translate(calc(100vw + 160px), 20px) rotate(-4deg); } 100% { transform: translate(calc(100vw + 160px), 20px); } }

.bat { width: 64px; }
.bat .frames > img { height: 100%; }
.bat .frames { animation: batflap .35s ease-in-out infinite alternate; }
@keyframes batflap { to { transform: scaleY(.7) translateY(4px); } }

/* глаза: моргают, тянутся к курсору, близко — жмурятся */
.eyes { width: 92px; opacity: .85; }
.eyes.e2 { width: 104px; }
.eyes.e3 { width: 64px; }
.eyes .frames { translate: var(--ex, 0px) var(--ey, 0px); transition: translate .4s, transform .15s; animation: blink 6s infinite; }
.eyes.e2 .frames { animation-delay: 2.2s; } .eyes.e3 .frames { animation-delay: 4.1s; }
.eyes.shut .frames { animation: none; transform: scaleY(.1); transition: transform .15s; }

/* паутина с пауком; паук чуть покачивается на нити */
.cobweb { width: 150px; opacity: .8; transform-origin: 70% 0; animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* потёки чернил из-под панели: тянутся, срывается капля */
.drips { display: flex; gap: 46px; align-items: flex-start; width: auto; }
.drip { width: 34px; transform-origin: 50% 0; animation: ooze 9s ease-in-out infinite alternate; }
.drip.d1 { width: 28px; animation-delay: 3s; } .drip.d2 { width: 40px; animation-delay: 6s; }
@keyframes ooze { from { transform: scaleY(.9); } to { transform: scaleY(1.12); } }
.drip .drop { position: absolute; left: calc(50% - 2px); bottom: -4px; width: 4px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--graphite); opacity: 0; visibility: visible !important; animation: drip 7s ease-in infinite; }
.drip.d1 .drop { animation-delay: 2.6s; } .drip.d2 .drop { animation-delay: 4.9s; }

/* каракули на полях */
.mdoodle { width: 46px; transform: rotate(var(--rot, 0deg)); opacity: 0; transition: opacity .6s 1.2s; }
.drawn > .mdoodle, .settled > .mdoodle { opacity: .7; }
.erasing > .mdoodle { opacity: 0; transition: opacity .3s; }

@media (max-width: 820px) { .skelwing { width: 70px; height: 96px; } .mdoodle { display: none; } }
@media (prefers-reduced-motion: reduce) { .skelwing, .skelwing .frames, .bat .frames, .eyes .frames, .cobweb, .drip, .drip .drop { animation: none; } }