/* ==========================================================================
   نمایشگاه ورق‌خور — همیار فرش
   شیرازه در وسط؛ برگ از چپ به راست ورق می‌خورد (مثل کتاب فارسی)
   ========================================================================== */
.hf-exh{
  background:
    radial-gradient(120% 76% at 50% -6%, rgba(36,64,111,.55), transparent 62%),
    linear-gradient(180deg,#132038,#0C1526 62%,#0A111F);
  color:#E9ECF3;padding:44px 0 56px;position:relative;overflow:hidden;
}
.hf-exh::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 34%, transparent 42%, rgba(6,10,18,.62) 100%);
}
.hf-exh-hd{
  max-width:1360px;margin:0 auto 26px;padding:0 30px;
  display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;position:relative;z-index:2;
}
.hf-exh-hd h1,.hf-exh-hd h2{
  font-size:clamp(28px,3.6vw,44px);font-weight:900;margin:8px 0 0;letter-spacing:-.04em;color:#fff;
}
.hf-exh-hd .hf-lbl{color:var(--hf-secondary)}
.hf-exh-hd p{margin:8px 0 0;font-size:14px;color:#9EA9BE;max-width:46ch;line-height:1.95}
.hf-exh-pick{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.hf-exh-pick a{
  border:1px solid rgba(255,255,255,.2);padding:7px 15px;font-size:12px;font-weight:700;
  color:#B9C3D4;transition:.18s;text-decoration:none;
}
.hf-exh-pick a:hover{border-color:var(--hf-secondary);color:#fff}
.hf-exh-pick a.on{background:var(--hf-secondary);border-color:var(--hf-secondary);color:#2E2003}

/* ---------- صحنه ---------- */
.hf-stage{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  perspective:2600px;perspective-origin:50% 44%;padding:10px 30px 0;
}
.hf-book{
  --pw:min(31vw,368px);
  --ph:calc(var(--pw) * 1.46);
  position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;
  /* هنگام کشیدنِ برگ، متن انتخاب نشود و اسکرول افقی مزاحم نشود */
  -webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:grab;
}
.hf-book.turning{cursor:grabbing}
.hf-book a,.hf-book button{user-select:auto}
.hf-book::before{
  content:'';position:absolute;left:3%;right:3%;bottom:-26px;height:34px;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.6), transparent 72%);filter:blur(3px);
}
.hf-book::after{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:34px;margin-left:-17px;
  background:linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.26) 32%,rgba(0,0,0,.30) 50%,rgba(0,0,0,.26) 68%,rgba(0,0,0,.03));
  z-index:60;pointer-events:none;
}

.hf-page{
  position:absolute;top:0;width:var(--pw);height:var(--ph);
  background:var(--hf-paper);color:var(--hf-ink);overflow:hidden;
}
.hf-page.R{right:0}
.hf-page.L{left:0}
.hf-page.is-static{z-index:0}
.hf-leaf{
  position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);
  transform-origin:right center;transform-style:preserve-3d;
  transform:rotateY(0deg);will-change:transform;
}
.hf-leaf.flipped{transform:rotateY(180deg)}
/* هنگام حرکت، برگ از سطح جدا می‌شود */
.hf-leaf.moving{will-change:transform}
/* ضخامتِ خودِ برگ: ورقه‌ای عمود بر صفحه روی لبهٔ آزاد.
   درست وقتی برگ به ۹۰ درجه می‌رسد رو به بیننده می‌شود و نمی‌گذارد
   کاغذ لحظه‌ای کامل ناپدید شود. */
.hf-leaf::after{
  content:'';position:absolute;left:0;top:0;width:2.5px;height:100%;
  transform-origin:left center;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#E8E3D8,#CFC9BB 60%,#A9A496);
  opacity:calc(var(--pe,0) * .8);pointer-events:none;
}
.hf-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--hf-paper);color:var(--hf-ink);overflow:hidden;
}
.hf-face.back{transform:rotateY(180deg)}

/* ---------- نورپردازی برگ ----------
   مقدارهای --sh (سایه) و --gl (برقِ لبه) و --cl (خمیدگی) را جاوااسکریپت
   در هر فریم می‌نویسد، پس نور دقیقاً با زاویهٔ چرخش کاغذ جلو می‌رود. */
.hf-shade{
  position:absolute;inset:0;pointer-events:none;z-index:40;
  opacity:var(--sh,0);
  background:
    linear-gradient(270deg,rgba(5,9,16,.86),rgba(5,9,16,.30) 30%,rgba(5,9,16,.09) 58%,rgba(5,9,16,.03) 82%),
    linear-gradient(rgba(5,9,16,.14),rgba(5,9,16,.14));
}
.hf-face.back .hf-shade{background:
  linear-gradient(90deg,rgba(5,9,16,.86),rgba(5,9,16,.30) 30%,rgba(5,9,16,.09) 58%,rgba(5,9,16,.03) 82%),
  linear-gradient(rgba(5,9,16,.14),rgba(5,9,16,.14))}

