@font-face {
  font-family: 'Habibah Naskh';
  src: url('./noto-naskh-arabic-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { --habibah-ink: #0b2a4a; --habibah-ivory: #f4ead9; --habibah-copper: #b87443; }
div#loader[data-habibah-brand] {
  background: #f4ead9;
  color: #0b2a4a;
  overflow: hidden;
}
#loader[data-habibah-brand] > .ascii { visibility: hidden; }
.habibah-loading-brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 48%, #fffaf055, transparent 65%);
  font-family: 'IBM Plex Mono', monospace;
}
.habibah-loading-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.23' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.habibah-loader-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(78vw, 560px);
  transform: translateY(-2vh);
}
.habibah-loader-logo { display: block; width: clamp(190px, 25vw, 330px); height: auto; margin: 29px 0 25px; }
.habibah-loader-year { color: #9b603a; font-size: 11px; letter-spacing: .16em; }
.habibah-loader-line { font-size: clamp(14px, 1.5vw, 19px); line-height: 1.6; margin: 0; }
.habibah-loader-rule { display: block; width: 38px; height: 1px; margin: 25px 0 17px; background: #b87443; }
.habibah-loader-status { color: #103f75; font-size: 10px; line-height: 1.6; margin: 0; opacity: .75; }
.habibah-loader-origin, .habibah-loader-signature { position: absolute; bottom: clamp(26px, 6vh, 64px); font-size: 10px; letter-spacing: .06em; opacity: .75; }
.habibah-loader-origin { left: clamp(25px, 6vw, 125px); right: auto; }
.habibah-loader-signature { right: clamp(25px, 6vw, 125px); left: auto; }
.habibah-loading-brand[dir='rtl'] .habibah-loader-origin { right: clamp(25px, 6vw, 125px); left: auto; }
.habibah-loading-brand[dir='rtl'] .habibah-loader-signature { left: clamp(25px, 6vw, 125px); right: auto; }
.habibah-loading-brand[dir='rtl'] .habibah-loader-line { font-family: 'Habibah Naskh', serif; font-size: clamp(25px, 3vw, 34px); line-height: 1.7; }
.habibah-loading-brand[dir='rtl'] .habibah-loader-year,
.habibah-loading-brand[dir='rtl'] .habibah-loader-origin,
.habibah-loading-brand[dir='rtl'] .habibah-loader-status { font-family: 'Habibah Naskh', serif; letter-spacing: 0; font-size: 15px; }
body[data-habibah-surface='light'] #habibah-controls { color: #0b2a4a; text-shadow: none; }
body[data-habibah-surface='dark'] #habibah-controls { color: #f4ead9; text-shadow: 0 1px 7px #071d34; }
body #habibah-controls { align-items: center; }
html[lang='ar'] #habibah-controls #habibah-motion { font: 16px 'Habibah Naskh', serif; }
body #habibah-controls a:focus-visible, body #habibah-controls button:focus-visible { outline-color: currentColor; }
@media (max-width: 500px) {
  .habibah-loader-origin, .habibah-loader-signature { font-size: 8px; letter-spacing: .03em; }
  .habibah-loading-brand[dir='rtl'] .habibah-loader-origin { font-size: 13px; }
  .habibah-loader-logo { width: 225px; max-width: 70vw; }
  html[lang='ar'] #habibah-controls #habibah-motion { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #habibah-controls { transition: none; }
}