:root {
  --ink: #0b0e12;
  --paper: #ede8df;
  --white: #f7f3ec;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif; }

#stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #0a0d10;
  isolation: isolate;
}

.scene, .paper, .caption, .route, .contours, .cats, .meta, .progress { position: absolute; }
.scene { inset: -3.2%; margin: 0; overflow: hidden; will-change: clip-path, transform, opacity, filter; }
.scene img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.015); }

.scene-0 { z-index: 1; clip-path: inset(0); }
.scene-0 img { object-position: 50% 52%; filter: saturate(.84) contrast(1.04) brightness(.88); }
.scene-1 { z-index: 2; clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%); }
.scene-1 img { object-position: 50% 52%; filter: saturate(.74) contrast(1.07) brightness(.89); }
.scene-2 { z-index: 3; clip-path: circle(0% at 28% 52%); }
.scene-2 img { object-position: 50% 54%; filter: saturate(.68) contrast(1.08) brightness(.77); }
.scene-3 { z-index: 4; clip-path: inset(100% 0 0 0); }
.scene-3 img { object-position: 50% 55%; filter: saturate(.54) contrast(1.16) brightness(.68); }
.scene-4 { z-index: 5; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.scene-4 img { object-position: 50% 48%; filter: saturate(.72) contrast(1.05) brightness(.87); }
.scene-5 { z-index: 6; clip-path: inset(0 50% 0 50%); }
.scene-5 img { object-position: 50% 48%; filter: saturate(.7) contrast(1.08) brightness(.69); }
.scene-6 { z-index: 7; clip-path: circle(0% at 70% 54%); }
.scene-6 img { object-position: 50% 47%; filter: saturate(.78) contrast(1.07) brightness(.66); }

.paper { z-index: 10; background: rgba(237,232,223,.93); box-shadow: 0 26px 70px rgba(0,0,0,.28); will-change: transform, opacity; }
.paper::after { content:""; position:absolute; inset:0; opacity:.24; mix-blend-mode:multiply; background: radial-gradient(circle at 1px 1px, #4b4034 0 1px, transparent 1.1px) 0 0/10px 10px; }
.paper-a { width: 31vw; height: 8vh; min-height: 58px; top: 5vh; right: 5vw; transform: translateY(-170%) rotate(1.6deg); }
.paper-b { width: 39vw; height: 14vh; min-height: 94px; bottom: 4vh; left: -8vw; transform: translateY(165%) rotate(-3.8deg); }
.paper-c { width: 23vw; height: 10vh; min-height: 72px; top: 17vh; right: -3vw; transform: translateX(130%) rotate(-4deg); opacity:.84; }

.route { inset: 0; z-index: 11; pointer-events:none; }
.route path { fill:none; stroke:rgba(248,242,231,.9); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 2px 8px rgba(0,0,0,.32)); }
#route-main { stroke-dasharray:1540; stroke-dashoffset:1540; }
#route-branch-a, #route-branch-b { stroke-dasharray:640; stroke-dashoffset:640; }

.contours { inset:0; z-index:9; pointer-events:none; opacity:0; }
.contours path { fill:none; stroke:rgba(239,231,218,.3); stroke-width:1.15; }

.caption { z-index: 14; opacity:0; will-change:transform, opacity; color:var(--white); text-shadow:0 3px 26px rgba(0,0,0,.34); }
.caption-index, .caption-label, .meta {
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:700;
  letter-spacing:.24em;
}
.caption-index { display:block; font-size:clamp(12px,.82vw,15px); opacity:.55; margin-bottom:10px; }
.caption-label { display:block; font-size:clamp(9px,.64vw,11px); opacity:.68; margin-bottom:23px; }
.caption h1, .caption h2, .caption p { margin:0; font-weight:500; letter-spacing:-.05em; }
.caption h1 { font-size:clamp(76px,9vw,158px); line-height:.92; }
.caption h2 { font-size:clamp(62px,7.4vw,132px); line-height:.94; }
.caption p { font-size:clamp(42px,5.2vw,92px); line-height:1.22; }
.caption-world { left:7vw; top:13vh; }
.caption-ways { right:7vw; bottom:13vh; text-align:right; color:var(--white); text-shadow:0 3px 24px rgba(0,0,0,.38); }
.caption-change { left:7vw; bottom:13vh; }
.caption-final { left:7vw; top:12vh; }

.cats { z-index:15; right:8vw; bottom:5.5vh; width:clamp(150px,17vw,275px); color:rgba(10,13,17,.94); opacity:0; filter:drop-shadow(0 10px 20px rgba(0,0,0,.28)); }
.cats svg { width:100%; height:auto; display:block; overflow:visible; }
.cats .cat { stroke:rgba(244,236,220,.38); stroke-width:1.8; paint-order:stroke fill; }

.meta { z-index:18; font-size:9px; line-height:1; color:rgba(247,243,236,.64); }
.meta-left { left:30px; top:26px; }
.meta-right { right:30px; bottom:27px; }

.progress { z-index:18; left:30px; right:30px; bottom:17px; height:1px; background:rgba(255,255,255,.16); }
.progress i { display:block; width:0; height:100%; background:rgba(255,255,255,.72); }

.lightwash { position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; mix-blend-mode:screen; background:radial-gradient(circle at 65% 35%,rgba(255,217,159,.38),transparent 32%); }
.grain { position:absolute; inset:-22%; z-index:19; pointer-events:none; opacity:.07; mix-blend-mode:soft-light; background-image:repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.25) 0 1px,rgba(0,0,0,.16) 1px 2px,transparent 2px 4px); background-size:8px 8px; }
.vignette { position:absolute; inset:0; z-index:17; pointer-events:none; background:radial-gradient(circle at 50% 45%,transparent 48%,rgba(0,0,0,.26) 110%); }

@media(max-width:760px){
  .caption-world{left:7vw;top:11vh}.caption-ways{right:7vw;bottom:11vh}.caption-change,.caption-final{left:7vw}
  .caption h1{font-size:clamp(56px,15vw,104px)}.caption h2{font-size:clamp(50px,13vw,92px)}.caption p{font-size:clamp(34px,9vw,64px)}
  .paper-a{width:52vw}.paper-b{width:58vw}.paper-c{width:42vw}.cats{right:5vw;width:30vw}
}