/* THE WORLD IS YOURS — index + watch (B+A hybrid) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0c; --ink:#eae7de; --dim:#b9b6ad; --sub:#7d7a73; --faint:#55534e;
  --amber:#e8a33d; --line:#1d1d22;
  --serif:Georgia,'Songti SC','Noto Serif SC',serif;
  --sans:-apple-system,'Helvetica Neue','PingFang SC',sans-serif;
}
html{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;min-height:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}
::selection{background:var(--amber);color:#111}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:300;background:#050507;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:opacity 1.4s ease .2s;pointer-events:none;padding:0 20px}
body.ready #splash{opacity:0}
#splash .braille{font-size:clamp(12px,1.8vw,17px);letter-spacing:.5em;color:var(--sub);margin:.8em 0}
#splash .h1{font-weight:200;font-size:clamp(24px,5vw,50px);letter-spacing:.3em;text-indent:.3em;
  opacity:0;animation:srise 1.6s .2s ease forwards}
#splash .h1.zh{letter-spacing:.7em;text-indent:.7em}
@keyframes srise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#splash .med{color:var(--sub);font-size:12px;letter-spacing:.18em;margin-top:2em;
  opacity:0;animation:srise 1.6s .7s ease forwards}

/* ---------- grain ---------- */
#grain{position:fixed;inset:-100px;z-index:95;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-40px,30px)}
  40%{transform:translate(30px,-50px)}60%{transform:translate(-50px,-20px)}80%{transform:translate(20px,40px)}}

/* ---------- chrome ---------- */
.chrome{position:fixed;z-index:120;font-size:11px;letter-spacing:.3em;color:var(--sub)}
.chrome button:hover,.chrome a:hover{color:var(--amber)}
#brand{top:4vh;left:5vw;color:var(--ink);letter-spacing:.26em}
#lang{top:4vh;right:5vw}
#lang .on{color:var(--ink)}
#menu{bottom:4vh;left:5vw;display:flex;gap:2.4em;flex-wrap:wrap}
#backidx{top:4vh;left:5vw;display:none;color:var(--ink)}
body.watching #brand{display:none}
body.watching #menu{display:none}
body.watching #backidx{display:block}
.chrome{opacity:0;transition:opacity 1.2s ease .3s}
body.ready .chrome{opacity:1}

/* ---------- index ---------- */
#index{max-width:1100px;margin:0 auto;padding:20vh 24px 18vh;
  transition:opacity .55s ease,transform .55s ease}
body.watching #index{opacity:0;pointer-events:none;transform:scale(.985)}
.row{display:flex;align-items:baseline;gap:2.4em;padding:.6em 0;border-bottom:1px solid var(--line);
  cursor:pointer;opacity:0;transform:translateY(16px)}
body.ready .row{opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),padding .5s cubic-bezier(.2,.8,.2,1)}
.row .n{font-size:12px;color:var(--faint);letter-spacing:.15em;font-variant-numeric:tabular-nums;width:2.4em}
.row .ti{font-family:var(--serif);font-weight:400;font-size:clamp(25px,4.2vw,50px);
  color:var(--dim);transition:color .45s,letter-spacing .6s}
.row .dur{margin-left:auto;font-size:11px;letter-spacing:.2em;color:var(--faint)}
.row:hover{padding-left:1.2em}
.row:hover .ti{color:#f2efe6;letter-spacing:.03em}
.row.seen .n{color:var(--amber)}

/* hover preview */
#prev{position:fixed;z-index:110;width:360px;aspect-ratio:16/9;pointer-events:none;
  opacity:0;transform:scale(.94) rotate(.4deg);
  transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.65)}
#prev.on{opacity:1;transform:scale(1) rotate(0)}
#prev video{width:100%;height:100%;object-fit:cover}

/* ---------- fade curtain ---------- */
#curtain{position:fixed;inset:0;z-index:200;background:#000;opacity:0;pointer-events:none;
  transition:opacity .5s ease}
#curtain.on{opacity:1}

