/* =========================
   TD PRELOADER (CLEAN, NO DUPLICATES)
   - Runner ancorato a % (JS)
   - Barra + % fuori, centrati come gruppo
   ========================= */

.tdpl{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  place-items: center;

  background:
    radial-gradient(1100px 700px at 15% 20%, rgba(142,104,183,.20), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(212,124,146,.16), transparent 62%),
    radial-gradient(900px 600px at 70% 85%, rgba(232,146,130,.14), transparent 62%),
    rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.tdpl.is-on{ display: grid; }

html.tdpl-lock, body.tdpl-lock{
  height: 100%;
  overflow: hidden !important;
}

/* container */
.tdpl__center{
  width: min(980px, 92vw);
  padding: 18px 16px;
  font-family: inherit;
}

/* testo */
.tdpl__copy{
  display:flex;
  justify-content: center;
  text-align: center;
}

.tdpl__line{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 3vw, 42px);
  color: rgba(22,22,30,.92);
  line-height: 1.08;
}

.tdpl__caret{
  opacity: .65;
  margin-left: 6px;
  animation: tdplBlink 1s steps(1,end) infinite;
}
@keyframes tdplBlink{ 50%{ opacity:0; } }

/* area runner + track */
.tdpl__lane{
  margin-top: 28px;
  position: relative;
}

.tdpl__runnerWrap{
  position: relative;
  height: clamp(150px, 22vw, 210px); /* più alto = niente overlap con testo */
  overflow: visible;
}

/* runner: si muove SOLO via JS (transform X), qui solo “camminata” */
.tdpl__runner{
  width: clamp(86px, 12vw, 132px);
  position: absolute;
  left: 0;
  bottom: 44px;
  z-index: 3;

  transform: translate3d(0,0,0);
  transform-origin: 50% 90%;

  animation:
    tdpl-bob .40s ease-in-out infinite,
    tdpl-tilt .80s ease-in-out infinite;

  filter: drop-shadow(0 18px 40px rgba(142,104,183,.22));
}

.tdpl__runnerImg{
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

@keyframes tdpl-bob{
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}
@keyframes tdpl-tilt{
  0%,100% { rotate: -1deg; }
  50%     { rotate: 1.5deg; }
}

/* track (linea “strada” sottile, UNA SOLA) */
.tdpl__track{
  height: 10px;
  border-radius: 999px;
  background: rgba(142,104,183,.10);
  overflow: hidden;
  position: relative;
}

.tdpl__track::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(212,124,146,.0),
    rgba(142,104,183,.55),
    rgba(232,146,130,.55),
    rgba(212,124,146,.0)
  );
  opacity: .9;
}

/* =========================
   PROGRESS BAR + % OUTSIDE
   ========================= */

/* gruppo centrato (barra + % insieme) */
.tdpl__barRow{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 18px auto 0;
  width: fit-content;
}

/* barra: spessa, con bordo, NON accorciata a caso */
.tdpl__bar{
 width: min(900px, 82vw); /* stessa idea “finisce prima” ma coerente */
  height: 20px;
  border-radius: 999px;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(142,104,183,.22);
  box-shadow:
    0 14px 40px rgba(0,0,0,.08),
    0 2px 0 rgba(255,255,255,.85) inset;

  overflow: hidden;
  position: relative;
}

.tdpl__barFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #D47C92, #8E68B7, #E89282);
  background-size: 180% 100%;
  animation: tdpl-bar 2.2s ease-in-out infinite;
  transition: width .18s ease;
}

@keyframes tdpl-bar{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* % FUORI, grande */
.tdpl__pct--out{
  font-weight: 900;
  font-size: 28px;
  color: #8E68B7;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  min-width: 92px;
  text-align: left;
}

.tdpl__pctSym{ opacity:.7; }

/* fade out */
.tdpl.is-off{
  opacity: 0;
  transition: opacity .35s ease;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .tdpl__runner{ animation: none; }
  .tdpl__barFill{ animation: none; }
}

/* mobile */
@media (max-width: 640px){
  .tdpl__center{ padding: 14px 12px; }
  .tdpl__runnerWrap{ height: 170px; }

  .tdpl__bar{
    width: min(520px, 64vw);
    height: 18px;
  }
  .tdpl__pct--out{
    font-size: 22px;
    min-width: 72px;
  }
}
@media (max-width: 640px){
  .tdpl__line{
    white-space: nowrap;        /* NON va a capo */
    font-size: clamp(18px, 4.2vw, 24px);
    text-align: center;
  }
  /* barra resta uguale */


  /* % MOLTO più grande e centrata */
  .tdpl__pct--out{
    font-size: 42px;          /* ~ doppia */
    line-height: 1;
    min-width: auto;
    text-align: center;
  }
}
html.tdpl-lock, body.tdpl-lock{
  height: 100%;
  overflow: hidden !important;
}