/* The Alkareem intro shared by the examples: the monogram draws itself, then flies to the seal slot in the bar. */
/* intro: the monogram draws, then flies to the seal slot in the bar */
.halo{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,166,64,.26),rgba(212,166,64,0))}
.mono{position:absolute;left:0;top:0;z-index:30;pointer-events:none;transform-origin:0 0;will-change:transform}
.mono-svg{width:100%;height:100%;overflow:visible}
.ms{stroke-dasharray:1;stroke-dashoffset:1}
.intro{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.intro .ln{overflow:hidden;padding-block:.08em}
.intro .ln>span{display:block;will-change:transform,opacity}
.intro .nm{font-size:clamp(40px,6vw,84px);color:#f4efe4}
html[lang=en] .intro .nm{letter-spacing:.3em;text-indent:.3em;font-size:clamp(34px,5vw,70px);text-transform:uppercase}
.intro .sb{font:300 clamp(15px,1.6vw,20px)/1.7 var(--ui);color:#cdbf9b}
html[lang=en] .intro .sb{letter-spacing:.22em;text-transform:uppercase;font-size:clamp(11px,1.2vw,14px)}
.intro .rule{height:1px;width:min(220px,40vw);margin:16px auto 12px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.intro .tg{font-size:clamp(22px,2.6vw,34px);color:var(--gold-hi)}
html[lang=en] .intro .tg{font-style:italic}
.calm .halo{display:none}