/* ==========================================================================
   HR Racing 2026 – pohybová vrstva
   --------------------------------------------------------------------------
   Všechno tady visí na třídě html.hr-pohyb, kterou nasazuje hr-motion.js.
   Bez JavaScriptu, při „omezit pohyb" v systému nebo po vypnutí přepínačem
   v patičce se třída nenasadí a web vypadá a funguje přesně jako dřív –
   nic se neschová, nic nepočká na animaci.

   Posouváme přes vlastnost translate / scale, ne přes transform, aby se to
   nepralo s transformacemi, které šablona už má.
   ========================================================================== */

:root{
  --hr-zlata:#f5c542;
  --hr-stribro:#c9ced6;
  --hr-bronz:#cd7f32;
  --hr-krivka:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------ naskočení obsahu */
.hr-pohyb [data-hr-in]{opacity:0;transition:opacity .62s var(--hr-krivka),translate .62s var(--hr-krivka),scale .62s var(--hr-krivka),filter .62s var(--hr-krivka)}
.hr-pohyb [data-hr-in="up"]{translate:0 26px}
.hr-pohyb [data-hr-in="left"]{translate:-30px 0}
.hr-pohyb [data-hr-in="right"]{translate:30px 0}
.hr-pohyb [data-hr-in="zoom"]{scale:.94}
.hr-pohyb [data-hr-in="blur"]{filter:blur(6px);translate:0 14px}
.hr-pohyb [data-hr-in].hr-je{opacity:1;translate:0 0;scale:1;filter:none}

/* řádky tabulek naskakují zleva, ať to vypadá jako výsledková listina */
.hr-pohyb tr[data-hr-in]{translate:-14px 0}
.hr-pohyb tr[data-hr-in].hr-je{translate:0 0}

/* ------------------------------------------------ startovní světla */
#hr-start{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:#07080b;transition:opacity .45s ease,visibility .45s ease}
#hr-start[hidden]{display:none}
#hr-start.hr-pryc{opacity:0;visibility:hidden;pointer-events:none}
#hr-start .hr-start-in{display:flex;flex-direction:column;align-items:center;gap:18px}
#hr-start .hr-start-l{display:flex;gap:12px}
#hr-start .hr-start-l s{width:26px;height:26px;border-radius:50%;background:#16181f;border:1px solid #23262e;text-decoration:none;
  transition:background .12s ease,box-shadow .12s ease,scale .12s ease}
#hr-start .hr-start-l s.sviti{background:var(--hr-red,#ef001c);border-color:#ff2438;box-shadow:0 0 18px rgba(239,0,28,.8)}
#hr-start.hr-zeleno .hr-start-l s{background:#4ad66d;border-color:#4ad66d;box-shadow:0 0 22px rgba(74,214,109,.85);scale:1.12}
#hr-start .hr-start-t{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:.18em;font-size:13px;color:#5d5f68}
#hr-start.hr-zeleno .hr-start-t{color:#4ad66d}
@media(max-width:480px){#hr-start .hr-start-l s{width:19px;height:19px;gap:8px}}

/* ------------------------------------------------ pruh scrollování */
#hr-scroll{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9998;pointer-events:none;background:transparent}
#hr-scroll i{display:block;height:100%;width:var(--hr-scroll,0%);
  background:linear-gradient(90deg,var(--hr-red,#ef001c),#ff6b3d);box-shadow:0 0 10px rgba(239,0,28,.6)}
#hr-scroll b{position:absolute;top:-7px;left:var(--hr-scroll,0%);width:0;color:var(--hr-red,#ef001c)}
#hr-scroll svg{display:block;width:26px;height:13px;margin-left:-13px;animation:hrKolebani 1.1s ease-in-out infinite}
@keyframes hrKolebani{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1px;rotate:-2deg}}

/* ------------------------------------------------ přechod mezi stránkami */
#hr-zaves{position:fixed;inset:0;z-index:99990;pointer-events:none;visibility:hidden}
#hr-zaves.hr-jede{visibility:visible}
#hr-zaves span{position:absolute;top:0;bottom:0;width:calc(100% / 6);background:#07080b;translate:0 -102%;
  transition:translate .34s cubic-bezier(.65,0,.35,1)}
#hr-zaves span:nth-child(1){left:0}
#hr-zaves span:nth-child(2){left:calc(100% / 6)}
#hr-zaves span:nth-child(3){left:calc(100% / 3)}
#hr-zaves span:nth-child(4){left:50%}
#hr-zaves span:nth-child(5){left:calc(100% / 1.5)}
#hr-zaves span:nth-child(6){left:calc(100% / 1.2)}
#hr-zaves.hr-jede span{translate:0 0}
#hr-zaves.hr-jede span:nth-child(2){transition-delay:.05s}
#hr-zaves.hr-jede span:nth-child(3){transition-delay:.1s}
#hr-zaves.hr-jede span:nth-child(4){transition-delay:.15s}
#hr-zaves.hr-jede span:nth-child(5){transition-delay:.2s}
#hr-zaves.hr-jede span:nth-child(6){transition-delay:.25s}
#hr-zaves span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,#fff 0 8px,#07080b 8px 16px);opacity:.55}

/* ------------------------------------------------ rychlostní čáry v pozadí */
.hr-pohyb .hr-cary{position:fixed;inset:-40% -60%;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 76px,rgba(239,0,28,.045) 76px 79px);
  animation:hrCary 34s linear infinite}
