/* ════════════════════════════════════════════════════════════════
   جوڵەکان — motion.css   (لەگەڵ assets/js/motion.js)
   هەموو جوڵەکان تەنها transform/opacity ـن. هەموویان لە ناو
   @media (prefers-reduced-motion: no-preference) و :root:not([data-motion="off"]) دان،
   بۆیە کاتێک جوڵە کوژاوەتەوە هەموو شتێک یەکسەر و بێ جوڵە دەردەکەوێت.
   ڕەنگەکان تەنها لە themes.css ـەوە دێن.
   ════════════════════════════════════════════════════════════════ */

:root {
  --sb-ease: cubic-bezier(.22, .7, .28, 1);
  --sb-ease-out: cubic-bezier(.2, .8, .2, 1);
  --sb-dir: 1;            /* ئاڕاستەی «پێشەوە» بۆ جوڵەی ئاسۆیی */
}
html[dir="rtl"] { --sb-dir: -1; }

/* ───── keyframes (تەنها «from» = لە دۆخی ئاسایی توخمەکەوە دەگەڕێتەوە) ───── */
@keyframes sb-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes sb-rise-sm { from { opacity: 0; translate: 0 14px; } }
@keyframes sb-word { from { opacity: 0; translate: 0 .45em; } }
@keyframes sb-line { from { opacity: 0; translate: 0 102%; } }
@keyframes sb-fade { from { opacity: 0; } }
@keyframes sb-view-in { from { opacity: 0; translate: 0 12px; } }
@keyframes sb-vt-out { to { opacity: 0; translate: 0 -10px; } }
@keyframes sb-vt-in { from { opacity: 0; translate: 0 16px; } }
@keyframes sb-ripple { from { scale: 0; opacity: .24; } 55% { opacity: .16; } to { scale: 1; opacity: 0; } }
@keyframes sb-pulse { 0% { scale: 1; } 30% { scale: 1.24; } 60% { scale: .95; } 100% { scale: 1; } }
@keyframes sb-shine { 0% { opacity: 0; translate: 0 0; } 18% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--sb-dir) * 430%) 0; } }
@keyframes sb-float { 50% { transform: translateY(-8px); } }
@keyframes sb-spin { to { rotate: 1turn; } }
@keyframes sb-breathe { 0%, 100% { opacity: .5; scale: .94; } 50% { opacity: 1; scale: 1.05; } }

/* ═════════════ دەرکەوتن (reveal / words / lines / stagger / count) ═════════════
   motion.js ئەم کلاسانە دادەنێت: rv-wait (چاوەڕێ) → is-in (دەجوڵێت) → rv-done (تەواو).
   تەنها توخمی rv-wait دەشاردرێتەوە، بۆیە بەبێ JavaScript هەموو شتێک دیارە. */

.reveal .word, .words .word { display: inline-block; }
.lines .tline { display: block; overflow: hidden; padding-block: .2em; margin-block: -.2em; padding-inline: .12em; margin-inline: -.12em; }
.lines .tline-in { display: block; }

