/* Первый экран /website (RU и DE): карта Германии (canvas, assets/js/hero-map.js), фон «Глубина»: статичная сетка-пол + туман.
   Сетка нарисована SVG-линиями без CSS-3D и без анимации: ничего не мерцает и не муарит при прокрутке. */
.pg .hero-map{--cw:calc(min(100vw - 20px,1200px) - 2 * var(--gutter));--hm-em:8.95;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:0;
  min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.pg .hero-map--de{--hm-em:10.1}
.pg .hero-map .hm-grid{display:grid;grid-template-columns:minmax(0,.53fr) minmax(0,.47fr);gap:0;align-items:center;width:100%;position:static}
.pg .hero-map .hero-copy{position:relative;z-index:3;padding:clamp(24px,4vh,56px) 0}
.pg .hero-map h1{font-size:min(68px,calc(var(--cw) * .53 / var(--hm-em)));font-weight:600;letter-spacing:-.042em;line-height:1.01;margin:0 0 clamp(18px,2.4vw,32px);text-wrap:balance}
.pg .hero-map h1 b,.pg .hero-map h1 .h1-acc{font-weight:700;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(100deg,#818cf8 0%,#a78bfa 45%,#5eead4 100%);-webkit-background-clip:text;background-clip:text}
.pg .hero-map h1 .h1-acc{display:block}
.pg .hero-map .lead{font-size:clamp(16px,1.35vw,20px);color:var(--text);max-width:36em;margin:0 0 20px}
.pg .hero-map .btn-row{margin:6px 0 0}
/* перелив градиента в заголовке (медленный); при reduced-motion остаётся статичный градиент */
@media (prefers-reduced-motion:no-preference){
  .pg .hero-map h1 b,.pg .hero-map h1 .h1-acc{background-image:linear-gradient(100deg,#818cf8 0%,#a78bfa 25%,#5eead4 50%,#a78bfa 75%,#818cf8 100%);background-size:220% 100%;animation:hmShift 10s ease-in-out infinite alternate}
}
@keyframes hmShift{from{background-position:0 0}to{background-position:100% 0}}

/* фон «Глубина»: статичная сетка-пол + туман у горизонта */
.pg .hero-map .hm-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pg .hero-map .hm-floor{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;display:block;overflow:hidden;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%);mask-image:linear-gradient(180deg,transparent 0,#000 42%)}
.pg .hero-map .hm-floor path{fill:none;stroke:#818cf8;stroke-width:1.3;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.pg .hero-map .hm-fog{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(99,102,241,.13) 55%,rgba(10,10,24,.6))}

/* карта */
.pg .hero-map .hm-map{position:absolute;inset:0;z-index:1;
  -webkit-mask-image:radial-gradient(ellipse 85% 95% at 68% 50%,#000 45%,rgba(0,0,0,.7) 72%,transparent 100%);mask-image:radial-gradient(ellipse 85% 95% at 68% 50%,#000 45%,rgba(0,0,0,.7) 72%,transparent 100%)}
.pg .hero-map .hm-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg .hero-map .hm-pops{position:absolute;inset:0;pointer-events:none}
.pg .hero-map .hm-pop{position:absolute;width:0;height:0}
.pg .hero-map .hm-pop .st{position:absolute;left:-1px;bottom:0;width:2px;height:var(--L);transform-origin:50% 100%;rotate:var(--a);border-radius:2px;
  background:linear-gradient(0deg,#22c55e,rgba(34,197,94,.25));opacity:0;animation:hmSt 2.6s var(--ease-r) forwards}
.pg .hero-map .hm-pop .pl{position:absolute;left:calc(var(--dx) - 17px);top:calc(var(--dy) * -1 - 17px);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(12,40,24,.95);border:1px solid rgba(34,197,94,.75);color:var(--green-t);box-shadow:0 8px 24px -6px rgba(34,197,94,.65);opacity:0;animation:hmPl 2.6s var(--ease-r) forwards}
.pg .hero-map .hm-pop .pl svg{width:17px;height:17px}
@keyframes hmSt{0%{opacity:0;scale:1 0}16%{opacity:1;scale:1 1}78%{opacity:1}100%{opacity:0}}
@keyframes hmPl{0%{opacity:0;translate:0 10px;scale:.5}18%{opacity:1;translate:0 0;scale:1}78%{opacity:1}100%{opacity:0;translate:0 -6px}}

@media (max-width:899px){
  .pg .hero-map{display:block;min-height:0}
  .pg .hero-map .hm-grid{grid-template-columns:1fr}
  .pg .hero-map .hm-map{position:relative;inset:auto;height:min(54svh,460px);min-height:340px;
    -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 45%,transparent 100%)}
  .pg .hero-map h1{font-size:min(56px,calc(var(--cw) / var(--hm-em)))}
  .pg .hero-map .hero-copy{padding-top:6px;padding-bottom:44px}
  .pg .hero-map .hm-floor{height:40%}
}