@keyframes hrCary{to{translate:-79px 170px}}

/* ------------------------------------------------ nadpisy */
.hr-pohyb .sec-title[data-hr-nadpis],.hr-pohyb .champ-title[data-hr-nadpis],.hr-pohyb .page-hero h1[data-hr-nadpis]{position:relative}
.hr-pohyb [data-hr-nadpis]::after{content:"";position:absolute;left:-4px;right:-4px;top:0;bottom:0;background:var(--hr-red,#ef001c);
  transform-origin:left center;scale:0 1;pointer-events:none}
.hr-pohyb [data-hr-nadpis].hr-je::after{animation:hrSetr .72s cubic-bezier(.7,0,.3,1) forwards}
@keyframes hrSetr{0%{scale:0 1;transform-origin:left center}48%{scale:1 1;transform-origin:left center}52%{scale:1 1;transform-origin:right center}100%{scale:0 1;transform-origin:right center}}
.hr-pohyb [data-hr-nadpis].hr-je{animation:hrGlitch .5s steps(2,end) .24s 2}
@keyframes hrGlitch{0%,100%{translate:0 0;text-shadow:none}25%{translate:-2px 0;text-shadow:2px 0 rgba(239,0,28,.8),-2px 0 rgba(0,180,255,.5)}75%{translate:2px 0;text-shadow:-2px 0 rgba(239,0,28,.8),2px 0 rgba(0,180,255,.5)}}

/* ------------------------------------------------ karty */
.hr-pohyb .card,.hr-pohyb .champ,.hr-pohyb .icard,.hr-pohyb .acard,.hr-pohyb .cd-panel{
  transition:translate .22s var(--hr-krivka),border-color .22s ease,box-shadow .22s ease}
.hr-pohyb .card:hover,.hr-pohyb .champ:hover,.hr-pohyb .icard:hover,.hr-pohyb .acard:hover{
  translate:0 -3px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
/* Světlo, které přejede přes kartu při najetí. Jen na kartách, které šablona
   sama ořezává – .acard nic neořezává, tam by světlo vyteklo ven. */
.hr-pohyb .card,.hr-pohyb .champ,.hr-pohyb .icard{position:relative}
.hr-pohyb .card::after,.hr-pohyb .champ::after,.hr-pohyb .icard::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent)}
.hr-pohyb .card:hover::after,.hr-pohyb .champ:hover::after,.hr-pohyb .icard:hover::after{
  animation:hrPrejezd .75s ease-out}
@keyframes hrPrejezd{0%{left:-60%;opacity:1}100%{left:115%;opacity:1}}

