/* ═══════ ЖВ: hero «Дорога выборов» (вариант 13.10) ═══════
   По образцу hero «Вечера с друзьями»: гамма и мотивы взяты с рисунка коробки
   и нарисованы вектором (у ВСД — звёзды и гирлянда, здесь — статичное размытое солнце за коробкой,
   холмы с соснами и золотая дорога, которая под коробкой расходится на две; дальняя дорога выходит из-за коробки,
   ныряет за первый холм и переваливает через второй — #hrHillMid / #hrHillBack обрезают её по силуэтам).
   Фон — hero-градиент zhv из UI-библиотеки (#gradients, .g-hero-zhv),
   коробка — CSS 3D (#boxlid, .box-rig из страницы, вращение — скрипт #boxRig),
   карты — .hero-float (#hero-float), кнопка — .btn-primary, значки — .dood-*.
   Прежние варианты hero — archive/zhv-hero-versions/. */
.hero-road{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(48px,6vw,84px) 0 0;
  color:var(--cocoa);
  background:
    radial-gradient(58% 58% at 86% 34%,rgba(239,163,75,.48),transparent 70%),
    radial-gradient(35% 48% at 12% 10%,rgba(255,255,255,.74),transparent 76%),
    linear-gradient(126deg,#f8ebd8 0%,#f5e2c7 58%,#f3d3aa 100%);
}
/* пылинки в закатном свете на всю ширину (как звёзды у ВСД), над текстом почти не видны */
.hero-road::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360'%3E%3Cg fill='%23FFF6E2'%3E%3Ccircle cx='38' cy='52' r='2'/%3E%3Ccircle cx='190' cy='24' r='1.4'/%3E%3Ccircle cx='300' cy='120' r='2.4'/%3E%3Ccircle cx='452' cy='70' r='1.6'/%3E%3Ccircle cx='96' cy='210' r='1.5'/%3E%3Ccircle cx='250' cy='280' r='2'/%3E%3Ccircle cx='410' cy='238' r='1.3'/%3E%3Ccircle cx='500' cy='330' r='2.2'/%3E%3C/g%3E%3Cg fill='%23ECA04A' fill-opacity='.45'%3E%3Ccircle cx='140' cy='120' r='1.6'/%3E%3Ccircle cx='360' cy='30' r='1.3'/%3E%3Ccircle cx='60' cy='318' r='1.4'/%3E%3Ccircle cx='470' cy='160' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/520px 360px repeat;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.35) 40%,#000 70%);mask-image:linear-gradient(100deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.35) 40%,#000 70%)}
/* дальняя гряда холмов через всю ширину — сцена справа продолжается под текстом */
.hero-road::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:clamp(90px,11vw,150px);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 70C200 30 380 40 560 66S940 40 1140 58S1360 80 1440 62V150H0Z' fill='%23F2C48C' fill-opacity='.5'/%3E%3Cpath d='M0 108C240 82 470 92 700 110S1180 92 1440 104V150H0Z' fill='%23EDB277' fill-opacity='.5'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%}

.hero-road__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(20px,4vw,56px);align-items:center}
.hero-road__copy{position:relative;z-index:2;padding-bottom:clamp(72px,8vw,120px)}
.hero-road__kicker{margin:0 0 14px;font-family:var(--hand);color:var(--rust);font-size:clamp(22px,2vw,26px);line-height:1.1}
.hero-road h1{margin:0;font-family:var(--editorial);font-weight:500;font-size:clamp(48px,7vw,88px);line-height:.96;letter-spacing:-.045em;color:var(--cocoa);text-wrap:balance}
.hero-road h1 em{display:block;font-style:italic;font-weight:500;color:var(--rust);text-shadow:0 0 44px rgba(239,163,75,.35)}
.hero-road__lead{max-width:500px;margin:24px 0 26px;color:rgba(76,43,35,.8);font-size:clamp(16px,1.38vw,18px);line-height:1.55}
.hero-road__facts{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 29px;padding:0;list-style:none}
.hero-road__facts li{display:inline-flex;min-height:38px;align-items:center;gap:7px;padding:7px 13px;border:1px solid rgba(76,43,35,.13);border-radius:999px;background:rgba(255,252,245,.78);font-size:13px;font-weight:600;white-space:nowrap}
.hero-road__facts .dood{width:15px;height:15px;color:var(--rust)}
.hero-road__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.hero-road__price{font-size:35px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--cocoa)}

