/* --- IKL Photography Cinematic Gold Sidebar --- */
:root {
  --bg-top:#1a1a1a;
  --bg-bottom:#2a2a2a;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --accent:#d4af37;
  --card:#1f1f1f;
  --radius:16px;
}
/* --- Logo styling --- */
.site-header {
  text-align: center;
  padding-top: 20px;
}
.site-logo {
  border-radius: 12px;
  background-color: #000;
  box-shadow: 0 0 20px rgba(212,175,55,0.25);
  transition: transform 1.5s ease, box-shadow 1.5s ease;
}
.site-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(212,175,55,0.45);
}

/* --- global cinematic background --- */
html,body{
  margin:0;
  padding:0;
  height:100%;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* --- gold progress bar loader --- */
.progress{
  position:fixed;
  top:0;left:0;
  height:4px;
  width:0%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  z-index:1000;
  transition:width .25s ease-out;
}
#loader{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:#000;
  z-index:999;
  transition:opacity .8s ease;
}
#loader.done{opacity:0;pointer-events:none;}

/* --- typography --- */
h1.brand{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(26px,4vw,40px);
  margin:0;
  color:var(--accent);
}
p.tagline{
  color:var(--muted);
  font-family:'Playfair Display',serif;
  margin-top:4px;
}
.container{max-width:1200px;margin:0 auto;padding:24px;}

/* --- sidebar layout --- */
.gallery-layout{display:flex;gap:24px;align-items:flex-start;}
.category-sidebar{
  width:200px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  position:sticky;
  top:16px;
}
.category-sidebar ul{list-style:none;padding:0;margin:0;}
.category-sidebar li{margin:6px 0;}
.category-sidebar button{
  background:none;border:none;
  color:var(--muted);
  cursor:pointer;font-weight:600;
  transition:color .2s ease;
}
.category-sidebar button:hover,
.category-sidebar button.active{color:var(--accent);}
.menu-toggle{
  display:none;
  background:var(--accent);
  color:#111;
  border:none;
  width:100%;
  border-radius:8px;
  padding:8px;
  font-weight:700;
  margin-bottom:8px;
}

/* --- masonry cards --- */
.masonry{column-width:320px;column-gap:16px;}
.masonry-item{break-inside:avoid;margin-bottom:16px;display:block;}
.card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition:transform .3s ease;
}
.card:hover{transform:translateY(-3px);}
.thumb{width:100%;display:block;transition:transform .4s ease,filter .4s ease;}
.card:hover .thumb{transform:scale(1.05);filter:brightness(1.1);}
.caption{padding:10px;color:var(--muted);font-size:14px;text-align:center;}
footer{border-top:1px solid rgba(255,255,255,.06);text-align:center;padding:24px;color:var(--muted);}

/* --- mobile sidebar collapse --- */
@media(max-width:800px){
  .gallery-layout{flex-direction:column;}
  .category-sidebar{width:100%;}
  .menu-toggle{display:block;}
  .category-sidebar ul{display:none;}
  .category-sidebar.open ul{display:block;margin-top:8px;}
}
/* --- Cinematic fade-in reveal animation --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal.loaded {
  opacity: 1;
  transform: translateY(0);
}