/* خمیدگی کاغذ: نوارِ روشن و تاریکِ استوانه‌ای که با چرخش پررنگ می‌شود */
.hf-face::before{
  content:'';position:absolute;inset:0;z-index:38;pointer-events:none;
  opacity:calc(var(--cl,0) * .9);
  background:linear-gradient(to left,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 14%,
    rgba(0,0,0,0) 34%,
    rgba(0,0,0,.10) 62%,
    rgba(0,0,0,.20) 100%);
}
.hf-face.back::before{background:linear-gradient(to right,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 14%,
    rgba(0,0,0,0) 34%,
    rgba(0,0,0,.10) 62%,
    rgba(0,0,0,.20) 100%)}

/* برقِ لبهٔ آزاد */
.hf-face::after{
  content:'';position:absolute;top:0;bottom:0;inset-inline-end:0;width:30px;z-index:39;
  pointer-events:none;opacity:var(--gl,0);
  background:linear-gradient(to left,rgba(255,255,255,.6),transparent);
}

/* سایهٔ افتاده روی صفحهٔ زیرین */
.hf-cast{
  position:absolute;top:0;bottom:0;width:var(--pw);z-index:55;pointer-events:none;opacity:0;
  transform:translateZ(.3px);
  background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.14) 26%,transparent 64%);
}
.hf-cast.r{right:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.14) 26%,transparent 64%)}
.hf-cast.l{left:0}

/* ضخامت برگ‌ها */
.hf-edge{
  position:absolute;top:9px;bottom:9px;width:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg,#F1EEE6 0 1.4px,#C9C4B6 1.4px 3px);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.hf-edge.r{right:calc(-1 * var(--er,0px));width:var(--er,0px)}
.hf-edge.l{left:calc(-1 * var(--el,0px));width:var(--el,0px)}

/* ---------- محتوای صفحه ---------- */
.hf-pgin{
  position:relative;height:100%;max-height:100%;overflow:hidden;
  display:flex;flex-direction:column;padding:clamp(13px,1.7vw,20px);
}
.hf-pgin::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(270deg,rgba(0,0,0,.05),transparent 12%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px);
}
.hf-page.R .hf-pgin::before,.hf-face.back .hf-pgin::before{background:
    linear-gradient(90deg,rgba(0,0,0,.05),transparent 12%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px)}
