/* A shared photographic stage: the scene is an image; type and grains stay live. */
.demo{padding:80px 6vw 30px;overflow-x:clip}
.demo-shell{position:relative;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.15fr);grid-template-rows:1fr .48fr;grid-template-areas:"copy photos" "film photos";column-gap:3vw;min-height:calc(100svh - 154px);max-width:1380px;margin:auto}
.demo .demo-field{position:absolute;inset:0;pointer-events:none}
.demo-heading,.demo-film{position:relative;z-index:3}
html[data-active-section="demo"] .particle-stage{z-index:2;mix-blend-mode:screen}
.demo-heading{grid-area:copy;align-self:center;margin:0;padding-bottom:10px}
.demo-heading .eyebrow{margin-bottom:32px}
.demo-heading h2{font-size:clamp(30px,3.45vw,52px);line-height:1.4}
.demo-heading .lead{margin-top:28px;font-size:15px;line-height:2.1;max-width:440px}
.demo-heading .copy-sentence{text-wrap:pretty}
.photo-carousel{position:absolute;inset:0;min-width:0}
.photo-track{position:absolute;inset:-80px -6vw -5px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;mask-image:linear-gradient(#000 93%,transparent)}
.photo-track::-webkit-scrollbar{display:none}
.photo-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.photo-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.photo-controls{position:absolute;z-index:3;bottom:0;left:53%;right:1%;display:flex;align-items:center;gap:20px;font-size:12px;color:#bdc2c5;text-shadow:0 1px 8px #000,0 0 4px #000}
.photo-count{min-width:50px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.photo-rule{height:1px;background:#51575a;flex:1;max-width:70px;opacity:.65}
.photo-navigation{display:flex;gap:8px;align-items:center}
.photo-navigation button{width:42px;height:40px;border:0;background:transparent;color:#e8ecef;font-size:25px;cursor:pointer;line-height:1;transition:transform .2s,color .2s}
.photo-navigation button:hover{color:#fff;transform:translateX(3px)}
.photo-navigation button:first-child:hover{transform:translateX(-3px)}
.photo-caption{margin-left:auto;text-align:right;white-space:nowrap;letter-spacing:.02em}.photo-caption small{display:block;font-size:10px;color:#929a9e}
.demo-film{grid-area:film;align-self:start;min-width:0;margin-top:5px}
.film-entry{display:flex;align-items:center;gap:24px;min-height:124px}
.film-orbit{position:relative;display:grid;place-items:center;width:112px;height:112px;flex-shrink:0;color:#e5e8e9}
.film-orbit svg{margin-left:4px;opacity:.65}
.static-scenes .film-orbit{border:2px dotted #92999d;border-radius:50%}
.demo-film .film-title{font-size:18px;letter-spacing:.02em;color:#e6e8ea}
.film-status{font-size:12px;margin-top:5px;color:#9aa2a6}
.film-social{display:inline-block;margin:3px 0 0 136px;padding:7px 0;color:#9aa2a6;font-size:12px;text-underline-offset:4px}
.film-social:hover{text-decoration:underline;color:#e6e8ea}
.demo-film video{display:block;max-width:100%;width:100%;aspect-ratio:16/9;object-fit:contain;background:#080b0c}
.demo-film video[hidden]{display:none}
.video-error{font-size:12px;margin-top:10px}
.demo .next-link{position:relative;display:block;left:auto;bottom:auto;transform:none;text-align:center;margin:22px auto 0}
@media(min-width:701px) and (max-height:820px){.demo{padding-top:75px}.demo-heading h2{font-size:38px}.demo-heading .eyebrow{margin-bottom:18px}.demo-heading .lead{margin-top:18px;font-size:14px}.film-orbit{width:92px;height:92px}.film-entry{min-height:95px}.demo-film{margin-top:0}.photo-controls{margin-top:12px}}
@media(min-width:701px) and (max-width:1050px){.demo{padding-left:7vw;padding-right:5vw}.demo-shell{grid-template-columns:minmax(270px,1fr) minmax(0,1fr);gap:20px}.demo-heading h2{font-size:32px}.demo-heading .lead{font-size:13px}.photo-controls{gap:9px}.photo-label{font-size:10px}.photo-rule{display:none}}
@media(max-width:700px){
 .demo{padding:88px 24px 32px}.demo-shell{display:flex;flex-direction:column;min-height:0;gap:24px}
 .demo-heading{align-self:stretch;padding:0}.demo-heading .eyebrow{margin-bottom:17px}.demo-heading h2{font-size:31px;line-height:1.35}
 .demo-heading .lead{font-size:13px;margin-top:20px;line-height:1.9;max-width:none}
 .photo-carousel{position:relative;inset:auto;align-self:stretch}.photo-track{position:relative;inset:auto;width:calc(100% + 48px);margin-left:-24px;height:430px;mask-image:linear-gradient(transparent,#000 4%,#000 94%,transparent)}
 .photo-slide img{height:100%;width:100%;object-position:79% center}.photo-slide--inside img{object-position:83% center}
 .photo-controls{position:relative;left:auto;right:auto;bottom:auto;gap:10px;margin-top:12px}.photo-rule{max-width:36px}.photo-navigation{gap:0}.photo-navigation button{width:38px}.photo-label{font-size:11px}
 .demo-film{align-self:stretch;margin:0}.film-entry{gap:20px;min-height:90px}.film-orbit{width:86px;height:86px}.demo-film .film-title{font-size:16px}
 .film-social{margin-left:106px}
 .demo .next-link{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){.photo-navigation button{transition:none}}
/* The short film opens separately, preserving the full photographic chapter. */
html[data-active-section="demo"] .particle-stage{z-index:2;mix-blend-mode:screen}
.film-entry:hover{text-decoration:none}.film-entry:hover .film-title{text-decoration:underline;text-underline-offset:5px}
#demo-dialog{border:1px solid #404a50;border-radius:5px;background:#080b0c;color:#eef0f2;padding:14px 18px;max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto}
#demo-dialog::backdrop{background:#000d}
.film-dialog-head{display:flex;align-items:center;gap:30px;justify-content:space-between;margin-bottom:12px;font-size:11px}
.film-dialog-head button{background:transparent;border:0;color:white;cursor:pointer;padding:8px 4px;font-size:12px}
#demo-dialog video{display:block;height:min(76svh,760px);max-width:100%;aspect-ratio:9/16;background:#000;object-fit:contain;margin:auto}
@media(max-width:700px){#demo-dialog{padding:10px 12px}.film-dialog-head{gap:10px}#demo-dialog video{height:auto;width:min(100%,350px);max-height:76svh}}

@media(min-width:701px){
 .demo-shell{min-height:max(614px,calc(100svh - 154px))}
 .photo-track{inset:auto;top:-80px;bottom:-5px;left:50%;width:100vw;transform:translateX(-50%);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
 .photo-carousel:after{content:'';position:absolute;pointer-events:none;z-index:1;top:-80px;bottom:-6px;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(to top,var(--bg),transparent 12%),linear-gradient(to right,var(--bg),transparent 14%,transparent 86%,var(--bg))}
}

#demo-dialog .film-dialog-social{display:block;margin:12px 0 0;text-align:center}
/* Keep a real gutter for the photographic chapter's uncompressed particle flow. */
@media(min-width:701px){.demo-heading{transform:translateY(-24px)}.demo-film{margin-top:48px}}
/* The ring has a clear departure lane on the right of its label. */
.film-entry{width:min(100%,360px);flex-direction:row-reverse;justify-content:space-between}
.demo-film .film-social{margin-left:0}
@media(min-width:701px){.photo-controls{left:0;right:auto;width:min(100%,430px)}}
@media(max-width:700px){.photo-controls{width:min(100%,270px)}}

/* The photo's foreground, film entry and controls each keep their own vertical space. */
.demo-flow-lane{display:none}
@media(min-width:701px){
 .demo-flow-lane{display:block;position:absolute;left:0;right:0;bottom:64px;height:90px;pointer-events:none}
 .demo-film{position:absolute;grid-area:auto;left:0;bottom:170px;width:min(45%,360px);margin:0}
}
@media(min-width:701px) and (max-height:820px){
 .demo-flow-lane{height:64px}
 .demo-film{bottom:154px}
}