/* 澄隐 V2 · 首页。
   原则：只卸不加。一套滚动场景（--p），一处进入展开（管家图），其余全部静止。
   色值只取 VI 四色及其屏幕适配：松山绿 #304A41 / 深松 #1E2E28 / 流沙白 #F0E7DB / 纸 #F6F1E9 / 琥珀黄 #BAA382 / 泥土褐 #4F3D31 */
:root{--cine-deep:#1e2e28;--cine-white:#f6f1e9;--amber:#baa382;--earth:#4f3d31;--ease:cubic-bezier(.22,.61,.36,1)}
.cinematic-document{scroll-behavior:smooth;scroll-padding-top:0}
.cinematic-home{background:var(--paper)}
.cinematic-home main{overflow:clip}
.cinematic-home :focus-visible{outline:2px solid var(--amber);outline-offset:6px}

/* —— 页头：深色场景上透明，纸面上实底 —— */
.cinematic-home .header{position:fixed;inset:0 0 auto;background:var(--paper);z-index:40}
.cinematic-home .header-inner{max-width:none;padding-inline:52px}
.cine-over-dark .header{background:linear-gradient(#1e2e28d9,#1e2e2899 70%,#1e2e2800);color:var(--cine-white)}
.cine-over-dark .header-inner{border-color:#f6f1e926}
.cine-over-dark .brand-en,.cine-over-dark .nav a:hover{color:var(--cine-white)}
.cine-over-dark .nav-book{border-color:#baa382;color:var(--cine-white)}
.cinematic-home .nav a{font-size:14px}

/* —— 共用文字链接 —— */
.cine-link{display:inline-flex;align-items:center;min-height:46px;padding:10px 0;font-size:15px;line-height:1.6;border-bottom:1px solid #f6f1e999;color:var(--cine-white);transition:border-color .3s}
.cine-link:hover{border-color:var(--amber)}
.cine-link-quiet{border-bottom-color:#f6f1e940;color:#f6f1e9d9}
.cine-image-note{position:absolute;right:50px;bottom:28px;z-index:4;color:#f6f1e9c2;font-size:12px;line-height:1.8;text-shadow:0 1px 12px #1e2e28;pointer-events:none}

/* ============ 1. 入山：三层景深，随 --p 交叠（220svh，原 340svh） ============ */
.cine-arrival{--p:0;height:220svh;position:relative;background:var(--cine-deep)}
.cine-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:clip;color:var(--cine-white);isolation:isolate}
.cine-layer,.cine-layer picture,.cine-layer img,.cine-shade,.cine-veil{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.cine-layer{overflow:hidden}
.cine-layer img{object-fit:cover}
.cine-layer.shelter img{object-position:55% center}
/* 三幅画面：0→.40 山谷，.30→.70 溪水，.62→1 院落 */
.cine-layer.valley{opacity:clamp(0,(.42 - var(--p))/.14,1);transform:scale(calc(1 + var(--p)*.12))}
.cine-layer.stream{opacity:clamp(0,min((var(--p) - .28)/.12,(.72 - var(--p))/.12),1);transform:scale(calc(1.1 - var(--p)*.1))}
.cine-layer.shelter{opacity:clamp(0,(var(--p) - .6)/.14,1);transform:scale(calc(1.12 - var(--p)*.12))}
.cine-shade{z-index:2;pointer-events:none;background:linear-gradient(#1e2e2838,#1e2e2814 35%,#1e2e2899),linear-gradient(90deg,#1e2e2833,transparent 70%)}
.cine-veil{z-index:1;pointer-events:none;background:#f0e7db;opacity:calc(clamp(0,1 - abs(var(--p) - .34)/.08,1)*.35 + clamp(0,1 - abs(var(--p) - .66)/.08,1)*.35)}
@supports not (opacity:calc(abs(-1)*1)){.cine-veil{display:none}}

.arrival-copy{position:absolute;z-index:3;top:22%;left:7.7%;right:7.7%;text-align:center;opacity:clamp(0,(.22 - var(--p))/.12,1);transform:translateY(calc(var(--p)*-160px));visibility:visible}
.arrival-place{color:#f6f1e9d9;font-size:14px;letter-spacing:.25em;margin-bottom:24px}
.arrival-copy h1{font:400 clamp(64px,7.2vw,112px)/1.45 var(--serif);letter-spacing:.12em;text-shadow:0 2px 30px #1e2e2852}
.arrival-copy h1 span{display:block}
.arrival-deck{font-size:16px;letter-spacing:.1em;color:#f6f1e9f0;margin-top:22px}
.arrival-actions{display:flex;justify-content:center;gap:36px;margin-top:22px}
.arrival-line{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.arrival-line h2{font:400 clamp(44px,4.8vw,72px)/1.75 var(--serif);letter-spacing:.04em}
.arrival-line .cine-link{pointer-events:auto;margin-top:28px}
.water-line{opacity:clamp(0,min((var(--p) - .3)/.1,(.6 - var(--p))/.1),1);transform:translateY(calc((.45 - var(--p))*120px))}
.shelter-line{opacity:clamp(0,(var(--p) - .72)/.1,1);transform:translateY(calc((1 - var(--p))*80px))}
/* 不可见的文字层不可点、不可聚焦 */
.scenes-ready:not(.is-reduced) .cine-arrival:not(.at-start) .arrival-copy,.scenes-ready:not(.is-reduced) .cine-arrival:not(.at-end) .shelter-line{visibility:hidden}
.arrival-scroll{position:absolute;z-index:4;bottom:30px;left:50%;transform:translateX(-50%);color:#f6f1e9c2;font-size:12px;letter-spacing:.12em;text-align:center;opacity:clamp(0,(.1 - var(--p))/.1,1)}
.arrival-scroll span{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(#f6f1e999,transparent)}

/* ============ 2. 理念：静止的林间长文 ============ */
.cine-introduction{min-height:max(780px,100svh);position:relative;display:flex;align-items:center;padding:140px 8vw;background:var(--cine-deep);color:var(--cine-white);overflow:clip;isolation:isolate}
.intro-picture,.intro-picture img,.intro-shade{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.intro-picture{display:block;z-index:0}
.intro-picture img{object-fit:cover;object-position:64% center}
.intro-shade{z-index:1;pointer-events:none;background:linear-gradient(90deg,#1e2e28f0 0%,#1e2e28cc 32%,#1e2e2870 55%,#1e2e2810 82%),linear-gradient(0deg,#1e2e2880,transparent 26%)}
.intro-essay{position:relative;z-index:2;max-width:540px}
.intro-name{font-size:15px;margin-bottom:30px;color:var(--amber);letter-spacing:.12em}
.intro-essay h2{font-size:clamp(38px,3.8vw,58px);line-height:1.7;margin-bottom:32px;letter-spacing:.02em}
.intro-essay p:not(.intro-name){font-size:16px;line-height:2.2;color:#f6f1e9e6;max-width:30em}
.intro-essay .text-link{margin-top:22px;color:var(--cine-white);border-color:#f6f1e9a6}
.intro-essay .text-link:hover{color:var(--cine-white);border-color:var(--amber)}
.cine-introduction :focus-visible{outline-color:var(--cine-white)}

/* ============ 3. 停留：两种方案，提前到理念之后 ============ */
.cine-duration{padding:130px 6vw 100px;background:var(--paper)}
.duration-title{display:flex;align-items:flex-end;gap:8vw;margin:0 2vw 56px}
.duration-title h2{font-size:clamp(42px,4.6vw,66px);line-height:1.6}
.duration-title p{padding-bottom:20px;max-width:350px;font-size:18px}
.duration-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.duration-story{position:relative;min-height:680px;overflow:hidden;color:var(--cine-white);background:var(--cine-deep)}
.duration-picture,.duration-picture img,.duration-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duration-picture img{transform:scale(1.02);transition:transform 1.6s var(--ease)}
.duration-story:hover .duration-picture img,.duration-story:focus-within .duration-picture img{transform:scale(1.06)}
.duration-shade{background:linear-gradient(0deg,#1e2e28f0 8%,#1e2e2899 40%,transparent 85%)}
.duration-copy{position:absolute;left:44px;right:44px;bottom:60px;z-index:2}
.duration-copy h3{font-size:64px;line-height:1.4;margin-bottom:22px}
.duration-copy p{color:#f6f1e9e6;font-size:16px;line-height:2;max-width:28em}
.duration-copy .duration-meta{font-size:14px;margin-bottom:16px;color:var(--amber);letter-spacing:.06em}
.duration-actions{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:22px}
.duration-story .cine-image-note{right:24px;bottom:18px}
.duration-note{margin-top:28px;padding-inline:2vw;font-size:14px;color:var(--muted)}

/* ============ 4. 一天：三个时刻，图文同步淡换 ============ */
.cine-day,.cine-seasons{height:100svh;min-height:760px;position:relative;overflow:clip;background:var(--cine-deep);color:var(--cine-white);isolation:isolate}
.day-scenes,.day-frame,.day-picture,.day-picture img,.day-shade,.cine-season-images,.cine-season-panel,.season-picture,.season-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.day-picture img,.season-picture img{object-position:62% center}
.day-frame{opacity:0;transition:opacity .9s var(--ease)}
.day-frame.is-active{opacity:1}
.day-shade{z-index:1;background:linear-gradient(90deg,#1e2e28d0,transparent 75%),linear-gradient(0deg,#1e2e28d0,transparent 62%);pointer-events:none}
.day-heading{position:absolute;z-index:2;top:20%;left:8%}
.day-heading>p{color:var(--amber);font-size:14px;margin-bottom:24px;letter-spacing:.08em}
.day-heading h2{font-size:clamp(40px,4.4vw,64px);line-height:1.75}
.day-selector{position:absolute;z-index:3;left:8%;bottom:110px;display:flex;gap:30px}
.day-selector button{background:transparent;border:0;border-bottom:1px solid #f6f1e94d;color:#f6f1e9b3;min-height:58px;padding:8px 14px;font:24px/1.6 var(--serif);transition:color .3s,border-color .3s}
.day-selector button:hover{color:var(--cine-white)}
.day-selector button[aria-pressed=true]{color:var(--cine-white);border-color:var(--amber)}
.day-reading{position:absolute;z-index:2;right:10%;bottom:110px;width:390px;max-width:35%}
.day-reading.is-changing h3,.day-reading.is-changing p{animation:reading-in .6s var(--ease) both}
.day-reading h3{font-size:29px;margin-bottom:15px}
.day-reading p{color:#f6f1e9e6;font-size:16px}
.day-reading .cine-link{margin-top:18px}
@keyframes reading-in{from{opacity:0}to{opacity:1}}

/* ============ 5. 管家：唯一的进入展开 ============ */
.cine-care{padding:110px 10vw 70px;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center;background:var(--paper)}
.care-photo-frame{position:relative;min-width:0}
.care-picture{display:block;aspect-ratio:4/5;overflow:hidden;clip-path:inset(6% 6% 6% 6%);transition:clip-path 1.6s var(--ease)}
.care-picture img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.8s var(--ease)}
.care-photo-frame.is-seen .care-picture{clip-path:inset(0)}
.care-photo-frame.is-seen img{transform:scale(1)}
.care-photo-frame>p{font-size:12px;text-align:right;margin-top:12px}
.cine-care-copy>p:first-child{font-size:14px;color:var(--accent);margin-bottom:28px;letter-spacing:.08em}
.cine-care-copy h2{font-size:clamp(34px,3.1vw,48px);line-height:1.8;margin-bottom:28px}
.cine-care-copy p{font-size:16px;line-height:2.1;max-width:30em}
.cine-care-copy .text-link{margin-top:20px}

/* ============ 6. 房间：窗框随滚动打开（180svh，原 230svh） ============ */
.cine-window{--p:0;height:180svh;position:relative;background:var(--paper)}
.window-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:clip;isolation:isolate}
.window-frame{--o:clamp(0,(var(--p) - .05)/.6,1);position:absolute;inset:0;clip-path:inset(calc(12% * (1 - var(--o))) calc(12% * (1 - var(--o))) calc(12% * (1 - var(--o))) calc(42% * (1 - var(--o))));background:var(--cine-deep);overflow:hidden}
.window-picture,.window-picture img{display:block;width:100%;height:100%;object-fit:cover}
.window-picture img{object-position:58% center;transform:scale(calc(1.1 - var(--p)*.1))}
.window-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#1e2e28d9,transparent 60%)}
.window-heading{position:absolute;z-index:2;left:8%;top:27%;pointer-events:none;opacity:clamp(0,(.45 - var(--p))/.25,1);transform:translateX(calc(var(--p)*-80px))}
.window-heading>p{font-size:14px;color:var(--accent);margin-bottom:27px;letter-spacing:.08em}
.window-heading h2{font-size:clamp(44px,5vw,72px);line-height:1.7}
.window-caption{position:absolute;z-index:3;left:8%;bottom:70px;color:var(--cine-white);opacity:clamp(0,(var(--p) - .45)/.25,1);transform:translateY(calc(clamp(0,(.7 - var(--p))/.25,1)*24px))}
.window-caption p{color:var(--cine-white);font-size:18px;line-height:2}
.window-caption .cine-link{margin-top:20px}
.window-caption>span{display:block;font-size:12px;color:#f6f1e9b3;margin-top:24px}

/* ============ 7. 四时 ============ */
.cine-season-panel{opacity:1}
.cine-season-panel:not([hidden]){animation:season-in .9s var(--ease) both}
@keyframes season-in{from{opacity:0}to{opacity:1}}
.cine-season-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1e2e28b3,transparent 80%),linear-gradient(0deg,#1e2e28cc,transparent 50%);pointer-events:none;z-index:1}
.season-shade{display:none}
.season-character{position:absolute;z-index:2;right:7%;top:10%;font:400 clamp(240px,27vw,410px)/1.2 var(--serif);color:#f6f1e924;pointer-events:none}
.cine-season-heading{position:absolute;z-index:2;top:22%;left:8%}
.cine-season-heading h2{font-size:clamp(50px,5.2vw,80px);line-height:1.6}
.cine-season-heading p{font-size:17px;color:#f6f1e9e6;margin-top:30px;line-height:2}
.cine-season-tabs{position:absolute;z-index:3;bottom:120px;left:8%;display:flex;gap:26px;border-bottom:1px solid #f6f1e94d}
.cine-season-tabs button{font:34px/1.65 var(--serif);min-width:62px;min-height:70px;padding:8px 14px;color:#f6f1e9a6;background:transparent;border:0;transition:color .3s}
.cine-season-tabs button:hover{color:var(--cine-white)}
.cine-season-tabs button[aria-selected=true]{color:var(--cine-white);box-shadow:inset 0 -2px var(--amber)}
.cine-season-line{position:absolute;right:9%;bottom:137px;max-width:450px;color:#f6f1e9e6;font-size:17px;line-height:2;z-index:2}
.cine-season-more{position:absolute;z-index:3;bottom:64px;left:8%}

/* ============ 8. 邀请 ============ */
.cine-invitation{height:92svh;min-height:680px;position:relative;overflow:clip;isolation:isolate;color:var(--cine-white)}
.invitation-picture,.invitation-picture img,.invitation-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.invitation-picture img{object-position:65% center}
.invitation-shade{background:#1e2e2888}
.invitation-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-inline:28px}
.invitation-copy h2{font-size:clamp(44px,4.8vw,72px);line-height:1.7}
.invitation-copy p{color:#f6f1e9e6;font-size:17px;line-height:2;margin-top:28px}
.cine-contact{min-height:52px;display:inline-flex;align-items:center;padding:10px 40px;border:1px solid var(--amber);margin-top:34px;font-size:15px;background:#1e2e2866;color:var(--cine-white);transition:background .3s,color .3s}
.cine-contact:hover{background:var(--cine-white);color:var(--ink)}

/* ============ 章节指示（右侧） ============ */
.cinematic-home .footer{padding-bottom:110px}
.cine-wayfinder{position:fixed;z-index:35;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.cine-wayfinder a{display:flex;justify-content:flex-end;align-items:center;min-height:32px;font-size:12px;gap:12px;padding:3px 8px}
.cine-wayfinder a:after{content:'';display:block;width:12px;height:1px;background:currentColor;opacity:.5;transition:width .4s,opacity .4s}
.cine-wayfinder a[aria-current]:after{width:26px;opacity:1;background:var(--amber)}
.cine-wayfinder span{opacity:0;transition:opacity .4s}
.cine-wayfinder:hover span,.cine-wayfinder:focus-within span,.cine-wayfinder a[aria-current] span{opacity:1}
.cine-over-dark .cine-wayfinder{color:var(--cine-white)}

@media(max-width:960px){
 .cinematic-home .header-inner{padding-inline:28px}
 .cine-over-dark .nav{color:var(--ink)}
 .cine-over-dark .nav a:hover{color:var(--ink)}
 .cine-over-dark .nav-book{border-color:var(--ink);color:var(--ink)}
 .arrival-copy h1{font-size:clamp(52px,8.6vw,86px)}
 .cine-introduction{padding-inline:7vw}
 .day-reading{width:300px;right:8%}
 .day-heading h2{font-size:44px}
 .cine-season-line{max-width:320px}
 .duration-story{min-height:620px}
 .duration-copy{left:30px;right:30px}
 .cine-care{gap:7vw;padding-inline:8vw}
 .cine-wayfinder{display:none}
}
@media(max-width:640px){
 .cinematic-home .header-inner{padding-inline:22px}
 .cine-arrival{height:200svh}
 .arrival-copy{top:24%;left:24px;right:24px}
 .arrival-copy h1{font-size:clamp(42px,12vw,72px);line-height:1.6;letter-spacing:.06em}
 .arrival-place{font-size:12px;margin-bottom:18px}
 .arrival-deck{font-size:14px;letter-spacing:.02em;margin-top:18px}
 .arrival-actions{gap:28px}
 .arrival-line h2{font-size:34px;line-height:1.9}
 .cine-image-note{right:22px;bottom:22px}
 .arrival-scroll{bottom:64px}
 .cine-introduction{padding:110px 28px 120px;min-height:760px}
 .intro-picture img{object-position:58% center}
 .intro-shade{background:linear-gradient(90deg,#1e2e28eb,#1e2e28b3),linear-gradient(0deg,#1e2e2899,transparent 40%)}
 .intro-essay h2{font-size:32px;line-height:1.75;margin-bottom:24px}
 .intro-essay p:not(.intro-name){font-size:15px;line-height:2.1}
 .cine-duration{padding:84px 20px 60px}
 .duration-title{display:block;margin:0 8px 36px}
 .duration-title h2{font-size:38px}
 .duration-title p{font-size:16px;margin-top:18px;padding:0}
 .duration-pair{grid-template-columns:1fr;gap:20px}
 .duration-story{min-height:560px}
 .duration-copy{left:24px;right:24px;bottom:52px}
 .duration-copy h3{font-size:50px;margin-bottom:14px}
 .cine-day{min-height:820px}
 .day-heading{top:15%;left:28px}
 .day-heading h2{font-size:34px}
 .day-selector{left:28px;right:28px;bottom:290px;gap:0;justify-content:space-between}
 .day-selector button{font-size:22px;padding-inline:10px;flex:1}
 .day-reading{left:28px;right:28px;bottom:96px;width:auto;max-width:none}
 .day-reading h3{font-size:23px}
 .cine-care{display:block;padding:72px 28px 90px}
 .care-photo-frame{width:88%;margin-bottom:40px}
 .cine-care-copy h2{font-size:32px}
 .cine-window{height:170svh}
 .window-heading{left:28px;top:13%}
 .window-heading h2{font-size:38px}
 .window-frame{clip-path:inset(calc(44% * (1 - var(--o))) calc(7% * (1 - var(--o))) calc(12% * (1 - var(--o))) calc(7% * (1 - var(--o))))}
 .window-caption{left:28px;right:28px;bottom:86px}
 .window-caption p{font-size:17px}
 .cine-seasons{min-height:840px}
 .cine-season-heading{left:28px;top:18%}
 .cine-season-panel:after{background:linear-gradient(180deg,#1e2e28b3,#1e2e2833 55%,transparent 70%),linear-gradient(0deg,#1e2e28d9,transparent 55%)}
 .cine-season-heading h2{font-size:40px}
 .cine-season-heading p{font-size:16px}
 .season-character{top:6%;right:0;font-size:200px}
 .cine-season-tabs{left:28px;right:28px;bottom:240px;gap:0;justify-content:space-between}
 .cine-season-tabs button{font-size:28px;min-width:48px;padding:8px 10px}
 .cine-season-line{right:28px;left:28px;bottom:165px;max-width:none;font-size:15px}
 .cine-season-more{left:28px;bottom:96px}
 .cine-invitation{min-height:640px}
 .invitation-copy h2{font-size:38px}
 .invitation-copy p{font-size:16px}
}

/* 减少动态：场景直接停在终态，不保留滚动长度 */
@media(prefers-reduced-motion:reduce){
 .cine-arrival,.cine-window{height:100svh}
 .cine-layer.stream,.cine-layer.shelter,.water-line,.shelter-line,.cine-veil{display:none}
 .cine-layer.valley,.arrival-copy,.arrival-scroll{opacity:1!important;transform:none!important}
 .window-frame{clip-path:none!important}
 .window-picture img{transform:none}
 .window-heading{display:none}
 .window-caption{opacity:1;transform:none}
 .care-picture{clip-path:none;transition:none}
 .care-picture img{transform:none;transition:none}
 .day-frame,.cine-season-panel{transition:none;animation:none!important}
}
/* 七日 / 十五日卡片按照片原本比例显示，不裁切、不放大（2026-11-06） */
.duration-story{min-height:0;aspect-ratio:755/1024}
.duration-picture img,.duration-story:hover .duration-picture img,.duration-story:focus-within .duration-picture img{transform:none}
/* 四时 · 春：照片完整显示不裁切，空出的边用同图虚化垫底（2026-11-06） */
#cine-spring::before{content:"";position:absolute;inset:-60px;background:url(../images/home-spring-balloons-480.webp) center/cover;filter:blur(40px) brightness(.7) saturate(.9)}
#cine-spring .season-picture img{object-fit:contain;object-position:center}
/* 「住下来」文字放到下方草坪的空处，不压在建筑上（2026-11-06） */
.shelter-line{justify-content:flex-end;padding-bottom:12vh;padding-right:9vw}
.shelter-line h2{text-shadow:0 2px 24px #1e2e2880}
@media (max-width:760px){.shelter-line{padding-bottom:17vh;padding-right:0}}
.nowrap{white-space:nowrap}