.pencil-loader {
  width: 300px;
  height: 250px;
  color: var(--loader-line-colour);
  margin: -56px;
 
}
/* The S line: pathLength=1 lets us animate 0..1 regardless of real length */
.pencil-loader .line {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--loader-stroke-width);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw var(--loader-speed) linear infinite;
}

/* Pencil follows the same path, fixed angle */
.pencil-loader .pencil {
  offset-path: path('M90,92 C112,86 123,91 120,100 C117,109 128,114 150,108');
  offset-rotate: 0deg;
  animation: move var(--loader-speed) linear infinite;
}
/* Lift-off for the return trip */
.pencil-loader .pencil-body {
  animation: lift var(--loader-speed) linear infinite;
}

@keyframes draw {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  62%  { stroke-dashoffset: 0; opacity: 1; }
  72%  { stroke-dashoffset: 0; opacity: 0; }
  73%  { stroke-dashoffset: 1; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes move {
  0%   { offset-distance: 0%; }
  62%  { offset-distance: 100%; }
  78%  { offset-distance: 100%; }
  98%  { offset-distance: 0%; }
  100% { offset-distance: 0%; }
}
@keyframes lift {
  0%, 62% { transform: translateY(0); }
  70%     { transform: translateY(-14px); }
  90%     { transform: translateY(-14px); }
  100%    { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pencil-loader .line { animation: none; stroke-dashoffset: 0; }
  .pencil-loader .pencil, .pencil-loader .pencil-body { animation: none; }
}


.pencil-body{
  fill:         color-mix(in srgb, var(--app-bg-base) 20%, transparent); 
  stroke:       var(--loader-line-colour); 
  stroke-width: var(--loader-stroke-width);
}

.ui-loader-container {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.ui-loader-container.is-visible {
  opacity: 1;
  pointer-events: auto;
}


.ui-loader-header {
  height:           var(--header-height);
  background-color: color-mix(in srgb, var(--app-bg-base) 39%, transparent);
  backdrop-filter:  blur(2px);
}

.ui-loader-message {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--loader-line-colour);
}


.ui-loader-container-inner {
  background-color: color-mix(in srgb, var(--app-bg-base) 49%, transparent);
  backdrop-filter: blur(35px);
  display: flex;
  align-items: center;
  align-content: center;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}