/* «Два способа построить» — 3D-история. Чистый CSS 3D, без библиотек. 12.10.2026 */
.mm{--off:330px;--ease:cubic-bezier(.2,.7,.2,1);--forest:#173d32;--forest2:#1f5240;--lime:#e6eca8;--olive:#939c59;--paper:#f4f4ef;
  position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(56px,7vw,110px) max(5vw,calc((100% - 1296px)/2));
  background:radial-gradient(90% 120% at 90% 0,#245c49 0,transparent 55%),linear-gradient(180deg,#123228,#0f2a22);color:var(--paper);overflow:hidden;isolation:isolate}
.mm::before{content:"";position:absolute;inset:0;z-index:-1;background:url(assets/doma-pattern-plan-grid.svg) left bottom/min(760px,80vw) auto no-repeat;opacity:.09;filter:invert(1)}
.mm-copy .eyebrow{color:var(--lime)}
.mm h2{font-size:clamp(28px,3.4vw,50px);line-height:1.06;margin:10px 0 16px;color:#fff;font-weight:400}
.mm h2 em{color:var(--lime);font-style:normal}
.mm-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:#cfdac9;margin:0 0 26px;max-width:52ch}
.mm-tabs{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-bottom:20px;max-width:100%}
.mm-tab{appearance:none;border:0;background:transparent;color:#e3ebdf;font:inherit;font-weight:600;font-size:15px;padding:12px 18px;border-radius:10px;cursor:pointer;transition:background .35s var(--ease),color .3s}
.mm-tab[aria-selected="true"]{background:var(--lime);color:var(--forest)}
.mm-tab:not([aria-selected="true"]):hover{background:rgba(255,255,255,.1)}
.mm-desc{margin:0 0 20px;line-height:1.6;color:#e3ebdf;max-width:56ch;min-height:7.5em}
.mm-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.mm-steps li{display:flex;gap:14px;align-items:center;color:#9fb3a6;transition:color .4s}
.mm-steps li span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);font-weight:600;font-size:14px;transition:all .4s var(--ease)}
.mm-steps li b{font-weight:400;line-height:1.35}
.mm-steps li.on{color:#fff}
.mm-steps li.on span{background:var(--lime);border-color:var(--lime);color:var(--forest);transform:scale(1.1)}
.mm-steps li.done span{border-color:var(--olive);color:var(--lime)}
.mm-note{margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--olive);background:rgba(255,255,255,.06);color:#d6e0d1;font-size:14.5px;line-height:1.5;border-radius:0 10px 10px 0}
.mm-actions{display:flex;flex-wrap:wrap;gap:12px}
.mm-actions .button{margin-top:0;min-width:min(100%,260px)}
.mm-actions .button.r-strong{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.mm-actions .button.r-strong::before{background:#fff}
.mm-actions .button:not(.r-strong){background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.mm-actions .button:not(.r-strong)::before{background:rgba(255,255,255,.14)}

/* ---- сцена ---- */
.mm-stage{position:relative;aspect-ratio:7/6;min-height:360px;border-radius:22px;background:radial-gradient(70% 60% at 50% 38%,rgba(230,236,168,.14),transparent 70%),rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.mm-scale{position:absolute;inset:0;perspective:2200px;transform:scale(var(--s,.6));transform-origin:50% 50%}
.mm-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(60deg) rotateZ(var(--rz,-38deg));transition:transform .25s linear}
.mm-world *{transform-style:preserve-3d}
.mm-ground{position:absolute;left:calc(-1*(var(--off) + 330px));top:-250px;width:calc(2*(var(--off) + 330px));height:500px;border-radius:6px;
  background:linear-gradient(rgba(147,156,89,.28) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(147,156,89,.28) 1px,transparent 1px) 0 0/40px 40px,#e8ecda;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.mm-pad{position:absolute;left:-200px;top:-130px;width:400px;height:260px;border:2px dashed rgba(23,61,50,.55);border-radius:4px;transform:translateZ(1px)}
.mm-shop,.mm-road{position:absolute;opacity:0;transition:opacity .6s}
.mm-shop{left:calc(-90px - var(--off) - 140px);top:-150px;width:280px;height:300px;border:2px dashed rgba(23,61,50,.6);background:rgba(23,61,50,.08);transform:translateZ(1px)}
.mm-road{left:-640px;top:150px;width:1280px;height:34px;background:repeating-linear-gradient(90deg,rgba(23,61,50,.55) 0 36px,transparent 36px 64px) center/100% 3px no-repeat,rgba(23,61,50,.14);transform:translateZ(1px)}
.mm-scene-module .mm-shop,.mm-scene-module .mm-road{opacity:1}

/* сваи */
.mm-pile{position:absolute;left:var(--px);top:var(--py);width:0;height:0}
.mm-pile b{position:absolute;left:-6px;top:-28px;width:12px;height:28px;background:linear-gradient(90deg,#8ea383,#cdd9c1 50%,#8ea383);transform-origin:50% 100%;
  transform:rotateX(calc(var(--pile,0)*-90deg));transition:transform .8s var(--ease) calc(var(--i)*90ms)}
.mm-pile b+b{transform:rotateZ(90deg) rotateX(calc(var(--pile,0)*-90deg))}

/* дом: общий подъём на уровень свай */
.mm-mod{position:absolute;left:0;top:0;width:0;height:0;transform:translate3d(calc(var(--dir,0)*var(--off)*var(--away,0)),0,28px);
  transition:transform 1.5s var(--ease)}
.mm-mod.a{--dir:-1}.mm-mod.b{--dir:1}
.mm-floor{position:absolute;top:-110px;width:180px;height:220px;background:#cfd8c0;box-shadow:inset 0 0 0 2px rgba(23,61,50,.4)}
.mm-mod.a .mm-floor{left:-180px}.mm-mod.b .mm-floor{left:0}

.mm-f{position:absolute;backface-visibility:visible}
/* стены: фасад (+y) и задняя (-y) */
.mm-wf,.mm-wb{width:90px;height:130px;left:calc(var(--x)*1px - 45px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),var(--wall,#1f4a3b);
  box-shadow:inset 0 0 0 1px rgba(230,236,168,.35);transition:transform 1s var(--ease) calc(var(--i)*130ms)}
.mm-wf{top:-20px;transform-origin:50% 100%;transform:rotateX(calc(var(--up,0)*-90deg))}
.mm-wb{--wall:#18382d;top:-110px;transform-origin:50% 0;transform:rotateX(calc(var(--up,0)*90deg))}
.mm-wf.has-door::after{content:"";position:absolute;left:18px;bottom:0;width:30px;height:84px;background:#0f2a22;box-shadow:inset 0 0 0 2px rgba(230,236,168,.55)}
.mm-wf.has-win{background:linear-gradient(180deg,transparent 0 26px,rgba(230,236,168,.0) 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),var(--wall,#1f4a3b)}
.mm-wf.has-win::after{content:"";position:absolute;left:10px;right:10px;top:26px;height:64px;background:linear-gradient(135deg,#bfe0c4,#6aa58d);opacity:.35;transition:opacity .8s 1.2s;box-shadow:inset 0 0 0 2px rgba(230,236,168,.6)}
.mm-ph3 .mm-wf.has-win::after,.mm-final .mm-wf.has-win::after{opacity:.95}
/* крыша: скаты */
.mm-rf,.mm-rb{width:90px;height:131px;left:calc(var(--x)*1px - 45px);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 12px),#0f2a22;box-shadow:inset 0 0 0 1px rgba(230,236,168,.3);
  transition:transform 1s var(--ease) calc(var(--i)*130ms),opacity .6s}
.mm-rf{top:-21px;transform-origin:50% 100%;transform:translateZ(130px) rotateX(calc(var(--rf,0)*-32.5deg));opacity:var(--rf,0)}
.mm-rb{--roof:#0b211b;background-color:#0b211b;top:-110px;transform-origin:50% 0;transform:translateZ(130px) rotateX(calc(var(--rf,0)*32.5deg));opacity:var(--rf,0)}
/* торцы */
.mm-side{position:absolute;left:0;top:0;width:0;height:0}
.mm-side.l{transform:rotateZ(90deg)}
.mm-side.r{transform:rotateZ(-90deg)}
.mm-ws{width:220px;height:130px;left:-110px;top:50px;transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),#18382d;box-shadow:inset 0 0 0 1px rgba(230,236,168,.35);
  transform:translateZ(0) rotateX(calc(var(--up,0)*-90deg));transition:transform 1s var(--ease) 300ms}
.mm-gable{position:absolute;left:0;right:0;top:-70px;height:70px;background:#2a5a48;clip-path:polygon(0 100%,50% 0,100% 100%);
  opacity:var(--rf,0);transition:opacity .6s .6s}

/* ---- состояния ---- */
.mm-scene{--pile:0;--up:0;--rf:0;--away:0}
.mm-scene.mm-scene-module{--up:1;--rf:1;--away:1}
.mm-scene.mm-ph1{--pile:1}
.mm-scene.mm-scene-site.mm-ph2,.mm-scene.mm-scene-site.mm-ph3{--pile:1;--up:1}
.mm-scene.mm-scene-site.mm-ph3{--rf:1}
.mm-scene.mm-scene-module.mm-ph2,.mm-scene.mm-scene-module.mm-ph3{--pile:1;--away:0}
.mm-scene.mm-scene-module.mm-ph3 .mm-wf[data-i="1"]{box-shadow:inset -3px 0 0 var(--lime),inset 0 0 0 1px rgba(230,236,168,.35)}
.mm-scene.mm-scene-module.mm-ph3 .mm-wf[data-i="2"]{box-shadow:inset 3px 0 0 var(--lime),inset 0 0 0 1px rgba(230,236,168,.35)}
.mm-scene.mm-ph1~* {}
.mm-noanim *,.mm-noanim *::before,.mm-noanim *::after{transition:none!important}

/* подпись сцены */
.mm-cap{position:absolute;left:16px;bottom:16px;right:16px;display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(15,42,34,.82);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1.35}
.mm-cap-n{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--lime);color:var(--forest);font-weight:600;font-size:14px}
.mm-replay{position:absolute;right:16px;top:12px;appearance:none;border:1px solid rgba(255,255,255,.3);background:rgba(15,42,34,.82);color:#fff;font:inherit;font-size:14px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background .3s}
.mm-replay:hover{background:var(--forest2)}
.mm-legend{position:absolute;left:16px;top:12px;margin:0;font-size:12.5px;color:#9fb3a6}

@media (max-width:980px){
  .mm{grid-template-columns:1fr;--off:240px}
  .mm-stage{aspect-ratio:1/1;order:-1}
  .mm-desc{min-height:0}
}
@media (max-width:520px){.mm-tabs{display:grid;grid-auto-flow:row;width:100%}.mm-legend{max-width:55%}}
@media (prefers-reduced-motion:reduce){.mm *{transition:none!important}}

/* ---------- вход в модульные дома из первого экрана ---------- */
.mm-chip{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 16px 10px 12px;border-radius:999px;background:rgba(230,236,168,.55);border:1px solid rgba(23,61,50,.25);color:#173d32;font-weight:600;font-size:15px;line-height:1.25;text-decoration:none;transition:background .35s,transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.mm-chip i{width:10px;height:10px;border-radius:50%;background:#173d32;box-shadow:0 0 0 0 rgba(23,61,50,.45);animation:mm-pulse 2.4s infinite}
.mm-chip b{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mm-chip:hover{background:#e6eca8;border-color:#173d32}
.mm-chip:hover b{transform:translateY(3px)}
@keyframes mm-pulse{0%{box-shadow:0 0 0 0 rgba(23,61,50,.45)}70%{box-shadow:0 0 0 10px rgba(23,61,50,0)}100%{box-shadow:0 0 0 0 rgba(23,61,50,0)}}
@media (prefers-reduced-motion:reduce){.mm-chip i{animation:none}}
html.motion-paused .mm-chip i{animation:none}
@media (max-width:760px){.mm-chip{width:100%;box-sizing:border-box;justify-content:space-between;border-radius:14px}}