#page-gallery{background:linear-gradient(135deg,#fff5f8,#ffe0ec);}
#page-gallery h1{margin-bottom:25px;color:#ff2d75;}
#page-gallery .album{background:transparent;width:300px;text-align:center;}

#page-gallery .book-wrap{perspective:1300px;width:280px;height:340px;margin:auto;}

#page-gallery .page-leaf{
  position:relative;width:100%;height:100%;background:white;border-radius:6px;
  box-shadow:0 15px 35px rgba(0,0,0,.2);padding:16px;
  display:flex;flex-direction:column;align-items:center;
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .34s ease, opacity .34s ease;
}
#page-gallery .page-leaf.no-transition{transition:none !important;}

/* the curl/shadow overlay that sells the "turning" feel */
#page-gallery .page-leaf::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.35), transparent 40%);
  opacity:0;transition:opacity .34s;
}
#page-gallery .page-leaf.exit-prev::after{background:linear-gradient(270deg, rgba(0,0,0,.35), transparent 40%);}
#page-gallery .page-leaf.exit-next::after,
#page-gallery .page-leaf.exit-prev::after{opacity:1;}

/* going forward: page pivots on its right edge and swings away to the left */
#page-gallery .page-leaf.exit-next{transform-origin:right center;transform:rotateY(-92deg);opacity:.35;}
/* going back: page pivots on its left edge and swings away to the right */
#page-gallery .page-leaf.exit-prev{transform-origin:left center;transform:rotateY(92deg);opacity:.35;}

/* the new page starts edge-on from the opposite side, then settles flat */
#page-gallery .page-leaf.enter-next-start{transform-origin:left center;transform:rotateY(92deg);opacity:.35;}
#page-gallery .page-leaf.enter-prev-start{transform-origin:right center;transform:rotateY(-92deg);opacity:.35;}
#page-gallery .page-leaf.enter-settle{transform:rotateY(0deg);opacity:1;}

#page-gallery #galleryPhoto{width:100%;height:250px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:60px;overflow:hidden;margin-bottom:12px;transition:background .3s;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent;}
#page-gallery #galleryPhoto img{width:100%;height:100%;object-fit:cover;display:block;}
#page-gallery #galleryPhoto.locked{cursor:pointer;color:white;font-size:40px;}
#page-gallery .page-caption{font-size:15px;color:#555;font-style:italic;text-align:center;margin:0;}

#page-gallery .hold-ring{position:relative;width:70px;height:70px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}
#page-gallery .hold-fill{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#ffd447,#ff8fb3);
  transform:scale(0);transform-origin:center;pointer-events:none;}
#page-gallery .lock-icon{position:relative;z-index:1;pointer-events:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}

#page-gallery #galleryPageNum{margin:14px;font-weight:bold;color:#ff2d75;}
#page-gallery .buttons{display:flex;justify-content:space-between;margin-top:6px;}
#page-gallery button{width:70px;height:45px;border:none;border-radius:15px;background:#ff4d88;color:white;font-size:22px;cursor:pointer;transition:.3s;}
#page-gallery button:hover{transform:scale(1.08);}

@media (max-width: 480px){
  #page-gallery .book-wrap{width:230px;height:290px;}
  #page-gallery #galleryPhoto{height:200px;}
}

/* Premium responsive */
*{box-sizing:border-box}img,video{max-width:100%;height:auto}body{overflow-x:hidden}
.container{width:min(92%,1100px);margin:auto}
h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:clamp(1.5rem,4vw,3rem)}p{font-size:clamp(1rem,2vw,1.1rem)}
button,.btn{min-height:48px;padding:.8rem 1.4rem;border-radius:14px}
@media(max-width:768px){section{padding:60px 16px}}
