:root {
  --ink: #0F0E0D;
  --paper: #E8E3D8;
  --cinnabar: #D22F1E;
  --gold: #D8A75B;
  --cond: "Big Shoulders Display", "Noto Sans SC", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); overflow: hidden; }
body { color: var(--paper); font: 400 17px/1.6 var(--serif); -webkit-tap-highlight-color: transparent; touch-action: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 海报：视频就绪前先铺上，WebGL 不可用或减少动效时就是最终画面 */
.poster { position: fixed; inset: 0; background: var(--ink) url("media/poster-1280.jpg") 42% 45% / cover no-repeat; opacity: 0; transition: opacity .6s; }
@media (min-width: 900px) { .poster { background-image: url("media/poster-1920.jpg"); } }
@media (max-width: 899px) and (orientation: portrait) { .poster { background-image: url("media/poster-m.jpg"); background-position: center; } }
.poster.on { opacity: 1; }
#gl, #trail { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { opacity: 0; transition: opacity .3s; }
#gl.on { opacity: 1; }
#trail { pointer-events: none; }
video { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ui { position: fixed; inset: 0; pointer-events: none; }
.enter {
  position: absolute; left: 40px; bottom: 40px; pointer-events: auto;
  display: flex; align-items: stretch; text-decoration: none; color: var(--paper);
  opacity: 0; transform: translateY(12px); transition: opacity .8s .2s, transform .8s cubic-bezier(.06, .81, 0, .98) .2s;
}
.ready .enter { opacity: 1; transform: none; }
.seal { width: 14px; background: var(--cinnabar); }
.lbl { font: 900 30px/1 var(--cond); letter-spacing: .14em; padding: 14px 18px 12px; background: var(--ink); }
.go { font: 700 18px/1 var(--serif); letter-spacing: .3em; padding: 18px 20px 0; background: var(--paper); color: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 30px; }
.enter:hover .go, .enter:focus-visible .go { background: var(--cinnabar); color: var(--paper); }
.enter:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }

.hint { position: absolute; right: 40px; bottom: 44px; margin: 0; font: 700 15px/1 var(--serif); letter-spacing: .3em; color: var(--paper); opacity: 0; transition: opacity 1s .8s; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ready .hint { opacity: .8; }
.ready .hint.gone { opacity: 0; transition-delay: 0s; }

@media (max-width: 760px) {
  .enter { left: 18px; bottom: calc(24px + env(safe-area-inset-bottom)); }
  .lbl { font-size: 24px; padding: 12px 14px 10px; }
  .go { font-size: 16px; padding-top: 14px; }
  .hint { right: 18px; bottom: auto; top: calc(22px + env(safe-area-inset-top)); font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .enter, .hint { transition: none; } }