/* 山岚入盏 — opening vignette, scoped to the splash. */
.splash{background:#f7f4ea;overflow:hidden;isolation:isolate;transition:opacity .65s ease,visibility .65s;touch-action:manipulation}
.splash::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 42%,#fffdf5 0%,#f7f4ea 48%,#e9e8db 100%)}
.splash::after{content:"";position:absolute;inset:24px;border:1px solid #657a541a;pointer-events:none}
.splash-grain{position:absolute;inset:0;opacity:.2;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23878a70' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.splash-edition{position:absolute;top:48px;left:52px;right:52px;display:flex;justify-content:space-between;color:#798572;font:10px/1.6 var(--serif);letter-spacing:2px}
.splash-edition span:last-child{font:9px/1.6 system-ui;letter-spacing:3px}
.splash-content{width:min(640px,94vw);text-align:center;transform:translateY(-25px)}
.splash-scene{position:relative}
.tea-landscape{display:block;width:100%;height:auto;overflow:visible}
.tea-moon{transform-origin:376px 124px;animation:tj-moon 2.6s ease-out both}
.tea-mountains{animation:tj-mountains 2.5s cubic-bezier(.2,.7,.3,1) both}
.tea-mist{animation:tj-mist 5s ease-in-out infinite alternate}
.tea-vessel{animation:tj-vessel 1.4s cubic-bezier(.2,.7,.3,1) both}
.tea-falling-leaf{transform-origin:320px 225px;animation:tj-leaf 2.1s cubic-bezier(.38,.08,.35,1) both}
.tea-ripple{transform-origin:320px 261px}
.tea-ripple ellipse{transform-origin:320px 261px;animation:tj-ripple 4.8s 1.55s linear infinite both}
.tea-ripple ellipse:nth-child(2){animation-delay:3.95s}
.tea-vapour path{stroke-dasharray:160;stroke-dashoffset:160;opacity:0;animation:tj-vapour 6s .6s linear infinite both}
.tea-vapour path:nth-child(2){animation-delay:2.3s}.tea-vapour path:nth-child(3){animation-delay:4s}
.splash-poem{position:absolute;right:16%;top:27%;writing-mode:vertical-rl;text-align:left;color:#73826a;font:12px/2.1 var(--serif);letter-spacing:4px;animation:tj-type 1.4s .65s both}
.splash-title-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:-22px;position:relative}
.splash-word{display:flex;gap:22px;font:500 clamp(42px,6vw,58px)/1.3 var(--serif);color:#304d3c;letter-spacing:0;padding:0;margin:0 0 0 30px}
.splash-word span{display:block;animation:tj-type 1.4s .45s both}.splash-word span:nth-child(2){animation-delay:.7s}
.splash-seal{color:#a46950;border:1px solid #a4695077;border-radius:3px;transform:rotate(-5deg);font:11px/1.2 var(--serif);padding:5px 4px;animation:tj-type 1.3s 1s both}
.splash-desc{font:13px/1.8 var(--serif);letter-spacing:3px;color:#7b8870;margin:20px 0 0;animation:tj-type 1.4s .9s both}
.splash-folio{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:22px;animation:tj-type 1.4s 1.1s both}
.splash-folio span{font:8px/1.5 system-ui;letter-spacing:2.8px;color:#939985}.splash-folio i{width:25px;height:1px;background:#b7bba4}
.splash-skip{bottom:max(48px,env(safe-area-inset-bottom));min-height:44px;padding:10px 22px;display:flex;gap:30px;align-items:center;border:1px solid #7a8e6b45;border-radius:40px;color:#49624c;font:12px/1.6 var(--serif);letter-spacing:2px;background:#fffdf440;transition:background .2s,border-color .2s}
.splash-skip:hover{background:#fffdf4;border-color:#7a8e6b}.splash-skip:focus-visible{outline:2px solid #49624c;outline-offset:5px}
.splash.gone .splash-content{transform:translateY(-35px);transition:transform .65s ease}
@keyframes tj-moon{from{opacity:0;transform:scale(.91)}to{opacity:1;transform:scale(1)}}
@keyframes tj-mountains{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes tj-mist{from{transform:translateX(-28px);opacity:.65}to{transform:translateX(24px);opacity:1}}
@keyframes tj-vessel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes tj-leaf{0%{opacity:0;transform:translate(25px,-115px) rotate(-55deg)}20%{opacity:1}60%{opacity:1;transform:translate(-14px,-52px) rotate(18deg)}88%{opacity:.9;transform:translate(0,27px) rotate(65deg) scale(.54,.35)}100%{opacity:0;transform:translate(0,34px) rotate(70deg) scale(.4,.15)}}
@keyframes tj-ripple{0%{opacity:0;transform:scale(.15)}18%{opacity:.7}70%{opacity:.18}100%{opacity:0;transform:scale(1.7,1.3)}}
@keyframes tj-vapour{0%{opacity:0;stroke-dashoffset:160;transform:translateY(8px)}20%{opacity:.28}60%{opacity:.22;stroke-dashoffset:0}90%,100%{opacity:0;stroke-dashoffset:-35;transform:translateY(-16px)}}
@keyframes tj-type{from{opacity:0;transform:translateY(9px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:600px){.splash::after{inset:14px}.splash-edition{top:34px;left:30px;right:30px}.splash-edition span:last-child{font-size:8px;letter-spacing:1.7px}.splash-content{width:100vw;max-width:560px;transform:translateY(-22px)}.splash-title-row{margin-top:0}.splash-word{gap:18px}.splash-poem{right:18%;font-size:10px}.splash-desc{font-size:12px;letter-spacing:2px}.splash-folio span{font-size:7px;letter-spacing:2px}.splash-skip{bottom:max(38px,env(safe-area-inset-bottom))}}
@media(max-height:650px){.splash-content{width:min(470px,90vw)}.splash-edition{top:28px}.splash-title-row{margin-top:-32px}.splash-word{font-size:38px}.splash-desc{margin-top:10px}.splash-folio{margin-top:12px}.splash-skip{bottom:24px}}
@media(max-height:450px){.splash-content{width:320px;transform:translateY(-12px)}.splash-title-row{margin-top:-42px}.splash-word{font-size:30px}.splash-folio,.splash-poem{display:none}.splash-skip{bottom:18px;left:50%;right:auto;transform:translateX(-50%)}.splash-edition{top:22px}}
@media(prefers-reduced-motion:reduce){.tea-vapour path{opacity:.25;stroke-dashoffset:0}.tea-falling-leaf,.tea-ripple{display:none}.splash.gone .splash-content{transform:none}}

/* Full-viewport opening is self-contained. The base site stylesheet must not
   be required for its positioning, sizing, centering or dismissal. */
#splash.splash{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  inset:0;
  width:100%;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-width:0;
  max-width:none;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  z-index:100;
  overflow:hidden;
  box-sizing:border-box;
  background:#f7f4ea;
}
#splash[hidden]{display:none!important}
#splash.splash.gone{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#splash .splash-content{
  width:min(640px,calc(100vw - 28px));
  max-width:100%;
  margin:0 auto;
  justify-self:center;
  align-self:center;
}
#splash .splash-skip{
  position:absolute;
  left:50%;
  bottom:max(32px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2;
  white-space:nowrap;
}
@media(max-height:650px){
  #splash .splash-content{width:min(470px,calc(100vw - 28px))}
  #splash .splash-skip{bottom:max(14px,env(safe-area-inset-bottom))}
}
@media(max-height:450px){
  #splash .splash-content{width:min(320px,calc(100vw - 28px))}
  #splash .splash-skip{left:50%;right:auto;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%)}
}
@media(max-width:600px){
  #splash .splash-content{width:min(100vw,560px);max-width:100%}
}