/* ── Сцена 640×600: развилка под коробкой в точке (320, 468) ── */
.hero-road__product{position:relative;min-width:0;display:flex;justify-content:flex-start;align-self:end}
.hero-road__scene{--scene-w:600px;position:relative;flex:none;width:var(--scene-w);margin-left:-64px;aspect-ratio:640/600;perspective:1400px;perspective-origin:50% 40%}
.hero-road__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-road__mobfar{display:none}
.hero-road__motes .m{animation:hero-road-mote 5s ease-in-out infinite}
.hero-road__motes .m1{animation-delay:-1.3s;animation-duration:4.2s}
.hero-road__motes .m2{animation-delay:-2.6s;animation-duration:6s}
.hero-road__motes .m3{animation-delay:-3.8s;animation-duration:4.8s}
@keyframes hero-road-mote{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}

/* коробка: нижняя грань на развилке (78% высоты сцены), тень — по #boxlid */
.hero-road__box{position:absolute;z-index:2;left:50%;bottom:22%;transform:translateX(-50%);display:flex;justify-content:center}
.hero-road__box .box-rig{--box-w:252px;--box-h:371px;--box-d:70px;outline-offset:10px;border-radius:4px}
.hero-road__box .box-rig:focus-visible{outline:2px solid var(--rust)}
.hero-road .box-rig{cursor:url('../assets/cursors/capitaine-dark/grab.svg') 22 22,grab}
.hero-road .box-rig.is-dragging{cursor:url('../assets/cursors/capitaine-dark/grabbing.svg') 22 22,grabbing}

.hero-road__shadow{position:absolute;z-index:1;left:50%;bottom:calc(22% - 22px);width:300px;height:46px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(84,43,38,.38),rgba(84,43,38,0) 70%);filter:blur(7px);pointer-events:none}

/* порт .hero-float (#hero-float): три позиции, разные углы, drop-shadow, aspect 78/118 */
.hero-road__scene .hero-float{z-index:3}
.hero-road__scene .hero-float.one{width:88px;left:2%;top:12%;transform:rotate(-14deg)}
.hero-road__scene .hero-float.two{width:96px;right:1%;top:8%;transform:rotate(11deg)}
.hero-road__scene .hero-float.three{width:80px;left:9%;top:auto;bottom:30%;transform:rotate(6deg)}

