@font-face {
  font-family: "InkBrushArabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InkBrushArabic_DEMO-Textured.otf") format("opentype");
}

.arabic-mark {
  width: 100%;
  height: auto;
}


.arabic-word {
  font-family: "InkBrushArabic", "Noto Kufi Arabic", serif;
  font-size: 96px;
  font-weight: 400;
  fill: rgba(31, 77, 58, 0.9);
  stroke: rgba(31, 77, 58, 0.9);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
  filter: drop-shadow(0 8px 18px rgba(16, 37, 27, 0.18));
}

body.arabic-variant-2 .arabic-mark {
  transform: rotate(-3deg);
  transform-origin: center;
}

.arabic-word.draw-animate {
  animation: drawArabic 3.2s ease forwards, fillIn 3.2s ease forwards;
}

@keyframes drawArabic {
  0% {
    stroke-dashoffset: 900;
    fill-opacity: 0;
  }
  70% {
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@keyframes fillIn {
  0% {
    fill-opacity: 0;
  }
  60% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arabic-word {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .arabic-reveal {
    animation: none;
  }
}