/* TEZAK TRADE - preloader */
/* Motiv tavení oceli: logo se plní kovem zdola nahoru, na hranici jede řezací paprsek. */
/* Vychází z designu webu: #2678B4 / #0a4c88 / #2a2a2a / #e6e6e6, ostré hrany, přechody 0.35s */

html.pl-nacita, html.pl-nacita body { overflow: hidden;}

#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20000; display: flex; align-items: center; justify-content: center; text-align: left; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; --pl-postup: 0;}
#preloader * { box-sizing: border-box;}
#preloader.pl-pryc { display: none;}

/* Dvě poloviny podkladu - na konci se rozjedou jako stříhaný plech */
.pl-panel { position: absolute; left: 0; width: 100%; height: 50.2%; background-color: #1a1a1a; background-image: repeating-linear-gradient(0deg, rgba(38,120,180,.06) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(38,120,180,.06) 0 1px, transparent 1px 48px); transition: transform 0.7s cubic-bezier(.7,0,.3,1);}
.pl-panel-h { top: 0;}
.pl-panel-d { bottom: 0;}
.pl-konec .pl-panel-h { transform: translateY(-100%);}
.pl-konec .pl-panel-d { transform: translateY(100%);}

/* Záře z tavby a přejíždějící odlesk */
.pl-zare { position: absolute; top: 50%; left: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; background: radial-gradient(circle, rgba(38,120,180,.22), rgba(38,120,180,0) 62%); animation: pl-dech 3.2s ease-in-out infinite; pointer-events: none;}
.pl-lesk { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(38,120,180,.10), transparent); transform: skewX(-18deg); animation: pl-prejezd 3.5s ease-in-out infinite; pointer-events: none;}
.pl-konec .pl-zare, .pl-konec .pl-lesk { opacity: 0; transition: opacity 0.3s ease-in-out;}

/* Jádro s obsahem */
.pl-jadro { position: relative; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}
.pl-konec .pl-jadro { opacity: 0; transform: scale(1.06);}

