:root{
  --ink:#f2ece0;
  --ink-dim:#b9b1a3;
  --gold:#c9a227;
  --bg:#06070a;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* lớp không khí phủ lên canvas */
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.72) 100%)}
#grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* các section chữ */
#scroll{position:relative;z-index:3;pointer-events:none}
.sec{height:100vh;display:flex;align-items:center;pointer-events:none;padding:0 clamp(1.5rem,7vw,9rem)}
.sec .box{max-width:30rem;opacity:0;transform:translateY(28px);padding:1.6rem 2rem;
  background:radial-gradient(ellipse at center,rgba(4,5,8,.74) 0%,rgba(4,5,8,.4) 58%,rgba(4,5,8,0) 82%);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.sec.active .box{opacity:1;transform:none}
.sec.right{justify-content:flex-end;text-align:right;padding-right:clamp(4rem,11vw,13rem)}
.sec.center{justify-content:center;text-align:center}
.sec.bottom{align-items:flex-end;padding-bottom:clamp(3rem,12vh,8rem)}
.sec.center .box{padding:2.4rem 3rem;
  background:radial-gradient(ellipse at center,rgba(4,5,8,.78) 0%,rgba(4,5,8,.45) 55%,rgba(4,5,8,0) 78%)}
.sec .eyebrow{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem}
.sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.12;margin:0 0 1rem;text-shadow:0 2px 30px rgba(0,0,0,.9)}
.sec p.body{font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.75;color:var(--ink-dim);
  margin:0;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.sec .rule{width:3.2rem;height:1px;background:var(--gold);margin:1.4rem 0;opacity:.8}
.sec.right .rule{margin-left:auto}
.sec.center .rule{margin-inline:auto}

/* điều hướng phòng */
#rooms{position:fixed;right:clamp(.9rem,2.2vw,2rem);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:.9rem;opacity:0;transition:opacity .6s}
#rooms.show{opacity:1}
#rooms button{all:unset;cursor:pointer;display:flex;align-items:center;gap:.7rem;
  justify-content:flex-end;color:var(--ink-dim);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.45;transition:opacity .35s,color .35s}
#rooms button:hover,#rooms button.on{opacity:1;color:var(--ink)}
#rooms .dot{width:7px;height:7px;border:1px solid currentColor;border-radius:50%;flex:0 0 auto}
#rooms button.on .dot{background:var(--gold);border-color:var(--gold)}
#rooms .label{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s}
#rooms button:hover .label,#rooms button.on .label{max-width:14rem}

#progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:7;background:rgba(255,255,255,.06)}
#progress span{display:block;height:100%;width:0;background:var(--gold);transform-origin:left}

#totop{position:fixed;left:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,3vh,2.2rem);z-index:7;
  all:unset;cursor:pointer;display:flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;border:1px solid rgba(255,255,255,.18);border-radius:2rem;
  background:rgba(10,9,7,.55);backdrop-filter:blur(8px);
  color:var(--ink-dim);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.45s}
#totop.show{opacity:.8;transform:none;pointer-events:auto}
#totop:hover{opacity:1;color:var(--ink);border-color:rgba(255,255,255,.4)}
#totop .arrow{color:var(--gold);font-size:.9rem;line-height:1}
body.focusing #totop{opacity:0!important;pointer-events:none}
@media (max-width:780px){#totop .txt{display:none}#totop{padding:.7rem .85rem}}

/* chế độ xem gần */
#focus{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .5s}
#focus.on{opacity:1;pointer-events:auto}
#focus::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,8,.94) 0%,rgba(4,5,8,.7) 14%,rgba(4,5,8,0) 34%)}
#focus-info{position:absolute;left:50%;bottom:clamp(2rem,7vh,5rem);transform:translateX(-50%);
  text-align:center;max-width:min(46rem,86vw)}
#focus-info .year{font-size:.74rem;letter-spacing:.42em;color:var(--gold);margin:0 0 .9rem}
#focus-info .caption{color:var(--ink);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.75;margin:0;
  text-shadow:0 1px 14px rgba(0,0,0,.9)}
#focus-hint{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);opacity:.55;margin:0}
#focus-close{position:absolute;top:1.2rem;right:1.4rem;all:unset;cursor:pointer;
  font-size:2rem;line-height:1;color:var(--ink-dim);padding:.4rem .8rem}
#focus-close:hover{color:var(--ink)}

/* gợi ý cuộn */
#hint{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:6;
  text-align:center;opacity:0;transition:opacity .8s;pointer-events:none}
#hint.show{opacity:.75}
#hint p{margin:.7rem 0 0;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
#hint .wheel{display:block;width:20px;height:32px;margin:0 auto;border:1px solid var(--ink-dim);border-radius:11px;position:relative}
#hint .wheel::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;
  background:var(--gold);border-radius:1px;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* màn chờ */
#loader{position:fixed;inset:0;z-index:20;background:#04050899;backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;transition:opacity .9s}
#loader.gone{opacity:0;pointer-events:none}
#loader .inner{text-align:center;padding:2rem;max-width:34rem}
#loader .eyebrow{font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin:0 0 1.4rem}
#loader h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,6vw,4rem);margin:0 0 1rem;line-height:1.1}
#loader .sub{color:var(--ink-dim);margin:0 0 2.4rem;line-height:1.7}
#loader .bar{width:min(22rem,70vw);height:1px;background:rgba(255,255,255,.14);margin:0 auto 2rem}
#loader .bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
#enter{all:unset;cursor:pointer;border:1px solid rgba(255,255,255,.28);padding:.85rem 2.4rem;
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);transition:.35s}
#enter:disabled{opacity:.4;cursor:default}
#enter:not(:disabled):hover{background:var(--ink);color:#0a0a0c;border-color:var(--ink)}
#loader.failed .sub{color:#e0a3a3;max-width:26rem;margin-inline:auto}
#loader.failed .bar{display:none}

body.museum{touch-action:none;overscroll-behavior:none}
body.focusing #rooms,body.focusing #hint{opacity:0!important}
body.grabbing #gl{cursor:zoom-in}

@media (max-width:780px){
  .sec{padding:0 1.4rem}
  .sec .box{max-width:none}
  #rooms{right:.6rem}
  #rooms .label{display:none}
}
@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
  #hint .wheel::after{animation:none}
}