/* ---- scope + base ---- */
.tsl, .tsl *, .tsl *::before, .tsl *::after,
.tsl-demo, .tsl-demo *, .tsl-demo *::before, .tsl-demo *::after { box-sizing:border-box; }

/* =========================  DEMO BACKDROP (remove in production)  ========= */
.tsl-demo { position:fixed; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center; background:#0B0D10; background-image:linear-gradient(135deg,#14161a,#0B0D10); font-family:'Google Sans Flex',system-ui,sans-serif; }
.tsl-demo .in { color:#FFFFFF; padding:24px; }
.tsl-demo h1 { font-size:clamp(28px,5vw,54px); font-weight:600; letter-spacing:-0.03em; margin:0 0 10px; }
.tsl-demo h1 em { font-style:normal; color:#ED3034; }
.tsl-demo p { color:rgba(255,255,255,0.6); margin:0; font-size:16px; }

/* =========================  LOADER OVERLAY  ============================== */
.tsl {
  position:fixed; inset:0; z-index:99999; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#FFFFFF;
  font-family:'UniviaPro','Google Sans Flex','Google Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  will-change:transform;
}
/* red layer sitting behind — used for the two-tone reveal */
.tsl-panel-red { position:fixed; inset:0; z-index:99998; background:#ED3034; will-change:transform; }

/* faint blueprint grid + vignette for depth */
.tsl-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.5;
  background-image:
    linear-gradient(rgba(31,31,31,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,31,31,0.045) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 50%, rgba(255,255,255,0) 55%, rgba(31,31,31,0.05) 100%);
  background-size:46px 46px, 46px 46px, 100% 100%;
}
/* cursor-follow glow */
.tsl-glow {
  position:absolute; top:0; left:0; width:420px; height:420px; margin:-210px 0 0 -210px; z-index:2;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity 0.4s ease;
  background:radial-gradient(circle, rgba(237,48,52,0.14), rgba(237,48,52,0) 66%);
}

/* ---- content column ---- */
.tsl-inner { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; padding:24px; }

/* logo + sheen */
.tsl-logo-wrap { position:relative; overflow:hidden; margin-bottom:30px; }
.tsl-logo { display:block; width:clamp(190px,30vw,320px); height:auto; }
.tsl-sheen {
  position:absolute; top:0; left:0; width:45%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  transform:translateX(-200%) skewX(-14deg);
}

/* red rule under the logo */
.tsl-rule { width:0; height:3px; border-radius:3px; background:#ED3034; margin:0 0 26px; }

/* molten progress bar */
.tsl-bar { position:relative; width:clamp(220px,42vw,360px); height:4px; border-radius:4px; background:#E7E7E7; overflow:visible; }
.tsl-bar-fill {
  position:absolute; left:0; top:0; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg, #ED3034 0%, #FF7A18 60%, #FFB347 100%);
  box-shadow:0 0 14px rgba(237,48,52,0.5);
}
.tsl-spark {
  position:absolute; top:50%; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#FFF3D0; box-shadow:0 0 0 4px rgba(237,48,52,0.20), 0 0 18px 5px rgba(255,122,24,0.7);
  opacity:0;
}

/* status + percentage */
.tsl-meta { display:flex; align-items:center; justify-content:space-between; width:clamp(220px,42vw,360px); margin-top:18px; }
.tsl-status { font-size:11px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:#555555; }
.tsl-pct { font-size:15px; font-weight:700; letter-spacing:0.02em; color:#1F1F1F; font-variant-numeric:tabular-nums; }

/* entrance defaults (JS animates from here; safe if JS never runs = visible) */
.tsl-logo, .tsl-rule, .tsl-bar, .tsl-meta { opacity:1; }

@media (max-width:720px) {
  .tsl-logo-wrap { margin-bottom:24px; }
  .tsl-status { letter-spacing:0.16em; }
}

@media (prefers-reduced-motion:reduce) {
  .tsl *, .tsl *::before, .tsl *::after { animation:none !important; transition:none !important; }
  .tsl-sheen { display:none; }
}