/* Immersive scroll scenes: a book that opens, a shelf that drifts. Driven by immersive.js via --o --t --c1..3 --d */
.story{position:relative;height:340vh;margin-top:90px;--o:0;--t:0;--c1:0;--c2:0;--c3:0;--fg:#263f36}
.story-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center;perspective:1700px;background:color-mix(in srgb,#f6f4ec calc((1 - var(--t))*100%),#1c352b);color:var(--fg)}
.story-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(45% 35% at 22% 14%,#d1ad6e55,transparent 70%);opacity:var(--t);pointer-events:none}
.bk{--h:min(56vh,500px);position:relative;margin-bottom:12vh;width:calc(var(--h)*.69);height:var(--h);transform-style:preserve-3d;--shrink:0;transform:scale(calc(1 - var(--o)*var(--shrink))) translateX(calc(var(--o)*50%)) rotateX(calc(8deg - var(--o)*8deg)) rotateY(calc(-24deg + var(--o)*24deg));filter:drop-shadow(0 40px 40px #0003)}
.pg{position:absolute;inset:0;background:#fcf9ef;padding:9%;font:calc(var(--h)*.036)/1.9 var(--serif);color:#354337;letter-spacing:.06em;overflow:hidden}
.pg h3{font-size:1.2em;font-weight:500;margin:0 0 .9em;opacity:var(--c2)}
.pg p{margin:0 0 .8em;opacity:var(--c2);transform:translateY(calc((1 - var(--c2))*12px))}
.pg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 9%);pointer-events:none}
.cv{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(calc(var(--o)*-180deg))}
.cv-f,.cv-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cv-f{width:100%;height:100%;border-radius:1px 4px 4px 1px;box-shadow:inset 6px 0 6px -3px #0004}
.cv-b{transform:rotateY(180deg);background:#f4efe0;display:grid;place-items:center;font:calc(var(--h)*.07) var(--serif);letter-spacing:.4em;color:#a9803f;text-indent:.4em}
.cv-b:after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,#0003,transparent 9%)}
.story-caps{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);height:calc(clamp(24px,3.6vw,48px)*1.6);text-align:center;padding-inline:24px;pointer-events:none}
.cap{position:absolute;top:0;left:0;right:0;margin:0;padding-inline:24px;font:clamp(24px,3.6vw,48px)/1.5 var(--serif);letter-spacing:.06em}
.c1{opacity:var(--c1);transform:translateY(calc((1 - var(--c1))*24px))}
.c2{opacity:var(--c2);transform:translateY(calc((1 - var(--c2))*24px))}
.c3{opacity:var(--c3);transform:translateY(calc((1 - var(--c3))*24px))}
/* shelf drift */
.drift{position:relative;height:260vh;--d:0}
.drift-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:5vh;background:#1c352b;color:#f6f4ec}
.drift-note{text-align:center;font:clamp(18px,2vw,26px) var(--serif);letter-spacing:.18em;opacity:.85;margin:0;padding-inline:24px}
.drift-track{display:flex;gap:clamp(22px,4vw,64px);padding-inline:50vw;width:max-content;transform:translateX(calc(var(--d)*-100% + var(--d)*100vw));will-change:transform;align-items:center}
.drift-track img{width:clamp(150px,19vw,280px);aspect-ratio:600/870;border-radius:2px 4px 4px 2px;box-shadow:14px 24px 34px -14px #0008}
.drift-track img:nth-child(odd){transform:translateY(-4vh)}.drift-track img:nth-child(3n){transform:translateY(5vh)}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:650px){.story{height:300vh;margin-top:60px}.bk{--h:min(44vh,400px);--shrink:.34}.pg{padding:10% 8%}.drift{height:220vh}}
@media(prefers-reduced-motion:reduce){.story,.drift{height:auto}.story-stage,.drift-stage{position:relative;height:auto;min-height:80vh;padding-block:60px}.story{--o:1;--t:.9;--c2:1;--c3:1;--c1:0;--fg:#f6f4ec}.cap.c1,.cap.c2{display:none}.story-caps{position:static;height:auto;margin-top:30px}.cap{position:static}.drift-track{transform:none;overflow-x:auto;padding-inline:24px;width:auto}.rv{opacity:1;transform:none}}