@media (prefers-reduced-motion: no-preference) {
  :root.js-reveal:not([data-motion="off"]) .reveal.rv-wait:not(.is-split),
  :root.js-reveal:not([data-motion="off"]) [data-count].rv-wait,
  :root.js-reveal:not([data-motion="off"]) [data-stagger].rv-wait > :not(.reveal),
  :root.js-reveal:not([data-motion="off"]) .rv-wait .word,
  :root.js-reveal:not([data-motion="off"]) .rv-wait .tline-in { opacity: 0; }

  :root.js-reveal:not([data-motion="off"]) .reveal.is-in:not(.rv-done):not(.is-split) {
    animation: sb-rise .85s var(--sb-ease) var(--rd, 0ms) backwards;
  }
  :root.js-reveal:not([data-motion="off"]) [data-count].is-in:not(.rv-done):not(.reveal) {
    animation: sb-fade .6s ease-out var(--rd, 0ms) backwards;
  }
  :root.js-reveal:not([data-motion="off"]) [data-stagger].is-in:not(.rv-done) > :not(.reveal) {
    animation: sb-rise-sm .62s var(--sb-ease) backwards;
    animation-delay: calc(var(--rd, 0ms) + var(--si, 0) * 55ms);
  }
  :root.js-reveal:not([data-motion="off"]) .is-in:not(.rv-done) .word {
    animation: sb-word .62s var(--sb-ease) backwards;
    animation-delay: calc(var(--rd, 0ms) + var(--wd, 0ms));
  }
  :root.js-reveal:not([data-motion="off"]) .is-in:not(.rv-done) .tline-in {
    animation: sb-line .8s var(--sb-ease) backwards;
    animation-delay: calc(var(--rd, 0ms) + var(--ld, 0ms));
  }

  /* ───── هاتنەناوەوەی لاپەڕە (enter / transition بێ View Transitions) ─────
     لەسەر خودی #view تەنها opacity، چونکە transform شوێنی توخمی fixed (وەک .fab) تێکدەدات */
  :root:not([data-motion="off"]) .view-enter { animation: sb-fade .42s var(--sb-ease-out) backwards; }
  :root:not([data-motion="off"]) [data-enter].view-enter { animation: sb-view-in .5s var(--sb-ease-out) backwards; }
}

/* ───── گۆڕینی لاپەڕە بە View Transitions (html[data-vt="route"]) ───── */
html[data-vt="route"] #view { view-transition-name: sb-view; }
html[data-vt="route"] .topbar { view-transition-name: sb-top; }
html[data-vt="route"] #toasts { view-transition-name: sb-toasts; }
html[data-vt="route"]::view-transition-old(root),
html[data-vt="route"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="route"]::view-transition-group(sb-top),
html[data-vt="route"]::view-transition-group(sb-toasts),
html[data-vt="route"]::view-transition-old(sb-top),
html[data-vt="route"]::view-transition-new(sb-top),
html[data-vt="route"]::view-transition-old(sb-toasts),
html[data-vt="route"]::view-transition-new(sb-toasts) { animation: none; }
html[data-vt="route"]::view-transition-old(sb-top),
html[data-vt="route"]::view-transition-old(sb-toasts) { opacity: 0; }
html[data-vt="route"]::view-transition-group(sb-view) { animation-duration: .42s; animation-timing-function: var(--sb-ease-out); }
html[data-vt="route"]::view-transition-image-pair(sb-view) { isolation: auto; }
html[data-vt="route"]::view-transition-old(sb-view) { animation: sb-vt-out .2s ease-in both; mix-blend-mode: normal; }
html[data-vt="route"]::view-transition-new(sb-view) { animation: sb-vt-in .46s var(--sb-ease-out) .06s both; mix-blend-mode: normal; }
/* ئەگەر لاپەڕەکە سکڕۆڵ کرابوو: لاپەڕە کۆنەکە یەکسەر لادەچێت (بێ خلیسکان) */
html[data-vt="route"][data-vt-jump]::view-transition-group(sb-view) { animation: none; }
html[data-vt="route"][data-vt-jump]::view-transition-old(sb-view) { animation: none; opacity: 0; }

/* ═════════════ تابەکان: هێڵی جوڵاو ═════════════ */
.tab-ink {
  position: absolute;
  /* left ـی فیزیکی بە ئەنقەست: motion.js شوێنەکە بە translateX ـی فیزیکی دادەنێت (RTL و LTR) */
  left: 0; bottom: 0;
  width: 100px; height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--c, var(--primary));
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 1;
}
.tab-ink.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .tab-ink { transition: transform .48s var(--sb-ease-out), opacity .2s; }
  :root:not([data-motion="off"]) .tab-ink.no-tr { transition: none; }
  :root:not([data-motion="off"]) .tab-ink.is-new { animation: sb-fade .45s ease-out; }
}

