/* ============================================================
   Album viewer — kthim faqeje (page-flip), fullscreen, bardh e zi
   ============================================================ */
.viewer{
  position:fixed;inset:0;z-index:200;background:#080808;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.viewer.open{opacity:1;visibility:visible}
body.viewer-lock{overflow:hidden}

.viewer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 26px;color:#fff;z-index:3;
}
.viewer-bar .v-title{font-family:var(--serif);font-size:1.5rem}
.viewer-bar .v-count{font-size:.72rem;letter-spacing:.26em;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.viewer-close{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;
  cursor:pointer;font-size:1.1rem;transition:.3s var(--ease);display:flex;align-items:center;justify-content:center}
.viewer-close:hover{background:#fff;color:#000}

.viewer-stage{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  perspective:1600px;overflow:hidden;padding:0 20px 24px;
}
.pageflip{
  max-width:min(92vw,900px);max-height:82vh;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);background:#111;
  transition:transform .44s var(--ease),opacity .44s var(--ease);
  will-change:transform,opacity;backface-visibility:hidden;
}
.pageflip.notrans{transition:none!important}
.pageflip.out-next{transform:rotateY(-100deg);transform-origin:left center;opacity:0}
.pageflip.in-next{transform:rotateY(100deg);transform-origin:right center;opacity:0}
.pageflip.out-prev{transform:rotateY(100deg);transform-origin:right center;opacity:0}
.pageflip.in-prev{transform:rotateY(-100deg);transform-origin:left center;opacity:0}

/* arrows */
.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.3s var(--ease);backdrop-filter:blur(4px);
}
.viewer-nav:hover{background:#fff;color:#000;border-color:#fff}
.viewer-nav.prev{left:26px}
.viewer-nav.next{right:26px}
.viewer-nav svg{width:20px;height:20px}
.viewer-nav[disabled]{opacity:.25;cursor:default}
.viewer-nav[disabled]:hover{background:rgba(0,0,0,.3);color:#fff;border-color:rgba(255,255,255,.3)}

/* thin progress */
.viewer-progress{height:2px;background:rgba(255,255,255,.15);position:relative}
.viewer-progress i{position:absolute;left:0;top:0;height:100%;background:#fff;width:0;transition:width .44s var(--ease)}

.viewer-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.45);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;z-index:4;pointer-events:none;
}

@media(max-width:760px){
  .viewer-nav{width:46px;height:46px}
  .viewer-nav.prev{left:12px}.viewer-nav.next{right:12px}
  .viewer-bar .v-title{font-size:1.2rem}
  .pageflip{max-height:74vh}
  .viewer-hint{display:none}
}