/* ════════════════════════════════════════════════════════════
   LQD STACK — FULLPAGE SCROLL SYSTEM
   ساختار: هسته → انیمیشن → ویدئو → هدر → فوتر
   ════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   ۱. هسته اصلی
   ══════════════════════════════════════════════════════════ */

html.pp-enabled {
  overflow: hidden !important;
}

.pp-section {
  width: 100vw;
  height: 100vh;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  justify-content: center;
  transform: translate3d(0, 0, 0);
}

/* سکشن‌های خارج از صفحه مخفی می‌شوند */
.pp-section:not(.active):not(.lqd-stack-row-entering):not(.lqd-stack-row-leaving) {
  top: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* متغیر سرعت انیمیشن */
[data-liquid-stack="true"] {
  --lqd-stack-animation-speed: 1.3s;
}


/* ══════════════════════════════════════════════════════════
   ۲. وضعیت‌های انیمیشن
   ══════════════════════════════════════════════════════════ */

.lqd-stack-row-entering {
  will-change: transform, opacity;
  z-index: 10;
}

.lqd-stack-row-leaving {
  will-change: transform, opacity;
}


/* ══════════════════════════════════════════════════════════
   ۳. افکت FadeScale — کلاس‌ها
   ══════════════════════════════════════════════════════════ */

/* اسکرول پایین: ورود از پایین */
.lqd-stack-effect-fadeScale .lqd-stack-row-entering.lqd-stack-moving-down {
  animation: lqdStackRowFadeScaleEnterFromBottom var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1) both alternate;
}

/* اسکرول پایین: خروج به بالا (شیفت ۸vh) */
.lqd-stack-effect-fadeScale .lqd-stack-row-leaving.lqd-stack-moving-down {
  animation: lqdStackRowFadeScaleLeave var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1) both alternate;
}

/* اسکرول بالا: ورود از بالا (شیفت ۸vh) */
.lqd-stack-effect-fadeScale .lqd-stack-row-entering.lqd-stack-moving-up {
  animation: lqdStackRowFadeScaleEnter var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1) both alternate;
  z-index: 0;
}

/* اسکرول بالا: خروج به پایین (یک صفحه کامل) */
.lqd-stack-effect-fadeScale .lqd-stack-row-leaving.lqd-stack-moving-up {
  animation: lqdStackRowFadeScaleLeaveToBottom var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1) both alternate;
}


/* ══════════════════════════════════════════════════════════
   ۴. کی‌فریم‌ها — بدون محو شدن، بدون لرزش
   ══════════════════════════════════════════════════════════ */

/* اسکرول بالا: برگشتن از ۸vh بالاتر به جای اصلی */
@keyframes lqdStackRowFadeScaleEnter {
  from {
    transform: translate3d(0, -8vh, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* اسکرول پایین: ورود از یک صفحه کامل پایین‌تر */
@keyframes lqdStackRowFadeScaleEnterFromBottom {
  from {
    transform: translate3d(0, 100vh, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* اسکرول پایین: شیفت ۸vh به بالا (مثل کارت که میره عقب) */
@keyframes lqdStackRowFadeScaleLeave {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, -8vh, 0);
    opacity: 1;
  }
}

/* اسکرول بالا: خروج به سمت پایین */
@keyframes lqdStackRowFadeScaleLeaveToBottom {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100vh, 0);
  }
}


/* ══════════════════════════════════════════════════════════
   ۵. ویدئو — حذف لرزش لبه
   ══════════════════════════════════════════════════════════ */

.elementor-background-video-container {
  /* ۵٪ بزرگ‌تر تا پیکسل‌های اعشاری لبه پوشانده شوند */
  transform: scale(1.05) translate3d(0, 0, 0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

.elementor-background-video-hosted {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}


/* ══════════════════════════════════════════════════════════
   ۶. هدر ثابت
   ══════════════════════════════════════════════════════════ */

/* ── دسکتاپ ── */
.lqd-custom-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 999 !important; /* بالاتر از لایه‌های انیمیشن (حداکثر z-index: 10) */
  pointer-events: auto;
  transition: all 0.3s ease;
}

/* ── موبایل و تبلت (≤ 1024px) ── */
@media (max-width: 1024px) {
  .lqd-custom-header {
    transition:
      transform var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1),
      opacity   var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1) !important;
    will-change: transform, opacity;
  }

  /* هنگام نمایش فوتر: هدر به بالا خارج می‌شود */
  body.lqd-footer-active .lqd-custom-header {
    transform: translate3d(0, -100%, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   ۷. فوتر پرده‌ای
   ══════════════════════════════════════════════════════════ */

/* ── دسکتاپ ── */
.lqd-custom-footer {
  position: fixed !important;
  bottom: 0;
  left: 0 !important;       /* ← تغییر: حذف centering غیرضروری */
  width: 100%;
  height: 70vh;
  z-index: 1;
  visibility: visible !important;
}

.pp-section.active {
  transition: transform var(--lqd-stack-animation-speed, 1.2s) cubic-bezier(0.23, 1, 0.32, 1);
}

body.lqd-footer-active .pp-section.active {
  transform: translate3d(0, -70vh, 0) !important;
}

@media (max-width: 1024px) {

  /* ── فوتر ── */
  .lqd-custom-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* لایه‌بندی fallback برای مرورگرهای مختلف */
    height: 100vh !important;                   /* fallback قدیمی */
    height: -webkit-fill-available !important;  /* iOS Safari */
    height: 100vh !important;                  /* مدرن — دقیق‌ترین */

    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── ارث‌بری ارتفاع در ساختار داخلی المنتور ── */
  .lqd-custom-footer > .elementor,
  .lqd-custom-footer .elementor-section-wrap,
  .lqd-custom-footer .elementor-section:first-of-type {
    height: 100% !important;
    min-height: 100% !important;
  }

  /* ── شیفت سکشن فعال هم باید با dvh هماهنگ بشه ── */
  body.lqd-footer-active .pp-section.active {
    transform: translate3d(0, -100vh, 0) !important;   /* fallback */
    transform: translate3d(0, -100vh, 0) !important;  /* دقیق */
  }
}