/* Technický rámeček - rohy se při startu stahují dovnitř */
.pl-roh { position: absolute; border: 1px solid #2678B4; animation: pl-rohy 0.9s cubic-bezier(.2,.8,.3,1) both;}
.pl-roh-lh { border-right: none; border-bottom: none;}
.pl-roh-ph { border-left: none; border-bottom: none;}
.pl-roh-ld { border-right: none; border-top: none;}
.pl-roh-pd { border-left: none; border-top: none;}

/* Značka - studený obrys, ze kterého zdola vystupuje plnobarevné logo */
.pl-znak { position: relative;}
.pl-znak-obrys, .pl-znak-vypln { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../themes/logo.fw.png') no-repeat center center; background-size: contain;}
.pl-znak-obrys { opacity: .10; filter: grayscale(1);}
.pl-znak-vypln { clip-path: inset(calc(100% - var(--pl-postup) * 1%) 0 0 0); filter: drop-shadow(0 0 14px rgba(38,120,180,.55));}

/* Řezací paprsek na hranici tavby */
.pl-paprsek { position: absolute; left: -8%; width: 116%; height: 2px; bottom: calc(var(--pl-postup) * 1%); background: linear-gradient(90deg, transparent, rgba(38,120,180,.6) 15%, #e6e6e6 50%, rgba(38,120,180,.6) 85%, transparent); box-shadow: 0 0 18px 2px rgba(38,120,180,.8); pointer-events: none;}
.pl-konec .pl-paprsek { animation: pl-zablesk 0.55s ease-out forwards;}

/* Jiskry odletující od paprsku */
.pl-jiskra { position: absolute; bottom: 0; width: 2px; height: 2px; background: #e6e6e6; box-shadow: 0 0 6px 1px rgba(38,120,180,.9); opacity: 0; animation: pl-jiskra 1.2s ease-out infinite;}
.pl-jiskra:nth-child(1) { left: 14%; animation-delay: 0s;}
.pl-jiskra:nth-child(2) { left: 27%; animation-delay: .45s;}
.pl-jiskra:nth-child(3) { left: 39%; animation-delay: .15s;}
.pl-jiskra:nth-child(4) { left: 52%; animation-delay: .75s;}
.pl-jiskra:nth-child(5) { left: 64%; animation-delay: .3s;}
.pl-jiskra:nth-child(6) { left: 77%; animation-delay: .95s;}
.pl-jiskra:nth-child(7) { left: 88%; animation-delay: .6s;}

/* Technický údaj o průběhu */
.pl-udaje { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid rgba(230,230,230,.15);}
.pl-popis { color: rgba(230,230,230,.5); font-weight: 600;}
.pl-tecky { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: pl-tecky 1.4s steps(4, end) infinite;}
.pl-tecky:after { content: '...';}
.pl-procenta { color: #e6e6e6; font-weight: 900; line-height: 1;}
.pl-procenta i { color: #2678B4; font-style: normal; font-weight: 600;}

/* Dráha průběhu - navazuje na prvek .button-id z webu */
.pl-draha { position: relative; background: rgba(230,230,230,.12); overflow: hidden;}
.pl-draha-vypln { height: 100%; width: calc(var(--pl-postup) * 1%); background: #2678B4; box-shadow: 0 0 12px 1px rgba(38,120,180,.9);}

/* Světelný šev v místě rozjezdu */
.pl-sev { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #2678B4; opacity: 0;}
.pl-konec .pl-sev { animation: pl-sev 0.7s ease-out forwards;}

@keyframes pl-dech {
    0%, 100% { opacity: .55; transform: scale(.92);}
    50% { opacity: 1; transform: scale(1.05);}
}
@keyframes pl-prejezd {
    0% { left: -40%;}
    100% { left: 110%;}
}
@keyframes pl-rohy {
    0% { opacity: 0; transform: scale(1.6);}
    100% { opacity: 1; transform: scale(1);}
}
@keyframes pl-jiskra {
    0% { opacity: 0; transform: translate(0, 0) scale(1);}
    15% { opacity: 1;}
    100% { opacity: 0; transform: translate(6px, -46px) scale(.3);}
}
@keyframes pl-tecky {
    from { width: 0;}
    to { width: 1.1em;}
}
@keyframes pl-zablesk {
    0% { filter: brightness(1); transform: scaleX(1);}
    35% { filter: brightness(2.6); transform: scaleX(1.12);}
    100% { filter: brightness(1); opacity: 0; transform: scaleX(1);}
}
@keyframes pl-sev {
    0% { opacity: 0; box-shadow: 0 0 0 0 rgba(38,120,180,0);}
    25% { opacity: 1; box-shadow: 0 0 40px 6px rgba(230,230,230,.9);}
    100% { opacity: 0; box-shadow: 0 0 60px 10px rgba(38,120,180,0);}
}

/* Rozhraní pro notebook + PC */
@media screen and (min-width: 1100px) {
    .pl-jadro { width: 400px;}
    .pl-znak { width: 400px; height: 128px;}
    .pl-roh { width: 34px; height: 34px;}
    .pl-roh-lh { top: -50px; left: -50px;}
    .pl-roh-ph { top: -50px; right: -50px;}
    .pl-roh-ld { bottom: -50px; left: -50px;}
    .pl-roh-pd { bottom: -50px; right: -50px;}
    .pl-udaje { margin: 55px 0 0 0; padding: 14px 0 0 0;}
    .pl-popis { font-size: 15px; letter-spacing: 3px;}
    .pl-procenta { font-size: 56px;}
    .pl-procenta i { font-size: 20px; margin: 0 0 0 6px;}
    .pl-draha { width: 400px; height: 5px; margin: 16px 0 0 0;}
}

/* Rozhraní pro tablety */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .pl-jadro { width: 340px;}
    .pl-znak { width: 340px; height: 109px;}
    .pl-roh { width: 28px; height: 28px;}
    .pl-roh-lh { top: -42px; left: -42px;}
    .pl-roh-ph { top: -42px; right: -42px;}
    .pl-roh-ld { bottom: -42px; left: -42px;}
    .pl-roh-pd { bottom: -42px; right: -42px;}
    .pl-udaje { margin: 45px 0 0 0; padding: 12px 0 0 0;}
    .pl-popis { font-size: 14px; letter-spacing: 3px;}
    .pl-procenta { font-size: 46px;}
    .pl-procenta i { font-size: 18px; margin: 0 0 0 5px;}
    .pl-draha { width: 340px; height: 5px; margin: 14px 0 0 0;}
}

/* Rozhraní pro smartphone */
@media screen and (min-width: 480px) and (max-width: 768px) {
    .pl-jadro { width: 280px;}
    .pl-znak { width: 280px; height: 89px;}
    .pl-roh { width: 22px; height: 22px;}
    .pl-roh-lh { top: -32px; left: -32px;}
    .pl-roh-ph { top: -32px; right: -32px;}
    .pl-roh-ld { bottom: -32px; left: -32px;}
    .pl-roh-pd { bottom: -32px; right: -32px;}
    .pl-udaje { margin: 35px 0 0 0; padding: 10px 0 0 0;}
    .pl-popis { font-size: 13px; letter-spacing: 2px;}
    .pl-procenta { font-size: 38px;}
    .pl-procenta i { font-size: 16px; margin: 0 0 0 5px;}
    .pl-draha { width: 280px; height: 4px; margin: 12px 0 0 0;}
}

@media screen and (max-width: 480px) {
    .pl-jadro { width: 220px;}
    .pl-znak { width: 220px; height: 70px;}
    .pl-roh { width: 18px; height: 18px;}
    .pl-roh-lh { top: -26px; left: -26px;}
    .pl-roh-ph { top: -26px; right: -26px;}
    .pl-roh-ld { bottom: -26px; left: -26px;}
    .pl-roh-pd { bottom: -26px; right: -26px;}
    .pl-udaje { margin: 30px 0 0 0; padding: 10px 0 0 0;}
    .pl-popis { font-size: 12px; letter-spacing: 2px;}
    .pl-procenta { font-size: 32px;}
    .pl-procenta i { font-size: 14px; margin: 0 0 0 4px;}
    .pl-draha { width: 220px; height: 4px; margin: 10px 0 0 0;}
}

/* Ohled na uživatele, kteří si vypnuli animace */
@media (prefers-reduced-motion: reduce) {
    .pl-zare, .pl-lesk, .pl-jiskra, .pl-roh, .pl-tecky:after { animation: none;}
    .pl-jiskra { opacity: 0;}
    .pl-lesk { display: none;}
    .pl-panel { transition: opacity 0.4s ease-in-out;}
    .pl-konec .pl-panel-h, .pl-konec .pl-panel-d { transform: none; opacity: 0;}
    .pl-konec .pl-paprsek, .pl-konec .pl-sev { animation: none; opacity: 0;}
}