/* ───── Анимации шапки «Стильный дом» (движок hero-anim.js). Варианты: A — доски прилетают и крепятся; B — + инструмент;
   C — «чертёж → дом» (синька/карандаш, обозначения, луч, переворот); D — живой ползунок «чертёж → фото». ───── */
.hero-cols-wrap{position:relative;--wrap-pt:72px}
/* на ПК в вариантах C/D над буквами идут оси/размеры чертежа — отступ сверху, чтобы не уходили под шапку сайта; на мобильном всё внутри картинки */
.hero-cols-wrap.bp,.hero-cols-wrap.cmp{padding-top:var(--wrap-pt)}
@media (max-width:768px){.hero-cols-wrap{--wrap-pt:0px}}
.hero-col{position:relative;will-change:transform}
.hero-col-strip{position:relative}
.build .hero-col{opacity:0;transform:translate(-60vw,-45vh) rotate(-28deg)}
.build.play .hero-col{animation:plank-in var(--dur,.75s) cubic-bezier(.2,1.25,.35,1) forwards;animation-delay:calc(var(--i) * var(--step,.28s))}
@keyframes plank-in{0%{opacity:0;transform:translate(-60vw,-45vh) rotate(-28deg)}70%{opacity:1;transform:translate(6px,4px) rotate(2deg)}85%{transform:translate(-3px,-2px) rotate(-1.2deg)}100%{opacity:1;transform:none}}
.build.play .hero-col.screwing{animation:plank-in var(--dur,.75s) cubic-bezier(.2,1.25,.35,1) forwards,screw-shake .35s ease-in-out 1;animation-delay:calc(var(--i) * var(--step,.28s)),calc(var(--i) * var(--step,.28s) + var(--dur,.75s))}
@keyframes screw-shake{0%,100%{transform:none}25%{transform:rotate(.8deg) translateX(1px)}50%{transform:rotate(-.8deg) translateX(-1px)}75%{transform:rotate(.5deg)}}
/* крепёж по углам полосы */
.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e2e2e2,#9a9a9a 70%,#6a6a6a);box-shadow:0 .5px 1px rgba(0,0,0,.35);opacity:0;transform:scale(0) rotate(0deg);z-index:3}
.screw::before,.screw::after{content:'';position:absolute;left:50%;top:50%;width:5.5px;height:1px;background:#3a3a3a;transform:translate(-50%,-50%)}
.screw::after{transform:translate(-50%,-50%) rotate(90deg)}
.screw.tl{left:5px;top:5px}.screw.tr{right:5px;top:5px}.screw.bl{left:5px;bottom:5px}.screw.br{right:5px;bottom:5px}
.build.play .screw{animation:screw-in .45s ease-out forwards;animation-delay:calc(var(--i) * var(--step,.28s) + var(--dur,.75s) + var(--k) * .09s)}
@keyframes screw-in{0%{opacity:0;transform:scale(0) rotate(-180deg)}60%{opacity:1;transform:scale(1.25) rotate(90deg)}100%{opacity:1;transform:scale(1) rotate(180deg)}}
.no-screws .screw{display:none}
.nails .screw{width:7px;height:7px;background:radial-gradient(circle at 40% 40%,#a8a8a8,#5a5a5a 65%,#333);box-shadow:0 .5px 1px rgba(0,0,0,.4),inset 0 0 1px #000}
.nails .screw::before,.nails .screw::after{display:none}
.nails.build.play .screw{animation:nail-in .32s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i) * var(--step,.28s) + var(--dur,.75s) + var(--k) * .11s)}
@keyframes nail-in{0%{opacity:0;transform:translateY(-18px) scale(1.4)}55%{opacity:1;transform:translateY(2px) scale(.9)}100%{opacity:1;transform:none}}
.build.play.done .screw{animation:screw-out .6s ease-in forwards !important;animation-delay:calc(var(--k) * .05s) !important}
@keyframes screw-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
/* инструменты варианта B: молоток (Lottie Simple License) — ось = конец рукоятки, scaleY(−1) rotate(300) = бойок вниз, рукоятка вправо */
.hammer-tool{position:absolute;width:84px;height:84px;z-index:6;opacity:0;transition:left .3s cubic-bezier(.4,0,.2,1),top .3s,opacity .25s;transform-origin:88% 88%;transform:scaleY(-1) rotate(300deg);pointer-events:none;filter:drop-shadow(-4px 4px 0 rgba(0,0,0,.18))}
.hammer-tool img{width:100%;height:100%;display:block}
.build.play.with-tool.nails .hammer-tool{opacity:1}
.hammer-tool.hit{animation:swing .22s ease-in 3}
@keyframes swing{0%{transform:scaleY(-1) rotate(288deg)}60%{transform:scaleY(-1) rotate(326deg)}100%{transform:scaleY(-1) rotate(288deg)}}
/* отвёртка: жало в точке 44%/27% картинки, повёрнута на −90° */
.sd-tool{position:absolute;width:110px;height:110px;z-index:6;opacity:0;transition:left .3s cubic-bezier(.4,0,.2,1),top .3s,opacity .25s;transform-origin:44% 27%;transform:rotate(-90deg);pointer-events:none;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(-4px 4px 0 rgba(0,0,0,.18))}
.sd-tool img{width:100%;height:100%;display:block}
.build.play.with-tool.screws .sd-tool{opacity:1}
.sd-tool.hit{animation:twist .14s ease-in-out 6}
@keyframes twist{0%,100%{transform:rotate(-90deg)}50%{transform:rotate(-78deg) translate(1px,1px)}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd36b;box-shadow:0 0 8px #ffb52b;opacity:0;z-index:6;pointer-events:none}
.spark.go{animation:spark .5s ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
/* ───── C «чертёж → дом» ───── */
.bp .hero-col{opacity:1;transform:none;animation:none;filter:none}
.bp{overflow:visible}
.anno{position:absolute;left:0;top:0;z-index:6;pointer-events:none;overflow:visible}
.anno .ln{stroke:#1a2f6e;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.1s ease-out forwards;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
.anno .ln.thin{stroke-width:.9;opacity:.9}.anno .ln.dash{stroke-dasharray:4 4;stroke-dashoffset:0;opacity:0;animation:fadein .5s forwards}
.anno .dot{fill:#fff;stroke:#1a2f6e;stroke-width:1.2}
.anno text{fill:#1a2f6e;font:700 11.5px ui-monospace,Menlo,Consolas,monospace;opacity:0;animation:fadein .35s .5s forwards;letter-spacing:.3px;paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:3.5px}
.anno circle.ln{stroke-dasharray:80;stroke-dashoffset:80}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadein{to{opacity:1}}
.bp.reveal .anno{animation:fadeout var(--btotal,2s) ease-in forwards}@keyframes fadeout{to{opacity:0}}
.bp .hero-col::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 110px),repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 110px)}
.bp .hero-col::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;outline:1px dashed rgba(255,255,255,.7);outline-offset:-2px}
.bp.reveal .hero-col{animation:bp-flip .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * var(--bstep,.18s))}
@keyframes bp-flip{0%{transform:perspective(1100px) rotateY(0);filter:none}44%{transform:perspective(1100px) rotateY(88deg);filter:brightness(1.5)}46%{transform:perspective(1100px) rotateY(92deg);filter:brightness(1.9) drop-shadow(52px 38px 4px rgba(0,0,0,.4))}100%{transform:perspective(1100px) rotateY(0);filter:brightness(1) drop-shadow(52px 38px 4px rgba(0,0,0,.4))}}
.bp.reveal .hero-col::before,.bp.reveal .hero-col::after{animation:bp-off .05s forwards;animation-delay:calc(var(--i) * var(--bstep,.18s) + .31s)}
@keyframes bp-off{to{opacity:0}}
.beam{position:absolute;top:-30px;bottom:0;width:4px;left:-12px;background:linear-gradient(#fff0,#fff 20%,#fff 80%,#fff0);box-shadow:0 0 16px 5px rgba(255,220,140,.85),0 0 48px 18px rgba(217,137,67,.45);opacity:0;z-index:7;pointer-events:none}
.bp.reveal .beam{animation:beam-sweep var(--btotal,2s) linear forwards}
@keyframes beam-sweep{0%{opacity:1;left:-1%}90%{opacity:1}100%{opacity:0;left:101%}}
/* ───── D «живой ползунок» ───── */
.cmp .hero-col{opacity:1;transform:none;animation:none}
.hero-cols-wrap.cmp{cursor:ew-resize;touch-action:pan-y;user-select:none}
.sketch-layer{--px:130px;--py:90px;position:absolute !important;left:calc(-1 * var(--px));top:calc(-1 * var(--py));width:calc(100% + 2 * var(--px));padding:calc(var(--py) + var(--wrap-pt)) var(--px) 70px !important;box-sizing:border-box;z-index:4;pointer-events:none;clip-path:inset(0 0 0 calc(var(--x,0px) + var(--px)))}
.sketch-layer .anno{z-index:5;left:var(--px);top:var(--py)}
.sketch-layer .hero-col{filter:none !important;opacity:1 !important;transform:none !important;animation:none !important}
.anno.static .ln{stroke-dashoffset:0;animation:none}.anno.static text,.anno.static .dash{opacity:1;animation:none}
.anno.sm text{font-size:8.5px;stroke-width:2.5px}
.cmp-handle{position:absolute;top:-14px;bottom:10px;left:var(--x,0px);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 16px rgba(0,0,0,.35);z-index:8;opacity:0;pointer-events:none}
.cmp .cmp-handle{opacity:1}
.cmp-handle span{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#1a1a2e;font:700 12px/1 system-ui;letter-spacing:2px}
.cmp-handle span::before{content:'◀ ▶'}
.cmp-handle span::after{content:'потяните';position:absolute;top:52px;left:50%;transform:translateX(-50%);font:12px system-ui;letter-spacing:0;color:#1a1a2e;background:#fffc;padding:2px 8px;border-radius:8px;white-space:nowrap}
/* карандаш на холсте */
.pencil .hero-col{opacity:1;transform:none;animation:none;filter:none}
.pencil .hero-col::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.9;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(60,60,70,.10) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(60,60,70,.10) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(60,60,70,.18) 0 1px,transparent 1px 110px),repeating-linear-gradient(90deg,rgba(60,60,70,.18) 0 1px,transparent 1px 110px)}
.pencil .hero-col::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;outline:1px dashed rgba(60,60,70,.55);outline-offset:-2px}
.pencil .hero-col-letter{-webkit-text-stroke:1.3px #3b3b42;text-stroke:1.3px #3b3b42}
.pencil .hero-col.photo .hero-col-letter{-webkit-text-stroke:0;text-stroke:0}
.pencil .beam{background:linear-gradient(#fff0,#ffe9c4 20%,#ffe9c4 80%,#fff0)}
.pencil .anno .ln{stroke:#3b3b42;filter:none}.pencil .anno .dot{fill:#fff;stroke:#3b3b42}
.pencil .anno text{fill:#2f2f36;stroke:rgba(255,255,255,.9)}
@media (max-width:768px){
  .screw{width:6px;height:6px}.screw::before,.screw::after{width:3.5px}.nails .screw{width:5px;height:5px}.screw.tl,.screw.bl{left:4px}.screw.tr,.screw.br{right:4px}.screw.tl,.screw.tr{top:4px}.screw.bl,.screw.br{bottom:4px}
  .hammer-tool,.sd-tool{display:none}
  .sketch-layer{--px:0px;--py:0px;padding:0 0 22px !important}
}
@media (prefers-reduced-motion: reduce){
  .build .hero-col{opacity:1;transform:none;animation:none !important}.build .screw{opacity:1;transform:none;animation:none !important}
  .bp .hero-col{filter:none !important;animation:none !important}.bp .hero-col::before,.bp .hero-col::after{display:none}.beam,.hammer-tool,.sd-tool{display:none}
}