/*
 * LiquidStack Vertical Line Navigation
 *
 * FIX SUMMARY
 * -----------
 * Root cause: The base ::before rule sets  background: ... !important
 * That hard-locks the background property. @keyframes cannot override
 * any property declared !important in a static rule — and writing
 * !important *inside* @keyframes is silently ignored by Chrome / Firefox.
 *
 * Solution: animate  filter: opacity()  instead of  background.
 * The plugin never touches the filter property, so @keyframes owns it
 * completely — no !important needed inside the keyframe block.
 *
 * Why filter instead of opacity?
 * - opacity on ::before would work here (parent is already opacity:1
 *   for pp-nav-next), but  filter  is even safer because no plugin
 *   is likely to set it, and it avoids any residual inheritance edge-cases.
 * - filter: opacity() creates an equivalent visual effect to opacity
 *   but is applied as a compositing step, making it animation-safe.
 */


/* ── مخفی کردن شمارنده و تولتیپ پیش‌فرض ──── */
#pp-nav .pp-nav-current,
#pp-nav .pp-nav-total,
#pp-nav .pp-tooltip,
span.pp-tooltip {
  display: none !important;
}


/* ── کانتینر اصلی نویگیشن ──── */
#pp-nav {
  position: fixed !important;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  overflow: visible !important;
  height: auto !important;
  pointer-events: auto !important;
}


/* ── لیست خط‌ها ──── */
#pp-nav .pp-nav-ul {
  --nav-line-width:         24px;
  --nav-line-height:        2px;
  --nav-line-active-height: 4px;
  --nav-line-color:         #fff;
  --nav-line-gap:           2px;

  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            var(--nav-line-gap) !important;
  margin:         0 !important;
  padding:        0 !important;
  list-style:     none !important;
  height:         auto !important;
  overflow:       visible !important;
}


/* ── استایل پایه همه آیتم‌ها ──── */
#pp-nav .pp-nav-ul li {
  width:           var(--nav-line-width) !important;
  height:          22px !important;
  margin:          0 !important;
  padding:         0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  opacity:         0.56 !important; /* پیش‌فرض پلاگین */
  border-radius:   0 !important;
  cursor:          pointer;
  pointer-events:  auto !important;
  position:        relative;
  z-index:         2;
  transition:      none !important;
}


/* ── استایل لینک داخلی پایه ──── */
#pp-nav .pp-nav-ul li a {
  width:                    100% !important;
  height:                   100% !important;
  display:                  flex !important;
  align-items:              center !important;
  justify-content:          center !important;
  background:               transparent !important;
  transform:                none !important;
  border-radius:            0 !important;
  transition:               none !important;
  outline:                  none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow:               none !important;
  pointer-events:           auto !important;
  z-index:                  3;
}


/* ── خط اصلی (pseudo-element) پایه ──── */
#pp-nav .pp-nav-ul li a::before {
  content:       "" !important;
  display:       block !important;
  width:         var(--nav-line-width) !important;
  height:        var(--nav-line-height) !important;
  background:    var(--nav-line-color) !important; /* ← locked with !important — do NOT animate this */
  border-radius: 0 !important;
  transform:     none !important;
  transition:    none !important;
  animation:     none !important;
  /*
   * NOTE: 'filter' is intentionally NOT set here.
   * Leaving it unset means @keyframes can set it freely — no !important conflict.
   * If filter were set here with !important it would block the animation
   * for the same reason background is blocked above.
   */
}


/* حذف عناصر اضافی پلاگین */
#pp-nav .pp-nav-ul li a::after,
#pp-nav .pp-nav-ul li a svg,
#pp-nav .pp-nav-ul li a > span {
  display: none !important;
}


/* ==========================================
   استیت‌ها (State Management)
   ========================================== */

/* ۱. حالت فعال (Active) */
#pp-nav .pp-nav-ul li.active {
  opacity: 1 !important;
}

#pp-nav .pp-nav-ul li.active a::before {
  height: var(--nav-line-active-height) !important; /* ضخامت 4px */
  filter: none; /* ensure no residual filter from a previous state */
}


/* ۲. حالت آیتم بعدی (Next) */
/*
 * FIX STEP 1 — break opacity inheritance:
 * The plugin sets opacity: 0.56 !important on every <li>.
 * A child's opacity is always multiplied by its parent's opacity
 * (CSS spec §19.1), so a ::before with opacity:1 would still render
 * at 0.56.  Setting the parent to opacity:1 here frees the pseudo-element
 * to go from 0 → 1 without a ceiling.
 */
#pp-nav .pp-nav-ul li.pp-nav-next {
  opacity: 1 !important;
}

/*
 * FIX STEP 2 — animate filter, not background:
 *
 * What we tried before (and why it failed):
 *   animation:  background rgba(255,255,255,0.1) → rgba(255,255,255,1)
 *   Problem:    background is !important in the base rule above.
 *               Browsers treat that as a hard lock; @keyframes cannot
 *               override it.  Adding !important inside @keyframes is
 *               silently ignored in Chrome 57+, Firefox 53+, Safari 14+.
 *
 * The fix:
 *   Animate  filter: opacity()  instead.
 *   - 'filter' is not set anywhere in the base styles (no lock to fight).
 *   - @keyframes can set and change it freely.
 *   - No !important needed inside @keyframes.
 *   - Produces identical visual result: line pulses from near-invisible
 *     (opacity 0.1) to fully visible (opacity 1).
 */
#pp-nav .pp-nav-ul li.pp-nav-next a::before {
  height:    var(--nav-line-height) !important;
  animation: lqd-next-blink 1.2s ease-in-out infinite !important;
  /*
   * The !important on 'animation' here is valid — it overrides
   * the "animation: none !important" in the base ::before rule
   * because this selector (#pp-nav .pp-nav-ul li.pp-nav-next a::before)
   * is more specific than the base selector. When specificity is equal,
   * !important wins; when this selector is already more specific,
   * it wins regardless, but !important ensures plugin styles can't
   * sneak back in.
   */
}

/* ── انیمیشن چشمک‌زن ──── */
@keyframes lqd-next-blink {
  /*
   * CRITICAL: Zero !important inside this block.
   * Modern browsers (Chrome 57+, Firefox 53+, Safari 14+) strip
   * !important from keyframe declarations and the animation silently
   * does nothing.  These plain values work because 'filter' has no
   * competing !important declaration anywhere in this stylesheet.
   */
  0%,  100% { filter: opacity(0.1); }  /* خط تقریباً خاموش */
  50%       { filter: opacity(1);   }  /* خط کاملاً روشن */
}


/* ── فوکوس کیبورد ──── */
#pp-nav .pp-nav-ul li a:focus-visible {
  outline: none;
}
#pp-nav .pp-nav-ul li a:focus-visible::before {
  background: rgba(255, 255, 255, 0.2) !important;
}


/* ── مخفی شدن در موبایل ──── */
@media (max-width: 768px) {
  #pp-nav {
    display: none !important;
  }
}