/* =========================================================
CINEMATIC GALLERY
========================================================= */

.gallery{

width:100%;

max-width:1500px;

margin:0 auto;

padding:10px 20px 40px;

column-count:3;

column-gap:20px;

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:1100px){

.gallery{

column-count:2;

column-gap:18px;

padding:10px 18px 30px;

}

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:680px){

.gallery{

column-count:2;

column-gap:12px;

padding:10px 12px 24px;

}

}

/* =========================================================
GALLERY ITEM
========================================================= */

.gallery-item{

position:relative;

overflow:hidden;

border-radius:28px;

margin-bottom:20px;

break-inside:avoid;

background:
rgba(255,255,255,.04);

backdrop-filter:blur(10px);

}

/* =========================================================
IMAGE
========================================================= */

.gallery img{

width:100%;

height:auto;

display:block;

border-radius:28px;

cursor:pointer;

background:#111;

object-fit:cover;

opacity:0;

transform:
translateY(20px)
scale(1.02);

transition:
opacity .7s ease,
transform .7s ease,
filter .5s ease,
box-shadow .5s ease;

box-shadow:
0 12px 35px rgba(0,0,0,.14);

}

/* =========================================================
IMAGE LOADED
========================================================= */

.gallery img.loaded{

opacity:1;

transform:
translateY(0)
scale(1);

}

/* =========================================================
HOVER
========================================================= */

.gallery img:hover{

transform:
translateY(-6px)
scale(1.015);

filter:
brightness(1.04)
saturate(1.05);

box-shadow:
0 25px 60px rgba(0,0,0,.24),
0 0 40px rgba(184,130,63,.16);

}

/* =========================================================
ACTIVE
========================================================= */

.gallery img:active{

transform:
scale(.985);

}

/* =========================================================
LIGHTBOX
========================================================= */

.lightbox{

position:fixed;

inset:0;

background:
rgba(0,0,0,.94);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

pointer-events:none;

transition:
opacity .35s ease;

z-index:999999;

padding:20px;

backdrop-filter:blur(10px);

}

/* =========================================================
LIGHTBOX SHOW
========================================================= */

.lightbox.show{

opacity:1;

pointer-events:auto;

}

/* =========================================================
LIGHTBOX IMAGE
========================================================= */

.lightbox-image{

max-width:95%;

max-height:90vh;

border-radius:26px;

object-fit:contain;

box-shadow:
0 25px 80px rgba(0,0,0,.55);

animation:
lightboxIn .35s ease;

}

/* =========================================================
LIGHTBOX ANIMATION
========================================================= */

@keyframes lightboxIn{

from{

transform:
scale(.92);

opacity:0;

}

to{

transform:
scale(1);

opacity:1;

}

}

/* =========================================================
CLOSE BUTTON
========================================================= */

.lightbox-close{

position:absolute;

top:22px;

right:22px;

width:54px;

height:54px;

border:none;

border-radius:50%;

background:
rgba(255,255,255,.10);

color:white;

font-size:30px;

cursor:pointer;

backdrop-filter:blur(12px);

transition:
transform .25s ease,
background .25s ease;

z-index:10;

}

/* =========================================================
CLOSE HOVER
========================================================= */

.lightbox-close:hover{

transform:scale(1.08);

background:
rgba(255,255,255,.18);

}

/* =========================================================
MOBILE LIGHTBOX
========================================================= */

@media(max-width:768px){

.lightbox{

padding:14px;

}

.lightbox-image{

max-width:100%;

max-height:82vh;

border-radius:20px;

}

.lightbox-close{

top:14px;

right:14px;

width:46px;

height:46px;

font-size:24px;

}

}

/* =========================================================
LOADING TEXT
========================================================= */

.gallery-loading{

padding:80px 20px;

text-align:center;

font-size:13px;

letter-spacing:.22em;

text-transform:uppercase;

opacity:.5;

}

/* =========================================================
PERFORMANCE
========================================================= */

.gallery img{

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

transform-style:preserve-3d;

}

/* =========================================================
MOBILE PERFORMANCE FIX
========================================================= */

@media(max-width:768px){

.gallery img{

opacity:1 !important;

transform:none !important;

transition:
filter .4s ease,
box-shadow .4s ease;

}

}