/* ---------- watch mode ---------- */
#watch{position:fixed;inset:0;z-index:100;background:#000;opacity:0;pointer-events:none;
  transition:opacity .6s ease;overflow:hidden}
body.watching #watch{opacity:1;pointer-events:auto}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.045);
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 1.4s cubic-bezier(.2,.6,.2,1);
  pointer-events:none}
.slide.on{opacity:1;transform:scale(1);pointer-events:auto}
.slide video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92)}
#watch .shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,transparent 34%),
             linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 22%)}
#wnum{position:absolute;top:3.5vh;right:4.5vw;font-family:var(--serif);
  font-size:clamp(64px,11vw,140px);color:rgba(234,231,222,.15);line-height:1;
  font-variant-numeric:tabular-nums;z-index:5}
#wmeta{position:absolute;left:5vw;bottom:8.5vh;z-index:5;max-width:44em}
#wmeta .t{font-size:12.5px;letter-spacing:.32em;margin-bottom:1em;text-transform:uppercase}
#wmeta .r{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.6vw,19px);
  color:#c9c6bd;line-height:1.9}
html[lang=zh] #wmeta .r{font-style:normal}
#wmeta .t,#wmeta .r{opacity:0;transform:translateY(14px);transition:opacity .9s .45s,transform .9s .45s}
#watch.settled #wmeta .t,#watch.settled #wmeta .r{opacity:1;transform:none}
#wbar{position:absolute;top:0;left:0;height:2px;background:var(--amber);z-index:6;
  transition:width .8s cubic-bezier(.4,0,.2,1)}
#whint{position:absolute;bottom:4vh;right:5vw;font-size:11px;letter-spacing:.28em;color:var(--faint);z-index:5}
#warrows{position:absolute;inset-block:0;width:100%;z-index:4}
#warrows button{position:absolute;top:0;height:100%;width:18%;color:transparent}

/* ---------- veils ---------- */
.veil{position:fixed;inset:0;z-index:150;background:rgba(5,5,7,.97);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .7s ease}
.veil.open{opacity:1;pointer-events:auto}
.veil .inner{max-width:720px;margin:0 auto;padding:16vh 28px 14vh}
.veil h2{font-weight:400;font-size:12px;letter-spacing:.36em;color:var(--amber);
  text-transform:uppercase;margin-bottom:3em}
.veil p{font-family:var(--serif);font-size:16px;color:#c8c5bc;line-height:1.95;margin-bottom:1.6em}
.veil p b{color:var(--ink)}
.veil .x{position:fixed;top:4vh;right:5vw;font-size:12px;letter-spacing:.3em;color:var(--sub)}
.veil .x:hover{color:var(--amber)}
.veil .fine{font-family:var(--sans);font-size:13px;color:var(--sub);line-height:1.9}
.veil audio{width:100%;margin:2em 0 1em;filter:invert(1) hue-rotate(180deg);opacity:.85}

#sentence .inner{display:flex;flex-direction:column;justify-content:center;min-height:100vh;
  text-align:center;padding:10vh 28px;max-width:none}
#sentence .bb{font-size:clamp(15px,2.6vw,24px);letter-spacing:.5em;color:var(--sub);margin:1em 0}
#sentence .line{font-family:var(--serif);font-size:clamp(24px,4.6vw,44px);letter-spacing:.1em;
  margin:.3em 0;color:#f6f3e8;text-shadow:0 0 18px rgba(246,243,232,.5),0 0 60px rgba(246,243,232,.22)}
#sentence .why{font-family:var(--serif);font-style:italic;color:#9b988f;max-width:36em;
  margin:3.2em auto 0;font-size:15px;line-height:2}
html[lang=zh] #sentence .why{font-style:normal}

@media(max-width:640px){
  #prev{display:none}
  #menu{gap:1.6em}
  #index{padding-top:16vh}
}

/* ---------- accessibility ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:400;background:#e8a33d;color:#0a0a0c;padding:.6em 1em;
  font-size:12px;letter-spacing:.12em;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:2px solid #e8a33d;outline-offset:3px}
.row:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #prev{display:none!important}
}