/* Ink hero: cut-outs from open-access ink paintings (Bada Shanren, and an album attributed to Xu Wei) drift through depth and settle into one scene, a new one each visit. */
.opening::before{display:none}
.ink-stage{position:absolute;z-index:-1;top:-112px;bottom:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
.ink-paper{position:absolute;inset:0;background:url('assets/paper.webp') center/cover;opacity:.32;mix-blend-mode:multiply}
.ink-cam{position:absolute;inset:0;transform-origin:62% 45%}
.ink-el{position:absolute;display:block;height:auto;max-width:none;opacity:0;user-select:none;-webkit-user-drag:none;
  mix-blend-mode:multiply;transform-origin:50% 50%;backface-visibility:hidden}
.ink-stage.is-moving .ink-el{will-change:transform,filter,opacity}

/* sound: a small seal, icon only. 44px tap target, 34px seal inside (32px on phones).
   off: hairline red frame on paper, speaker with a cross. on: red seal, paper speaker, two waves rippling slowly. */
.ink-sound{position:fixed;z-index:20;right:22px;bottom:22px;width:44px;height:44px;padding:0;margin:0;border:0;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--red);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ink-sound-seal{width:34px;height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid var(--red);border-radius:2px;
  background:rgba(246,241,231,.9);transform:rotate(-2deg);transition:background-color .6s ease,color .6s ease,border-color .6s ease}
.ink-sound svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ink-sound .w,.ink-sound .x{transition:opacity .5s ease}
.ink-sound .w{opacity:0}
.ink-sound .x{opacity:1}
.ink-sound:hover .ink-sound-seal{background:rgba(232,214,198,.95)}
.ink-sound:focus{outline:none}
.ink-sound:focus-visible .ink-sound-seal{outline:2px solid var(--red);outline-offset:3px}
/* on */
.ink-sound[aria-pressed="true"] .ink-sound-seal{background:var(--red);color:#f6f1e7}
.ink-sound[aria-pressed="true"]:hover .ink-sound-seal{background:#b30e00}
.ink-sound[aria-pressed="true"] .x{opacity:0}
.ink-sound[aria-pressed="true"] .w{opacity:1}
.ink-sound[data-state="playing"] .w1{animation:ink-wave 2.8s ease-in-out infinite}
.ink-sound[data-state="playing"] .w2{animation:ink-wave 2.8s ease-in-out .7s infinite}
@keyframes ink-wave{0%,100%{opacity:1}50%{opacity:.4}}
/* fetching the loop after the tap */
.ink-sound[data-state="loading"] .w{opacity:.45}
/* remembered from an earlier visit: on, waiting for the first tap or key press anywhere */
.ink-sound[data-state="waiting"] .ink-sound-seal{background:rgba(246,241,231,.9);color:var(--red)}
.ink-sound[data-state="waiting"] .w{opacity:.5}
.ink-sound[data-state="waiting"]:hover .ink-sound-seal{background:rgba(232,214,198,.95)}

@media(max-width:767px){
  .ink-stage{top:-85px}
  .ink-sound{right:10px;bottom:10px}
  .ink-sound-seal{width:32px;height:32px}
  .ink-sound svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.ink-stage .ink-el{transition:none}.ink-sound .w{animation:none!important}.ink-sound-seal,.ink-sound .w,.ink-sound .x{transition:none}}