.hf-pgtop{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.22em;
  font-weight:800;color:var(--hf-stone);padding-bottom:9px;border-bottom:1px solid var(--hf-line);
  position:relative;z-index:2;
}
.hf-pgtop .folio{margin-inline-start:auto;color:var(--hf-secondary-dark);letter-spacing:.06em;font-size:11px}
.hf-plate{
  flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:10px 0 12px;position:relative;z-index:2;
}
.hf-plate img{
  max-height:100%;width:auto;max-width:92%;
  box-shadow:0 18px 34px -14px rgba(15,22,34,.5), 0 0 0 1px rgba(15,22,34,.14);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.hf-plate:hover img{transform:scale(1.035) translateY(-4px)}
.hf-plate-sw{
  position:absolute;top:10px;inset-inline-start:0;width:15px;height:15px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(15,22,34,.2);
}
.hf-pgname{
  flex:0 0 auto;font-size:clamp(19px,2.3vw,27px);font-weight:900;letter-spacing:-.035em;line-height:1.55;
  margin:0;position:relative;z-index:2;color:var(--hf-ink);
}
.hf-pgrule{flex:0 0 auto;height:2px;background:var(--hf-secondary);width:38px;margin:4px 0 8px;position:relative;z-index:2}
.hf-pgsub{flex:0 0 auto;font-size:11.5px;color:var(--hf-stone);font-weight:600;line-height:1.75;position:relative;z-index:2}
.hf-pgsub-2{display:block;color:var(--hf-soft);font-weight:500}
.hf-pgspecs{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:8px 0 0;font-size:11px;position:relative;z-index:2;flex:0 0 auto}
.hf-pgspecs>div{display:flex;gap:7px;padding:3.5px 0;border-bottom:1px solid var(--hf-line)}
.hf-pgspecs s{text-decoration:none;color:var(--hf-soft)}
.hf-pgspecs b{font-weight:700;margin-inline-start:auto}
.hf-pgbuy{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;
  border-top:1.5px solid var(--hf-ink);position:relative;z-index:2;
}
.hf-pgbuy b{font-size:clamp(15px,1.9vw,20px);font-weight:900;letter-spacing:-.03em}
.hf-pgbuy s{text-decoration:none;font-size:10.5px;color:var(--hf-stone)}
.hf-pgcta{
  margin-inline-start:auto;background:var(--hf-ink);color:var(--hf-paper);
  padding:8px 16px;font-size:11.5px;font-weight:800;transition:.18s;text-decoration:none;
}
.hf-pgcta:hover{background:var(--hf-secondary);color:#3A2A05}
.hf-pgend{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;gap:6px;position:relative;z-index:2;
}
.hf-pgend .m{width:46px;height:46px;background:var(--hf-primary);color:var(--hf-secondary);
  display:grid;place-items:center;font-size:19px;font-weight:900;margin-bottom:10px}
.hf-pgend h4{margin:0;font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--hf-ink)}
.hf-pgend p{margin:6px 0 16px;font-size:12.5px;color:var(--hf-stone);line-height:1.95;max-width:26ch}

/* ---------- کنترل‌ها ---------- */
.hf-book-ui{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:44px;flex-wrap:wrap}
.hf-book-ui .nav-btn{
  width:50px;height:50px;border:1px solid rgba(255,255,255,.24);color:#E9ECF3;background:none;
  display:grid;place-items:center;font-size:19px;transition:.2s;cursor:pointer;
}
.hf-book-ui .nav-btn:hover:not(:disabled){background:var(--hf-secondary);border-color:var(--hf-secondary);color:#2E2003}
.hf-book-ui .nav-btn:disabled{opacity:.28;cursor:default}
.hf-book-ui .fs-btn{margin-inline-start:4px}
.hf-meter{width:min(300px,44vw)}
.hf-meter .t{display:flex;justify-content:space-between;font-size:11.5px;color:#94A0B6;font-weight:700;margin-bottom:7px}
.hf-meter .t b{color:var(--hf-secondary)}
.hf-meter .rail{height:2px;background:rgba(255,255,255,.16);position:relative}
.hf-meter .rail i{position:absolute;inset:0 auto 0 0;background:var(--hf-secondary);width:20%;
  transition:width .6s cubic-bezier(.3,.8,.3,1)}
.hf-book-hint{text-align:center;font-size:11.5px;color:#7C88A0;margin-top:16px;position:relative;z-index:3}
.hf-book-hint kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:1px 7px;font-size:10.5px;font-family:inherit;margin:0 2px}
.hf-thumbs{position:relative;z-index:3;display:flex;gap:5px;justify-content:center;
  margin-top:22px;flex-wrap:wrap;padding:0 30px}
.hf-thumbs button{width:26px;height:34px;background:rgba(255,255,255,.09);transition:.2s;
  border:1px solid transparent;cursor:pointer}
.hf-thumbs button:hover{background:rgba(255,255,255,.2)}
.hf-thumbs button.on{background:var(--hf-secondary)}

/* ---------- موبایل: تک‌صفحه ---------- */
@media(max-width:820px){
  .hf-stage{padding:6px 16px 0;perspective:1500px}
  .hf-book{--pw:min(86vw,346px);--ph:calc(var(--pw) * 1.42);width:var(--pw)}
  .hf-book::after{display:none}
  .hf-book::before{left:-2%;right:-2%}
  .hf-page.R,.hf-page.L{left:0;right:auto;width:var(--pw)}
  .hf-face.back{display:none}
  .hf-edge.l{display:none}
  .hf-exh-hd{padding:0 16px}
  .hf-exh-pick{margin-inline-start:0;width:100%}
  .hf-book-ui{gap:12px;margin-top:34px}
  .hf-thumbs{display:none}
}


/* ==========================================================================
   تمام‌صفحه
   ========================================================================== */
body.hf-fs-lock{overflow:hidden}

.hf-exh:fullscreen{width:100%;height:100%;overflow-y:auto}
.hf-exh:-webkit-full-screen{width:100%;height:100%;overflow-y:auto}

.hf-exh.is-fs{
  position:fixed;inset:0;z-index:2000;width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:16px 0 20px;
}
.hf-exh.is-fs .hf-exh-hd{margin-bottom:12px;align-items:center}
.hf-exh.is-fs .hf-exh-hd h1{font-size:clamp(17px,2vw,25px);margin-top:2px}
.hf-exh.is-fs .hf-exh-hd p{display:none}
.hf-exh.is-fs .hf-book-hint{display:none}
.hf-exh.is-fs .hf-stage{padding-top:0}
.hf-exh.is-fs .hf-book{
  --pw:min(38vw, calc((100vh - 210px) / 1.46));
}
.hf-exh.is-fs .hf-book-ui{margin-top:30px}
.hf-exh.is-fs .hf-thumbs{margin-top:14px}

@media(max-width:820px){
  .hf-exh.is-fs{padding:10px 0 14px}
  .hf-exh.is-fs .hf-exh-hd{display:none}
  .hf-exh.is-fs .hf-book{--pw:min(92vw, calc((100vh - 150px) / 1.42))}
  .hf-exh.is-fs .hf-book-ui{margin-top:20px}
}

/* احترام به تنظیم «کاهش حرکت» */
@media(prefers-reduced-motion:reduce){
  .hf-plate img{transition:none}
}