/* Content stays visible. The scene, crop and spatial relationships follow scroll. */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:100;pointer-events:none}
.hero-sequence{position:relative}
.hero-sequence+.site-sections{padding-top:55px}
.cover-hero{background:var(--paper)}
.hero-media{position:absolute;inset:0;z-index:2;overflow:hidden;isolation:isolate}
.hero-media>img{position:absolute;width:var(--image-width,100%);height:var(--image-height,100%);max-width:none;left:50%;top:50%;object-fit:fill;transform:translate(-50%,-50%);z-index:0}
.hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#103f3040,transparent 45%,#10362955);z-index:1;pointer-events:none}
.hero-media .cover-word{z-index:2}
.hero-media .cover-foreground{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-media .cover-foreground img{position:absolute;width:var(--image-width);height:var(--image-height);max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:fill;clip-path:url(#people-silhouette)}
.cover-hero:after{display:none}
.cover-hero .cover-top,.cover-hero .cover-intro{position:relative;z-index:4}
.hero-media .illustration-label{position:absolute;bottom:12px;right:20px;z-index:5}
.hero-finale,.hero-scroll-cue,.hero-side-note{display:none}
.aperture-definitions{position:absolute;pointer-events:none}

/* 01 — Full photographic cover → notched portrait → collective signature. */
.scroll-cinema .hero-sequence>.cover-hero{position:sticky;top:0;height:100svh!important;min-height:610px;overflow:hidden}
.scroll-cinema .hero-media{clip-path:url(#hero-aperture);will-change:clip-path}
.scroll-cinema .hero-media>img,.scroll-cinema .hero-media .cover-foreground img{transform:translate(calc(-50% - var(--photo-x,0px)),calc(-50% - var(--photo-y,0px))) scale(var(--photo-zoom,1));will-change:transform}
.scroll-cinema .hero-media .cover-word{transform:translateX(var(--word-x,0px));opacity:var(--word-opacity,1);will-change:transform}
.scroll-cinema .cover-hero .cover-intro{transform:translateY(var(--intro-y,0px));opacity:var(--intro-opacity,1)}
.scroll-cinema .cover-hero .cover-top{opacity:var(--intro-opacity,1)}
.scroll-cinema .hero-finale{display:block;position:absolute;left:1.5%;right:1.5%;bottom:5.5%;font-size:clamp(100px,21.7vw,312px);font-weight:400;letter-spacing:-.085em;line-height:.85;color:var(--ink);text-align:center;z-index:1;transform:translateY(var(--final-y,20vh)) scale(var(--final-scale,.82));opacity:var(--final-opacity,0);will-change:transform}
.scroll-cinema .hero-scroll-cue{position:absolute;bottom:18px;right:32px;display:flex;align-items:center;gap:12px;z-index:6;color:var(--ink);background:var(--paper);border-radius:24px;padding:9px 14px;font-size:15px}
.hero-scroll-cue>span:first-child{font-size:8px;letter-spacing:1px}
.hero-cue-line{display:block;width:50px;height:2px;background:#17382e25;overflow:hidden}
.hero-cue-line i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(var(--hero-p,0));transform-origin:left}
.scroll-cinema .hero-side-note{display:flex;position:absolute;left:5%;right:5%;top:39%;justify-content:space-between;z-index:0;color:var(--ink);font-size:9px;letter-spacing:1px;opacity:var(--final-opacity,0)}
.scroll-cinema .hero-sequence+.site-sections{padding-top:55px}
.scroll-cinema .hero-media .illustration-label{opacity:var(--word-opacity,1)}

/* 02 — The existing bento is assembled spatially from a central fan of cards. */
.identity-mosaic{position:relative;isolation:isolate}
.scroll-cinema .mosaic-tile{will-change:transform;transform-origin:center center}
.scroll-cinema .mosaic-portrait{z-index:4}
.scroll-cinema .mosaic-eye{z-index:2}
.scroll-cinema .mosaic-spark{z-index:3}
.scroll-cinema .mosaic-links{z-index:1}

/* 03 — Vertical travel advances the full carousel horizontally. */
.actions-sequence{position:relative;margin-bottom:64px}
.actions-sequence .home-program{margin-bottom:0}
.scroll-cinema .actions-pinned>.home-program{position:sticky;top:var(--pin-top,24px)}
.scroll-cinema .actions-pinned .carousel-track{transition:none;will-change:transform}
.actions-scroll-cue{display:none}
.actions-pinned .actions-scroll-cue{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px;color:var(--muted)}
.actions-scroll-cue>span:first-child{font-size:7px;line-height:1.6;letter-spacing:.7px;max-width:88px}
.actions-scroll-cue>span:last-child{font-size:22px}
.actions-scroll-cue>div{height:70px;width:2px;background:#17382e20;overflow:hidden}
.actions-scroll-cue i{display:block;width:100%;height:100%;background:var(--ink);transform:scaleY(var(--actions-p,0));transform-origin:top}
.actions-pinned .carousel-viewport{overflow:hidden}
.actions-pinned .program-slide{padding-right:14px}

/* Quieter depth on the other pages; no delayed text or disappearing cards. */
.scroll-cinema :is(.association-image,.tracking-photo,.memory-photo-strip>figure)>img{transform:translateY(var(--photo-drift,0px)) scale(1.12)}
.scroll-cinema .history-cover>img{transform:translateY(calc(var(--history-p,0)*50px)) scale(1.12)}
.scroll-cinema .history-cover-word{transform:translateX(calc(var(--history-p,0)*-110px))}
.scroll-cinema .archive-orbit>.orbit-photo:nth-child(2){translate:0 calc((.5 - var(--orbit-p,.5))*70px);rotate:calc((.5 - var(--orbit-p,.5))*-12deg)}
.scroll-cinema .archive-orbit>.orbit-photo:nth-child(4){translate:0 calc((var(--orbit-p,.5) - .5)*70px);rotate:calc((.5 - var(--orbit-p,.5))*12deg)}
.scroll-cinema .archive-orbit>.orbit-main{scale:calc(.9 + var(--orbit-p,.5)*.16)}

@media(max-width:1100px){.scroll-cinema .hero-side-note{font-size:7px;left:3%;right:3%}.scroll-cinema .hero-finale{font-size:21.7vw}}
@media(max-width:740px){
 .scroll-cinema .hero-sequence>.cover-hero{height:90svh!important;min-height:560px}
 .scroll-cinema .hero-finale{font-size:21.4vw;bottom:16%;left:0;right:0}
 .scroll-cinema .hero-side-note{display:none}
 .scroll-cinema .hero-scroll-cue{right:16px;bottom:17px;gap:9px;padding:8px 11px}
 .hero-scroll-cue>span:first-child{font-size:7px}
 .scroll-cinema .hero-sequence+.site-sections{padding-top:35px}
 .actions-sequence{margin-bottom:40px}
 .scroll-cinema .mosaic-tile{will-change:auto}
 .scroll-cinema .archive-orbit>.orbit-photo{translate:none!important;rotate:0deg!important}
}
@media(prefers-reduced-motion:reduce){
 .scroll-progress{display:none}
 .hero-sequence,.actions-sequence{height:auto!important}
 .hero-media{clip-path:none}
 .mosaic-tile{transform:none!important}
 .hero-finale,.hero-scroll-cue,.hero-side-note{display:none!important}
 .cover-hero .cover-intro,.cover-hero .cover-top,.hero-media .cover-word{opacity:1!important;transform:none!important}
}
