/* ════════════════════════════════════════════════════════════════════
   FX — لایه‌ی سه‌بعدی، عمق و موشن  (مشترکِ همه‌ی سایت‌ها)
   orbs · mesh · grid · tilt-3d · scroll-reveal · marquee · neural canvas
   احترام به prefers-reduced-motion در انتهای فایل.
   ════════════════════════════════════════════════════════════════════ */

.fx-orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; opacity: .55; }
.fx-orb-a { width: 460px; height: 460px; background: color-mix(in srgb, var(--fx-a) 26%, transparent); animation: fx-float 11s ease-in-out infinite; }
.fx-orb-b { width: 520px; height: 520px; background: color-mix(in srgb, var(--fx-b) 24%, transparent); animation: fx-float 14s ease-in-out infinite reverse; }
.fx-orb-c { width: 380px; height: 380px; background: color-mix(in srgb, var(--fx-c) 16%, transparent); animation: fx-float 9s  ease-in-out infinite; }
@keyframes fx-float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-34px,0) scale(1.06); } }

.fx-mesh {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 8%,  color-mix(in srgb, var(--fx-b) 20%, transparent), transparent 60%),
    radial-gradient(50% 45% at 12% 18%, color-mix(in srgb, var(--fx-a) 16%, transparent), transparent 60%),
    radial-gradient(60% 60% at 50% 110%, color-mix(in srgb, var(--fx-c) 10%, transparent), transparent 60%),
    var(--fx-bg);
}
.fx-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
}

.fx-neural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* tilt 3D */
.fx-tilt { transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; will-change: transform; }
.fx-tilt:hover { box-shadow: var(--fx-shadow); }
.fx-tilt .fx-tilt-pop { transform: translateZ(40px); }
.perspective { perspective: 1200px; }
.fx-tilt .fx-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.12), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.fx-tilt:hover .fx-sheen { opacity: 1; }

.fx-anim-float { animation: fx-floaty 6s ease-in-out infinite; }
@keyframes fx-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.fx-spin-slow { animation: fx-spin 26s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

.fx-anim-grad { background-size: 220% 220%; animation: fx-grad-move 7s ease infinite; }
@keyframes fx-grad-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* scroll reveal */
.fx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.fx-reveal.is-in { opacity: 1; transform: none; }
.fx-reveal.d1 { transition-delay: .08s; }
.fx-reveal.d2 { transition-delay: .16s; }
.fx-reveal.d3 { transition-delay: .24s; }
.fx-reveal.d4 { transition-delay: .32s; }

/* marquee */
.fx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-marquee-track { display: flex; gap: 14px; width: max-content; animation: fx-marquee 38s linear infinite; }
.fx-marquee:hover .fx-marquee-track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translateX(50%); } }
.fx-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border-radius: var(--fx-r-pill); background: var(--fx-surface);
  border: 1px solid var(--fx-border); font-size: 14px; color: var(--fx-text-soft); white-space: nowrap;
}
.fx-chip b { color: var(--fx-a); font-weight: 700; }

/* رادار / مدار */
.fx-radar-core {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: var(--fx-grad-brand); filter: blur(2px);
  box-shadow: 0 0 60px 8px var(--fx-glow-a); animation: fx-pulse 3.4s ease-in-out infinite;
}
@keyframes fx-pulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.12); opacity: 1; } }

.fx-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--fx-border-2), transparent); }

.fx-soon {
  position: absolute; top: 14px; inset-inline-start: 14px;
  padding: 5px 13px; border-radius: var(--fx-r-pill);
  font-size: 11px; font-weight: 700; color: var(--fx-on-a);
  background: var(--fx-grad-c); box-shadow: 0 8px 24px -8px var(--fx-glow-c);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fx-reveal { opacity: 1; transform: none; }
}