/* ------------------------------------------------ tlačítka */
.hr-pohyb .hr-btn{position:relative;overflow:hidden;transition:translate .16s var(--hr-krivka),filter .16s ease,box-shadow .16s ease}
.hr-pohyb .hr-btn:hover{translate:0 -2px;filter:brightness(1.1);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.hr-pohyb .hr-btn:active{translate:0 0}
.hr-pohyb .hr-btn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);opacity:0}
.hr-pohyb .hr-btn:hover::before{animation:hrLesk .6s ease-out}
@keyframes hrLesk{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}

/* ------------------------------------------------ menu */
.hr-pohyb .nav a{position:relative;transition:color .16s ease,translate .16s var(--hr-krivka)}
.hr-pohyb .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--hr-red,#ef001c);
  transform-origin:right center;scale:0 1;transition:scale .22s var(--hr-krivka)}
.hr-pohyb .nav a:hover{translate:0 -1px}
.hr-pohyb .nav a:hover::after,.hr-pohyb .nav .current-menu-item>a::after{transform-origin:left center;scale:1 1}

/* ------------------------------------------------ čísla a pruhy */
.hr-pohyb .hr-pocitadlo{font-variant-numeric:tabular-nums}
.hr-pohyb .hr-pocitadlo.hr-tiká{animation:hrTik .4s ease-out}
@keyframes hrTik{0%{translate:0 -4px;color:var(--hr-red,#ef001c)}100%{translate:0 0}}
.hr-pohyb [data-hr-pruh]{transition:width 1.05s var(--hr-krivka)}

/* ------------------------------------------------ výsledkové tabulky */
.hr-pohyb tbody tr{transition:background .16s ease}
.hr-pohyb tbody tr:hover{background:rgba(239,0,28,.06)}
.hr-pohyb .pos.p1,.hr-pohyb .pos.p2,.hr-pohyb .pos.p3{position:relative;overflow:hidden}
.hr-pohyb .pos.p1::after,.hr-pohyb .pos.p2::after,.hr-pohyb .pos.p3::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  translate:-100% 0;animation:hrZablesk 4.5s ease-in-out infinite}
.hr-pohyb .pos.p2::after{animation-delay:.5s}
.hr-pohyb .pos.p3::after{animation-delay:1s}
@keyframes hrZablesk{0%,70%,100%{translate:-100% 0}85%{translate:100% 0}}

/* ------------------------------------------------ živé štítky */
.hr-pohyb .live{position:relative}
.hr-pohyb .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  background:currentColor;vertical-align:1px;animation:hrTep 1.3s ease-in-out infinite}
@keyframes hrTep{0%,100%{opacity:.3;scale:.8}50%{opacity:1;scale:1.2}}

/* ------------------------------------------------ hero a parallax */
.hr-pohyb .page-hero .hero-media,.hr-pohyb .champ-hero{will-change:translate}
.hr-pohyb [data-hr-parallax]{translate:0 var(--hr-par,0px)}
/* .page-hero si šablona ořezává sama, nic tu nepřenastavujeme */
.hr-pohyb .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 24px);opacity:.14}

/* ------------------------------------------------ obrázky */
.hr-pohyb img.hr-img{opacity:0;scale:1.03;transition:opacity .5s ease,scale .7s var(--hr-krivka)}
.hr-pohyb img.hr-img.hr-nactena{opacity:1;scale:1}

