/* The first gesture opens the cloth; the existing camera journey follows it. */
html{scrollbar-gutter:stable}
#ning-water-garden .moon-stage{overflow:clip}
.curtain-scene{position:absolute;inset:0}
.curtain-journey{position:absolute;inset:0;z-index:20;pointer-events:none;display:none}
.curtain-ready .curtain-journey{display:block}
.curtain-cloth{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.cloth-ready .curtain-cloth{display:block}
.cloth-ready.cloth-resting .curtain-cloth{visibility:hidden}
.cloth-ready .journey-drape{display:none}
.curtain-tiebacks{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;fill:none;stroke-linecap:round;pointer-events:none}
.cloth-untying .curtain-tiebacks{display:block}
.tieback-cord{stroke:#9e916a;stroke-width:1.7;filter:drop-shadow(1px 2px 1px #0009)}
.tieback-tip{stroke:#857650;stroke-width:3;filter:drop-shadow(1px 1px 1px #0009)}
.journey-drape{position:absolute;top:-1%;bottom:-1%;width:calc(50% + 1px);overflow:hidden;background:#252818;will-change:transform;box-shadow:0 0 30px #0009}
.journey-drape-left{left:0;transform:translateX(var(--drape-left,-103%)) skewX(calc(-3deg * var(--drape-pull,0)));transform-origin:0 0}
.journey-drape-right{right:0;transform:translateX(var(--drape-right,103%)) skewX(calc(3deg * var(--drape-pull,0)));transform-origin:100% 0}
.journey-drape img{position:absolute;top:-1%;width:calc(200% - 2px);max-width:none;height:102%;object-fit:cover;filter:brightness(.50) saturate(.66);transform-origin:50% 0;animation:cloth-fallback-breathe 5.5s ease-in-out infinite alternate}
.journey-drape-right img{animation-delay:-2s}
@keyframes cloth-fallback-breathe{from{transform:skewX(-.2deg) scaleX(1.006)}to{transform:skewX(.2deg) scaleX(1.012)}}
.journey-drape-left img{left:0}
.journey-drape-right img{right:0}
.journey-drape:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#05090570,transparent 50%,#0509051a);pointer-events:none}
#ning-water-garden .curtain-enter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;width:100%;height:100%;border:0;border-radius:0;background:radial-gradient(ellipse at center,#07100838,transparent 45%);color:#eee5ce;cursor:pointer;font:12px/1.7 Arial,sans-serif;letter-spacing:.14em;text-shadow:0 2px 14px #000a;opacity:var(--curtain-prompt,1);transition:opacity .3s ease}
#ning-water-garden .curtain-enter:focus-visible{outline:1px solid #ead6a3;outline-offset:-18px}
#ning-water-garden .curtain-enter[hidden]{display:none}
.curtain-signature{font:italic 38px/1.2 Georgia,serif;letter-spacing:-.03em}
.curtain-enter-line{display:block;width:1px;height:38px;margin:25px 0 18px;background:linear-gradient(transparent,#ccb990aa)}
.curtain-enter-en{margin-top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c5bc9d}
.curtain-hint-touch{display:none}
.entry-locked .curtain-journey{pointer-events:auto;touch-action:none}
html.entry-locked{overflow:hidden;overscroll-behavior:none}
html.entry-locked body{overflow:hidden}
.entry-locked :is(.ng-top,.index-toggle,.chapter-rail,.motion-control,.butterfly-flight,.finish-control,.skip-link){visibility:hidden!important}
body.curtain-transition .butterfly-flight{visibility:hidden;pointer-events:none}
.cloth-untying .window-side-curtains{visibility:hidden}
.curtain-ready .scene-world{scale:calc(1 + var(--entry-camera-push,0) * (1 - var(--camera-depth,0)))}
/* A single opening signature, timed to the clear river view before the camera retreats. */
.curtain-ready #ning-water-garden .ng-top .ng-wordmark{visibility:hidden}
#ning-water-garden .water-intro .entry-name{margin:0;font:400 clamp(26px,3.2vw,44px)/1.35 Georgia,serif;letter-spacing:.025em;color:#e5e4d8;opacity:0;transform:translateY(14px)}
#ning-water-garden .entry-name span{font-size:.62em;letter-spacing:.08em;vertical-align:middle;color:#c4c9c0}
#welcome[data-entry-name="playing"] .entry-name{animation:entry-name-reveal 2400ms both}
@keyframes entry-name-reveal{
  0%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.2,.65,.3,1)}
  30%{opacity:1;transform:translateY(0);animation-timing-function:linear}
  66%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.6,1)}
  100%{opacity:0;transform:translateY(44px)}
}
@media(max-width:760px),(pointer:coarse){
  .curtain-hint-desktop{display:none}
  .curtain-hint-touch{display:inline}
  .curtain-signature{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.curtain-ready .scene-world{scale:1}.journey-drape img{animation:none}}
body.motion-off .curtain-scene .scene-world{scale:1}
body.motion-off .journey-drape img{animation:none}