/* ============================================
   LIU · 摄影作品集
   老钱风 · 暗调 · 简约高级
   ============================================ */

/* === Design Tokens === */
:root {
  --bg: #1c1917;
  --bg-alt: #221f1c;
  --bg-card: #252220;
  --text: #e5e0d9;
  --text-dim: #9a9389;
  --text-muted: #5e5952;
  --accent: #b8975a;
  --accent-light: #d4c4a8;
  --accent-dim: #8a6f3d;
  --border: #2c2825;
  --font: 'Times New Roman', 'Songti SC', 'STSong', 'Noto Serif SC', Georgia, 'SimSun', serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  letter-spacing:.03em;
}
img{display:block;max-width:100%}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}

/* === Loader === */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s,visibility .5s;
}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{
  font-size:56px;color:var(--accent);letter-spacing:10px;
  animation:breathe 2.2s ease-in-out infinite;
}
.loader-line{width:32px;height:1px;background:var(--accent-dim);margin-top:24px;opacity:.35}
@keyframes breathe{
  0%,100%{opacity:.2;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.02)}
}

/* === Main === */
.main{opacity:0;transition:opacity .7s}
.main.visible{opacity:1}

/* === Hero === */
.hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(184,151,90,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(160,130,80,.03) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(200,170,120,.02) 0%, transparent 35%),
    var(--bg);
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(184,151,90,.25),rgba(184,151,90,.5),rgba(184,151,90,.25),transparent);
  z-index:2;
}
.hero::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,151,90,.15),transparent);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(255,255,255,.003) 80px,rgba(255,255,255,.003) 81px),
    repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.003) 80px,rgba(255,255,255,.003) 81px);
  pointer-events:none;z-index:1;opacity:.5;
}
.hero-content{position:relative;z-index:2;padding:40px 28px;max-width:680px}