/* ═════════════ ڕیپڵ (کلیک) ═════════════ */
:where(.btn, .tab, .icon-btn, .nav-link, .chip, .pill > span) { position: relative; }
.ripple-host {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
}
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0; scale: 0;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .ripple { animation: sb-ripple .62s var(--sb-ease-out) forwards; }
}

/* ═════════════ ترپە (pulse) ═════════════ */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .sb-pulse { animation: sb-pulse .6s var(--sb-ease-out); }
}

/* ═════════════ درەوشانەوەی کارت (.shine) ═════════════ */
:where(.shine) { position: relative; }
.shine-fx {
  position: absolute; inset: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
  --shine-c: color-mix(in srgb, var(--c, var(--primary)) 16%, rgb(255 255 255 / .55));
}
:root[data-mode="dark"] .shine-fx { --shine-c: rgb(255 255 255 / .1); }
.shine-fx::before {
  content: '';
  position: absolute; top: -25%; bottom: -25%; inset-inline-start: -45%; width: 36%;
  background: linear-gradient(90deg, transparent, var(--shine-c), transparent);
  transform: skewX(calc(var(--sb-dir) * -16deg));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    :root:not([data-motion="off"]) .shine:hover > .shine-fx::before { animation: sb-shine 1.05s var(--sb-ease-out); }
  }
  :root:not([data-motion="off"]) .shine:focus-visible > .shine-fx::before { animation: sb-shine 1.05s var(--sb-ease-out); }
}

/* ═════════════ بەرزبوونەوەی هێمن (.float) ═════════════ */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .float { animation: sb-float 6.5s ease-in-out infinite; }
}

/* ═════════════ هاڵەی لۆگۆ (.logo-halo) ═════════════
   ئەڵقەکە .halo-ring ـە (motion.js لە scan ـدا زیادی دەکات)؛ بەبێ JavaScript ::before
   هەمان ئەڵقە بە نەجووڵاوی پیشان دەدات. ::after درەوشانەوەی هەناسەدانە. */
