:root {
        --pl-len: 2440;
      } /* يضبطها السكربت من الطول الحقيقي للمسار */
      #preloader {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        background: radial-gradient(
          115% 66% at 50% 30%,
          #eef8f6 0%,
          #ffffff 62%
        );
        /* ضمان ألا تُحتجز الصفحة أبدًا إن تعطّل السكربت */
        animation: plSafety 0.6s ease 7s both;
      }
      @keyframes plSafety {
        to {
          opacity: 0;
          visibility: hidden;
        }
      }
      #preloader.pl-done {
        animation: none;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.6s ease,
          visibility 0s linear 0.6s;
      }
      html.pl-lock,
      html.pl-lock body {
        overflow: hidden;
      }

      #preloader .pl-inner {
        display: grid;
        justify-items: center;
      }
      #preloader .pl-markrow {
        position: relative;
      }
      #preloader .pl-horizon {
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 0;
        width: min(600px, 72vw);
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(10, 15, 16, 0.1) 12%,
          rgba(10, 15, 16, 0.1) 88%,
          transparent
        );
        opacity: 0;
      }
      #preloader.pl-run .pl-horizon {
        animation: plFade 0.7s ease both 0.05s;
      }
      @keyframes plFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes plOut {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      #preloader .pl-mark {
        width: 108px;
        height: 107px;
      }
      #preloader .pl-mark svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }
      /* المرحلة ١ — الخط يرسم نفسه */
      #preloader .pl-trace {
        fill: none;
        stroke: #0ca795;
        stroke-width: 13;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: var(--pl-len);
        stroke-dashoffset: var(--pl-len);
        opacity: 0;
      }
      #preloader.pl-run .pl-trace {
        animation:
          plDraw 1.2s cubic-bezier(0.62, 0.02, 0.3, 1) both 0.16s,
          plOut 0.5s ease both 1.24s;
      }
      @keyframes plDraw {
        from {
          stroke-dashoffset: var(--pl-len);
          opacity: 1;
        }
        to {
          stroke-dashoffset: 0;
          opacity: 1;
        }
      }
      /* المرحلة ٢ — اللون يتصاعد داخل الشكل */
      #preloader .pl-solid {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
      }
      #preloader.pl-run .pl-solid {
        animation: plInk 0.85s cubic-bezier(0.4, 0, 0.2, 1) both 1.02s;
      }
      @keyframes plInk {
        from {
          opacity: 1;
          clip-path: inset(100% 0 0 0);
        }
        to {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      /* لا تباعد بين الحروف في العربية — يكسر اتصال الحرف */
      #preloader .pl-word {
        margin: 34px 0 0;
        font-family: "Readex Pro", "Montserrat", system-ui, sans-serif;
        font-size: 0.86rem;
        font-weight: 600;
        letter-spacing: normal;
        color: rgba(10, 15, 16, 0.5);
        opacity: 0;
      }
      #preloader .pl-word b {
        color: #0a0f10;
        font-weight: 700;
      }
      #preloader.pl-run .pl-word {
        animation: plFade 0.8s ease both 1.3s;
      }

      #preloader .pl-meter {
        margin-top: 22px;
        width: min(220px, 42vw);
        height: 1.5px;
        background: rgba(10, 15, 16, 0.09);
        border-radius: 2px;
        overflow: hidden;
        opacity: 0;
      }
      #preloader.pl-run .pl-meter {
        animation: plFade 0.6s ease both 0.32s;
      }
      #preloader .pl-meter i {
        display: block;
        height: 100%;
        width: 100%;
        transform-origin: 0 50%;
        scale: 0 1;
        background: linear-gradient(90deg, #0ca795, #4dd6b8);
      }
      #preloader.pl-run .pl-meter i {
        animation: plFill 2.3s cubic-bezier(0.25, 0.6, 0.3, 1) both 0.32s;
      }
      @keyframes plFill {
        from {
          scale: 0 1;
        }
        to {
          scale: 1 1;
        }
      }

      #preloader .pl-count {
        margin-top: 14px;
        font-family: "Readex Pro", "Montserrat", system-ui, sans-serif;
        font-size: 0.74rem;
        font-weight: 600;
        letter-spacing: normal;
        font-variant-numeric: tabular-nums;
        color: rgba(10, 15, 16, 0.34);
        opacity: 0;
      }
      #preloader.pl-run .pl-count {
        animation: plFade 0.6s ease both 0.32s;
      }

      @media (prefers-reduced-motion: reduce) {
        #preloader {
          display: none;
        }
      }