/* ============================================================================
   TEPS Build Loader — styles
   A self-contained, framework-free progress-loader component.
   ========================================================================== */

/* Brand fonts. Remove this @import if you already load these fonts site-wide. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Tajawal:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* The host you mount into. Give it any size you like (it fills its parent). */
.teps-loader {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background: transparent;
  /* warm white */
  -webkit-font-smoothing: antialiased;
}

/* Fixed 1280×720 design surface — the script scales it to fit .teps-loader. */
.teps-loader__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
}

.teps-loader * {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {

  /* The script also honors this and slows/limits motion. */
  .teps-loader__stage {
    will-change: auto;
  }
}

/* The mount host — size it however your page needs. */
#loader {
  width: 100%;
  height: 560px;
  border-radius: 16px;
}