.elementor-30385 .elementor-element.elementor-element-2355991{--display:flex;--min-height:700px;}/* Start custom CSS for html, class: .elementor-element-252d930 *//* ===== توکن‌ها و پایه ===== */
:root{
  --fx-bg:#0b0a0a; --fx-text:#fff; --fx-muted:#cfcbd0; --fx-accent:#ab8f6d;
  --fx-pad:clamp(16px,3vw,48px);
}
*{box-sizing:border-box}
.fx-slider{
  position:relative; width:100%; min-height:min(80vh, 720px);
  background:var(--fx-bg); color:var(--fx-text); overflow:hidden; isolation:isolate;
  font-family:Vazirmatn, IRANSans, system-ui, Segoe UI, Roboto, sans-serif;
}
.fx-slides{position:relative; height:100%}
.fx-slide{position:absolute; inset:0; opacity:0; pointer-events:none}
.fx-slide.is-active{opacity:1; pointer-events:auto}

/* ===== پس‌زمینه که از چپ وارد می‌شود ===== */
.fx-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translateX(-12%) scale(1.05); opacity:.7; will-change:transform,opacity;
}
.fx-slide.is-active .fx-bg{animation:bgIn .9s cubic-bezier(.2,.65,.18,1) both}

/* تیرگی ملایم برای خوانایی */
.fx-darken{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 500px at 70% 50%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,0) 70%);
  z-index:0;
}

/* ===== صحنهٔ مرکزی ===== */
.fx-center{
  position:relative; z-index:1; height:100%; padding:var(--fx-pad);
  display:grid; place-items:center;
}

/* دود روشن پشت محصول */
.fx-smoke{
  position:absolute; width:clamp(260px, 44vw, 640px); height:clamp(160px, 28vw, 360px);
  opacity:0; filter:saturate(1.2);
  z-index:2; /* پشت محصول ولی جلو پس‌زمینه */
}
.fx-slide.is-active .fx-smoke{animation:smokeFade .8s ease-out .24s both}
.fx-smoke span{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.18) 25%,
      rgba(255,255,255,.08) 48%,
      rgba(255,255,255,0) 70%);
  filter:blur(28px); mix-blend-mode:screen; opacity:.35;
}
.fx-smoke span:nth-child(2){transform:translate(-22%,10%) scale(.9); opacity:.25}
.fx-smoke span:nth-child(3){transform:translate(18%,0%) scale(1.1); opacity:.2}
/* شناوری نرم دود در حالت فعال */
.fx-slide.is-active .fx-smoke span:nth-child(1){animation:drift1 6s ease-in-out .3s infinite alternate}
.fx-slide.is-active .fx-smoke span:nth-child(2){animation:drift2 7s ease-in-out .3s infinite alternate}
.fx-slide.is-active .fx-smoke span:nth-child(3){animation:drift3 8s ease-in-out .3s infinite alternate}

/* محصول که از راست وارد می‌شود و وسط می‌ایستد */
.fx-product{
  position:relative; z-index:3; width:clamp(220px, 34vw, 520px); height:auto;
  transform:translateX(40vw) scale(.98); opacity:0; will-change:transform,opacity;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.55));
}
.fx-slide.is-active .fx-product{animation:productIn 1s cubic-bezier(.16,.84,.23,1) .12s both}

/* نقاط ناوبری */
.fx-dots{
  position:absolute; left:20px; bottom:16px; display:flex; gap:8px; z-index:4;
}
.fx-dots button{
  width:10px; height:10px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.55)
}
.fx-dots button[aria-current="true"]{background:#fff; width:26px}

/* ریسپانسیو */
@media (max-width:900px){
  .fx-dots{left:12px; bottom:12px}
  .fx-smoke{width:clamp(220px, 64vw, 520px); height:clamp(140px, 32vw, 300px)}
}

/* احترام به reduce-motion */
@media (prefers-reduced-motion: reduce){
  .fx-bg, .fx-product, .fx-smoke, .fx-smoke span{animation:none !important; transform:none !important}
}

/* ===== انیمیشن‌ها ===== */
@keyframes bgIn{
  0%{transform:translateX(-12%) scale(1.05); opacity:.7}
  100%{transform:translateX(0) scale(1); opacity:1}
}
@keyframes productIn{
  0%{transform:translateX(40vw) scale(.98); opacity:0}
  70%{transform:translateX(-2vw)}
  100%{transform:translateX(0) scale(1); opacity:1}
}
@keyframes smokeFade{
  0%{opacity:0; transform:translateY(8px)}
  100%{opacity:.42; transform:translateY(0)}
}
@keyframes drift1{
  0%{transform:translate(-8%,0) scale(1)}
  100%{transform:translate(6%,-10%) scale(1.07)}
}
@keyframes drift2{
  0%{transform:translate(-12%,6%) scale(.95)}
  100%{transform:translate(8%,-12%) scale(1.05)}
}
@keyframes drift3{
  0%{transform:translate(10%,2%) scale(1.05)}
  100%{transform:translate(-6%,-14%) scale(1.08)}
}/* End custom CSS */