/* PersianPod: حرکت نرم
   ۱) ردیف کارت‌های پادکست (صفحه‌ی اصلی، «پادکست‌ها» و «گوش بده») «پشته‌ی سه‌بعدی» است؛ همان چیدمان کارت‌های اپیزود نویز
   ۲) ردیف‌های صفحه‌ی «تازه‌ها» هنگام اسکرول از دور به نزدیک می‌آیند
   ۳) کاور اختصاصی قسمت‌ها (فهرست قسمت‌ها و پلیر)
   ردیف‌ها با JS ساخته می‌شوند؛ pp-motion.js آن‌ها را خودکار پیدا می‌کند. بعد از بقیه‌ی CSSها لود شود. */

/* ---------- ۱) پشته‌ی کارت‌ها ---------- */
:root .pd-group{ overflow:hidden; }

/* صحنه: خود ردیف. دیگر اسکرول افقی ندارد؛ کارت‌ها absolute و با transform چیده می‌شوند (JS فقط --pp-t را می‌نویسد) */
html:not(#pp) .pd-group .pd-row.pp-stack{
  position:relative !important; display:block !important;
  height:var(--pp-h, 380px) !important;
  padding:0 !important; margin:6px 0 0 !important;
  overflow:hidden !important; overflow-x:hidden !important;
  perspective:1400px;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  scroll-snap-type:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  outline:none;
}
html:not(#pp) .pd-group .pd-row.pp-stack:focus-visible{ outline:3px solid rgba(8,203,0,.45); outline-offset:-3px; border-radius:18px; }

html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card,
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card:hover,
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card:focus-within{
  --pp-cover-radius:17px;
  position:absolute !important; top:10px !important; left:50% !important;
  width:var(--pp-cw, 240px) !important; min-width:0 !important; max-width:none !important; flex:none !important;
  margin:0 0 0 calc(var(--pp-cw, 240px) / -2) !important;
  padding:10px 10px 12px !important;
  transform:var(--pp-t, none) !important;
  transform-origin:50% 110%;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease, box-shadow .3s ease, border-color .3s ease !important;
  will-change:transform;
  cursor:pointer;
  scroll-snap-align:none !important; scroll-snap-stop:normal !important;
  text-align:start;
  /* پوسته‌ی شیشه‌ای؛ بدون backdrop-filter چون روی کارتِ چرخان گوشه‌ها را مربع می‌کند */
  border:1px solid var(--gl-edge) !important;
  border-radius:26px !important;
  background-color:var(--card, #fff) !important;      /* زیرلایه‌ی یک‌دست: متن کارت‌های پشتی از میان کارت جلویی دیده نشود */
  background-image:var(--gl-fill) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  overflow:hidden !important; isolation:isolate;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:
    inset 0 1px 0 var(--gl-hi),
    inset 0 -1px 0 var(--gl-lo),
    0 0 0 1px var(--gl-rim),
    0 20px 34px -22px rgba(0,0,0,.55) !important;
}
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card.is-active{
  cursor:grab;
  border-color:var(--g) !important;
  box-shadow:
    inset 0 1px 0 var(--gl-hi),
    inset 0 -1px 0 var(--gl-lo),
    0 0 0 1px var(--gl-rim),
    0 20px 34px -22px rgba(0,0,0,.55),
    0 0 22px -12px var(--glow) !important;
}
/* کارت‌های غیرفعال فقط «انتخاب» می‌شوند؛ لینک/دکمه‌ی داخلشان کلیک نمی‌گیرد */
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card:not(.is-active) > *{ pointer-events:none; }
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-logo{ box-shadow:0 0 0 1px var(--gl-rim) !important; }
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-body{ margin-top:10px; padding-inline:4px; }
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-body h3{ font-size:1rem; min-height:3.4em; }
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-meta{ padding-inline:4px; }
html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-desc{ display:none; }

/* دکمه‌های قدیمیِ اسکرول جایشان را به شمارنده و دکمه‌های زیر پشته داده‌اند */
html:not(#pp) .pd-group .pd-row-wrap .pd-arrow{ display:none !important; }

/* شمارنده و دکمه‌ها (همان ظاهر نویز) */
.pp-stack-nav{ display:flex; justify-content:center; align-items:center; gap:16px; margin:2px 0 14px; direction:ltr; }
.pp-stack-nav[hidden]{ display:none; }
.pp-stack-btn{
  width:38px; height:38px; border-radius:50%; padding:0;
  border:1px solid var(--gl-edge, rgba(128,128,128,.35));
  background:var(--gl-fill, rgba(128,128,128,.12)); color:inherit;
  font-size:18px; line-height:1; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.pp-stack-btn:hover:not(:disabled){ background:var(--g, #08cb00); border-color:var(--g, #08cb00); color:#04210a; }
.pp-stack-btn:focus-visible{ outline:3px solid rgba(8,203,0,.45); outline-offset:2px; }
.pp-stack-btn:disabled{ opacity:.35; cursor:default; }
.pp-stack-count{ min-width:64px; text-align:center; font-size:14px; opacity:.7; font-variant-numeric:tabular-nums; }

@media (max-width:799px){
  html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card,
  html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card:hover,
  html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card:focus-within{ padding:8px 8px 10px !important; border-radius:22px !important; --pp-cover-radius:14px; }
  html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card .pd-body h3{ font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce){
  html:not(#pp) .pd-group .pd-row.pp-stack > .pd-card{ transition:none !important; }
}

/* ---------- ۲) ورود از دور به نزدیک ---------- */
.nw-list .nw-row.pp-rv{
  opacity:0;
  transform:perspective(900px) translateZ(-150px) translateY(52px) scale(.95);
  transition:
    transform 2s cubic-bezier(.16,.84,.3,1),
    opacity 1.5s ease-out,
    box-shadow .3s ease,
    border-color .3s ease;
  transition-delay:var(--pp-d,0s), var(--pp-d,0s), 0s, 0s;
  will-change:transform, opacity;
}
.nw-list .nw-row.pp-rv.in-view{
  opacity:1;
  transform:perspective(900px) translateZ(0) translateY(0) scale(1);
}
@media (max-width:640px){
  .nw-list .nw-row.pp-rv{ transform:perspective(900px) translateZ(-110px) translateY(38px) scale(.96); }
}

@media (prefers-reduced-motion:reduce){
  .nw-list .nw-row.pp-rv{ opacity:1; transform:none; transition:none; }
}

/* ---------- ۳) کاور قسمت‌ها ---------- */
/* «تازه‌ها» (به ترتیب اپیزود): کاور خود قسمت، با گوشه‌ی گرد مثل لوگوی پادکست */
.nw-feed img.nw-logo.nw-ep-cover{ object-fit:cover; background:rgba(128,128,128,.15); }
/* فهرست قسمت‌ها در «گوش بده» و پلیر شناور */
.pp-eplist button img.pp-epc, .ppfp__ep img.pp-epc{
  flex:none; width:36px; height:36px; border-radius:9px; object-fit:cover; background:rgba(128,128,128,.18);
}
.pp-eplist button img.pp-epc{ margin-top:2px; }
.pp-eplist button span{ min-width:0; }
.ppfp__ep.has-cov{ display:flex; align-items:center; gap:9px; }
.ppfp__ep.has-cov > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* قرص پلیر: کاور قسمتِ در حال پخش (بین دکمه‌های کنترل و عنوان) */
.ppfp__cov{ flex:none; width:44px; height:44px; border-radius:11px; object-fit:cover; background:rgba(128,128,128,.18); }
.ppfp__cov[hidden]{ display:none; }
@media (max-width:599.98px){ .ppfp__cov{ width:38px; height:38px; border-radius:9px; } }