/* ============================================================
   SIDEBAR LAYOUT — Shared CSS for all sidebar templates
   ============================================================ */

body { background: #f7f3ed; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
.sidebar-layout { display: flex; }

/* ---------- MOBILE BAR ---------- */
.mobile-bar { display:none; position:fixed; top:0; left:0; right:0; z-index:100; background:#f7f3ed; padding:10px 16px; align-items:center; justify-content:space-between; border-bottom:1px solid #e0e0e0; }
.mobile-hamburger { font-size:22px; background:none; border:none; cursor:pointer; color:#1a1a1a; padding:0; line-height:1; }
.mobile-logo { font-family:'Cormorant Garamond','Times New Roman',serif; font-size:18px; font-weight:500; letter-spacing:3px; color:#1a1a1a; text-decoration:none; }

/* ---------- SIDEBAR ---------- */
.sidebar { width:250px; min-width:250px; height:100vh; position:sticky; top:0; background:#f7f3ed; padding:48px 36px 20px; display:flex; flex-direction:column; border-right:1px solid #e0e0e0; z-index:50; overflow-y:auto; }
.sidebar-overlay { display:none; }
.sidebar-close { display:none; }
.sidebar-logo { font-family:'Cormorant Garamond','Times New Roman',serif; font-size:22px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:#1a1a1a; margin-bottom:36px; white-space:nowrap; text-decoration:none; display:block; }

.sidebar-nav { display:flex; flex-direction:column; gap:20px; padding-bottom:32px; border-bottom:1px solid #e8e5e0; }
.sidebar-nav__link { font-family:'Cormorant Garamond','Times New Roman',serif; font-size:15px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#888; text-decoration:none; transition:color .2s ease; line-height:1; }
.sidebar-nav__link:hover, .sidebar-nav__link--active { color:#1a1a1a; }

.sidebar-social { display:flex; gap:14px; padding-top:18px; }
.sidebar-social__link { color:#bbb; font-size:13px; text-decoration:none; transition:color .2s ease; }
.sidebar-social__link:hover { color:#666; }

/* ---------- GALLERY MAIN ---------- */
.gallery-main { flex:1; padding:48px 36px 40px 28px; animation: pageIn .5s cubic-bezier(.22,.61,.36,1) both; }

@keyframes pageIn {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
.gallery-main.page-exit { opacity:0; transition:opacity .25s ease; }

/* SECTION LABEL */
.section-label { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.section-label-text { font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:#1a1a1a; white-space:nowrap; margin:0; }
@media(max-width:768px){
  .section-label-text { white-space:normal; letter-spacing:3px; font-size:11px; }
}
.section-label-line { flex:1; height:1px; background:#e0e0e0; }

/* BACK TO TOP */
.back-to-top { position:fixed; bottom:32px; right:32px; width:38px; height:38px; border-radius:50%; border:1px solid #d0d0d0; background:rgba(247,243,237,0.9); color:#999; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:60; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease,transform .3s ease; transform:translateY(8px); }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { color:#1a1a1a; border-color:#aaa; }

/* ===== STAGGERED REVEAL ===== */
.koi-reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.koi-reveal--active { opacity:1; transform:translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .sidebar { width:210px; min-width:210px; padding:36px 24px 28px; }
  .gallery-main { padding:0 16px 40px; }
}
@media (max-width: 768px) {
  .sidebar { display:none; }
  .mobile-bar { display:flex; }
  .sidebar.open { display:flex; position:fixed; top:0; left:0; bottom:0; width:280px; z-index:200; padding:48px 28px 32px; border-right:1px solid #e0e0e0; box-shadow:4px 0 20px rgba(0,0,0,0.08); animation:slideIn .25s ease; background:#f7f3ed; }
  .sidebar.open .sidebar-close { display:block; position:absolute; top:16px; right:20px; font-size:24px; background:none; border:none; cursor:pointer; color:#999; line-height:1; }
  .sidebar-overlay.active { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:150; }
  @keyframes slideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }
  .gallery-main { padding:70px 12px 24px; }
}