/* ------------------------------------------------ přepínač v patičce */
.hr-prepinac{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#8b8d96;
  font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hr-prepinac:hover{color:#e7e8ea;border-color:rgba(255,255,255,.22)}
.hr-prepinac i{width:26px;height:14px;border-radius:999px;background:#23262e;position:relative;flex:0 0 auto;transition:background .18s ease}
.hr-prepinac i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#8b8d96;
  transition:translate .18s var(--hr-krivka),background .18s ease}
.hr-prepinac.hr-sepnuto i{background:var(--hr-red,#ef001c)}
.hr-prepinac.hr-sepnuto i::after{translate:12px 0;background:#fff}

/* vypínač v nastavení profilu */
.hr-nastaveni .card-head{margin-bottom:10px}
.hr-prepinac--profil{display:flex;width:100%;text-align:left;gap:12px;padding:12px 14px;border-radius:8px;
  flex-wrap:wrap;align-items:center;text-transform:none;letter-spacing:0;font-size:15px;color:#e7e8ea}
.hr-prepinac--profil i{width:40px;height:22px;order:3;margin-left:auto}
.hr-prepinac--profil i::after{width:16px;height:16px;top:3px;left:3px}
.hr-prepinac--profil.hr-sepnuto i::after{translate:18px 0}
.hr-prepinac--profil .hr-prepinac-t{order:1;font-weight:700}
.hr-prepinac--profil .hr-prepinac-p{order:4;flex:1 0 100%;font-size:12px;color:#8b8d96;text-transform:none;letter-spacing:0}
.hr-nastaveni-pozn{margin:10px 0 0;font-size:12.5px;color:#8b8d96;line-height:1.55}
.hr-nastaveni-no{font-size:13px;color:#8b8d96}


/* ------------------------------------------------ přístupnost */
.hr-pohyb a:focus-visible,.hr-pohyb button:focus-visible,.hr-pohyb select:focus-visible,
.hr-pohyb input:focus-visible,.hr-pohyb textarea:focus-visible{outline:2px solid var(--hr-red,#ef001c);outline-offset:2px}

/* Kdo nechce pohyb, ten ho nedostane – a to i kdyby se třída omylem nasadila. */
@media(prefers-reduced-motion:reduce){
  .hr-pohyb *,.hr-pohyb *::before,.hr-pohyb *::after{
    animation:none!important;transition:none!important}
  .hr-pohyb [data-hr-in]{opacity:1!important;translate:0 0!important;scale:1!important;filter:none!important}
  .hr-pohyb .hr-cary,#hr-start,#hr-zaves,#hr-scroll{display:none!important}
}

/* ==========================================================================
   Doplňky – 1.74.0
   ========================================================================== */

/* ---------------- opona se stejně hezky odkrývá, jako zakryla -------------- */
#hr-zaves.hr-bez-prechodu span{transition:none!important}
#hr-zaves.hr-zvedam{visibility:visible}
#hr-zaves.hr-zvedam span{transition-duration:.42s}
#hr-zaves.hr-zvedam span:nth-child(6){transition-delay:0s}
#hr-zaves.hr-zvedam span:nth-child(5){transition-delay:.05s}
#hr-zaves.hr-zvedam span:nth-child(4){transition-delay:.1s}
#hr-zaves.hr-zvedam span:nth-child(3){transition-delay:.15s}
#hr-zaves.hr-zvedam span:nth-child(2){transition-delay:.2s}
#hr-zaves.hr-zvedam span:nth-child(1){transition-delay:.25s}

/* ---------------- statistiky v kartě: impulz a označení ------------------- */
/* Impulz vyjede z dlaždice, na kterou člověk najel, a přeletí přes celou kartu. */
.hr-pohyb .hrnum-card,.hr-pohyb .hr-statkarta{position:relative}
.hr-pohyb .hrnum-card::before,.hr-pohyb .hr-statkarta::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--hr-ix,50%) var(--hr-iy,50%),rgba(239,0,28,.3),rgba(239,0,28,.1) 24%,transparent 46%)}
.hr-pohyb .hrnum-card.hr-impulz::before,.hr-pohyb .hr-statkarta.hr-impulz::before{animation:hrImpulz .62s ease-out}
@keyframes hrImpulz{0%{opacity:.95;scale:.25}70%{opacity:.5}100%{opacity:0;scale:1.9}}

.hr-pohyb .hrnum,.hr-pohyb .hb-stat,.hr-pohyb .cn-stat{position:relative;z-index:2;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,translate .2s var(--hr-krivka),box-shadow .2s ease}
.hr-pohyb .hrnum .i,.hr-pohyb .hrnum b,.hr-pohyb .hrnum .l{transition:color .2s ease,scale .2s var(--hr-krivka)}
.hr-pohyb .hrnum:hover,.hr-pohyb .hrnum:focus-visible,.hr-pohyb .hb-stat:hover,.hr-pohyb .cn-stat:hover{
  border-color:var(--hr-red,#ef001c);translate:0 -2px;box-shadow:0 0 0 1px rgba(239,0,28,.35),0 10px 24px rgba(239,0,28,.14)}
.hr-pohyb .hrnum:hover b,.hr-pohyb .hrnum:focus-visible b{color:var(--hr-red2,#ff2438);scale:1.06}
.hr-pohyb .hrnum:hover .i,.hr-pohyb .hrnum:focus-visible .i{scale:1.14}

/* po kliknutí dlaždice zůstane označená, dokud se neklikne jinam */
.hr-pohyb .hrnum.hr-vybrana,.hr-pohyb .hb-stat.hr-vybrana,.hr-pohyb .cn-stat.hr-vybrana{
  border-color:var(--hr-red,#ef001c);background:linear-gradient(160deg,rgba(239,0,28,.16),rgba(239,0,28,.04))}
.hr-pohyb .hrnum.hr-vybrana b{color:var(--hr-red2,#ff2438)}
.hr-pohyb .hrnum.hr-vybrana .l{color:#e7e8ea}
.hr-pohyb .hrnum.hr-vybrana::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hr-red2,#ff2438),transparent);animation:hrLinka 1.6s ease-in-out infinite}
@keyframes hrLinka{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------------- nitro: při rychlém scrollu čáry zrychlí ----------------- */
.hr-pohyb.hr-rychle .hr-cary{opacity:.95;animation-duration:7s}
.hr-pohyb .hr-cary{transition:opacity .3s ease}

/* ---------------- drobnosti ------------------------------------------------ */
/* štítky a kategorie povyskočí */
.hr-pohyb .chip,.hr-pohyb .cbadge{transition:translate .16s var(--hr-krivka),border-color .16s ease,color .16s ease}
.hr-pohyb .chip:hover,.hr-pohyb .cbadge:hover{translate:0 -2px;border-color:var(--hr-red,#ef001c)}

/* řádek tabulky dostane při najetí červenou hranu */
.hr-pohyb tbody tr{position:relative}
.hr-pohyb tbody tr>td:first-child{position:relative}
.hr-pohyb tbody tr>td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--hr-red,#ef001c);scale:1 0;transform-origin:center top;transition:scale .18s var(--hr-krivka)}
.hr-pohyb tbody tr:hover>td:first-child::before{scale:1 1}

/* tlačítko při stisku krátce „sepne" */
.hr-pohyb .hr-btn:active::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);animation:hrStisk .3s ease-out}
@keyframes hrStisk{to{opacity:0}}

/* banner šampionátu se při najetí na kartu pomalu přiblíží */
.hr-pohyb .champ .champ-hero,.hr-pohyb .icard .ic{transition:scale .5s var(--hr-krivka)}
.hr-pohyb .champ:hover .champ-hero,.hr-pohyb .icard:hover .ic{scale:1.04}

/* poháry ve vitríně se zablýsknou */
.hr-pohyb .vt-cup{transition:translate .18s var(--hr-krivka),filter .18s ease}
.hr-pohyb .vt-cup:hover{translate:0 -3px;filter:brightness(1.18) drop-shadow(0 6px 14px rgba(245,197,66,.3))}

/* ikona v nadpisu sekce se při naskočení jednou otočí */
.hr-pohyb .sec-title .hr-i{transform-origin:50% 50%}
.hr-pohyb .sec-title.hr-je .hr-i{animation:hrOtocka .8s var(--hr-krivka)}
@keyframes hrOtocka{from{rotate:-180deg;scale:.6}to{rotate:0deg;scale:1}}

@media(prefers-reduced-motion:reduce){
  .hr-pohyb .hrnum,.hr-pohyb .hb-stat,.hr-pohyb .cn-stat{cursor:default}
}