/* Кран, который ставит букву «Я» в заголовке главной (логика — js/crane.js).
   Весь кран строится в единицах шрифта: 1 ед. = 0.01em заголовка, поэтому масштабируется вместе с ним. */
.hero__title[data-crane] { position: relative; margin-top: .55em; }

/* пока кран не поставил букву, её место пустое (буква появляется из JS) */
html.js [data-crane-slot] { display: inline-block; visibility: hidden; }

.crane { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.crane__svg { position: absolute; overflow: visible; fill: none; stroke: var(--text); stroke-linecap: round; stroke-linejoin: round; }
.crane__svg path.d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.crane__svg .fillin { fill: var(--red); stroke: none; }
.crane__svg .beacon { animation: beacon 1s steps(2, jump-none) infinite; }
@keyframes beacon { 50% { opacity: .2; } }

/* тележка бежит по стреле; трос тянется вниз; на крюке висит буква */
.crane__trolley { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.crane__trolley::before { content: ""; position: absolute; left: -.07em; top: -.08em; width: .14em; height: .08em; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--text); }
.crane__rope { position: absolute; left: -.006em; top: 0; width: .012em; min-width: 1.5px; background: var(--text); transform-origin: 50% 0; }
.crane__hook { position: absolute; left: 50%; top: 100%; width: 0; height: 0; }
.crane__block { position: absolute; left: -.05em; top: 0; width: .1em; height: .08em; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--text); }
.crane__slings { position: absolute; top: .08em; overflow: visible; fill: none; stroke: var(--text); stroke-width: 1.5px; }
.crane__load { position: absolute; top: .18em; white-space: nowrap; color: var(--red); }
.crane__mark { display: inline-block; width: 0; height: 0; }
.hero__title .nw { white-space: nowrap; }