/* ============================================================================
   ستايلات «إطار صورة البادج» — مستقلّة عن avatar-frames.css (إطارات لوحة الستريمر).
   كل تصميم يُعزل تحت .bfr--<key> بمتغيّراته وkeyframes الخاصة به فلا يتصادم مع غيره.
   إعادة التلوين: استعمل --bfr-h (الدرجة) و--bfr-sm (معامل الإشباع) داخل ألوان hsla،
   فيتغيّر لون البكج كاملًا من الأدمن بلا لمس التصميم.

   ── قالب تصميم جديد ───────────────────────────────────────────────────────
   .bfr--myframe{
     --gold:hsla(var(--bfr-h, 41deg), clamp(0%, calc(64% * var(--bfr-sm, 1)), 100%), 60%, 1);
     position:relative;width:188px;height:188px;
   }
   .bfr--myframe .ring{position:absolute;inset:-8px;border-radius:50%;
     border:6px solid var(--gold);animation:spin__myframe 6s linear infinite}
   .bfr--myframe .avatar{position:absolute;inset:0;border-radius:50%;overflow:hidden}
   @keyframes spin__myframe{to{transform:rotate(360deg)}}
   ── ثم سجّل المفتاح في badge-frames.js ليظهر في الأدمن ────────────────────
   ============================================================================ */

/* حاويات مشتركة (لا تُعدّل):
   .bfr-fit   = مربّع بالمقاس المطلوب (تُضبط أبعاده بالـJS)
   .bfr-scale = طبقة التقييس وحدها (لئلا يُدهس transform أنيميشن الإطار)
   .bfr       = جذر الإطار بمقاسه الطبيعي */
.bfr-fit{position:relative;flex:0 0 auto;overflow:visible}
.bfr-scale{position:absolute;transform-origin:center center}
.bfr{position:relative;flex:0 0 auto;margin:0!important}
.bfr img{display:block;width:100%;height:100%;object-fit:cover}

/* ═══════════ التصاميم ═══════════ */

/* ═══════════ royal — الإطار الملكي ═══════════
   منقول من تصميم المالك (royal-frame.html) بثلاثة تعديلات إلزامية فقط:
   • الجذر .stage صار .bfr--royal بمقاس ثابت 410px بدل min(80vw,410px) — الـvw
     يقيس نافذة المتصفح لا مربّع الإطار، فيكسر التقييس داخل .bfr-scale.
   • :root صارت محليّة، و@keyframes سُمّيت بلاحقة __royal لئلا تتصادم مع غيرها.
   • حُذف سكافولدنق العرض (body/.card/.placeholder/#photo{display:none}/التفاعل). */
.bfr--royal{
  --wine:#310811; --wine-deep:#160207;
  --gold:#dcae3e; --gold-light:#fff0a8; --cream:#fff8df;
  position:relative;width:410px;height:410px;display:grid;place-items:center;
}
.bfr--royal .glow{position:absolute;inset:17%;border-radius:50%;
  background:#f3bc34;filter:blur(45px);opacity:.18}
.bfr--royal .orbit{position:absolute;inset:3%;border:1px solid rgba(255,217,108,.2);
  border-radius:50%;animation:spin__royal 16s linear infinite}
.bfr--royal .orbit::after{content:"";position:absolute;inset:7%;
  border:1px dashed rgba(255,224,133,.16);border-radius:50%}
.bfr--royal .jewel{position:absolute;width:13px;height:13px;transform:rotate(45deg);
  border:1px solid var(--gold-light);
  background:linear-gradient(135deg,#fffbd3,#eab83d 54%,#87520c);
  box-shadow:0 0 14px rgba(255,209,85,.72)}
.bfr--royal .jewel:nth-child(1){top:-7px;left:calc(50% - 7px)}
.bfr--royal .jewel:nth-child(2){right:-7px;top:calc(50% - 7px)}
.bfr--royal .jewel:nth-child(3){bottom:-7px;left:calc(50% - 7px)}
.bfr--royal .jewel:nth-child(4){left:-7px;top:calc(50% - 7px)}
.bfr--royal .crown{position:absolute;top:-2%;z-index:5;color:#e9bb45;
  font-family:Georgia,serif;font-size:74px;line-height:1;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.5));
  animation:crownFloat__royal 4s ease-in-out infinite}
.bfr--royal .frame{position:relative;z-index:2;width:73%;aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#f9df83 0 1.3deg,#8f5a10 1.3deg 2.6deg,transparent 2.6deg 7.5deg);
  filter:drop-shadow(0 14px 17px rgba(0,0,0,.55));
  animation:float__royal 4s ease-in-out infinite}