.logo-halo { position: relative; isolation: isolate; }
.logo-halo::before,
.logo-halo > .halo-ring {
  content: '';
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0turn,
      color-mix(in srgb, var(--hero-accent, var(--accent)) 90%, transparent) .11turn,
      transparent .28turn,
      transparent .5turn,
      color-mix(in srgb, var(--hero-ink, #fff) 70%, transparent) .6turn,
      transparent .76turn),
    color-mix(in srgb, var(--hero-ink, #fff) 14%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.logo-halo.has-ring::before { content: none; }
.logo-halo::after {
  content: '';
  position: absolute; inset: -18%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-accent, var(--accent)) 42%, transparent), transparent 72%);
  opacity: .75;
}
@media (max-width: 760px) { .logo-halo::before, .logo-halo > .halo-ring { inset: -7px; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .logo-halo > .halo-ring { animation: sb-spin 16s linear infinite; }
  :root:not([data-motion="off"]) .logo-halo::after { animation: sb-breathe 5.5s ease-in-out infinite; }
}

/* ═════════════ جوڵەی ئایکۆنی بەشەکان ([data-fx]) ═════════════
   ئایکۆنەکە (svg) لە ناو [data-fx] دەجوڵێت کاتێک .fx-host (خۆی یان باوانی) hover/focus دەکرێت؛
   لە کاتی ئاساییدا جوڵەیەکی زۆر کەمی بەردەوامی هەیە.
   orbit = سەنتەرەکان، rise = پلاندانان، lift = پاڵەوانان، bounce = یانەکان،
   shimmer = ئۆڵۆمپی، roll = پاراڵۆمپی */
:where([data-fx]) { position: relative; }
[data-fx] > svg { transform-origin: 50% 55%; }
[data-fx]::after { content: ''; position: absolute; pointer-events: none; opacity: 0; }

/* orbit — مانگێکی بچووک بە دەوری ئایکۆنەکەدا دەسوڕێتەوە */
[data-fx="orbit"]::after {
  inset: -9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 3.5px, currentColor 0 3px, transparent 3.6px);
}
/* rise — پریشکی ورد بەرەو سەرەوە دەفڕن */
[data-fx="rise"]::after {
  width: 5px; height: 5px; left: calc(50% - 2.5px); bottom: 18%; border-radius: 50%;
  background: currentColor;
  box-shadow: -13px 7px 0 -1px currentColor, 12px 11px 0 -1.5px currentColor;
}
/* lift — درەوشانەوەیەکی چوار‌لا لە گۆشەی جامەکە */
[data-fx="lift"]::after {
  width: 12px; height: 12px; top: 6%; inset-inline-end: 8%;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
/* bounce — سێبەری تۆپەکە لە ژێرەوە */
[data-fx="bounce"] > svg { transform-origin: 50% 100%; }
[data-fx="bounce"]::after {
  width: 46%; height: 5px; left: 27%; bottom: 7%; border-radius: 50%;
  background: currentColor;
}
/* shimmer — تیشکێکی ڕووناک بەسەر ئایکۆنەکەدا تێدەپەڕێت */
[data-fx="shimmer"] { overflow: hidden; --fx-sheen: rgb(255 255 255 / .62); }
:root[data-mode="dark"] [data-fx="shimmer"] { --fx-sheen: rgb(255 255 255 / .26); }
[data-fx="shimmer"]::after {
  top: -30%; bottom: -30%; width: 42%; inset-inline-start: -55%;
  background: linear-gradient(90deg, transparent, var(--fx-sheen), transparent);
  transform: skewX(calc(var(--sb-dir) * -18deg));
}
/* roll — هێڵی خێرایی لە دواوەی کورسییەکە */
[data-fx="roll"] > svg { transform-origin: 50% 70%; }
[data-fx="roll"]::after {
  width: 11px; height: 2px; top: 46%; inset-inline-start: 6%; border-radius: 2px;
  background: currentColor;
  box-shadow: 3px 6px 0 currentColor;
}

@keyframes sb-fx-orbit {
  0% { transform: rotate(0deg) translateX(0) rotate(0deg); }
  12% { transform: rotate(40deg) translateX(3px) rotate(-40deg); }
  88% { transform: rotate(320deg) translateX(3px) rotate(-320deg); }
  100% { transform: rotate(360deg) translateX(0) rotate(-360deg); }
}
@keyframes sb-fx-orbit-dot { 0% { opacity: 0; rotate: 0turn; } 14%, 84% { opacity: .9; } 100% { opacity: 0; rotate: 1turn; } }
@keyframes sb-fx-orbit-idle {
  0% { transform: rotate(0deg) translateX(1.4px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(1.4px) rotate(-360deg); }
}
@keyframes sb-fx-rise {
  0%, 100% { transform: none; }
  25% { transform: translateY(4px) scale(1.05, .93); }
  55% { transform: translateY(-10px) scale(.96, 1.06); }
  78% { transform: translateY(-4px) scale(1.01, .99); }
}
@keyframes sb-fx-rise-dots { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: .85; } 100% { opacity: 0; translate: 0 -30px; } }
@keyframes sb-fx-rise-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes sb-fx-lift {
  0%, 100% { transform: none; }
  22% { transform: translateY(-8px) scale(1.1) rotate(-8deg); }
  44% { transform: translateY(-9px) scale(1.1) rotate(7deg); }
  64% { transform: translateY(-7px) scale(1.08) rotate(-3deg); }
  84% { transform: translateY(-2px) scale(1.02) rotate(0deg); }
}
@keyframes sb-fx-lift-glint { 0%, 25% { opacity: 0; scale: .2; rotate: 0deg; } 45% { opacity: 1; scale: 1.15; } 75% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: .3; rotate: 90deg; } }
@keyframes sb-fx-lift-idle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); } }
@keyframes sb-fx-bounce {
  0%, 100% { transform: none; }
  14% { transform: translateY(1px) scale(1.08, .9); }
  36% { transform: translateY(-13px) scale(.96, 1.05); }
  54% { transform: translateY(0) scale(1.07, .92); }
  68% { transform: translateY(-5px) scale(.99, 1.02); }
  82% { transform: translateY(0) scale(1.03, .97); }
}
@keyframes sb-fx-bounce-shadow {
  0%, 100% { opacity: .18; scale: 1 1; }
  36% { opacity: .07; scale: .55 1; }
  54% { opacity: .22; scale: 1.08 1; }
  68% { opacity: .12; scale: .8 1; }
}
@keyframes sb-fx-bounce-idle { 0%, 84%, 100% { transform: none; } 90% { transform: translateY(-3px); } 95% { transform: translateY(0) scale(1.02, .98); } }
@keyframes sb-fx-shimmer { 0%, 100% { transform: none; } 40% { transform: scale(1.07); } 70% { transform: scale(.99); } }
@keyframes sb-fx-shimmer-sweep { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--sb-dir) * 420%) 0; } }
@keyframes sb-fx-shimmer-idle { 0%, 78% { opacity: 0; translate: 0 0; } 82% { opacity: .55; } 100% { opacity: 0; translate: calc(var(--sb-dir) * 420%) 0; } }
@keyframes sb-fx-roll {
  0%, 100% { transform: none; }
  28% { transform: translateX(calc(var(--sb-dir) * 7px)) rotate(calc(var(--sb-dir) * 14deg)); }
  58% { transform: translateX(calc(var(--sb-dir) * -4px)) rotate(calc(var(--sb-dir) * -8deg)); }
  80% { transform: translateX(calc(var(--sb-dir) * 2px)) rotate(calc(var(--sb-dir) * 3deg)); }
}
@keyframes sb-fx-roll-lines { 0% { opacity: 0; translate: 0 0; } 25% { opacity: .7; } 100% { opacity: 0; translate: calc(var(--sb-dir) * -10px) 0; } }
@keyframes sb-fx-roll-idle {
  0%, 100% { transform: none; }
  30% { transform: translateX(calc(var(--sb-dir) * 1px)) rotate(calc(var(--sb-dir) * 3deg)); }
  65% { transform: translateX(calc(var(--sb-dir) * -1px)) rotate(calc(var(--sb-dir) * -2deg)); }
}

