*{
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}

img{
pointer-events:auto;
user-select:none;
-webkit-user-drag:none;
}

body{
margin:0;
background:#111;
font-family:Arial, sans-serif;
text-align:center;
overflow:auto;
overscroll-behavior:none;
}

/* viewer fits screen height */

#viewer{
position:relative;
width:100%;
max-height:calc(100vh - 140px);
max-width:900px;
margin:auto;
padding:0 8px;
box-sizing:border-box;
height:auto;
display:flex;
align-items:center;
justify-content:center;

contain: layout paint;

line-height:0;
overflow:hidden;

transform-origin:center center;
will-change:transform;
touch-action:none; /* required for pinch zoom */

}

#pageNumber{
position:fixed;
bottom:calc(10px + env(safe-area-inset-bottom));
right:calc(20px + env(safe-area-inset-right));
background:black;
color:white;
padding:6px 10px;
font-size:14px;
border-radius:4px;
opacity:.7;
pointer-events:none;
z-index:999;
}

/* page number overlay */

/* PAGE IMAGE */

#slideImage{
width:100%;
max-width:900px;
height:auto;
display:block;
max-height:calc(100vh - 160px);
object-fit:contain;

contain: layout paint;
will-change: transform;
position:relative;

transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .25s ease;

image-rendering:auto;
image-rendering:-webkit-optimize-contrast;

-webkit-user-select:none;
user-select:none;
pointer-events:auto;

backface-visibility:hidden;
transform:translateZ(0);


border:2px solid white;

transform-style:preserve-3d;
perspective:1200px;

box-shadow:
0 0 20px rgba(0,0,0,0.4),
inset -8px 0 20px rgba(0,0,0,0.2);

filter:blur(10px);
transition:filter .35s ease;
}

#slideImage.loaded{
filter:blur(0px);
}

/* HOTSPOT LAYER */

#hotspotLayer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

pointer-events:auto;
z-index:20;
transform-origin:center center;
will-change:transform;
}


/* HOTSPOTS */

.hotspot{
position:absolute;
cursor:pointer;
z-index:10;
outline:2px solid transparent;
transition:outline .15s ease;
min-width:40px;
min-height:40px;
display:flex;
align-items:center;
justify-content:center;

pointer-events:auto;

/* DEBUG VISIBILITY */
border:0;
background:transparent;

transition:border .15s ease;

transform:translateZ(0);
will-change:transform;
backface-visibility:hidden;
}

.hotspot:hover{
outline:4px solid rgba(0,255,255,0.5);
}

/* navigation */

#navBar{
margin:10px;
}

#navBar button{
padding:10px 20px;
font-size:16px;
cursor:pointer;
}

/* filmstrip */

#thumbBar{
position:sticky;
bottom:0;
z-index:500;
width:900px;
max-width:100vw;
margin:10px auto;
white-space:nowrap;
overflow-x:auto;
padding:8px;
text-align:center;
background:#222;
scroll-behavior:smooth;
}

#thumbBar img{
height:70px;
margin:4px;
border:2px solid #333;
cursor:pointer;
border-radius:6px;
border:2px solid transparent;
display:inline-block;
content-visibility:auto;
contain-intrinsic-size:100px;
transition:transform .15s ease, border-color .15s ease;
}

#thumbBar img:hover{
transform:scale(1.08);
border-color:#aaa;
}

.videoClose{
position:absolute;
top:20px;
right:20px;
font-size:32px;
color:white;
cursor:pointer;
z-index:99999999;
}

/* video popup */

#videoPopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.72);
backdrop-filter:blur(18px);

display:flex;
align-items:center;
justify-content:center;

z-index:9999999;
}

#videoPopup.hidden{
display:none;
}

#videoContainer iframe{
width:80vw;
height:45vw;
border:none;
}

.container{
display:flex;
gap:20px;
padding:20px;
height:100vh;
box-sizing:border-box;
}

/* IMAGE POPUP */

.imagePopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.72);
backdrop-filter:blur(18px);

display:flex;
align-items:center;
justify-content:center;

z-index:999999;
}

.imagePopup img{
max-width:90%;
max-height:90%;
border-radius:6px;

box-shadow:0 0 20px rgba(0,0,0,0.8);
}


/* GALLERY POPUP */

.galleryPopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.72);
backdrop-filter:blur(18px);

display:flex;
align-items:center;
justify-content:center;

z-index:999999;
}

.galleryPopup img{
max-width:90%;
max-height:90%;
border-radius:6px;

box-shadow:0 0 20px rgba(0,0,0,0.8);
cursor:pointer;
}

.galleryGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
width:95vw;
max-height:80vh;
max-width:900px;
overflow-y:auto;
padding:20px;
touch-action:pan-x;
}

.galleryGrid img{
width:100%;
height:auto;
height:240px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
transition:transform .20s ease;
}

.galleryGrid img:hover{
transform:scale(1.05);
}

.galleryViewer{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.9);

display:flex;
align-items:center;
justify-content:center;

z-index:999999;

}

.galleryViewer img{

max-width:95%;
max-height:95%;
user-select:none;
border-radius:6px;

box-shadow:0 0 30px rgba(0,0,0,0.8);

}


/* MOBILE */

@media (max-width:900px){

#viewer{
width:100%;

}

#thumbBar img{
height:50px;
}

.galleryGrid{
width:92vw;
max-width:92vw;
max-height:70vh;
padding:12px;
gap:10px;
}

.galleryGrid img{
height:110px;
}

.galleryPopup{
align-items:flex-start;
padding-top:6vh;
}

}

.galleryArrow{
position:fixed;
top:50%;
transform:translateY(-50%);
font-size:42px;
color:white;
background:rgba(0,0,0,0.4);
padding:12px 16px;
border-radius:6px;
cursor:pointer;
z-index:9999999;
transition:opacity .25s ease;
user-select:none;
}

.galleryArrow.left{
left:10px;
}

.galleryArrow.right{
right:10px;
}