.bfr--royal .frame::before{content:"";position:absolute;inset:8px;border-radius:50%;
  background:conic-gradient(from 35deg,#76500d,#ffe991,#aa741e,#fff3af,#8b5910,#e8bb47,#76500d);
  box-shadow:0 0 0 3px #6b3c08, inset 0 0 0 3px rgba(255,250,198,.65)}
.bfr--royal .photo-wrap{position:absolute;inset:25px;z-index:1;overflow:hidden;
  display:grid;place-items:center;border:5px solid #5c3307;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(255,225,126,.14),transparent 36%),linear-gradient(145deg,#54101d,#1d0409);
  box-shadow:inset 0 0 0 2px #ecc85f, inset 0 0 26px rgba(0,0,0,.85)}
.bfr--royal .flourish{position:absolute;top:46%;z-index:4;color:#d9a936;font-size:48px;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.5))}
.bfr--royal .flourish.right{right:0;transform:rotate(-28deg)}
.bfr--royal .flourish.left{left:0;transform:scaleX(-1) rotate(-28deg)}
@keyframes spin__royal{to{transform:rotate(360deg)}}
@keyframes float__royal{50%{transform:translateY(-5px)}}
@keyframes crownFloat__royal{50%{transform:translateY(-7px) rotate(1deg)}}

/* ═══════════ luxury — الإطار الفاخر ═══════════
   منقول من luxury-frame-v2. التعديلات الإلزامية:
   • --size: clamp(200px,46vmin,360px) → 360px ثابتة (الـvmin يقيس النافذة).
   • مواقع الغبار الستّة عشر كانت Math.random في الجافاسكربت ⇒ شكل مختلف كل
     تحميل؛ ثُبّتت هنا بـnth-child لأن البكج مُباع فيلزم يطلع نفسه دائمًا.
   • :root محليّة، وكل @keyframes بلاحقة __lux، وحُذف سكافولدنق العرض. */
.bfr--luxury{
  --gold-deep:#6e4e1e; --gold-mid:#b98d3e; --gold-bright:#f3dd9a;
  --gold-white:#fff7e2; --ivory:#f5f1e8;
  --band:8%; --size:360px; --stage:calc(var(--size) * 1.45);
  position:relative;width:var(--stage);height:var(--stage);
  display:grid;place-items:center;isolation:isolate;
}
.bfr--luxury .layer{position:absolute;inset:0;margin:auto;border-radius:50%}
.bfr--luxury .rays{width:calc(var(--size)*1.35);height:calc(var(--size)*1.35);z-index:0;opacity:.9;
  background:repeating-conic-gradient(from 0deg,rgba(243,221,154,.18) 0deg 5deg,transparent 5deg 17deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 44%,#000 55%,transparent 72%);
          mask:radial-gradient(circle,transparent 30%,#000 44%,#000 55%,transparent 72%);
  mix-blend-mode:screen;animation:spin__lux 42s linear infinite}
.bfr--luxury .aura{width:calc(var(--size)*1.04);height:calc(var(--size)*1.04);z-index:1;
  background:radial-gradient(circle,rgba(243,221,154,.55),rgba(201,160,74,.28) 46%,transparent 70%);
  filter:blur(16px);animation:pulse__lux 3.8s ease-in-out infinite}
.bfr--luxury .r-dashed{width:calc(var(--size)*1.08);height:calc(var(--size)*1.08);z-index:2;
  border:2px dashed rgba(243,221,154,.55);animation:spin__lux 24s linear infinite}
.bfr--luxury .r-dotted{width:calc(var(--size)*1.21);height:calc(var(--size)*1.21);z-index:2;
  border:2px dotted rgba(185,141,62,.55);animation:spin__lux 60s linear infinite reverse}
.bfr--luxury .r-ticks{width:calc(var(--size)*1.14);height:calc(var(--size)*1.14);z-index:2;
  background:repeating-conic-gradient(from 0deg,rgba(243,221,154,.9) 0deg .8deg,transparent .8deg 9deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
  animation:spin__lux 95s linear infinite}
.bfr--luxury .orbit{z-index:6;animation:spin__lux linear infinite}
.bfr--luxury .o1{width:calc(var(--size)*1.08);height:calc(var(--size)*1.08);animation-duration:14s}
.bfr--luxury .o2{width:calc(var(--size)*1.17);height:calc(var(--size)*1.17);animation-duration:22s;animation-delay:-8s;animation-direction:reverse}
.bfr--luxury .o3{width:calc(var(--size)*1.25);height:calc(var(--size)*1.25);animation-duration:30s;animation-delay:-15s}
.bfr--luxury .gem{position:absolute;top:0;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#ffffff,var(--gold-bright));
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  box-shadow:0 0 16px 3px rgba(255,224,150,.9),0 0 4px #fff;
  animation:gemPulse__lux 2.6s ease-in-out infinite}
.bfr--luxury .o2 .gem{width:12px;height:12px}
.bfr--luxury .o3 .gem{width:20px;height:20px}
.bfr--luxury .corner{position:absolute;width:calc(var(--size)*.28);height:calc(var(--size)*.28);
  z-index:3;opacity:.85;pointer-events:none}
.bfr--luxury .corner svg{width:100%;height:100%}
.bfr--luxury .c1{top:8%;left:8%}
.bfr--luxury .c2{top:8%;right:8%;transform:scaleX(-1)}
.bfr--luxury .c3{bottom:8%;left:8%;transform:scaleY(-1)}
.bfr--luxury .c4{bottom:8%;right:8%;transform:scale(-1,-1)}
.bfr--luxury .frame{position:absolute;inset:0;margin:auto;z-index:4;
  width:var(--size);height:var(--size);border-radius:50%;overflow:hidden;isolation:isolate;
  animation:float__lux 7s ease-in-out infinite,breathe__lux 4.6s ease-in-out infinite}
.bfr--luxury .metal{position:absolute;inset:-45%;z-index:1;
  background:conic-gradient(from 0deg,#6e4e1e,#b98d3e,#f3dd9a,#fff7e2,#f3dd9a,#b98d3e,
    #4d3512,#b98d3e,#f3dd9a,#ffefc2,#f3dd9a,#b98d3e,#6e4e1e);
  animation:spin__lux 15s linear infinite}
.bfr--luxury .spec{position:absolute;inset:-45%;z-index:2;opacity:.9;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg 45deg,
    rgba(255,250,232,.6) 62deg,#fff 68deg,rgba(255,250,232,.6) 74deg,transparent 92deg 360deg);
  animation:spin__lux 8s linear infinite reverse}
.bfr--luxury .photo{position:absolute;inset:var(--band);z-index:4;border-radius:inherit;
  overflow:hidden;background:#0e0e12;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 1px rgba(255,236,190,.6),0 0 22px rgba(0,0,0,.45)}
.bfr--luxury .glint{position:absolute;z-index:5;width:15px;height:15px;background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 6px rgba(255,235,180,.95));
  opacity:0;transform:translate(-50%,-50%) scale(.35);
  animation:twinkle__lux 3.2s ease-in-out infinite}
.bfr--luxury .g1{top:6%;left:50%}
.bfr--luxury .g2{top:50%;left:94%;animation-delay:.8s}
.bfr--luxury .g3{top:94%;left:50%;animation-delay:1.6s}
.bfr--luxury .g4{top:50%;left:6%;animation-delay:2.4s}
.bfr--luxury .particles{position:absolute;inset:0;z-index:5;pointer-events:none}
.bfr--luxury .dust{position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(243,221,154,.8) 40%,transparent 70%);
  animation:drift__lux linear infinite}
/* مواقع الغبار مثبّتة (كانت عشوائية بالجافاسكربت) */
.bfr--luxury .dust:nth-child(1){left:7%;top:72%;animation-duration:5.2s;animation-delay:-1.4s;opacity:.72}
.bfr--luxury .dust:nth-child(2){left:19%;top:88%;animation-duration:6.8s;animation-delay:-4.1s;opacity:.55}
.bfr--luxury .dust:nth-child(3){left:31%;top:64%;animation-duration:4.4s;animation-delay:-2.7s;opacity:.9}
.bfr--luxury .dust:nth-child(4){left:44%;top:95%;animation-duration:7.9s;animation-delay:-0.6s;opacity:.48}
.bfr--luxury .dust:nth-child(5){left:56%;top:78%;animation-duration:5.7s;animation-delay:-5.3s;opacity:.83}
.bfr--luxury .dust:nth-child(6){left:68%;top:61%;animation-duration:6.1s;animation-delay:-3.2s;opacity:.64}
.bfr--luxury .dust:nth-child(7){left:81%;top:91%;animation-duration:4.9s;animation-delay:-1.9s;opacity:.95}
.bfr--luxury .dust:nth-child(8){left:93%;top:69%;animation-duration:8.2s;animation-delay:-4.8s;opacity:.51}
.bfr--luxury .dust:nth-child(9){left:13%;top:83%;animation-duration:5.5s;animation-delay:-0.3s;opacity:.77}
.bfr--luxury .dust:nth-child(10){left:26%;top:97%;animation-duration:7.1s;animation-delay:-2.2s;opacity:.6}
.bfr--luxury .dust:nth-child(11){left:38%;top:74%;animation-duration:4.6s;animation-delay:-5.9s;opacity:.88}
.bfr--luxury .dust:nth-child(12){left:51%;top:66%;animation-duration:6.4s;animation-delay:-3.7s;opacity:.43}
.bfr--luxury .dust:nth-child(13){left:63%;top:93%;animation-duration:5.9s;animation-delay:-1.1s;opacity:.81}
.bfr--luxury .dust:nth-child(14){left:75%;top:80%;animation-duration:7.6s;animation-delay:-4.4s;opacity:.68}
.bfr--luxury .dust:nth-child(15){left:87%;top:62%;animation-duration:4.2s;animation-delay:-2.5s;opacity:.93}
.bfr--luxury .dust:nth-child(16){left:97%;top:86%;animation-duration:6.7s;animation-delay:-5.6s;opacity:.57}
@keyframes spin__lux{to{transform:rotate(360deg)}}
@keyframes float__lux{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse__lux{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.16);opacity:1}}
@keyframes gemPulse__lux{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
@keyframes twinkle__lux{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}}
@keyframes breathe__lux{
  0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 44px rgba(201,160,74,.32),0 0 0 1px rgba(243,221,154,.32)}
  50%{box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 82px rgba(201,160,74,.6),0 0 0 1px rgba(243,221,154,.55)}}
@keyframes drift__lux{0%{transform:translateY(0) scale(1);opacity:0}
  15%{opacity:1}85%{opacity:.8}100%{transform:translateY(-70px) scale(.3);opacity:0}}

/* ═══════════ moon — إطار القمر والنجوم ═══════════
   منقول من moon-frame. التعديلات الإلزامية:
   • مواقع النجوم الأربعة عشر كانت Math.random لكل تحميل ⇒ ثُبّتت أدناه بنفس منطق
     التوزيع في المصدر (محيطي + تجنّب زاوية الهلال) فيطلع البكج نفسه دائمًا.
   • body/.moon-widget/‏--user-scale حُذفت — التقييس يتكفّل به .bfr-scale.
   • :root محليّة وكل @keyframes بلاحقة __mn.
   غير منقول (يحتاج ربطًا بين القطعتين وكانفس لكل إجراء): الخط الضوئي بين الصورة
   والاسم، والنقاط المتنقّلة من الاسم إلى النجوم، وتكوّن الاسم من نقاط ضوئية. */
.bfr--moon{
  --navy-deep:#090D2B; --navy-mid:#12194A; --violet-deep:#352060;
  --violet-glow:#8B6DFF; --silver:#C9D1E3; --glow:rgba(165,145,255,.75);
  --frame-size:320px; --photo-size:250px;
  position:relative;width:var(--frame-size);height:var(--frame-size);
  display:flex;align-items:center;justify-content:center;
  animation:frameEnter__mn .7s ease-out both;
}
@keyframes frameEnter__mn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.bfr--moon .ring-outer{position:absolute;
  width:calc(var(--photo-size) + 22px);height:calc(var(--photo-size) + 22px);border-radius:50%;
  border:5px solid rgba(139,109,255,.55);
  box-shadow:0 0 22px rgba(139,109,255,.35),0 0 46px rgba(139,109,255,.18),inset 0 0 18px rgba(139,109,255,.22);
  animation:ringBreathe__mn 4s ease-in-out infinite}
@keyframes ringBreathe__mn{
  0%,100%{box-shadow:0 0 22px rgba(139,109,255,.35),0 0 46px rgba(139,109,255,.18),inset 0 0 18px rgba(139,109,255,.22);
          border-color:rgba(139,109,255,.55)}
  50%{box-shadow:0 0 34px rgba(165,145,255,.6),0 0 66px rgba(139,109,255,.32),inset 0 0 24px rgba(165,145,255,.32);
      border-color:rgba(165,145,255,.8)}}
.bfr--moon .ring-sweep{position:absolute;
  width:calc(var(--photo-size) + 34px);height:calc(var(--photo-size) + 34px);border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 320deg,rgba(201,209,227,.9) 345deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  opacity:0;animation:sweepOnce__mn 1.1s ease-in-out .75s forwards}
@keyframes sweepOnce__mn{from{transform:rotate(0);opacity:1}85%{opacity:1}to{transform:rotate(360deg);opacity:0}}
.bfr--moon .photo{position:relative;width:var(--photo-size);height:var(--photo-size);border-radius:50%;
  border:2px solid var(--silver);overflow:hidden;
  background:linear-gradient(145deg,var(--navy-deep) 0%,var(--navy-mid) 50%,var(--violet-deep) 100%);
  box-shadow:inset 0 0 24px rgba(9,13,43,.6)}
.bfr--moon .cloud{position:absolute;bottom:6%;left:11%;width:78%;height:26%;
  pointer-events:none;opacity:.35;filter:blur(2px)}
.bfr--moon .cloud svg{width:100%;height:100%;display:block}
.bfr--moon .moon{position:absolute;top:6px;right:14px;width:62px;height:62px;z-index:3;
  animation:moonFloat__mn 4.5s ease-in-out infinite}
.bfr--moon .moon svg{width:100%;height:100%;display:block}
@keyframes moonFloat__mn{
  0%,100%{transform:translateY(0) rotate(-2deg);filter:drop-shadow(0 0 8px rgba(255,255,255,.45))}
  50%{transform:translateY(-4px) rotate(2deg);filter:drop-shadow(0 0 14px rgba(165,145,255,.8))}}
.bfr--moon .star{position:absolute;pointer-events:none;opacity:0;
  animation:starIn__mn .6s ease-out forwards,
            starTwinkle__mn var(--tw-dur,2.4s) ease-in-out var(--tw-delay,0s) infinite;
  animation-delay:var(--in-delay,0s),calc(var(--in-delay,0s) + .6s + var(--tw-delay,0s))}
.bfr--moon .star svg{width:100%;height:100%;display:block}
.bfr--moon .star.drift{
  animation:starIn__mn .6s ease-out forwards,
            starTwinkle__mn var(--tw-dur,2.4s) ease-in-out var(--tw-delay,0s) infinite,
            starDrift__mn 7s ease-in-out infinite alternate;
  animation-delay:var(--in-delay,0s),calc(var(--in-delay,0s) + .6s + var(--tw-delay,0s)),var(--in-delay,0s)}
@keyframes starIn__mn{from{opacity:0;transform:scale(.4)}to{opacity:.7;transform:scale(1)}}
@keyframes starTwinkle__mn{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes starDrift__mn{from{margin-top:0}to{margin-top:5px}}
/* مواقع النجوم مثبّتة (كانت عشوائية بالجافاسكربت) */
.bfr--moon .star:nth-of-type(1){left:308.7px;top:153.1px;width:11.2px;height:11.2px;--tw-dur:2.07s;--tw-delay:1.79s;--in-delay:.74s}
.bfr--moon .star:nth-of-type(2){left:303.9px;top:213px;width:4.9px;height:4.9px;--tw-dur:2.15s;--tw-delay:.61s;--in-delay:.63s}
.bfr--moon .star:nth-of-type(3){left:241.7px;top:274.8px;width:5.9px;height:5.9px;--tw-dur:2.44s;--tw-delay:.78s;--in-delay:.45s}
.bfr--moon .star:nth-of-type(4){left:198.7px;top:291.7px;width:7px;height:7px;--tw-dur:2.96s;--tw-delay:1.66s;--in-delay:.5s}
.bfr--moon .star:nth-of-type(5){left:129.5px;top:308.9px;width:4.7px;height:4.7px;--tw-dur:1.67s;--tw-delay:1.75s;--in-delay:.61s}
.bfr--moon .star:nth-of-type(6){left:60.5px;top:274.4px;width:8.4px;height:8.4px;--tw-dur:1.82s;--tw-delay:1.15s;--in-delay:.6s}
.bfr--moon .star:nth-of-type(7){left:31.1px;top:237.5px;width:10px;height:10px;--tw-dur:1.84s;--tw-delay:.88s;--in-delay:.87s}
.bfr--moon .star:nth-of-type(8){left:14.9px;top:169.4px;width:6px;height:6px;--tw-dur:3.3s;--tw-delay:.35s;--in-delay:.98s}
.bfr--moon .star:nth-of-type(9){left:34.7px;top:88.8px;width:3.9px;height:3.9px;--tw-dur:3.13s;--tw-delay:.1s;--in-delay:.55s}
.bfr--moon .star:nth-of-type(10){left:46.5px;top:47.2px;width:4.7px;height:4.7px;--tw-dur:1.91s;--tw-delay:1.77s;--in-delay:.99s}
.bfr--moon .star:nth-of-type(11){left:121px;top:5.2px;width:9.6px;height:9.6px;--tw-dur:3.25s;--tw-delay:.28s;--in-delay:.92s}
.bfr--moon .star:nth-of-type(12){left:296.8px;top:106.9px;width:6.2px;height:6.2px;--tw-dur:1.69s;--tw-delay:1.21s;--in-delay:.99s}
.bfr--moon .star:nth-of-type(13){left:310.9px;top:162px;width:6.8px;height:6.8px;--tw-dur:2.77s;--tw-delay:1.43s;--in-delay:.72s}
.bfr--moon .star:nth-of-type(14){left:290.4px;top:94.2px;width:11.6px;height:11.6px;--tw-dur:1.61s;--tw-delay:.06s;--in-delay:1.18s}
.bfr--moon .shooting-star{position:absolute;top:12%;left:-8%;width:70px;height:2px;border-radius:2px;
  background:linear-gradient(to left,rgba(255,255,255,.95),transparent);
  opacity:0;pointer-events:none;z-index:4;
  animation:shoot__mn 1.1s ease-in 3s infinite}
@keyframes shoot__mn{
  0%{opacity:0;transform:translate(0,0) rotate(18deg)}
  4%{opacity:.9}
  36%{opacity:0;transform:translate(280px,120px) rotate(18deg)}
  100%{opacity:0;transform:translate(280px,120px) rotate(18deg)}}

/* ═══════════ crystal — إطار الكريستال ═══════════
   منقول من crystal-frame (إطار الصورة فقط). التعديلات الإلزامية:
   • المسرح كان 400×480 ليسع لوحة الاسم ⇒ صار 400×400 (اللوحة قطعة منفصلة).
   • الأوجه (56 مضلّعًا) والأحجار (8) كانت تُولَّد بالجافاسكربت ⇒ تُولَّد الآن بنفس
     رياضيات المصدر في badge-frames.js فتخرج ماركبًا ثابتًا (لا عشوائية فيها أصلًا).
   • فئات .stage.enter/.live كان يبدّلها الجافاسكربت ⇒ الحركات تعمل مباشرة، فكل
     إجراء تركيب جديد يبدأ من أول الحركة.
   • معرّفات defs مسبوقة بـc لئلا تتصادم مع تصميم آخر.
   لم يُنقل: الشرر العشوائي وومضة الوجه العشوائية (تحتاج حلقة جافاسكربت) — عُوّض
   عنها بومضات مجدولة على الأوجه بالـcss. والتاج مطفأ كما هو افتراضه في المصدر. */
.bfr--crystal{
  --c1:#FBD3DF; --c2:#F06292;
  --metal-l:#F7E7A9; --metal:#D4AF37; --metal-d:#8C6A14;
  --glow:rgba(240,98,146,.45);
  position:relative;width:400px;height:400px;
}
.bfr--crystal .aura{position:absolute;left:0;top:0;width:400px;height:400px;border-radius:50%;
  box-shadow:0 0 40px 6px var(--glow);opacity:0;pointer-events:none;
  animation:auraIn__cr 1s 2.2s forwards}
@keyframes auraIn__cr{to{opacity:.7}}
.bfr--crystal .ringwrap{position:absolute;inset:0}
.bfr--crystal .ring{position:absolute;inset:0;width:400px;height:400px;overflow:visible}
.bfr--crystal .outer-gold{fill:none;stroke:url(#cgold);stroke-width:3;
  stroke-dasharray:1170;stroke-dashoffset:1170;filter:url(#csoft);
  animation:draw__cr .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw__cr{to{stroke-dashoffset:0}}
.bfr--crystal .inner-gold{fill:none;stroke:url(#cgold);stroke-width:1.5;opacity:0;
  animation:fadeIn__cr .5s .7s forwards}
@keyframes fadeIn__cr{to{opacity:1}}
.bfr--crystal .facet{stroke:rgba(255,255,255,.55);stroke-width:.6;transform-origin:200px 200px;
  opacity:0;transform:scale(.6);animation:facetIn__cr .45s cubic-bezier(.2,.8,.3,1.2) forwards}
@keyframes facetIn__cr{to{opacity:1;transform:scale(1)}}
/* ومضة الوجه: كانت عشوائية بالجافاسكربت ⇒ مجدولة هنا بتأخيرات متباعدة */
.bfr--crystal .facet-gloss{fill:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen;
  animation:flash__cr 7.2s ease-out infinite}
@keyframes flash__cr{0%{opacity:0}2%{opacity:.85}6%,100%{opacity:0}}
.bfr--crystal .gem{transform-origin:center;opacity:0;transform-box:fill-box;
  animation:pop__cr .55s cubic-bezier(.3,1.6,.5,1) 1.6s forwards, gemPulse__cr 2.6s ease-in-out 2.2s infinite}
@keyframes pop__cr{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes gemPulse__cr{50%{transform:scale(1.09)}}
.bfr--crystal .gem-body{filter:url(#cgemglow)}
.bfr--crystal .highlight{position:absolute;left:0;top:0;width:400px;height:400px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.08) 70%,
    rgba(255,255,255,.7) 78%,rgba(255,255,255,.08) 86%,transparent 94%);
  -webkit-mask:radial-gradient(circle,transparent 0 139px,#000 141px 187px,transparent 189px);
          mask:radial-gradient(circle,transparent 0 139px,#000 141px 187px,transparent 189px);
  mix-blend-mode:screen;opacity:0;will-change:transform;
  animation:hlIn__cr .1s 2.2s forwards, spin__cr 9s linear 2.2s infinite}
@keyframes hlIn__cr{to{opacity:1}}
@keyframes spin__cr{to{transform:rotate(360deg)}}
.bfr--crystal .avatar{position:absolute;left:64px;top:64px;width:272px;height:272px;
  border-radius:50%;overflow:hidden;opacity:0;transform:scale(.9);
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--c1) 40%,var(--c2) 100%);
  animation:avatarIn__cr .8s 1.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes avatarIn__cr{to{opacity:1;transform:scale(1)}}
.bfr--crystal .avatar::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 22px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none}

/* ═══════════ lion — إطار الأسد ═══════════
   منقول من lion-badge. مبنيّ على خمس صور PNG شفّافة مستقلّة فوقها مؤثّرات css.
   التعديلات الإلزامية:
   • المسرح width:min(95%,610px) → 610px ثابتة (النسبة تظل 1:1، والتقييس من .bfr-scale).
   • الجزيئات الاثنتان والأربعون كانت Math.random ⇒ ثُبّتت ببذرة في badge-frames.js.
   • ميل المؤشّر (--rx/--ry من pointermove) حُذف — لا مؤشّر في OBS.
   • الصور صُغّرت من 1254px إلى 640px (5.2MB → 446KB) — العرض الأقصى في الإجراء
     أقل من 400px فالمصدر كان مضاعفًا بلا فائدة، والأوفرلي يحمّلها عبر الشبكة. */
.bfr--lion{
  --gold:#ffb52f; --amber:#ff6b00;
  position:relative;width:610px;height:610px;isolation:isolate;
}
.bfr--lion .badge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;filter:drop-shadow(0 16px 20px rgb(0 0 0/38%))}
.bfr--lion .base-layer{z-index:3;animation:frameBreathe__ln 4.8s ease-in-out infinite}
.bfr--lion .metal-sweep{position:absolute;z-index:3;inset:0;overflow:hidden;
  clip-path:polygon(49% 50%,53% -10%,64% -8%,52% 50%);pointer-events:none;
  mix-blend-mode:screen;opacity:.82;animation:sweepOrbit__ln 4.6s cubic-bezier(.45,0,.55,1) infinite}
.bfr--lion .metal-sweep img{width:100%;height:100%;object-fit:contain;
  filter:brightness(1.82) saturate(1.22) drop-shadow(0 0 11px #ffc34a);
  animation:sweepCounter__ln 4.6s cubic-bezier(.45,0,.55,1) infinite}
.bfr--lion .left-layer{z-index:4;transform-origin:30% 50%;animation:leftGuard__ln 5.2s ease-in-out infinite}
.bfr--lion .right-layer{z-index:4;transform-origin:70% 50%;animation:rightGuard__ln 5.2s ease-in-out infinite}
.bfr--lion .top-layer{z-index:5;transform-origin:50% 24%;animation:lionCommand__ln 3.8s ease-in-out infinite}
.bfr--lion .bottom-layer{z-index:6;transform-origin:50% 86%;animation:crestPulse__ln 3.2s ease-in-out infinite}
/* الصورة: قرص فوق الإطار لا خلفه. في المصدر كانت خلفه (z-index:1) فتقصّها فتحة
   القاعدة والزخرفة السفلية، فتطلع أصغر من مقاسها وغير واضحة. هنا ترتفع فوق طبقات
   الـPNG (z-index:7) فيظهر القرص كاملًا، وتُطوّق بحلقة ذهبية ثلاثية تفصلها عن
   الإطار وتبيّنها كميدالية مقصودة. العرض 64% (بدل 59.5%) — أكبر ما يبقي الأسدين
   والتاج ظاهرَين بلا تغطية. */
.bfr--lion .portrait{position:absolute;z-index:7;top:51.5%;left:50%;width:64%;aspect-ratio:1;
  overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,rgb(255 191 87/34%),transparent 36%),
             linear-gradient(155deg,#332112,#0d0a08 72%);
  box-shadow:inset 0 0 36px rgb(0 0 0/72%),0 0 55px rgb(255 121 0/16%),
             0 0 0 4px #2a1a08,0 0 0 9px #d8a63f,0 0 0 12px #7a4a11;
  transform:translate(-50%,-50%)}
.bfr--lion .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bfr--lion .portrait-shine{position:absolute;inset:-30%;
  background:linear-gradient(115deg,transparent 38%,rgb(255 225 161/18%) 48%,transparent 58%);
  transform:translateX(-65%) rotate(8deg);animation:portraitShine__ln 5.5s ease-in-out infinite}
.bfr--lion .aura,.bfr--lion .energy-ring,.bfr--lion .vfx-halo,
.bfr--lion .shockwave,.bfr--lion .royal-rays{position:absolute;border-radius:50%;pointer-events:none}
.bfr--lion .royal-rays{z-index:-3;inset:-2%;
  background:repeating-conic-gradient(from 0deg,rgb(255 158 22/0%) 0deg 7deg,
    rgb(255 158 22/15%) 8deg,rgb(255 216 119/0%) 13deg 22deg);
  opacity:.42;filter:blur(7px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
          mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
  animation:rayTurn__ln 24s linear infinite}
.bfr--lion .aura{z-index:-2;inset:8%;
  background:conic-gradient(from 0deg,transparent,#ff7b00,transparent 30%,#ffd36a 52%,transparent 75%,#ff7b00);
  opacity:.72;filter:blur(30px);animation:auraSpin__ln 8s linear infinite}
.bfr--lion .vfx-halo{z-index:0;inset:3%;opacity:.82;
  background:conic-gradient(from 10deg,transparent 0 12%,#ff7200 17%,#fff2ad 19%,
    transparent 22% 44%,#ff9b10 49%,transparent 54% 75%,#ffe49b 79%,#ff6400 82%,transparent 87%);
  filter:drop-shadow(0 0 11px #ff7a00) drop-shadow(0 0 25px rgb(255 98 0/50%));
  -webkit-mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
          mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
  animation:haloOrbit__ln 7s linear infinite}
.bfr--lion .halo-two{inset:7.5%;opacity:.58;filter:blur(1px) drop-shadow(0 0 10px #ffd568);
  animation-direction:reverse;animation-duration:10.5s;
  -webkit-mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%);
          mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%)}
.bfr--lion .energy-ring{z-index:2;inset:18.6%;border:2px solid rgb(255 219 132/55%);
  box-shadow:0 0 12px #ffe09a,0 0 28px #ff7800,inset 0 0 18px rgb(255 143 0/62%);
  opacity:.78;animation:energyPulse__ln 2.8s ease-in-out infinite}
.bfr--lion .shockwave{z-index:1;inset:18.5%;border:2px solid #ffd26a;
  box-shadow:0 0 14px #ff7b00,inset 0 0 10px #ff9b13;opacity:0;
  animation:shockwave__ln 4.8s ease-out infinite}
.bfr--lion .shockwave-two{animation-delay:2.4s}
.bfr--lion .arcwrap{position:absolute;inset:0;pointer-events:none}
/* أقواس الطاقة تدور على قطر 64% — نفس حافة قرص الصورة تمامًا. رفعناها فوقه
   (‎8‎ بدل ‎7‎) وإلا دفنها القرص بعد رفعه، فتضيع حركة الأقواس على الحلقة. */
.bfr--lion .energy-arcs{position:absolute;z-index:8;inset:8.4%;width:83.2%;height:83.2%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff7c9) drop-shadow(0 0 7px #ff9800) drop-shadow(0 0 16px #ff5a00);
  animation:arcSpin__ln 8.5s linear infinite}
.bfr--lion .arc{fill:none;stroke:url(#lionArc);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bfr--lion .arc-one{stroke-width:1.1;stroke-dasharray:3 19 10 31 2 18;animation:arcDash__ln 2.7s linear infinite}
.bfr--lion .arc-two{stroke-width:.6;stroke-dasharray:1 8 7 22 2 14;opacity:.72;
  animation:arcDash__ln 4.2s linear infinite reverse}
.bfr--lion .eye-glow,.bfr--lion .lens-flare{position:absolute;z-index:9;display:block;
  pointer-events:none;mix-blend-mode:screen}
.bfr--lion .eye-glow{top:12.7%;width:3.6%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 5%,#ffe66f 12%,#ff7a00 35%,transparent 68%);
  filter:blur(.4px) drop-shadow(0 0 7px #ff5a00) drop-shadow(0 0 15px #ff9d00);
  opacity:.75;animation:eyePower__ln 3.4s ease-in-out infinite}
.bfr--lion .eye-left{left:45.3%}
.bfr--lion .eye-right{left:51.1%;animation-delay:.08s}
.bfr--lion .lens-flare{width:5.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#ffe59b 8%,#ff9a00 20%,transparent 52%);
  filter:drop-shadow(0 0 8px #ff8a00);animation:flareStrike__ln 5.2s ease-in-out infinite}
.bfr--lion .lens-flare::before,.bfr--lion .lens-flare::after{position:absolute;top:50%;left:50%;
  content:"";background:linear-gradient(90deg,transparent,#fff4c7,transparent);transform:translate(-50%,-50%)}
.bfr--lion .lens-flare::before{width:250%;height:1px}
.bfr--lion .lens-flare::after{width:1px;height:250%;
  background:linear-gradient(transparent,#fff4c7,transparent)}
.bfr--lion .flare-top{top:2.8%;left:47.25%}
.bfr--lion .flare-left{top:45%;left:7.2%;animation-delay:1.3s}
.bfr--lion .flare-right{top:45%;right:7.2%;animation-delay:2.6s}
.bfr--lion .flare-bottom{bottom:1.8%;left:47.25%;animation-delay:3.9s}
.bfr--lion .particles{position:absolute;z-index:8;inset:3%;overflow:hidden;
  border-radius:50%;pointer-events:none}
.bfr--lion .particle{position:absolute;bottom:13%;left:var(--x,50%);width:3px;aspect-ratio:1;
  border-radius:50%;background:#ffd06c;box-shadow:0 0 9px 2px rgb(255 126 0/78%);opacity:0;
  animation:emberRise__ln var(--duration,4s) var(--delay,0s) ease-out infinite}
.bfr--lion .particle.spark{width:5px!important;background:#fff6c7;
  box-shadow:0 0 8px 3px #ffb11b,0 0 19px 5px rgb(255 73 0/45%)}
@keyframes frameBreathe__ln{0%,100%{transform:scale(1);filter:drop-shadow(0 16px 20px rgb(0 0 0/42%)) drop-shadow(0 0 6px rgb(255 111 0/18%))}
  50%{transform:scale(1.008);filter:drop-shadow(0 17px 26px rgb(0 0 0/38%)) drop-shadow(0 0 16px rgb(255 113 0/38%))}}
@keyframes lionCommand__ln{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.65%) scale(1.006)}}
@keyframes leftGuard__ln{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(-.45deg) translateX(-.28%)}}
@keyframes rightGuard__ln{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(.45deg) translateX(.28%)}}
@keyframes crestPulse__ln{0%,100%{transform:scale(1);filter:drop-shadow(0 12px 16px rgb(0 0 0/38%))}
  50%{transform:scale(1.012);filter:drop-shadow(0 0 15px rgb(255 125 0/24%))}}
@keyframes auraSpin__ln{to{transform:rotate(1turn)}}
@keyframes haloOrbit__ln{to{transform:rotate(1turn)}}
@keyframes rayTurn__ln{to{transform:rotate(-1turn)}}
@keyframes sweepOrbit__ln{to{transform:rotate(1turn)}}
@keyframes sweepCounter__ln{to{transform:rotate(-1turn)}}
@keyframes shockwave__ln{0%,25%{opacity:0;transform:scale(.94)}30%{opacity:.9}68%,100%{opacity:0;transform:scale(1.34)}}
@keyframes arcSpin__ln{to{transform:rotate(1turn)}}
@keyframes arcDash__ln{to{stroke-dashoffset:-72}}
@keyframes eyePower__ln{0%,58%,100%{opacity:.48;transform:scale(.78)}64%{opacity:1;transform:scale(1.35)}
  70%{opacity:.68;transform:scale(.92)}76%{opacity:1;transform:scale(1.18)}}
@keyframes flareStrike__ln{0%,72%,100%{opacity:.1;transform:scale(.45) rotate(0)}
  77%{opacity:1;transform:scale(1.45) rotate(20deg)}84%{opacity:.32;transform:scale(.7) rotate(32deg)}}
@keyframes energyPulse__ln{0%,100%{opacity:.3;transform:scale(.99)}50%{opacity:.72;transform:scale(1.015)}}
@keyframes portraitShine__ln{0%,25%{transform:translateX(-65%) rotate(8deg)}65%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes emberRise__ln{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.85}
  100%{opacity:0;transform:translate(var(--drift,0),-250px) scale(0)}}

/* ═══════════ cat — إطار القطوة الوردية ═══════════
   منقول من تصميم المالك (pink-cat-badge-demo). أصل واحد (cat-badge.png) يُرسم
   ثلاث مرّات بقصّ مختلف: حلقة وسطى حول الصورة، رأس فوقها، جسم تحتها.
   معزول تحت .bfr--cat بمتغيّراته وkeyframes بلاحقة __ct فلا يتصادم مع الأسد. */
.bfr--cat{
  --pink:#ff79b7; --magenta:#e40077;
  position:relative;width:610px;height:610px;isolation:isolate;
}
.bfr--cat .badge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;filter:drop-shadow(0 16px 20px rgb(0 0 0/38%))}
.bfr--cat .cat-ring-layer{z-index:3;clip-path:inset(27% 0 27% 0);
  animation:frameBreathe__ct 5.5s ease-in-out infinite}
.bfr--cat .cat-top-layer{z-index:5;clip-path:inset(0 0 68% 0);transform-origin:50% 25%;
  animation:catTop__ct 5s ease-in-out infinite}
.bfr--cat .cat-bottom-layer{z-index:6;clip-path:inset(67% 0 0 0);transform-origin:50% 82%;
  animation:catBottom__ct 5.2s ease-in-out infinite}
/* الصورة هنا تبقى خلف الإطار (عكس الأسد) وبلا حلقة مضافة: القطوة تحتضن الصورة
   بكفّيها فوق الحلقة الذهبية وذيلها تحتها — ورفع الصورة فوقها يبتلع الحلقة
   والكفّين معًا فتضيع فكرة التصميم (جُرّب بصريًا: عند 64% فوق الإطار لا يبقى
   إلا خيط وردي). المشكلة عند الأسد كانت قصّ الفتحة؛ هنا الفتحة دائرية واسعة،
   فحلّها توسيع الصورة لتملأها.
   نسخة slim: المصمّم كتب 61.5%، لكن قياس قناة الشفافية للصورة النحيفة يعطي أوسع
   فتحة = 61.6% من عرض الصورة ⇒ 57.8% من لوحة البادج (الصورة 640×682 تُحتوى
   بالارتفاع فتشغل 93.8% من عرض اللوحة). فـ61.5% تتجاوز الحلقة ~4 نقاط وتبرز
   الصورة من جانبيها — لا يظهر ذلك في عرض المصمّم لأنه بلا صورة (قرص داكن يندمج
   بالخلفية). فنضبطها 57.5%: تلامس الحلقة من الداخل بلا بروز وبلا فجوة. */
.bfr--cat .portrait{position:absolute;z-index:1;top:51.5%;left:50%;width:57.5%;aspect-ratio:1;
  overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,rgb(255 137 192/31%),transparent 38%),
             linear-gradient(155deg,#381127,#10070d 72%);
  box-shadow:inset 0 0 36px rgb(0 0 0/72%),0 0 58px rgb(255 29 133/21%);
  transform:translate(-50%,-50%)}
.bfr--cat .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bfr--cat .portrait-shine{position:absolute;inset:-30%;
  background:linear-gradient(115deg,transparent 38%,rgb(255 200 226/20%) 48%,transparent 58%);
  transform:translateX(-65%) rotate(8deg);animation:portraitShine__ct 5.5s ease-in-out infinite}
.bfr--cat .aura,.bfr--cat .energy-ring,.bfr--cat .vfx-halo,
.bfr--cat .shockwave,.bfr--cat .royal-rays{position:absolute;border-radius:50%;pointer-events:none}
.bfr--cat .royal-rays{z-index:-3;inset:-2%;
  background:repeating-conic-gradient(from 0deg,rgb(255 71 157/0%) 0deg 7deg,
    rgb(255 71 157/17%) 8deg,rgb(255 205 228/0%) 13deg 22deg);
  opacity:.42;filter:blur(7px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
          mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
  animation:rayTurn__ct 24s linear infinite}
.bfr--cat .aura{z-index:-2;inset:8%;
  background:conic-gradient(from 0deg,transparent,#e40077,transparent 28%,#ffadd2 51%,transparent 74%,#ff2f97);
  opacity:.78;filter:blur(30px);animation:auraSpin__ct 8s linear infinite}
.bfr--cat .vfx-halo{z-index:0;inset:3%;opacity:.82;
  background:conic-gradient(from 10deg,transparent 0 12%,#df006f 17%,#fff0f8 19%,
    transparent 22% 44%,#ff5ca9 49%,transparent 54% 75%,#ffd2e7 79%,#cf005f 82%,transparent 87%);
  filter:drop-shadow(0 0 11px #ff2b92) drop-shadow(0 0 25px rgb(215 0 102/55%));
  -webkit-mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
          mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
  animation:haloOrbit__ct 7s linear infinite}
.bfr--cat .halo-two{inset:7.5%;opacity:.58;filter:blur(1px) drop-shadow(0 0 10px #ffc1dd);
  animation-direction:reverse;animation-duration:10.5s;
  -webkit-mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%);
          mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%)}
.bfr--cat .energy-ring{z-index:2;inset:18.6%;border:2px solid rgb(255 205 228/62%);
  box-shadow:0 0 12px #ffe7f2,0 0 29px #ff218a,inset 0 0 18px rgb(222 0 105/63%);
  opacity:.78;animation:energyPulse__ct 2.8s ease-in-out infinite}
.bfr--cat .shockwave{z-index:1;inset:18.5%;border:2px solid #ff9dc8;
  box-shadow:0 0 14px #ff1681,inset 0 0 10px #ff65b0;opacity:0;
  animation:shockwave__ct 4.8s ease-out infinite}
.bfr--cat .shockwave-two{animation-delay:2.4s}
.bfr--cat .arcwrap{position:absolute;inset:0;pointer-events:none}
.bfr--cat .energy-arcs{position:absolute;z-index:7;inset:8.4%;width:83.2%;height:83.2%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff5fa) drop-shadow(0 0 7px #ff64af) drop-shadow(0 0 17px #cf0063);
  animation:arcSpin__ct 8.5s linear infinite}
.bfr--cat .arc{fill:none;stroke:url(#catArc);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bfr--cat .arc-one{stroke-width:1.1;stroke-dasharray:3 19 10 31 2 18;animation:arcDash__ct 2.7s linear infinite}
.bfr--cat .arc-two{stroke-width:.6;stroke-dasharray:1 8 7 22 2 14;opacity:.72;
  animation:arcDash__ct 4.2s linear infinite reverse}
.bfr--cat .eye-glow,.bfr--cat .lens-flare{position:absolute;z-index:9;display:block;
  pointer-events:none;mix-blend-mode:screen}
.bfr--cat .eye-glow{top:12.7%;width:3.6%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 5%,#ffd5ea 12%,#ff2d92 35%,transparent 68%);
  filter:blur(.4px) drop-shadow(0 0 7px #dc006a) drop-shadow(0 0 15px #ff54a7);
  opacity:.75;animation:eyePower__ct 3.4s ease-in-out infinite}
.bfr--cat .eye-left{left:45.3%}
.bfr--cat .eye-right{left:51.1%;animation-delay:.08s}
.bfr--cat .lens-flare{width:5.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#ffe1ee 8%,#ff4ba2 20%,transparent 52%);
  filter:drop-shadow(0 0 8px #ff2e91);animation:flareStrike__ct 5.2s ease-in-out infinite}
.bfr--cat .lens-flare::before,.bfr--cat .lens-flare::after{position:absolute;top:50%;left:50%;
  content:"";background:linear-gradient(90deg,transparent,#fff0f7,transparent);transform:translate(-50%,-50%)}
.bfr--cat .lens-flare::before{width:250%;height:1px}
.bfr--cat .lens-flare::after{width:1px;height:250%;
  background:linear-gradient(transparent,#fff0f7,transparent)}
.bfr--cat .flare-top{top:2.8%;left:47.25%}
.bfr--cat .flare-left{top:45%;left:7.2%;animation-delay:1.3s}
.bfr--cat .flare-right{top:45%;right:7.2%;animation-delay:2.6s}
.bfr--cat .flare-bottom{bottom:1.8%;left:47.25%;animation-delay:3.9s}
.bfr--cat .particles{position:absolute;z-index:8;inset:3%;overflow:hidden;
  border-radius:50%;pointer-events:none}
.bfr--cat .particle{position:absolute;bottom:13%;left:var(--x,50%);width:3px;aspect-ratio:1;
  border-radius:50%;background:#ffb8d7;box-shadow:0 0 9px 2px rgb(255 30 133/80%);opacity:0;
  animation:emberRise__ct var(--duration,4s) var(--delay,0s) ease-out infinite}
.bfr--cat .particle.spark{width:5px!important;background:#fff4f9;
  box-shadow:0 0 8px 3px #ff76b8,0 0 19px 5px rgb(219 0 101/48%)}
/* نسخة slim: حركة أهدأ تناسب الإطار النحيف */
@keyframes frameBreathe__ct{0%,100%{transform:scale(1);filter:drop-shadow(0 13px 18px rgb(0 0 0/35%)) drop-shadow(0 0 5px rgb(255 40 140/20%))}
  50%{transform:scale(1.004);filter:drop-shadow(0 15px 21px rgb(0 0 0/33%)) drop-shadow(0 0 13px rgb(255 59 151/39%))}}
@keyframes catTop__ct{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-.45%) scale(1.004)}}
@keyframes catBottom__ct{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(.3%) scale(1.004)}}
@keyframes auraSpin__ct{to{transform:rotate(1turn)}}
@keyframes haloOrbit__ct{to{transform:rotate(1turn)}}
@keyframes rayTurn__ct{to{transform:rotate(-1turn)}}
@keyframes shockwave__ct{0%,25%{opacity:0;transform:scale(.94)}30%{opacity:.9}68%,100%{opacity:0;transform:scale(1.34)}}
@keyframes arcSpin__ct{to{transform:rotate(1turn)}}
@keyframes arcDash__ct{to{stroke-dashoffset:-72}}
@keyframes eyePower__ct{0%,58%,100%{opacity:.48;transform:scale(.78)}64%{opacity:1;transform:scale(1.35)}
  70%{opacity:.68;transform:scale(.92)}76%{opacity:1;transform:scale(1.18)}}
@keyframes flareStrike__ct{0%,72%,100%{opacity:.1;transform:scale(.45) rotate(0)}
  77%{opacity:1;transform:scale(1.45) rotate(20deg)}84%{opacity:.32;transform:scale(.7) rotate(32deg)}}
@keyframes energyPulse__ct{0%,100%{opacity:.34;transform:scale(.99)}50%{opacity:.84;transform:scale(1.018)}}
@keyframes portraitShine__ct{0%,25%{transform:translateX(-65%) rotate(8deg)}65%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes emberRise__ct{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.85}
  100%{opacity:0;transform:translate(var(--drift,0),-250px) scale(0)}}

/* ═══════════ hilal — إطار الهلال ═══════════
   منقول من تصميم المالك (alhilal-badge-demo). إطار دائري أزرق مفتوح من الجانبين،
   وفوقه رمز النادي على القاعدة العليا والكتابة على القاعدة السفلى — طبقتان
   منفصلتان عن الإطار (فتحتفظان بحدّتهما ولكلٍّ حركته).
   معزول تحت .bfr--hilal وkeyframes بلاحقة __hl. */
.bfr--hilal{
  --blue:#1e74ff; --ice:#8ce2ff;
  position:relative;width:610px;height:610px;isolation:isolate;
}
.bfr--hilal .badge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;filter:drop-shadow(0 16px 20px rgb(0 0 0/38%))}
.bfr--hilal .hilal-frame-layer{z-index:4;animation:frameBreathe__hl 5.4s ease-in-out infinite}
.bfr--hilal .hilal-symbol-layer,.bfr--hilal .hilal-wordmark-layer{position:absolute;z-index:7;
  left:50%;height:auto;object-fit:contain;pointer-events:none;user-select:none;
  transform:translateX(-50%)}
.bfr--hilal .hilal-symbol-layer{top:5.3%;width:13.3%;transform-origin:50% 42%;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px rgb(57 166 255/92%))
         drop-shadow(0 8px 8px rgb(0 0 0/48%));
  animation:symbolCommand__hl 4.8s ease-in-out infinite}
.bfr--hilal .hilal-wordmark-layer{bottom:7.1%;width:24%;transform-origin:50% 50%;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px rgb(55 163 255/90%))
         drop-shadow(0 7px 7px rgb(0 0 0/58%));
  animation:wordmarkPower__hl 4.4s ease-in-out infinite}
/* الصورة خلف الإطار كما المصدر: الإطار مفتوح الجانبين ومركزه دائرة شفّافة
   واسعة، فلا تُقصّ الصورة ولا تحتاج رفعًا فوقه كإطار الأسد.
   نسخة slim (المعتمدة): الإطار نحُف ~40% فاتّسعت الفتحة ⇒ الصورة 74% بدل 66.5%. */
.bfr--hilal .portrait{position:absolute;z-index:1;top:50.6%;left:50%;width:74%;aspect-ratio:1;
  overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 28%,rgb(54 155 255/32%),transparent 38%),
             linear-gradient(155deg,#0a2d66,#02091c 72%);
  box-shadow:inset 0 0 46px rgb(0 0 0/78%),inset 0 0 0 2px rgb(134 219 255/20%),
             0 0 68px rgb(35 111 255/26%);
  transform:translate(-50%,-50%)}
.bfr--hilal .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bfr--hilal .portrait-shine{position:absolute;inset:-30%;
  background:linear-gradient(115deg,transparent 38%,rgb(206 240 255/20%) 48%,transparent 58%);
  transform:translateX(-65%) rotate(8deg);animation:portraitShine__hl 5.5s ease-in-out infinite}
.bfr--hilal .aura,.bfr--hilal .energy-ring,.bfr--hilal .vfx-halo,
.bfr--hilal .shockwave,.bfr--hilal .royal-rays{position:absolute;border-radius:50%;pointer-events:none}
.bfr--hilal .royal-rays{z-index:-3;inset:-2%;
  background:repeating-conic-gradient(from 0deg,rgb(25 93 255/0%) 0deg 7deg,
    rgb(42 125 255/23%) 8deg,rgb(167 228 255/0%) 13deg 22deg);
  opacity:.58;filter:blur(7px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
          mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
  animation:rayTurn__hl 24s linear infinite}
.bfr--hilal .aura{z-index:-2;inset:8%;
  background:conic-gradient(from 0deg,transparent,#1111ff,transparent 28%,#79d7ff 51%,transparent 74%,#164cff);
  opacity:.84;filter:blur(31px);animation:auraSpin__hl 8s linear infinite}
.bfr--hilal .vfx-halo{z-index:0;inset:3%;opacity:.82;
  background:conic-gradient(from 10deg,transparent 0 12%,#1111ff 17%,#f4fdff 19%,
    transparent 22% 44%,#4bbfff 49%,transparent 54% 75%,#d8f7ff 79%,#1648ff 82%,transparent 87%);
  filter:drop-shadow(0 0 12px #1a65ff) drop-shadow(0 0 28px rgb(27 91 255/65%));
  -webkit-mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
          mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
  animation:haloOrbit__hl 7s linear infinite}
.bfr--hilal .halo-two{inset:7.5%;opacity:.58;filter:blur(1px) drop-shadow(0 0 11px #8ce2ff);
  animation-direction:reverse;animation-duration:10.5s;
  -webkit-mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%);
          mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%)}
.bfr--hilal .energy-ring{z-index:2;inset:12.8%;border:2px solid rgb(199 240 255/74%);
  box-shadow:0 0 13px #dff8ff,0 0 32px #1358ff,inset 0 0 20px rgb(24 92 255/72%);
  opacity:.78;animation:energyPulse__hl 2.8s ease-in-out infinite}
.bfr--hilal .shockwave{z-index:1;inset:12.8%;border:2px solid #83dcff;
  box-shadow:0 0 15px #165dff,inset 0 0 11px #58bcff;opacity:0;
  animation:shockwave__hl 4.8s ease-out infinite}
.bfr--hilal .shockwave-two{animation-delay:2.4s}
.bfr--hilal .arcwrap{position:absolute;inset:0;pointer-events:none}
.bfr--hilal .energy-arcs{position:absolute;z-index:3;inset:5.2%;width:89.6%;height:89.6%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px #54c3ff) drop-shadow(0 0 18px #143fff);
  animation:arcSpin__hl 8.5s linear infinite}
.bfr--hilal .arc{fill:none;stroke:url(#hilalArc);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bfr--hilal .arc-one{stroke-width:1.1;stroke-dasharray:3 19 10 31 2 18;animation:arcDash__hl 2.7s linear infinite}
.bfr--hilal .arc-two{stroke-width:.6;stroke-dasharray:1 8 7 22 2 14;opacity:.72;
  animation:arcDash__hl 4.2s linear infinite reverse}
.bfr--hilal .lens-flare{position:absolute;z-index:9;display:block;pointer-events:none;
  mix-blend-mode:screen;width:5.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#dff8ff 8%,#41b7ff 20%,transparent 52%);
  filter:drop-shadow(0 0 9px #1d72ff);animation:flareStrike__hl 5.2s ease-in-out infinite}
.bfr--hilal .lens-flare::before,.bfr--hilal .lens-flare::after{position:absolute;top:50%;left:50%;
  content:"";background:linear-gradient(90deg,transparent,#e8fbff,transparent);transform:translate(-50%,-50%)}
.bfr--hilal .lens-flare::before{width:250%;height:1px}
.bfr--hilal .lens-flare::after{width:1px;height:250%;
  background:linear-gradient(transparent,#e8fbff,transparent)}
.bfr--hilal .flare-top{top:2.8%;left:47.25%}
.bfr--hilal .flare-left{top:45%;left:7.2%;animation-delay:1.3s}
.bfr--hilal .flare-right{top:45%;right:7.2%;animation-delay:2.6s}
.bfr--hilal .flare-bottom{bottom:1.8%;left:47.25%;animation-delay:3.9s}
.bfr--hilal .particles{position:absolute;z-index:8;inset:3%;overflow:hidden;
  border-radius:50%;pointer-events:none}
.bfr--hilal .particle{position:absolute;bottom:13%;left:var(--x,50%);width:3px;aspect-ratio:1;
  border-radius:50%;background:#8fddff;box-shadow:0 0 10px 2px rgb(35 107 255/86%);opacity:0;
  animation:emberRise__hl var(--duration,4s) var(--delay,0s) ease-out infinite}
.bfr--hilal .particle.spark{width:5px!important;background:#fff;
  box-shadow:0 0 9px 3px #67cfff,0 0 21px 5px rgb(24 70 255/56%)}
/* نسخة slim: نبضة أهدأ (‎1.005‎ بدل ‎1.009‎ وظلال أخفّ) — تناسب الإطار النحيف */
@keyframes frameBreathe__hl{0%,100%{transform:scale(1);filter:drop-shadow(0 14px 19px rgb(0 0 0/39%)) drop-shadow(0 0 6px rgb(48 137 255/25%))}
  50%{transform:scale(1.005);filter:drop-shadow(0 16px 23px rgb(0 0 0/36%)) drop-shadow(0 0 14px rgb(63 158 255/43%))}}
@keyframes symbolCommand__hl{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-4px) scale(1.045)}}
@keyframes wordmarkPower__hl{0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.035);filter:drop-shadow(0 0 12px #51bdff) drop-shadow(0 8px 8px rgb(0 0 0/58%))}}
@keyframes auraSpin__hl{to{transform:rotate(1turn)}}
@keyframes haloOrbit__hl{to{transform:rotate(1turn)}}
@keyframes rayTurn__hl{to{transform:rotate(-1turn)}}
@keyframes shockwave__hl{0%,25%{opacity:0;transform:scale(.94)}30%{opacity:.9}68%,100%{opacity:0;transform:scale(1.34)}}
@keyframes arcSpin__hl{to{transform:rotate(1turn)}}
@keyframes arcDash__hl{to{stroke-dashoffset:-72}}
@keyframes flareStrike__hl{0%,72%,100%{opacity:.1;transform:scale(.45) rotate(0)}
  77%{opacity:1;transform:scale(1.45) rotate(20deg)}84%{opacity:.32;transform:scale(.7) rotate(32deg)}}
@keyframes energyPulse__hl{0%,100%{opacity:.38;transform:scale(.99)}50%{opacity:.92;transform:scale(1.02)}}
@keyframes portraitShine__hl{0%,25%{transform:translateX(-65%) rotate(8deg)}65%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes emberRise__hl{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.85}
  100%{opacity:0;transform:translate(var(--drift,0),-250px) scale(0)}}

/* ═══════════ nassr — إطار النصر ═══════════
   منقول من تصميم المالك (alnassr-badge-demo-slim). مثل الهلال بنيةً بلوحة
   صفراء/زرقاء، وشعار النادي طبقة واحدة أعلى الإطار (لا رمز + كتابة منفصلين).
   معزول تحت .bfr--nassr وkeyframes بلاحقة __ns. */
.bfr--nassr{
  --gold:#ffd21f; --navy:#245486;
  position:relative;width:610px;height:610px;isolation:isolate;
}
.bfr--nassr .badge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;filter:drop-shadow(0 16px 20px rgb(0 0 0/38%))}
.bfr--nassr .nassr-frame-layer{z-index:4;animation:frameBreathe__ns 5.4s ease-in-out infinite}
.bfr--nassr .nassr-logo-layer{position:absolute;z-index:8;top:1.5%;left:50%;width:11.5%;
  height:auto;object-fit:contain;pointer-events:none;user-select:none;
  transform:translateX(-50%);transform-origin:50% 42%;
  filter:drop-shadow(0 0 1px #fff5a0) drop-shadow(0 0 8px rgb(255 214 33/82%))
         drop-shadow(0 8px 9px rgb(0 0 0/55%));
  animation:logoCommand__ns 4.8s ease-in-out infinite}
/* نسخة slim: الإطار نحيف فاتّسعت الفتحة ⇒ الصورة 73%، خلف الإطار كما المصدر */
.bfr--nassr .portrait{position:absolute;z-index:1;top:50.4%;left:50%;width:73%;aspect-ratio:1;
  overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 29%,rgb(255 216 47/27%),transparent 38%),
             linear-gradient(155deg,#245486,#06142d 72%);
  box-shadow:inset 0 0 46px rgb(0 0 0/76%),inset 0 0 0 2px rgb(255 225 78/19%),
             0 0 68px rgb(36 84 134/34%);
  transform:translate(-50%,-50%)}
.bfr--nassr .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bfr--nassr .portrait-shine{position:absolute;inset:-30%;
  background:linear-gradient(115deg,transparent 38%,rgb(255 244 190/20%) 48%,transparent 58%);
  transform:translateX(-65%) rotate(8deg);animation:portraitShine__ns 5.5s ease-in-out infinite}
.bfr--nassr .aura,.bfr--nassr .energy-ring,.bfr--nassr .vfx-halo,
.bfr--nassr .shockwave,.bfr--nassr .royal-rays{position:absolute;border-radius:50%;pointer-events:none}
.bfr--nassr .royal-rays{z-index:-3;inset:-2%;
  background:repeating-conic-gradient(from 0deg,rgb(255 215 40/0%) 0deg 7deg,
    rgb(255 215 40/22%) 8deg,rgb(71 138 207/0%) 13deg 22deg);
  opacity:.57;filter:blur(7px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
          mask-image:radial-gradient(circle,transparent 0 43%,#000 62%,transparent 76%);
  animation:rayTurn__ns 24s linear infinite}
.bfr--nassr .aura{z-index:-2;inset:8%;
  background:conic-gradient(from 0deg,transparent,#ffcf18,transparent 28%,#2f85d8 51%,transparent 74%,#ffdd35);
  opacity:.85;filter:blur(31px);animation:auraSpin__ns 8s linear infinite}
.bfr--nassr .vfx-halo{z-index:0;inset:3%;opacity:.82;
  background:conic-gradient(from 10deg,transparent 0 12%,#ffd51e 17%,#fffce4 19%,
    transparent 22% 44%,#2f82d3 49%,transparent 54% 75%,#fff1a1 79%,#ffbf00 82%,transparent 87%);
  filter:drop-shadow(0 0 12px #ffc800) drop-shadow(0 0 28px rgb(27 83 160/70%));
  -webkit-mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
          mask-image:radial-gradient(circle,transparent 0 83%,#000 85% 89%,transparent 91%);
  animation:haloOrbit__ns 7s linear infinite}
.bfr--nassr .halo-two{inset:7.5%;opacity:.58;filter:blur(1px) drop-shadow(0 0 11px #ffe46d);
  animation-direction:reverse;animation-duration:10.5s;
  -webkit-mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%);
          mask-image:radial-gradient(circle,transparent 0 81%,#000 83% 87%,transparent 90%)}
.bfr--nassr .energy-ring{z-index:2;inset:13.3%;border:2px solid rgb(255 237 132/78%);
  box-shadow:0 0 13px #fff4a5,0 0 30px #e9b500,inset 0 0 20px rgb(35 88 150/78%);
  opacity:.78;animation:energyPulse__ns 2.8s ease-in-out infinite}
.bfr--nassr .shockwave{z-index:1;inset:13.3%;border:2px solid #ffe55a;
  box-shadow:0 0 15px #eeb900,inset 0 0 11px #317abe;opacity:0;
  animation:shockwave__ns 4.8s ease-out infinite}
.bfr--nassr .shockwave-two{animation-delay:2.4s}
.bfr--nassr .arcwrap{position:absolute;inset:0;pointer-events:none}
.bfr--nassr .energy-arcs{position:absolute;z-index:3;inset:5.4%;width:89.2%;height:89.2%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px #ffd52b) drop-shadow(0 0 18px #245486);
  animation:arcSpin__ns 8.5s linear infinite}
.bfr--nassr .arc{fill:none;stroke:url(#nassrArc);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bfr--nassr .arc-one{stroke-width:1.1;stroke-dasharray:3 19 10 31 2 18;animation:arcDash__ns 2.7s linear infinite}
.bfr--nassr .arc-two{stroke-width:.6;stroke-dasharray:1 8 7 22 2 14;opacity:.72;
  animation:arcDash__ns 4.2s linear infinite reverse}
.bfr--nassr .lens-flare{position:absolute;z-index:9;display:block;pointer-events:none;
  mix-blend-mode:screen;width:5.5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#fff7bb 8%,#ffce19 20%,transparent 52%);
  filter:drop-shadow(0 0 9px #ffc400);animation:flareStrike__ns 5.2s ease-in-out infinite}
.bfr--nassr .lens-flare::before,.bfr--nassr .lens-flare::after{position:absolute;top:50%;left:50%;
  content:"";background:linear-gradient(90deg,transparent,#fff9d6,transparent);transform:translate(-50%,-50%)}
.bfr--nassr .lens-flare::before{width:250%;height:1px}
.bfr--nassr .lens-flare::after{width:1px;height:250%;
  background:linear-gradient(transparent,#fff9d6,transparent)}
.bfr--nassr .flare-top{top:2.8%;left:47.25%}
.bfr--nassr .flare-left{top:45%;left:7.2%;animation-delay:1.3s}
.bfr--nassr .flare-right{top:45%;right:7.2%;animation-delay:2.6s}
.bfr--nassr .flare-bottom{bottom:1.8%;left:47.25%;animation-delay:3.9s}
.bfr--nassr .particles{position:absolute;z-index:8;inset:3%;overflow:hidden;
  border-radius:50%;pointer-events:none}
.bfr--nassr .particle{position:absolute;bottom:13%;left:var(--x,50%);width:3px;aspect-ratio:1;
  border-radius:50%;background:#ffe760;box-shadow:0 0 10px 2px rgb(255 192 0/84%);opacity:0;
  animation:emberRise__ns var(--duration,4s) var(--delay,0s) ease-out infinite}
.bfr--nassr .particle.spark{width:5px!important;background:#fffdf0;
  box-shadow:0 0 9px 3px #ffdd35,0 0 21px 5px rgb(36 84 134/66%)}
@keyframes frameBreathe__ns{0%,100%{transform:scale(1);filter:drop-shadow(0 14px 19px rgb(0 0 0/39%)) drop-shadow(0 0 6px rgb(255 199 0/24%))}
  50%{transform:scale(1.005);filter:drop-shadow(0 16px 23px rgb(0 0 0/36%)) drop-shadow(0 0 14px rgb(255 211 27/42%))}}
@keyframes logoCommand__ns{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-4px) scale(1.04)}}
@keyframes auraSpin__ns{to{transform:rotate(1turn)}}
@keyframes haloOrbit__ns{to{transform:rotate(1turn)}}
@keyframes rayTurn__ns{to{transform:rotate(-1turn)}}
@keyframes shockwave__ns{0%,25%{opacity:0;transform:scale(.94)}30%{opacity:.9}68%,100%{opacity:0;transform:scale(1.34)}}
@keyframes arcSpin__ns{to{transform:rotate(1turn)}}
@keyframes arcDash__ns{to{stroke-dashoffset:-72}}
@keyframes flareStrike__ns{0%,72%,100%{opacity:.1;transform:scale(.45) rotate(0)}
  77%{opacity:1;transform:scale(1.45) rotate(20deg)}84%{opacity:.32;transform:scale(.7) rotate(32deg)}}
@keyframes energyPulse__ns{0%,100%{opacity:.39;transform:scale(.99)}50%{opacity:.94;transform:scale(1.02)}}
@keyframes portraitShine__ns{0%,25%{transform:translateX(-65%) rotate(8deg)}65%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes emberRise__ns{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.85}
  100%{opacity:0;transform:translate(var(--drift,0),-250px) scale(0)}}

/* ═══════════ gold — إطار قولد ═══════════
   منقول من تصميم المالك (lion-frame.html). أول تصميم بلا أي صورة — css وsvg
   خالصان. التعديلات الإلزامية:
   • كل الأبعاد ضُربت في ‎610/560‎ (لوحة المصدر 560px واللوحة عندنا 610px).
   • الشرر العشرون كان Math.random ⇒ ثُبّت ببذرة (البكج مُباع فيلزم يطلع نفسه).
   • حُذف: حقل نجوم بـposition:fixed (كان يغطّي الشاشة كلها لا البادج)، وميلان
     الماوس ثلاثي الأبعاد (لا مؤشّر في OBS)، ونداء رفع الصورة.
   • ‎-110vmin‎ في صعود الشرر → px على اللوحة الثابتة (vmin يتبع النافذة لا البادج).
   معزول تحت .bfr--gold وkeyframes بلاحقة __gd. */
.bfr--gold{
  --gold:#ffd873; --gold-deep:#7a5210;
  position:relative;width:610px;height:610px;isolation:isolate;
}
/* الحلقة الذهبية الخارجية: تدرّج مخروطي يدور، وقلبها معتم فتبان كحلقة */
.bfr--gold .glow-ring{position:absolute;z-index:1;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#7a5210,#ffd873,#b8860b,#fff3c4,
    #daa520,#8a6508,#ffd873,#7a5210);
  filter:drop-shadow(0 0 25px rgba(255,200,80,.45));
  animation:spin__gd 2s linear infinite}
.bfr--gold .glow-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;
  background:#0d0803}
.bfr--gold .ornwrap,.bfr--gold .boltwrap{position:absolute;inset:0;pointer-events:none}
.bfr--gold .ornament-ring{position:absolute;z-index:3;inset:20px;width:calc(100% - 40px);
  height:calc(100% - 40px);border-radius:50%;animation:spinRev__gd 7.5s linear infinite}
.bfr--gold .lightning{position:absolute;z-index:2;inset:-7px;width:calc(100% + 14px);
  height:calc(100% + 14px);pointer-events:none;animation:spin__gd 2.2s linear infinite}
.bfr--gold .lightning circle{fill:none;stroke:#ffe9a8;stroke-linecap:round}
.bfr--gold .lightning .arc1{stroke-width:2.5;stroke-dasharray:40 500;
  filter:drop-shadow(0 0 6px #ffd873);animation:flicker__gd .35s steps(2) infinite}
.bfr--gold .lightning .arc2{stroke-width:1.5;stroke-dasharray:18 280 30 240;opacity:.7;
  filter:drop-shadow(0 0 4px #fff3c4);animation:flicker__gd .22s steps(2) infinite reverse}
.bfr--gold .inner-ring{position:absolute;z-index:3;inset:65px;border-radius:50%;
  border:2px solid rgba(255,215,120,.7);
  box-shadow:0 0 15px rgba(255,200,80,.35),inset 0 0 25px rgba(255,200,80,.2);
  animation:pulse__gd .75s ease-in-out infinite}
/* الصورة: قرص داخل الحلقات، وفوقه توهّج ذهبي يدمج حوافّها بالإطار */
.bfr--gold .lion-wrap{position:absolute;z-index:2;inset:76px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#2b1c08 0%,#120a02 75%)}
.bfr--gold .lion-wrap::after{content:"";position:absolute;inset:0;border-radius:50%;
  pointer-events:none;box-shadow:inset 0 0 65px 22px rgba(10,6,2,.9),
    inset 0 0 131px 44px rgba(120,70,10,.25)}
.bfr--gold .lion-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;
  animation:breathe__gd 1.5s ease-in-out infinite}
.bfr--gold .sweep{position:absolute;z-index:3;inset:0;border-radius:50%;
  overflow:hidden;pointer-events:none}
.bfr--gold .sweep::before{content:"";position:absolute;top:-20%;left:-80%;
  width:45%;height:140%;transform:rotate(20deg);
  background:linear-gradient(to right,transparent,rgba(255,245,210,.35),transparent);
  animation:sweepMove__gd 2.5s ease-in-out infinite}
.bfr--gold .sparkles{position:absolute;z-index:4;inset:0;pointer-events:none;
  animation:spin__gd 3.5s linear infinite}
.bfr--gold .spark{position:absolute;width:8px;height:8px;border-radius:50%;
  background:#ffe9a8;box-shadow:0 0 10px 3px rgba(255,220,130,.8);
  animation:twinkle__gd .5s ease-in-out infinite}
.bfr--gold .spark:nth-child(1){top:2%;left:50%}
.bfr--gold .spark:nth-child(2){top:50%;left:1%;animation-delay:.25s}
.bfr--gold .spark:nth-child(3){top:96%;left:50%;animation-delay:.5s}
.bfr--gold .spark:nth-child(4){top:50%;left:97%;animation-delay:.75s}
.bfr--gold .rays{position:absolute;z-index:-1;inset:-7%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(255,200,80,.10) 8deg,transparent 16deg,
    transparent 45deg,rgba(255,200,80,.08) 53deg,transparent 61deg,
    transparent 90deg,rgba(255,200,80,.10) 98deg,transparent 106deg,
    transparent 135deg,rgba(255,200,80,.08) 143deg,transparent 151deg,
    transparent 180deg,rgba(255,200,80,.10) 188deg,transparent 196deg,
    transparent 225deg,rgba(255,200,80,.08) 233deg,transparent 241deg,
    transparent 270deg,rgba(255,200,80,.10) 278deg,transparent 286deg,
    transparent 315deg,rgba(255,200,80,.08) 323deg,transparent 331deg);
  animation:spin__gd 12s linear infinite}
.bfr--gold .wave{position:absolute;z-index:0;inset:0;border-radius:50%;
  border:2px solid rgba(255,210,110,.8);pointer-events:none;
  animation:shockwave__gd 3s ease-out infinite}
.bfr--gold .wave:nth-child(3){animation-delay:1s}
.bfr--gold .wave:nth-child(4){animation-delay:2s}
.bfr--gold .comet-orbit{position:absolute;z-index:4;inset:-30px;pointer-events:none;
  animation:spin__gd 3s linear infinite}
.bfr--gold .comet{position:absolute;top:50%;left:-7px;width:13px;height:13px;
  border-radius:50%;background:#fff3c4;box-shadow:0 0 14px 5px rgba(255,220,130,.9)}
.bfr--gold .comet::before{content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);width:3px;height:76px;border-radius:3px;
  background:linear-gradient(to bottom,rgba(255,220,130,.85),transparent)}
.bfr--gold .comet-orbit.second{inset:-15px;animation-duration:5s;animation-direction:reverse}
.bfr--gold .comet-orbit.second .comet{width:9px;height:9px;background:#ffd873}
.bfr--gold .comet-orbit.second .comet::before{top:auto;bottom:100%;width:2px;height:49px;
  background:linear-gradient(to top,rgba(255,220,130,.85),transparent)}
.bfr--gold .embers{position:absolute;z-index:-1;inset:-15% -10%;overflow:hidden;
  pointer-events:none}
.bfr--gold .ember{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;
  background:#ffcf70;box-shadow:0 0 8px 2px rgba(255,190,90,.7);opacity:0;
  animation:rise__gd linear infinite}
@keyframes spin__gd{to{transform:rotate(360deg)}}
@keyframes spinRev__gd{to{transform:rotate(-360deg)}}
@keyframes pulse__gd{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes breathe__gd{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes twinkle__gd{0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@keyframes flicker__gd{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes shockwave__gd{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}}
@keyframes sweepMove__gd{0%,35%{left:-80%}65%,100%{left:130%}}
@keyframes rise__gd{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:.9}
  70%{opacity:.7}100%{transform:translate(var(--drift,0),-800px) scale(.2);opacity:0}}

/* ═══════════ crown — إطار التاج الملكي ═══════════
   منقول من تصميم المالك (crown-badge-demo). لوحته 610px أصلًا فلا تحويل مقاسات.
   التعديلات الإلزامية:
   • حركات الدخول كانت خلف فئة ‎.is-entering‎ يضيفها زرّ في صفحة العرض — هنا
     تُطبَّق مباشرة: البادج يُبنى من جديد مع كل إجراء، فتُعرض «الدخول الملكي»
     مرّة واحدة ثم تستقرّ الطبقات على تنفّسها الدائم (‎both‎ + تأخير للحركة الدائمة).
   • الذرّات الثلاثون كانت Math.random ⇒ ثُبّتت ببذرة (البكج مُباع).
   • حُذف: ميلان الماوس ثلاثي الأبعاد وتوهّج المؤشّر و‎:hover‎ (لا مؤشّر في OBS).
   معزول تحت .bfr--crown وkeyframes بلاحقة __cr2 (‎__cr‎ محجوزة للكريستال). */
@property --crown-reveal{syntax:"<angle>";initial-value:0deg;inherits:false}
.bfr--crown{
  --gold:#f3cc68; --royal-blue:#1e55b9;
  position:relative;width:610px;height:610px;isolation:isolate;
}
.bfr--crown .portrait{position:absolute;z-index:1;top:51.4%;left:50%;width:72.5%;aspect-ratio:1;
  overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 28%,rgb(239 194 89/27%),transparent 38%),
             linear-gradient(155deg,#1a2742,#080706 72%);
  box-shadow:inset 0 0 48px rgb(0 0 0/78%),inset 0 0 0 2px rgb(255 226 147/17%),
             0 0 64px rgb(212 151 28/18%);
  transform:translate(-50%,-50%)}
.bfr--crown .portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bfr--crown .portrait-shine{position:absolute;inset:-28%;
  background:linear-gradient(115deg,transparent 39%,rgb(255 237 183/18%) 49%,transparent 59%);
  transform:translateX(-65%) rotate(8deg);animation:portraitShine__cr2 6s ease-in-out infinite}
.bfr--crown .badge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;filter:drop-shadow(0 15px 20px rgb(0 0 0/42%))}
/* الحلقة تُرسم دائريًا بقناع مخروطي يتّسع، ثم تتنفّس */
.bfr--crown .ring-layer{z-index:4;transform-origin:50% 51%;--crown-reveal:0deg;
  -webkit-mask-image:conic-gradient(from 180deg,#000 0deg var(--crown-reveal),transparent var(--crown-reveal) 360deg);
          mask-image:conic-gradient(from 180deg,#000 0deg var(--crown-reveal),transparent var(--crown-reveal) 360deg);
  animation:ringReveal__cr2 1.35s .08s cubic-bezier(.22,1,.36,1) both,
            ringBreathe__cr2 5s 1.45s ease-in-out infinite}
.bfr--crown .bottom-layer{z-index:6;transform-origin:50% 89%;
  animation:bottomRise__cr2 1s .52s cubic-bezier(.16,1,.3,1) both,
            bottomBreathe__cr2 4.8s 1.5s ease-in-out infinite}
.bfr--crown .crown-layer{z-index:8;transform-origin:50% 22%;
  animation:crownDrop__cr2 1.15s .35s cubic-bezier(.16,1,.3,1) both,
            crownFloat__cr2 4.7s 1.5s ease-in-out infinite}
.bfr--crown .royal-rays,.bfr--crown .aura,.bfr--crown .shockwave{position:absolute;
  border-radius:50%;pointer-events:none}
.bfr--crown .royal-rays{z-index:-4;inset:-2%;
  background:repeating-conic-gradient(from 0deg,transparent 0deg 8deg,
    rgb(236 190 79/16%) 9deg,transparent 14deg 23deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 45%,#000 59%,transparent 77%);
          mask-image:radial-gradient(circle,transparent 0 45%,#000 59%,transparent 77%);
  filter:blur(7px);opacity:.52;animation:raysTurn__cr2 28s linear infinite}
.bfr--crown .aura{z-index:-3;inset:6%;filter:blur(30px);opacity:.62}
.bfr--crown .aura-gold{
  background:conic-gradient(from 0deg,transparent,#d79821,transparent 30%,#ffe18b 52%,transparent 76%,#bd7916);
  animation:auraSpin__cr2 10s linear infinite}
.bfr--crown .aura-blue{inset:12%;
  background:radial-gradient(circle at 50% 16%,rgb(30 88 192/54%),transparent 30%);
  filter:blur(22px);animation:blueAura__cr2 3.1s ease-in-out infinite}
.bfr--crown .shockwave{z-index:2;inset:14%;border:2px solid #f3cc68;
  box-shadow:0 0 15px #ce8a18,inset 0 0 11px #275bb6;opacity:0;
  animation:shockRelease__cr2 5.4s ease-out infinite}
.bfr--crown .shockwave-one{animation:introShock__cr2 1.25s 1.08s ease-out both,
  shockRelease__cr2 5.4s 2.5s ease-out infinite}
.bfr--crown .shockwave-two{animation-delay:2.7s}
.bfr--crown .arcwrap{position:absolute;inset:0;pointer-events:none}
.bfr--crown .energy-arcs{position:absolute;z-index:7;inset:4.8%;width:90.4%;height:90.4%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff8d9) drop-shadow(0 0 7px #e8b43f) drop-shadow(0 0 16px #234f9f);
  animation:arcSpin__cr2 10s linear infinite}
.bfr--crown .arc{fill:none;stroke:url(#royalCrownArc);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bfr--crown .arc-one{stroke-width:.78;stroke-dasharray:3 20 9 33 2 18;animation:arcDash__cr2 3.3s linear infinite}
.bfr--crown .arc-two{stroke-width:.42;stroke-dasharray:1 10 7 24 2 15;opacity:.62;
  animation:arcDash__cr2 5s linear infinite reverse}
.bfr--crown .metal-sweep{position:absolute;z-index:9;inset:0;overflow:hidden;
  clip-path:polygon(49% 50%,51% -10%,61% -8%,51% 50%);pointer-events:none;
  mix-blend-mode:screen;opacity:.7;animation:sweepOrbit__cr2 5.8s cubic-bezier(.45,0,.55,1) infinite}
.bfr--crown .metal-sweep img{width:100%;height:100%;object-fit:contain;
  filter:brightness(1.75) saturate(1.05) drop-shadow(0 0 10px #f0c657);
  animation:sweepCounter__cr2 5.8s cubic-bezier(.45,0,.55,1) infinite}
.bfr--crown .gem-glow,.bfr--crown .lens-flare{position:absolute;z-index:11;display:block;
  pointer-events:none;mix-blend-mode:screen}
.bfr--crown .gem-glow{width:4.2%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 4%,#8fc2ff 9%,#1d55bd 28%,transparent 64%);
  filter:drop-shadow(0 0 8px #2d6bd8) drop-shadow(0 0 18px rgb(30 77 176/68%));
  animation:gemPulse__cr2 2.65s ease-in-out infinite}
.bfr--crown .gem-crown{top:5.7%;left:47.9%}
.bfr--crown .gem-left{top:52%;left:10.6%;width:2.5%;animation-delay:.65s}
.bfr--crown .gem-right{top:52%;right:10.6%;width:2.5%;animation-delay:1.3s}
.bfr--crown .gem-bottom{bottom:2.8%;left:48.6%;width:2.9%;animation-delay:1.95s}
.bfr--crown .lens-flare{width:5%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#fff0a7 9%,#d8941d 21%,transparent 54%);
  filter:drop-shadow(0 0 8px #d9941c);opacity:0;
  animation:flareStrike__cr2 5.8s ease-in-out infinite}
.bfr--crown .lens-flare::before,.bfr--crown .lens-flare::after{position:absolute;top:50%;left:50%;
  content:"";transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,#fff8dc,transparent)}
.bfr--crown .lens-flare::before{width:260%;height:1px}
.bfr--crown .lens-flare::after{width:1px;height:260%;
  background:linear-gradient(transparent,#fff8dc,transparent)}
.bfr--crown .flare-crown{top:3.2%;left:47.5%}
.bfr--crown .flare-left{top:51.2%;left:8.4%;animation-delay:1.45s}
.bfr--crown .flare-right{top:51.2%;right:8.4%;animation-delay:2.9s}
.bfr--crown .flare-bottom{bottom:1.2%;left:47.5%;animation-delay:4.35s}
.bfr--crown .particles{position:absolute;z-index:10;inset:1%;overflow:hidden;
  border-radius:50%;pointer-events:none}
.bfr--crown .particle{position:absolute;bottom:14%;left:var(--x,50%);width:3px;aspect-ratio:1;
  border-radius:50%;background:#f4cd65;box-shadow:0 0 9px 2px rgb(218 146 22/78%);opacity:0;
  animation:particleRise__cr2 var(--duration,4s) var(--delay,0s) ease-out infinite}
.bfr--crown .particle.blue{background:#8ebaff;
  box-shadow:0 0 8px 3px #2b66cb,0 0 18px 4px rgb(26 70 157/45%)}
@keyframes ringReveal__cr2{0%{--crown-reveal:0deg;opacity:0;filter:brightness(2) blur(2px)}
  12%{opacity:1}
  100%{--crown-reveal:360deg;opacity:1;filter:drop-shadow(0 15px 20px rgb(0 0 0/42%))}}
@keyframes crownDrop__cr2{0%{opacity:0;transform:translateY(-22%) scale(.74) rotate(-3deg);filter:blur(9px) brightness(1.8)}
  58%{opacity:1;transform:translateY(1.2%) scale(1.045) rotate(.6deg);filter:blur(0) brightness(1.2)}
  78%{transform:translateY(-.4%) scale(.985) rotate(-.2deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:brightness(1)}}
@keyframes bottomRise__cr2{0%{opacity:0;transform:translateY(12%) scale(.82);filter:blur(7px)}
  68%{opacity:1;transform:translateY(-.7%) scale(1.03);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes crownFloat__cr2{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 15px 20px rgb(0 0 0/42%)) drop-shadow(0 0 4px rgb(231 181 65/24%))}
  50%{transform:translateY(-.7%) scale(1.005);filter:drop-shadow(0 16px 21px rgb(0 0 0/39%)) drop-shadow(0 0 12px rgb(237 192 81/45%))}}
@keyframes ringBreathe__cr2{0%,100%{transform:scale(1);filter:drop-shadow(0 15px 20px rgb(0 0 0/42%))}
  50%{transform:scale(1.004);filter:drop-shadow(0 16px 24px rgb(0 0 0/38%)) drop-shadow(0 0 11px rgb(218 164 48/32%))}}
@keyframes bottomBreathe__cr2{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(.35%) scale(1.006)}}
@keyframes introShock__cr2{0%{opacity:0;transform:scale(.77)}28%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes shockRelease__cr2{0%,72%,100%{opacity:0;transform:scale(.97)}77%{opacity:.75}96%{opacity:0;transform:scale(1.25)}}
@keyframes gemPulse__cr2{0%,100%{opacity:.38;transform:scale(.78)}50%{opacity:1;transform:scale(1.2)}}
@keyframes flareStrike__cr2{0%,72%,100%{opacity:.05;transform:scale(.4) rotate(0)}
  77%{opacity:1;transform:scale(1.45) rotate(18deg)}84%{opacity:.25;transform:scale(.72) rotate(31deg)}}
@keyframes portraitShine__cr2{0%,25%{transform:translateX(-65%) rotate(8deg)}65%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes auraSpin__cr2{to{transform:rotate(1turn)}}
@keyframes raysTurn__cr2{to{transform:rotate(-1turn)}}
@keyframes arcSpin__cr2{to{transform:rotate(1turn)}}
@keyframes arcDash__cr2{to{stroke-dashoffset:-72}}
@keyframes sweepOrbit__cr2{to{transform:rotate(1turn)}}
@keyframes sweepCounter__cr2{to{transform:rotate(-1turn)}}
@keyframes blueAura__cr2{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.72;transform:scale(1.04)}}
@keyframes particleRise__cr2{0%{opacity:0;transform:translate(0,0) scale(.4)}16%{opacity:.82}
  100%{opacity:0;transform:translate(var(--drift,0),-270px) scale(0)}}

/* ===== الوضع الخفيف (.bfr--lite) لشبكات المعاينة =====
   البنّاء يُسقط الطبقات الثقيلة من الـDOM؛ وهنا نُطفئ ما تبقّى من حركة ونُخفّف
   المرشّحات: عشر بطاقات فيها blur(30px) تدور بلا توقّف تُسقط عارض الجوال.
   تبقى هوية التصميم (طبقات الإطار والصورة) وتنفّسها الخفيف فقط. */
/* نُجمّد الحركة ولا نُلغيها: بعض التصاميم تبدأ مخفيّة وتُكشف بحركتها (أوجه
   الكريستال تبدأ opacity:0، وحلقة التاج مقنّعة حتى تكتمل زاوية الكشف) — فإلغاء
   الحركة يمحوها. التأخير السالب يقفز بها إلى حالتها المستقرّة، والإيقاف يمنع أي
   إعادة رسم بعد ذلك: صفر حركة جارية مع بقاء الشكل كاملًا. */
.bfr--lite *,.bfr--lite *::before,.bfr--lite *::after{
  animation-delay:-8s!important;animation-play-state:paused!important}
.bfr--lite .badge-layer{filter:drop-shadow(0 8px 12px rgb(0 0 0/38%))!important}
.bfr--lite .glow-ring,.bfr--lite .ornament-ring,.bfr--lite .inner-ring{filter:none!important}
.bfr--lite .portrait-shine,.bfr--lite .sweep,.bfr--lite .metal-sweep{display:none!important}

@media (prefers-reduced-motion: reduce){
  .bfr *,.bfr *::before,.bfr *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}