/* The opening and the material study share one paper surface and one camera. */
.intro{overflow:hidden;background:transparent;transition:none;touch-action:none;will-change:auto}
.intro:after{content:none}
.intro[hidden]{display:none}
.intro-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 46%,#303b55 0%,#171e32 42%,#101525 80%);opacity:calc(1 - var(--entry-reveal,0))}
.intro-fibre{position:absolute;inset:0;opacity:calc(.12 * (1 - var(--entry-reveal,0)));pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}
.intro-shadow{position:absolute;left:50%;top:55%;width:130px;height:11px;border-radius:50%;background:#030614;filter:blur(9px);opacity:var(--crane-shadow,.5);transform:translate(-50%,-50%) scaleX(var(--shadow-width,1));pointer-events:none}
.intro #paper-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;cursor:default}
.intro-top{top:32px;z-index:5;transition:none;opacity:calc(1 - var(--entry-reveal,0))}
.intro-top span{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:400;line-height:1;letter-spacing:.05em}
.intro-top i{display:inline;font-family:var(--sans);font-size:inherit;font-weight:400;font-style:normal;line-height:1;letter-spacing:.01em;margin:0}
.intro-top button{font-size:9px;letter-spacing:.18em;color:#b4bac9;min-height:44px;padding:10px 0 10px 18px}
.intro-trigger{z-index:4;top:47%;width:320px;height:290px;padding:0;display:block;border-radius:50%;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent}
.intro-trigger:focus-visible{outline-offset:14px;outline-color:#c2ac8755}
.intro-invitation{position:absolute;left:0;top:83%;width:100%;display:flex;align-items:center;flex-direction:column;transition:opacity .45s,transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.intro-line{font-family:var(--serif);font-size:26px;font-weight:300;letter-spacing:.01em;line-height:1.3;color:#e9e2d5}
.intro-prompt{font-family:var(--sans);font-size:8px;font-weight:400;letter-spacing:.22em;margin-top:14px;color:#a8b0c0;white-space:nowrap;line-height:1.5}
.intro-prompt i{display:inline-block;font-style:normal;letter-spacing:.16em;margin-left:12px;color:#a8b0c0}
.intro-rule{width:30px;height:1px;background:#c4af8a;opacity:.5;margin-top:23px;transform-origin:center;transition:width .8s,opacity .8s}
.intro-trigger:hover .intro-rule,.intro-trigger:focus-visible .intro-rule{width:62px;opacity:1}
.intro-crane-fallback{position:absolute;top:28%;left:50%;width:150px;transform:translate(-50%,-50%)}
.intro.has-origami .intro-crane-fallback{visibility:hidden}
.intro-footer{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:#8e97aa;font-size:8px;letter-spacing:.22em;z-index:4;transition:opacity .5s}
.intro.is-unfolding .intro-top>span{opacity:0;transition:opacity .35s}
.intro.is-unfolding .intro-invitation{opacity:0;transform:translateY(12px)}
.intro.is-unfolding .intro-footer{opacity:0}
.intro.is-unfolding .intro-trigger{pointer-events:none}
.intro.is-unfolding .intro-crane-fallback{opacity:0;transition:opacity .25s}
.intro-active .site-header,.intro-active .theatre-captions,.intro-active .theatre-top,.intro-active .theatre-bottom,.intro-active .theatre-tools,.intro-active .theatre-word,.intro-active .theatre-progress{opacity:var(--entry-reveal,0)}
.intro-active .theatre-captions{translate:0 calc((1 - var(--entry-reveal,0)) * 22px)}
.brand{gap:8px}.brand-crane{width:30px;height:20px}.brand-crane img{width:31px;top:0;left:0}
.brand-word,.brand-cn{font-family:var(--sans);font-size:14px;font-weight:400;line-height:1;letter-spacing:.05em;margin:0}
.brand-cn{color:#eee9de;letter-spacing:.01em}
@media(max-width:600px){
 .intro-top{top:16px}.intro-top span{font-size:13px}.intro-top i{display:inline}
 .intro-trigger{top:46%;width:260px;height:260px}
 .intro-line{font-size:24px}.intro-prompt{font-size:7px;margin-top:12px}.intro-prompt i{font-size:9px;margin-left:10px}
 .intro-invitation{top:84%}.intro-rule{margin-top:19px}.intro-footer{bottom:27px;font-size:7px;letter-spacing:.15em}
 .intro-shadow{width:100px;top:54%}.intro-crane-fallback{width:115px}
 .brand-word,.brand-cn{font-size:13px}.brand-cn{display:inline}.brand-crane{width:27px;height:18px}.brand-crane img{width:28px}
}
@media(max-height:540px){.intro-trigger{top:44%;height:190px}.intro-invitation{top:80%}.intro-line{font-size:21px}.intro-prompt{margin-top:8px}.intro-rule{margin-top:12px}.intro-shadow{top:55%}.intro-footer{bottom:20px}}
@media(prefers-reduced-motion:reduce){.intro-invitation,.intro-rule,.intro-footer,.intro-top{transition:none}.intro-active .theatre-captions{translate:none}}