/* Preloader — Technické služby Jablunkov a.s. */

html.tsj-loading {
  overflow: hidden;
}

#tsj-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(243, 243, 243, .6);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  transition: opacity .7s ease, background-color .7s ease, -webkit-backdrop-filter .7s ease, backdrop-filter .7s ease;
}

#tsj-preloader .tsj-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
#tsj-preloader.tsj-in .tsj-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#tsj-preloader .tsj-parallax {
  display: flex;
  flex-flow: column;
  align-items: center;
  transition: transform .35s ease-out;
  will-change: transform;
}

/* Kept understated so it reads as part of the page, not a floating panel */
#tsj-preloader .tsj-card {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 30px 40px;
}

#tsj-preloader .tsj-mark {
  position: relative;
  width: 280px;
}
#tsj-preloader .tsj-mark img {
  display: block;
  width: 100%;
  height: auto;
}
#tsj-preloader .tsj-mark-base {
  opacity: .18;
  filter: grayscale(.5);
}
#tsj-preloader .tsj-mark-fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 4px 12px rgba(175, 78, 6, .25));
}

#tsj-preloader .tsj-track {
  width: 200px;
  height: 5px;
  margin-top: 22px;
  border-radius: 6px;
  background: rgba(175, 78, 6, .12);
  overflow: hidden;
}
#tsj-preloader .tsj-track-fill {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%);
  transform: scaleX(0);
  transform-origin: left;
}

#tsj-preloader .tsj-label {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: .95em;
  color: #21160C;
}
#tsj-preloader .tsj-percent {
  font-family: 'Bungee', sans-serif;
  font-size: .85em;
  color: #AF4E06;
}

#tsj-preloader .tsj-skip {
  position: absolute;
  right: 32px;
  bottom: 26px;
  z-index: 3;
  border: none;
  background-color: transparent;
  margin: 0;
  font-size: 1em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease-in-out, transform .35s ease-in-out, color .35s ease-in-out;
  pointer-events: none;
}
#tsj-preloader .tsj-skip.tsj-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#tsj-preloader .tsj-skip:hover { color: #AF4E06; }

/* Exit: fade to transparent, revealing the sharp page underneath */
#tsj-preloader.tsj-done {
  opacity: 0;
  background-color: rgba(243, 243, 243, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
#tsj-preloader.tsj-done .tsj-content { opacity: 0; transform: translateY(-10px) scale(.97); }
#tsj-preloader.tsj-done .tsj-skip { opacity: 0 !important; }

#tsj-preloader.tsj-hidden {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #tsj-preloader { transition: opacity .4s ease; }
  #tsj-preloader .tsj-content { opacity: 1; transform: none; transition: opacity .4s ease; }
}

@media (max-width: 600px) {
  #tsj-preloader .tsj-mark, #tsj-preloader .tsj-track { width: 210px; }
  #tsj-preloader .tsj-skip { right: 18px; bottom: 18px; }
}