/* средние ширины: колонка узкая — сцена меньше и прижата к правому краю */
@media (min-width:841px) and (max-width:1180px){
  .hero-road__scene{--scene-w:min(540px,48vw);margin-left:-48px}
  .hero-road__scene .hero-float.two{right:9%;top:10%}
  .hero-road__box .box-rig{--box-w:200px;--box-h:295px;--box-d:56px}
  .hero-road__shadow{width:250px}
}
/* узкий десктоп: левая карта легла бы на лид — оставляем одну правую */
@media (min-width:841px) and (max-width:1023px){
  .hero-road__scene .hero-float:is(.one,.three){display:none}
}
@media (max-width:840px){
  .hero-road{padding-top:44px}
  .hero-road__grid{grid-template-columns:minmax(0,1fr);text-align:center}
  .hero-road__copy{padding-bottom:0}
  .hero-road__lead{margin-left:auto;margin-right:auto}
  .hero-road__facts,.hero-road__actions{justify-content:center}
  .hero-road__product{margin-top:4px;justify-content:center}
  .hero-road__scene{--scene-w:min(112vw,480px);margin-left:0}
  .hero-road__box .box-rig{--box-w:min(40vw,190px);--box-h:calc(var(--box-w) * 1.4733);--box-d:calc(var(--box-w) * .28)}
  .hero-road__shadow{width:min(52vw,240px)}
  .hero-road__scene .hero-float{display:none}
  .hero-road__kicker{color:var(--rust-dark)}
  
  
  
  
  
}
@media (max-width:520px){
  .hero-road__facts li{font-size:12px;padding:6px 11px}
  .hero-road__price{font-size:30px}
  .hero-road__actions{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .hero-road__motes .m{animation:none}
  
  
}
/* телефон: как у остальных игр (games/zhiznennye-vybory-2.html) — сцена → таблетки → цена и кнопка, всё по центру под изображением */
@media (max-width:620px){
  .hero-road__grid{row-gap:0}
  .hero-road__copy{display:contents}
  /* дорога на десктопе уходит за низ блока до края hero; здесь под ней таблетки и покупка — обрезаем по блоку и растворяем к низу */
  .hero-road__product{order:1;margin-top:4px}
  .hero-road__scene{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)} /* маска по сцене: она шире блока и доходит до краёв экрана */
  /* сцена в разметке идёт после таблеток и покупки и рисовалась бы поверх них */
  .hero-road__facts{order:2;position:relative;z-index:2;margin:-40px 0 0} /* таблетки заходят на нижний край дороги */
  .hero-road__actions{order:3;position:relative;z-index:2;margin-top:18px;padding-bottom:32px}
  /* солнце: ореол не выходит за верх сцены — маска сцены обрезала бы его по прямой */
  .hero-road__sun{r:215px}
  /* дальние дороги: продолжение главной — лента петляет вправо по второму бархану, переваливает гребень и поднимается по третьему;
     сужается и бледнеет в даль, каждая часть обрезана гребнем своего бархана (#hrHillMid, #hrHillBack) */
  .hero-road__far{display:none}
  .hero-road__mobfar{display:inline}
  /* главная дорога чуть поднята и обрезана по гребню ближнего бархана — дальний край совпадает с его верхней линией */
  .hero-road__way-clip{clip-path:url(#hrHillFront)}
  .hero-road__way-lift{transform:translateY(-14px)}
}

/* Approved hero refinement 2026-10-22: original landscape, quieter road, two cards. */
.hero-road{background:radial-gradient(58% 58% at 86% 34%,rgba(239,163,75,.19),transparent 70%),radial-gradient(35% 48% at 12% 10%,rgba(255,255,255,.66),transparent 76%),linear-gradient(126deg,#f8ebd8 0%,#f5e2c7 58%,#f2d7b4 100%)}
.hero-road::before{opacity:.5}
.hero-road h1 em{text-shadow:none}
/* Compress contrast inside the original striped road, keeping its warm rhythm. */
.hero-road__way path[fill="#4F3830"]{fill:#a8795c}
.hero-road__way path[fill="#C4553A"]{fill:#bc7956}
.hero-road__way path[fill="#EE9147"]{fill:#d89c63}
.hero-road__way path[fill="#F6BE76"]{fill:#e5bc86}
.hero-road__way path[fill="#FDEBCB"]{fill:#eed6ae}
.hero-road__way path[fill="#FFF3DC"]{fill:#f0d8af;fill-opacity:.35}
.hero-road__far,.hero-road__far2,.hero-road__far3{opacity:.7}
.hero-road__motes{opacity:.45}.hero-road__motes .m{animation:none}
.hero-road__scene .hero-float{animation:none;box-shadow:0 12px 24px rgba(76,43,35,.18)}
.hero-road__scene .hero-float.one{left:2%;top:12%;width:88px;transform:rotate(-12deg)}
.hero-road__scene .hero-float.two{right:0;top:auto;bottom:24%;width:91px;transform:rotate(10deg)}
@media(min-width:841px) and (max-width:1180px){.hero-road__scene .hero-float.one{display:block;width:72px;left:0;top:11%}.hero-road__scene .hero-float.two{width:76px;right:6%;top:auto;bottom:22%}}
@media(max-width:840px){.hero-road__scene .hero-float.one{display:block;width:15%;left:10%;top:10%}.hero-road__scene .hero-float.two{display:block;width:15%;right:9%;top:auto;bottom:25%}}
@media(prefers-reduced-motion:reduce){.hero-float,.ribbon-track,.box-rig{animation:none!important;transition:none!important}}

/* Final spacing pass: one continuous main road and quieter peripheral forest. */
.hero-road__far,.hero-road__mobfar{display:none!important}
.hero-forest-near{opacity:.8}.hero-forest-near path{fill:#526c55}
.hero-forest-near>path{transform:translateX(-48px)}
/* Replaces source SVG translate(58 0): 58 original + 50 outward. */
.hero-forest-near>g{transform:translateX(108px)}
.hero-forest-far{opacity:.7}
.hero-road__scene .hero-float.two{bottom:29%}