/* Maskot webu (static/js/hn-mascot.js): autíčko z titulky. Rozměry,
   barvy a kresba jako v home-new.css (.hn-turn-truck), vlastní třídy
   hnm-, aby se nepotkaly s autíčkem na titulce. Pravidla: grafický
   manuál, sekce Maskot. Žije jen na tmavé silnici (navy-deep). */

.hnm-road{position:relative;background:#16293f}
/* Silnice: stejná čára jako dráha v pruhu nad patičkou. */
.hnm-line{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}

.hnm{
  position:absolute;left:0;bottom:0;width:38px;height:30px;
  --z:2.4; --flip:1;
  transform-origin:50% 100%;
  transform:translateX(-50%) translateY(var(--lift,0px)) scale(var(--z));
  color:#969fa9;pointer-events:none;
}
.hnm-flip{position:absolute;inset:0;transform:scaleX(var(--flip));transition:transform .4s ease}
.hnm.is-back{--flip:-1}
.hnm-truck{position:absolute;left:0;bottom:1.3px;width:38px;height:26.6px;display:block;overflow:visible}
/* Klopení jde na celý rig (karoserie + kola), kola se od auta neodpojí. */
.hnm-rig{transform-box:view-box;transform-origin:var(--pivot,320px) 336px;rotate:var(--pitch,0deg)}
.hnm-body{fill:currentColor;transform-box:view-box;transform-origin:var(--pivot,320px) 336px}
.hnm-wheel{fill:#6a7582;transform-box:view-box}
.hnm-hub{fill:rgb(28,32,38)}

/* Náklad: písmena na zvednuté sklopce (-38°), nezrcadlí se, aby šla číst. */
.hnm-load{
  position:absolute;left:-10px;bottom:10px;display:inline-flex;align-items:baseline;
  color:#fff;font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:9px;letter-spacing:.16em;line-height:1;white-space:nowrap;
  transform-origin:0 100%;--tip:-38deg;
  transform:rotate(calc(var(--tip) + var(--pitch-load,0deg)));
  transition:transform .4s ease;
}
.hnm.is-back .hnm-load{left:-7px;transform-origin:100% 100%;--tip:38deg}
.hnm.is-flat .hnm-load{--tip:0deg;bottom:15px;left:6px;font-size:8px;letter-spacing:.1em}
.hnm.is-flat.is-back .hnm-load{left:5px}
.hnm-load > i{font-style:normal;visibility:hidden}
.hnm-load > i.is-on{visibility:visible}
.hnm-sq{display:inline-block;width:3px;height:3px;background:#d9772c;border-radius:.5px;margin-left:2px}

/* Čáry rychlosti za prázdným autem. */
.hnm-wind{position:absolute;right:100%;bottom:6px;width:24px;height:18px;margin-right:3px;opacity:0;transition:opacity .45s ease}
.hnm-wind > i{position:absolute;right:0;height:2px;width:var(--len);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));animation:hnmWind .35s linear infinite}
.hnm-wind > i:nth-child(1){top:0;--len:20px}
.hnm-wind > i:nth-child(2){top:8px;--len:14px;margin-right:4px;animation-duration:.42s}
.hnm-wind > i:nth-child(3){top:16px;--len:17px;margin-right:1px;animation-duration:.3s}
.hnm.is-fast .hnm-wind{opacity:1}
@keyframes hnmWind{50%{translate:-4px 0}}

/* Obláček prachu od zadního kola: stojí na silnici, roste a mizí. */
.hnm-dust{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;
  translate:-50% -100%;
  background:radial-gradient(circle,rgba(226,232,240,.85) 0%,rgba(203,213,225,.55) 55%,rgba(190,198,208,0) 100%)}

/* Letící písmeno při nakládání a vykládání. */
.hnm-fly{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;color:#fff;font-family:'DM Sans',system-ui,sans-serif;font-weight:800;line-height:1;font-style:normal;will-change:transform}
.hnm-fly.hnm-sq{margin:0}

@media (prefers-reduced-motion:reduce){
  .hnm-wind > i{animation:none}
  .hnm-flip,.hnm-load{transition:none}
}