/* 境华 / BETWEEN YOU AND YOUR REFLECTION — 3.05 second title sequence. */
html.intro-pending::after{content:"";position:fixed;inset:0;z-index:2147483000;background:#f4f2e9;pointer-events:none}
html.intro-active{overflow:hidden}
#entry-film{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#f4f2e9;color:#233d34;box-shadow:none;isolation:isolate;outline:none}
#entry-film:not([open]){display:none}#entry-film[open]{display:grid;place-items:center}
#entry-film::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.entry-atmosphere{position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(ellipse at 27% 30%,#fcfbf3 0%,transparent 43%),radial-gradient(ellipse at 74% 72%,#dce7e1a8,transparent 49%);opacity:.8}
.entry-frame{position:absolute;inset:27px;border:1px solid #365c4521;pointer-events:none}
.entry-corner{position:absolute;left:49px;top:46px;font:11px/1.4 Georgia,serif;letter-spacing:.2em;color:#466557}
.entry-skip{position:absolute;z-index:4;right:40px;top:32px;min-width:84px;min-height:44px;padding:10px 12px;border:0!important;box-shadow:none!important;background:transparent!important;color:#486252!important;font:12px/1.4 system-ui,sans-serif;letter-spacing:.12em;border-radius:0!important;cursor:pointer}
.entry-skip::after{content:"↗";margin-left:10px}.entry-skip:hover{color:#142e23!important}.entry-skip:focus-visible{outline:2px solid #486252;outline-offset:2px}
.entry-composition{position:absolute;left:50%;top:46%;width:min(62vw,680px);transform:translate(-50%,-50%);height:260px;display:grid;place-items:center}
.entry-orbit{position:absolute;width:330px;height:390px;border:1px solid #4e79622a;border-radius:49% 49% 46% 46%;top:-72px;left:calc(50% - 165px);transform:rotate(-16deg);opacity:0}
.entry-orbit.second{transform:rotate(16deg);border-color:#889c7529}
.entry-wordmark{width:100%;height:auto;display:block;opacity:0;filter:contrast(1.05);clip-path:inset(0 100% 0 0);position:relative;z-index:2}
.entry-reflection{position:absolute;width:100%;height:auto;top:calc(50% + 59px);opacity:0;transform:scaleY(-.58) translateY(-100%);transform-origin:top;mask-image:linear-gradient(to top,#0008,transparent 72%);filter:blur(1px);clip-path:inset(0);pointer-events:none}
.entry-waterline{position:absolute;left:50%;top:calc(46% + 59px);width:min(80vw,880px);height:1px;transform:translateX(-50%) scaleX(0);background:linear-gradient(90deg,transparent,#759a8580 25%,#759a85b0 50%,transparent);z-index:3}
.entry-ripple{position:absolute;left:50%;top:calc(46% + 59px);width:90px;height:24px;border:1px solid #47795b44;border-radius:50%;transform:translate(-50%,-50%) scale(.1);opacity:0}
.entry-ripple.second{width:70px;height:19px}
.entry-poem{position:absolute;bottom:22%;left:0;right:0;text-align:center;opacity:0;transform:translateY(8px)}
.entry-poem p{font-family:"Jingjie Serif",serif;font-size:18px;font-weight:400;letter-spacing:.35em;margin:0 0 16px;padding-left:.35em;color:#355342}
.entry-poem span{font:10px/1.5 Georgia,serif;letter-spacing:.3em;color:#6d806c}
.entry-footer{position:absolute;bottom:46px;left:49px;right:49px;display:flex;justify-content:space-between;align-items:end;color:#6e7d70;font:10px/1.6 Georgia,serif;letter-spacing:.2em}
.entry-footer i{display:block;width:36px;height:1px;background:#b2b994;margin-bottom:7px}.entry-footer small{writing-mode:vertical-rl;font-size:10px;letter-spacing:.32em}
#entry-film.playing .entry-wordmark{animation:entry-ink .65s .1s cubic-bezier(.18,.65,.22,1) both}
#entry-film.playing .entry-reflection{animation:entry-reflect .75s .22s ease both}
#entry-film.playing .entry-waterline{animation:entry-line .8s cubic-bezier(.2,.7,.2,1) both}
#entry-film.playing .entry-ripple{animation:entry-ripple 1.2s .1s ease-out both}
#entry-film.playing .entry-ripple.second{animation-delay:.32s}
#entry-film.playing .entry-orbit{animation:entry-orbit 1.5s ease-out both}
#entry-film.playing .entry-orbit.second{animation-name:entry-orbit-other;animation-delay:.1s}
#entry-film.playing .entry-poem{animation:entry-poem .45s .5s ease both}
#entry-film.leaving{animation:entry-exit .32s cubic-bezier(.76,0,.24,1) both}
@keyframes entry-ink{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(8px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes entry-reflect{from{opacity:0;translate:0 7px}to{opacity:.2;translate:0 0}}
@keyframes entry-line{to{transform:translateX(-50%) scaleX(1)}}
@keyframes entry-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}20%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(7,2.3)}}
@keyframes entry-orbit{0%{opacity:0;transform:rotate(-27deg) scale(.92)}50%{opacity:1}100%{opacity:.35;transform:rotate(-12deg) scale(1)}}
@keyframes entry-orbit-other{0%{opacity:0;transform:rotate(27deg) scale(.92)}50%{opacity:1}100%{opacity:.35;transform:rotate(12deg) scale(1)}}
@keyframes entry-poem{to{opacity:1;transform:none}}
@keyframes entry-exit{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
@media(max-width:600px){.entry-frame{inset:14px}.entry-corner{left:28px;top:31px;font-size:9px}.entry-skip{right:18px;top:17px}.entry-composition{width:86vw;height:170px;top:44%}.entry-orbit{width:210px;height:270px;left:calc(50% - 105px);top:-55px}.entry-waterline,.entry-ripple{top:calc(44% + 38px)}.entry-reflection{top:calc(50% + 28px)}.entry-poem{bottom:24%}.entry-poem p{font-size:16px;letter-spacing:.22em}.entry-poem span{font-size:9px;letter-spacing:.22em}.entry-footer{left:28px;right:28px;bottom:30px;font-size:9px}}
@media(max-height:500px){.entry-composition{top:42%;width:400px;height:150px}.entry-waterline,.entry-ripple{top:calc(42% + 36px)}.entry-orbit{height:190px;top:-20px}.entry-poem{bottom:13%}.entry-poem p{font-size:14px;margin-bottom:6px}.entry-footer{bottom:22px}.entry-reflection{display:none}}
@media(prefers-reduced-motion:reduce){#entry-film,#entry-film *{animation:none!important}.intro-pending::after{display:none}}

.entry-fallback{display:none;font:400 clamp(50px,8vw,100px)/1.4 "Jingjie Serif",serif;letter-spacing:.1em}.entry-fallback small{font:18px Georgia,serif;letter-spacing:.1em}#entry-film.art-unavailable .entry-fallback{display:block}#entry-film.art-unavailable .entry-wordmark,#entry-film.art-unavailable .entry-reflection{display:none}
/* Two impressions meet, then release their ink into drifting grains. */
.entry-dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.entry-atmosphere{background:radial-gradient(ellipse at 50% 43%,#fcfbf3 0%,#e9eee5aa 34%,transparent 64%),radial-gradient(ellipse at 76% 75%,#c5d7ce66,transparent 46%)}
.entry-frame{border-color:#365c4511}
.entry-orbit{border-color:#617c5920;border-radius:50%;filter:blur(.4px)}
.entry-poem p{font-size:14px;letter-spacing:.48em;color:#69776b;margin:0;font-weight:400}
.entry-footer{color:#8a9488;letter-spacing:.16em}
#entry-film.playing .entry-wordmark{animation:entry-twin-ink 2.6s linear both}
#entry-film.playing .entry-reflection{animation:entry-twin-reflect 2.6s ease both}
#entry-film.playing .entry-poem{animation:entry-quiet-caption 2.5s ease both}
#entry-film.leaving{animation:entry-grain-exit .45s ease both}
@keyframes entry-twin-ink{0%{animation-timing-function:cubic-bezier(.22,.7,.3,1);opacity:0;clip-path:inset(0);transform:translateX(-12px);filter:blur(7px)}25%{opacity:1;transform:none;filter:blur(0);clip-path:inset(0)}60%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 0 0 100%);transform:translateX(10px);filter:blur(1px)}}
@keyframes entry-twin-reflect{0%{opacity:0;translate:14px 4px}30%{opacity:.23;translate:0 0}60%{opacity:.2}100%{opacity:0;translate:-18px 8px}}
@keyframes entry-quiet-caption{0%,26%{opacity:0;transform:translateY(6px)}44%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-3px)}}
@keyframes entry-grain-exit{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(5px)}}
@media(max-width:600px){.entry-poem p{font-size:13px;letter-spacing:.4em}}

.entry-moon{position:absolute;top:calc(46% - 145px);left:calc(50% + 100px);width:180px;height:180px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 34% 30%,#fffef8b0,#eef2e869 58%,#c6d4c72b 72%,transparent 74%);box-shadow:0 0 90px #ffffed38;opacity:0;z-index:0}
#entry-film.playing .entry-moon{animation:entry-moon-appear 2.6s ease both}
.entry-reflection{filter:url(#entry-water-distortion) blur(.6px);mask-image:linear-gradient(to top,#0009,transparent 82%)}
.entry-orbit,.entry-orbit.second{border-color:#617c5914}
.entry-waterline{height:2px;background:linear-gradient(90deg,transparent,#759a8540 30%,#759a8560 50%,transparent)}
.entry-ripple{border-color:#7897823b}
@keyframes entry-moon-appear{0%{opacity:0;transform:scale(.95)}35%,68%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
@media(max-width:600px){.entry-moon{width:125px;height:125px;top:calc(44% - 105px);left:calc(50% + 45px)}}
#entry-film[open]{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#entry-film[open].leaving{animation:entry-grain-exit .45s ease both}

/* Establish the reflection, pause, disturb the surface, then release it. */
#entry-film.playing .entry-waterline{animation:entry-line 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
#entry-film.playing .entry-ripple{animation:entry-ripple 1.65s .75s ease-out both}
#entry-film.playing .entry-ripple.second{animation-delay:1.1s}
#entry-film.playing .entry-orbit{animation:entry-orbit 2.6s ease-out both}
#entry-film.playing .entry-orbit.second{animation-name:entry-orbit-other;animation-delay:.12s}

/* Brush lettering shares one painted frame with its water reflection. */
.entry-brush{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);z-index:2;pointer-events:none;opacity:0}
.entry-brush-reflection{display:none}
#entry-film.brush-ready .entry-wordmark{visibility:hidden;animation:none;opacity:1;clip-path:inset(0);transform:none;filter:none}
#entry-film.brush-ready img.entry-reflection{visibility:hidden}
#entry-film.brush-ready .entry-brush-reflection{display:block}
#entry-film.playing.brush-ready .entry-brush{animation:entry-written-release 3.7s linear both}
#entry-film.playing.brush-ready .entry-brush-reflection{animation:entry-brush-water 3.7s linear both}
.entry-ai{position:absolute;right:8%;top:calc(50% + 82px);font:600 76px/.95 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;letter-spacing:.035em;color:#173b2d;opacity:0;z-index:3}
.entry-ai span{display:block;margin-top:12px;font:8px/1.4 system-ui,sans-serif;letter-spacing:.17em;color:#778777}
#entry-film.playing .entry-ai{animation:entry-ai-arrival 3.7s ease both}
#entry-film.playing .entry-poem{animation:entry-quiet-caption 3.7s ease both}
#entry-film.playing .entry-moon{animation-duration:3.7s}
#entry-film.playing .entry-ripple{animation-delay:1.9s}
#entry-film.playing .entry-ripple.second{animation-delay:2.3s}
@keyframes entry-written-release{0%,71%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes entry-brush-water{0%{opacity:0}12%,71%{opacity:.22;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes entry-ai-arrival{0%,47%{opacity:0;translate:0 7px;filter:blur(3px)}59%,76%{opacity:1;translate:0 0;filter:blur(0)}100%{opacity:0;translate:7px -4px;filter:blur(2px)}}
@media(max-width:600px){.entry-ai{top:calc(50% + 49px);right:8%;font-size:56px}.entry-ai span{font-size:6px;letter-spacing:.12em;margin-top:6px}}

/* One wordmark lockup: AI shares the ink's centre, clear of the reflection. */
.entry-wordmark{width:88%;justify-self:start}
.entry-brush,.entry-reflection{width:88%;left:0}
.entry-ai{left:82%;right:auto;top:calc(50% - 35px);font-size:76px;line-height:1;letter-spacing:-.045em}
.entry-ai span{display:none}
@keyframes entry-ai-arrival{0%,40%{opacity:0;translate:0 5px}57%,76%{opacity:1;translate:0 0}100%{opacity:0;translate:5px -3px}}
@keyframes entry-grain-exit{from{opacity:1}to{opacity:0}}
.entry-brush,.entry-ai{will-change:opacity}
@media(max-width:600px){.entry-ai{left:82%;right:auto;top:calc(50% - 22px);font-size:clamp(38px,12vw,56px)}.entry-reflection{filter:blur(.6px)}}
@media(max-height:500px){.entry-ai{font-size:46px;top:calc(50% - 22px)}}