:root{
  --fg:#f4f4f8;
  --muted:#aab0c0;
  --accent:#9b7bff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#05060a;
  color:var(--fg);
  font-family:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;}
#scene-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 38%, rgba(5,6,10,0.78) 100%);
}

#progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#6c4bff,#ff5da2,#ffb24b);
  z-index:50;box-shadow:0 0 12px rgba(155,123,255,.8);
}

header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 38px;mix-blend-mode:difference;
}
.brand{font-weight:700;letter-spacing:.5px;font-size:17px;}
.brand span{color:var(--accent);}
.topright{font-size:13px;opacity:.85;display:flex;gap:18px;align-items:center;}
.topright a{color:var(--fg);text-decoration:none;}
.topright .counter{font-variant-numeric:tabular-nums;opacity:.6;}

/* bottom prev/next nav */
#nav{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:45;display:flex;align-items:center;gap:18px;
  padding:10px 18px;border-radius:40px;
  background:rgba(15,16,26,.55);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);font-size:13px;
}
#nav a{color:var(--fg);text-decoration:none;opacity:.85;transition:opacity .2s;}
#nav a:hover{opacity:1;}
#nav .title{color:var(--accent);font-weight:600;}
#nav .sep{opacity:.25;}

main{position:relative;z-index:2;}
section{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;position:relative;
}
section.right{align-items:flex-end;text-align:right;}
section.center{align-items:center;text-align:center;}

.eyebrow{
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
h1{font-size:clamp(36px,6.5vw,82px);line-height:1.04;font-weight:800;max-width:15ch;letter-spacing:-1.5px;}
section.center h1{max-width:20ch;}
h2{font-size:clamp(30px,5vw,62px);line-height:1.08;font-weight:800;max-width:16ch;letter-spacing:-1px;}
.sub{margin-top:24px;font-size:clamp(16px,1.5vw,21px);line-height:1.6;color:var(--muted);max-width:46ch;}
section.right .sub{margin-left:auto;}

.cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;}
section.center .cta{justify-content:center;}
section.right .cta{justify-content:flex-end;}
.btn{display:inline-block;padding:15px 30px;border-radius:40px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .25s ease;}
.btn-primary{background:linear-gradient(135deg,#6c4bff,#ff5da2);color:#fff;box-shadow:0 10px 40px rgba(108,75,255,.45);}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:var(--fg);}
.btn:hover{transform:translateY(-3px);}
.trust{margin-top:28px;font-size:13px;color:#7d8398;letter-spacing:.4px;}

.hint{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#7d8398;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:bob 2s ease-in-out infinite;
}
.hint .mouse{width:22px;height:36px;border:2px solid #565c70;border-radius:12px;position:relative;}
.hint .mouse::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:#9aa0b4;animation:wheel 2s infinite;}
@keyframes wheel{0%{opacity:1;top:7px}70%{opacity:0;top:16px}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

.reveal{opacity:0;transform:translateY(40px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease;}
.reveal.visible{opacity:1;transform:none;filter:blur(0);}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}

footer{position:relative;z-index:2;text-align:center;padding:60px 20px 90px;color:#5b6175;font-size:13px;}

/* ---------- gallery ---------- */
.gallery-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:120px 28px 80px;}
.gallery-head{text-align:center;margin-bottom:54px;}
.gallery-head h1{font-size:clamp(34px,5vw,60px);margin:0 auto;max-width:18ch;}
.gallery-head p{margin-top:18px;color:var(--muted);font-size:17px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}
.gcard{
  position:relative;display:block;text-decoration:none;color:var(--fg);
  border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .3s ease,box-shadow .3s ease;
}
.gcard:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.gcard .thumb{position:absolute;inset:0;background-size:200% 200%;animation:flow 8s ease infinite;}
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gcard .meta{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(5,6,10,.85));}
.gcard .num{font-size:12px;letter-spacing:2px;opacity:.7;}
.gcard .name{font-size:20px;font-weight:700;margin-top:4px;}
.gcard .desc{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;}

@media(max-width:720px){
  section{padding:0 7vw;}
  header{padding:16px 20px;}
  .topright a.navlink{display:none;}
}