[data-fx="orbit"] { --fx-idle: sb-fx-orbit-idle 10s linear infinite; --fx-play: sb-fx-orbit 1.5s var(--sb-ease); --fx-deco: sb-fx-orbit-dot 1.5s var(--sb-ease); }
[data-fx="rise"] { --fx-idle: sb-fx-rise-idle 6s ease-in-out infinite; --fx-play: sb-fx-rise 1s var(--sb-ease); --fx-deco: sb-fx-rise-dots 1s ease-out .15s; }
[data-fx="lift"] { --fx-idle: sb-fx-lift-idle 8s ease-in-out infinite; --fx-play: sb-fx-lift 1.2s var(--sb-ease); --fx-deco: sb-fx-lift-glint 1.2s ease-out; }
[data-fx="bounce"] { --fx-idle: sb-fx-bounce-idle 5.5s ease-in-out infinite; --fx-play: sb-fx-bounce 1.15s ease-out; --fx-deco: sb-fx-bounce-shadow 1.15s ease-out; }
[data-fx="shimmer"] { --fx-idle: none; --fx-deco-idle: sb-fx-shimmer-idle 7s ease-in-out infinite; --fx-play: sb-fx-shimmer .9s var(--sb-ease); --fx-deco: sb-fx-shimmer-sweep .95s var(--sb-ease-out); }
[data-fx="roll"] { --fx-idle: sb-fx-roll-idle 9s ease-in-out infinite; --fx-play: sb-fx-roll 1.15s var(--sb-ease); --fx-deco: sb-fx-roll-lines .9s ease-out .1s; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) [data-fx] > svg { animation: var(--fx-idle, none); }
  :root:not([data-motion="off"]) [data-fx]::after { animation: var(--fx-deco-idle, none); }
  :root:not([data-motion="off"]) :is(.fx-host:hover, .fx-host:focus-visible, .fx-host:active) [data-fx] > svg,
  :root:not([data-motion="off"]) [data-fx]:is(.fx-host:hover, .fx-host:focus-visible, .fx-host:active) > svg { animation: var(--fx-play); }
  :root:not([data-motion="off"]) :is(.fx-host:hover, .fx-host:focus-visible, .fx-host:active) [data-fx]::after,
  :root:not([data-motion="off"]) [data-fx]:is(.fx-host:hover, .fx-host:focus-visible, .fx-host:active)::after { animation: var(--fx-deco); }
}

