/*
 * لودر برند: مثلث نئونی از چپ و حروف فلزی AP از راست می‌آیند، با ضربه روی هم می‌نشینند (حلقه موج، جرقه‌ها و
 * لرزش کوتاه)، لوگوی کامل جای دو تکه را می‌گیرد و سپس درخشش و تابش آرام تا پایان بارگذاری تکرار می‌شود.
 *
 * فایل ثابت (نه داخل باندل) چون صفحه شروع سایت پیش از رسیدن JavaScript همین کلاس‌ها را لازم دارد؛
 * کامپوننت BrandLoader هم همین کلاس‌ها را به کار می‌برد تا انیمیشن یک منبع داشته باشد.
 * جای حروف روی مثلث از خود فایل لوگو اندازه‌گیری شده است (left/top/width به درصد کادر لوگو).
 */

.ap-loader {
  --ap-size: 160px;
  --ap-glow: 214 63 255;
  display: grid;
  justify-items: center;
  gap: 16px;
  pointer-events: none;
}

.ap-stage {
  position: relative;
  inline-size: var(--ap-size);
  aspect-ratio: 1.162;
  animation: ap-impact 0.5s 0.95s ease-out both;
}

.ap-stage > * {
  position: absolute;
  max-inline-size: none;
}

.ap-glow {
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--ap-glow) / 0.5), rgb(124 58 237 / 0.2) 55%, transparent 74%);
  opacity: 0;
  animation: ap-fade-to 0.5s 0.9s ease-out forwards, ap-breathe 2.6s 1.4s ease-in-out infinite;
}

.ap-tri,
.ap-logo {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* مثلث از چپ، با چرخش و بزرگ شدن */
.ap-tri {
  animation: ap-tri-in 0.95s cubic-bezier(0.3, 0.75, 0.25, 1.08) both, ap-hide 0.25s 1.15s forwards;
}

/* حروف از راست، کمی دیرتر؛ آخر حرکت از جایش رد می‌شود و برمی‌گردد (حس کوبیده شدن) */
.ap-let {
  inset-block-start: 27.98%;
  left: 13.69%;
  inline-size: 64.26%;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.55));
  animation: ap-let-in 0.9s 0.08s cubic-bezier(0.3, 0.7, 0.3, 1.05) both, ap-hide 0.25s 1.15s forwards;
}

/* حلقه موج لحظه برخورد؛ forwards نه both، وگرنه پیش از شروع، قاب اول (حلقه و جرقه‌های پیدا) دیده می‌شود */
.ap-ring {
  inset: 6%;
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  box-shadow: 0 0 22px rgb(232 121 249 / 0.9), inset 0 0 22px rgb(232 121 249 / 0.6);
  opacity: 0;
  animation: ap-ring 0.7s 0.97s ease-out forwards;
}

/* نور کوتاه برخورد، روی لوگو */
.ap-flash {
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(240 171 252 / 0.5) 45%, transparent 75%);
  opacity: 0;
  animation: ap-flash 0.55s 0.97s ease-out forwards;
}

/* جرقه‌ها در هشت جهت؛ زاویه هر جرقه با --a روی خود عنصر */
.ap-spark {
  inset-block-start: 50%;
  left: 50%;
  inline-size: 7px;
  block-size: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgb(232 121 249 / 0.95);
  opacity: 0;
  animation: ap-spark 0.75s 0.97s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}


.ap-logo {
  opacity: 0;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.45));
  animation: ap-fade-to 0.3s 1s ease-out forwards;
}

/* نوار نور مورب که فقط روی شکل لوگو دیده می‌شود */
.ap-shine {
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.8) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask: url(/brand/logo-320.webp) center / contain no-repeat;
  mask: url(/brand/logo-320.webp) center / contain no-repeat;
  animation: ap-shine 2.6s 1.45s ease-in-out infinite;
}

.ap-label {
  margin: 0;
  color: rgb(245 247 251 / 0.8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  animation: ap-fade-to 0.4s 1.05s ease-out forwards;
}

@keyframes ap-tri-in {
  from { opacity: 0; transform: translateX(-130%) rotate(-30deg) scale(0.5); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes ap-let-in {
  from { opacity: 0; transform: translateX(160%) rotate(24deg) scale(1.4); }
  50% { opacity: 1; }
  80% { transform: translateX(-5%) rotate(-3deg) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes ap-impact {
  0% { transform: scale(1); }
  30% { transform: scale(1.08) rotate(-1.5deg); }
  55% { transform: scale(0.98) rotate(0.6deg); }
  100% { transform: scale(1); }
}

@keyframes ap-ring {
  0% { opacity: 0.95; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(1.65); }
}

@keyframes ap-flash {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes ap-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--ap-size) * 0.75)) scale(0.3); }
}

@keyframes ap-fade-to {
  to { opacity: 1; }
}

@keyframes ap-hide {
  to { opacity: 0; }
}

@keyframes ap-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes ap-shine {
  0% { opacity: 1; background-position: 150% 0; }
  40% { opacity: 1; background-position: -50% 0; }
  41%, 100% { opacity: 0; background-position: -50% 0; }
}

/* بدون حرکت: فقط لوگو با تپش آرام */
@media (prefers-reduced-motion: reduce) {
  .ap-stage,
  .ap-glow,
  .ap-label {
    animation: none;
    opacity: 1;
  }

  .ap-tri,
  .ap-let,
  .ap-ring,
  .ap-flash,
  .ap-spark,
  .ap-shine {
    display: none;
  }

  .ap-logo {
    opacity: 1;
    animation: ap-breathe 2.6s ease-in-out infinite;
  }
}

/* ---------- صفحه شروع سایت ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 50% at 50% 45%, #1c0f33 0%, #07090d 70%);
  transition: opacity 0.35s ease, visibility 0.35s;
}

[data-theme='light'] .splash {
  background: radial-gradient(60% 50% at 50% 45%, #efe4ff 0%, #f6f7fb 70%);
}

.splash .ap-loader {
  --ap-size: min(190px, 46vw);
}

.splash.splash-out {
  opacity: 0;
  visibility: hidden;
}

/* بازگشت در همان نشست مرورگر: صفحه شروع دوباره نمایش داده نمی‌شود */
.splash-seen .splash {
  display: none;
}