/* =========================================================
   loader.css — صفحه‌ی لودینگ؛ پیش از همه‌ی استایل‌ها بارگذاری می‌شود
   فقط transform / opacity / clip-path انیمیت می‌شوند (سبک و روان).
   اگر جاوااسکریپت کار نکند، خودش بعد از ۱۲ ثانیه محو می‌شود.
   ========================================================= */
#pl {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden;
  background: #0b0912; color: #fff; clip-path: inset(0 0 0 0);
  transition: clip-path .95s cubic-bezier(.76, 0, .24, 1) .12s;
  animation: pl-failsafe .01s linear 12s forwards;
}
#pl::before, #pl::after {
  content: ""; position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .34; pointer-events: none; will-change: transform;
}
#pl::before { top: -26vmax; right: -22vmax; background: radial-gradient(circle, #f33cc0, transparent 66%); animation: pl-drift 9s ease-in-out infinite; }
#pl::after { bottom: -30vmax; left: -24vmax; background: radial-gradient(circle, #4349ff, transparent 66%); animation: pl-drift 11s ease-in-out infinite reverse; }
.pl-box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 20px; transition: opacity .35s ease, transform .7s cubic-bezier(.22, .8, .24, 1); }

/* نشان: حلقه‌ی چرخان گرادیانی دور لوگو */
.pl-mark { position: relative; width: 108px; height: 108px; display: grid; place-items: center; animation: pl-pop .8s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.pl-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 52%, #f33cc0 82%, #4349ff 100%);
  -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));
  animation: pl-spin 1.15s linear infinite;
}
.pl-mark::after {
  content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 46px rgba(243, 60, 192, .38); animation: pl-pulse 2.2s ease-in-out infinite;
}
.pl-mark img { position: relative; z-index: 1; width: 58px; height: 58px; animation: pl-float 2.4s ease-in-out infinite; }

.pl-name {
  font: 700 15px/1 Montserrat, "Segoe UI", system-ui, sans-serif; letter-spacing: .44em; padding-inline-start: .44em; direction: ltr;
  background: linear-gradient(90deg, #fff 20%, #ff9ad9 44%, #7aa2ff 60%, #fff 82%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pl-shine 2.6s linear infinite, pl-rise .7s .15s cubic-bezier(.22, .8, .24, 1) backwards;
}
.pl-bar { width: 176px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .1); animation: pl-rise .7s .25s cubic-bezier(.22, .8, .24, 1) backwards; }
.pl-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: right; transform: scaleX(0); transition: transform .18s linear; background: linear-gradient(90deg, #4349ff, #f33cc0); box-shadow: 0 0 12px rgba(243, 60, 192, .8); }
.pl-txt { margin: 0; font: 500 12.5px/1 YekanBakh, Vazirmatn, Tahoma, sans-serif; color: #cac6dd; opacity: 0; animation: pl-fade .6s .45s forwards; }

/* خروج: پرده بالا می‌رود و محتوای میانی کمی بزرگ می‌شود و محو می‌شود */
#pl.is-leaving { clip-path: inset(0 0 100% 0); pointer-events: none; }
#pl.is-leaving .pl-box { opacity: 0; transform: scale(1.1) translateY(-12px); }

/* تا پایان لودینگ: اسکرول بسته و انیمیشن‌های ورود صفحه منتظر می‌مانند تا بعد از باز شدن پرده شروع شوند */
html.is-loading { overflow: hidden; }
html.is-loading .enter, html.is-loading .site-header .nav, html.is-loading main { animation-play-state: paused !important; }

@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-drift { 50% { transform: translate3d(7vw, 5vh, 0) scale(1.12); } }
@keyframes pl-pulse { 50% { transform: scale(.93); opacity: .75; } }
@keyframes pl-float { 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes pl-shine { to { background-position: -260% 0; } }
@keyframes pl-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes pl-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pl-fade { to { opacity: 1; } }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  #pl, #pl *, #pl::before, #pl::after { animation: none !important; }
  .pl-txt { opacity: 1; }
  #pl { clip-path: none; transition: opacity .3s ease; }
  #pl.is-leaving { opacity: 0; }
}
.pl-mark img { width: auto; max-width: 92px; height: 58px; object-fit: contain; }