/* Lens icon badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:5px;color:var(--accent);
  margin-bottom:40px;opacity:.85;
  padding:6px 20px;
  border:1px solid rgba(184,151,90,.2);
}
.hero-badge svg{opacity:.6}

.hero-title{
  font-size:clamp(36px,7vw,72px);
  font-weight:200;letter-spacing:18px;
  line-height:1.1;
  font-style:italic;
  background:linear-gradient(180deg,#d4c4a8 0%,#b8975a 30%,#8a6f3d 60%,#b8975a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 20px rgba(184,151,90,.3));
}
.hero-subtitle{
  font-size:clamp(14px,2.2vw,18px);
  color:var(--accent-light);letter-spacing:6px;
  margin-top:24px;font-style:italic;font-weight:300;
  text-shadow:0 0 30px rgba(184,151,90,.2);
}
.hero-desc{
  font-size:11px;letter-spacing:3px;
  color:var(--text-dim);margin-top:36px;line-height:2.2;
}
.hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:3px;color:var(--text-muted);
  cursor:pointer;margin-top:48px;
}
.hero-scroll svg{width:12px;height:18px}

/* === Animations === */
.animate-fade-in-up{
  opacity:0;transform:translateY(36px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.animate-fade-in-up.visible{opacity:1;transform:translateY(0)}
.animate-fade-in{opacity:0;transition:opacity .7s var(--ease)}
.animate-fade-in.visible{opacity:1}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.35s}
.delay-4{transition-delay:.5s}
.delay-5{transition-delay:.7s}

/* === Divider === */
.gold-divider{width:36px;height:1px;background:var(--accent);opacity:.3;margin:20px 0}
.gold-divider.center{margin-left:auto;margin-right:auto}

/* === Nav (single line) === */
.category-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(28,25,23,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.category-list{
  display:flex;flex-wrap:nowrap;overflow-x:auto;
  justify-content:center;gap:0;
  padding:0 16px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.category-list::-webkit-scrollbar{display:none}

.category-item{
  flex-shrink:0;
  padding:14px 18px;
  font-size:13px;letter-spacing:2px;
  color:var(--text-dim);
  white-space:nowrap;
  transition:color .25s;
  position:relative;
}
.category-item::after{
  content:'';position:absolute;bottom:10px;left:18px;right:18px;
  height:1px;background:var(--accent);
  transform:scaleX(0);transition:transform .35s var(--ease);
  opacity:.5;
}
.category-item:hover{color:var(--text)}
.category-item.active{color:var(--accent)}
.category-item.active::after{transform:scaleX(1)}

@media(max-width:640px){
  .category-list{justify-content:flex-start}
  .category-item{padding:12px 12px;font-size:12px;letter-spacing:1px}
}

/* === Gallery (Session Cards - Masonry) === */
.gallery{padding:28px 12px 96px;max-width:1600px;margin:0 auto}

.session-grid{
  position:relative;
}
@media(max-width:480px){
  .gallery{padding:12px 6px 64px}
}

.session-card{
  position:absolute;overflow:hidden;cursor:pointer;
  background:var(--bg-card);
  transition:transform .35s var(--ease),opacity .35s;
}
.session-card:hover{transform:scale(1.008)}
.session-card:active{transform:scale(.995)}

.session-card-image{
  width:100%;display:block;
  transition:transform .5s var(--ease),filter .5s;
  filter:brightness(.92);
}
.session-card:hover .session-card-image{transform:scale(1.025);filter:brightness(1)}

.session-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(28,25,23,.7) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  transition:background .4s;
}
.session-card:hover .session-card-overlay{
  background:linear-gradient(180deg,transparent 30%,rgba(28,25,23,.82) 100%);
}

.session-card-title{
  font-size:14px;letter-spacing:4px;color:#fff;font-weight:300;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.session-card-count{
  display:block;font-size:10px;letter-spacing:2px;
  color:rgba(255,255,255,.5);margin-top:3px;
}

/* === Empty === */
.gallery-empty{
  text-align:center;padding:120px 24px;
  color:var(--text-muted);font-size:13px;letter-spacing:3px;
}
.gallery-empty .text-muted{font-size:11px;margin-top:8px}

/* === Footer === */
.footer{
  text-align:center;padding:88px 24px 40px;
  border-top:1px solid var(--border);
}
.footer-brand{
  font-size:16px;letter-spacing:10px;color:var(--accent-dim);
  margin-top:24px;font-weight:300;
}
.footer-sub{
  font-size:11px;color:var(--text-dim);margin-top:6px;
  letter-spacing:2px;
}
.footer-qr{
  margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.qr-image{
  width:110px;height:110px;
}
.qr-label{
  font-size:9px;color:var(--text-muted);letter-spacing:3px;
}
.footer-copy{
  font-size:10px;color:var(--text-muted);margin-top:6px;
  letter-spacing:2px;
}

/* ============================================
   Lightbox
   ============================================ */
.lightbox{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.open{opacity:1;visibility:visible}

.lightbox-bg{position:absolute;inset:0;background:rgba(18,16,14,.98)}

.lightbox-close{
  position:absolute;top:22px;right:22px;z-index:10;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:#999;opacity:.45;transition:opacity .2s;
}
.lightbox-close:hover{opacity:1}

.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  color:#999;opacity:.35;transition:opacity .2s;
}
.lightbox-prev{left:8px}.lightbox-next{right:8px}
.lightbox-prev:hover,.lightbox-next:hover{opacity:.75}

.lightbox-image-wrap{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:72px 60px 100px;
}
.lightbox-image{
  max-width:100%;max-height:100%;object-fit:contain;
  transition:opacity .35s,transform .35s;
  user-select:none;-webkit-user-select:none;
  box-shadow:0 1px 36px rgba(0,0,0,.35);
}
.lightbox-image.switching{opacity:0;transform:scale(.96)}
@media(max-width:640px){.lightbox-image-wrap{padding:64px 36px 90px}}

.lightbox-info{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#b8b0a4;transition:opacity .4s;
}
.lightbox-counter{font-size:11px;letter-spacing:3px;opacity:.45}
.lightbox-title{font-size:11px;letter-spacing:2px}
.lightbox-session-name{font-size:13px;color:var(--accent-light);letter-spacing:3px;margin-bottom:2px}
.lightbox-category{font-size:10px;color:var(--accent);letter-spacing:2px;opacity:.6}

.lightbox-thumb-strip{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  display:flex;gap:2px;overflow-x:auto;padding:4px;justify-content:center;
  background:rgba(18,16,14,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(100%);transition:opacity .35s,transform .35s;
}
.lightbox-thumb-strip.visible{opacity:1;transform:translateY(0)}
.lightbox-thumb-strip img{
  width:40px;height:40px;object-fit:cover;
  border:1px solid transparent;cursor:pointer;
  opacity:.3;flex-shrink:0;transition:border-color .2s,opacity .2s;
}
.lightbox-thumb-strip img.active{border-color:var(--accent);opacity:1}
.lightbox-thumb-strip img:hover{opacity:.7}

@keyframes imageIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
.lightbox-image.animate-in{animation:imageIn .4s var(--ease) both}