/* ═════════════ باکگراوندی جوڵاو (#bg-fx) ═════════════
   motion.js دروستی دەکات (یەکەم منداڵی body). کاتێک کوژاوەتەوە، --bg-static ـی body دیارە. */
#bg-fx {
  position: fixed; inset: 0 0 auto 0;
  height: 100vh; height: 100lvh;      /* lvh: شریتی ناونیشانی مۆبایل قەبارەکەی ناگۆڕێت */
  z-index: -1; pointer-events: none; overflow: hidden;
  contain: strict;
  opacity: var(--fx-opacity, .4);
}
#bg-fx > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg-fx .fx-probe { display: none; }
#bg-fx .fx-deco { position: absolute; inset: 0; display: none; }
#bg-fx.is-off,
:root[data-bg="off"] #bg-fx,
:root[data-motion="off"] #bg-fx { display: none; }
@media (prefers-reduced-motion: reduce) { #bg-fx { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) #bg-fx.fx-swap { animation: sb-fade 1.1s ease-out; }
}

/* نیۆن: تۆڕی هێڵی نیۆنی نەگۆڕ (جوڵاندنی چینێکی پڕ‌شاشەی mask‌دار گران بوو؛ تۆڕی خاڵەکان جوڵەکەیە) */
#bg-fx[data-fx="neon"] .fx-deco {
  --grid-c: color-mix(in srgb, var(--fx-1, #4dffab) 24%, transparent);
  display: block; overflow: hidden;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 8%, transparent 72%);
          mask-image: radial-gradient(130% 90% at 50% 0%, #000 8%, transparent 72%);
}
#bg-fx[data-fx="neon"] .fx-deco::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 56px 56px;
}
:root[data-mode="light"] #bg-fx[data-fx="neon"] .fx-deco { --grid-c: color-mix(in srgb, var(--primary, #0b8a55) 16%, transparent); }

/* گرافیت: خاڵی ورد + دانەی (grain) نەگۆڕ */
#bg-fx[data-fx="graphite"] .fx-deco {
  display: block;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text, #8e8e93) 34%, transparent) 0 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 82%);
          mask-image: radial-gradient(120% 95% at 50% 0%, #000 0%, transparent 82%);
}
#bg-fx[data-fx="graphite"] .fx-deco::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5;
}

/* ═════════════ جوڵە کوژاوە / چاپ ═════════════ */
:root[data-motion="off"] .tab-ink,
:root[data-motion="off"] .ripple { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tab-ink { transition: none !important; }
}
@media print {
  .rv-wait, .rv-wait .word, .rv-wait .tline-in, [data-stagger].rv-wait > * { opacity: 1 !important; }
  .reveal, .word, .tline-in, [data-stagger] > *, .view-enter, .float, [data-fx] > svg { animation: none !important; translate: none !important; }
  .logo-halo::before, .logo-halo::after, .halo-ring, [data-fx]::after, .shine-fx, .ripple-host, .tab-ink { display: none !important; }
}