/* Final photo treatment: masks belong to stationary full-bleed frames. */
.cinematic .health-cinema{padding-bottom:0}
.cinematic .health-cinema::after{content:none;display:none}
.cinematic .health-bottom{padding-top:20px;padding-bottom:36px;gap:12px;border-color:rgba(9,11,16,.16)}
.cinematic #everyday,.cinematic #care{position:relative;isolation:isolate;height:auto;min-height:960px;background:var(--ink);overflow:hidden}
.cinematic #everyday::before,.cinematic #care::before{content:none;display:none}
.cinematic .human-cinema .photo-frame{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;--photo-end:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.97) 65%,rgba(0,0,0,.88) 71%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.38) 86%,rgba(0,0,0,.12) 94%,transparent 100%);-webkit-mask-image:var(--photo-end);mask-image:var(--photo-end)}
.cinematic .photo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 35%;opacity:1;animation:photo-breathe 24s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:65% 40%;-webkit-mask-image:none;mask-image:none}
/* Paper dissolves directly into the photograph across its entire width. No black bridge. */
.cinematic #everyday .photo-frame::after{content:"";position:absolute;inset:0 0 auto;height:280px;pointer-events:none;background:linear-gradient(to bottom,var(--paper) 0%,rgba(255,252,246,.97) 12%,rgba(255,252,246,.88) 25%,rgba(255,252,246,.68) 42%,rgba(255,252,246,.38) 62%,rgba(255,252,246,.12) 82%,rgba(255,252,246,0) 100%)}
.cinematic #everyday .human-shade{z-index:-1;background:linear-gradient(90deg,rgba(9,11,16,.8),rgba(9,11,16,.32) 43%,transparent 72%);top:0;-webkit-mask-image:linear-gradient(transparent 0px,#000 340px);mask-image:linear-gradient(transparent 0px,#000 340px)}
.cinematic #everyday .human-copy{position:relative;z-index:2;padding-top:360px;padding-bottom:220px}
/* Independent incoming dissolve: long eased fade, full-opacity portrait area, long exit. */
.cinematic #care{margin-top:72px;border-top:0}
.cinematic #care .photo-frame{--photo-end:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.03) 4%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.32) 14%,rgba(0,0,0,.62) 21%,rgba(0,0,0,.88) 27%,#000 33%,#000 62%,rgba(0,0,0,.97) 67%,rgba(0,0,0,.88) 73%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.38) 87%,rgba(0,0,0,.12) 95%,transparent 100%)}
.cinematic #care .human-copy{padding-top:340px;padding-bottom:210px}
.cinematic #care .human-shade{background:linear-gradient(90deg,rgba(9,11,16,.86),rgba(9,11,16,.35) 42%,transparent 74%)}
.cinematic .principles-cinema{padding-top:36px;padding-bottom:64px}.cinematic .principles-cinema>.eyebrow{margin-bottom:28px}
.cinematic .human-cinema.photo-away .photo-frame img,.page-hidden .photo-frame img{animation-play-state:paused!important}
.motion-off .photo-frame img{animation:none!important;transform:none!important}
@media(max-width:800px){
 .cinematic .health-bottom{padding-bottom:32px}
 .cinematic #everyday,.cinematic #care{min-height:0}
 .cinematic .human-cinema .photo-frame{height:760px;bottom:auto}
 .cinematic .photo-frame img{object-position:76% 32%}
 .cinematic #everyday .photo-frame::after{height:210px}
 .cinematic #everyday .human-copy,.cinematic #care .human-copy{padding-top:640px;padding-bottom:110px}
 .cinematic #everyday .human-shade,.cinematic #care .human-shade{top:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(9,11,16,.8) 18%,transparent 46%)}
 .cinematic #care{margin-top:56px}
 .cinematic #care .photo-frame img{object-position:75% 35%}
/* Photo upgrade (PHOTO-UPGRADE.md, Delivery): the woman's narrow-screen focal point moves so the carton and phone stay within the crop. Phone breakpoint only. */
.cinematic #everyday .photo-frame img{object-position:58% 32%}
 .cinematic .principles-cinema{padding-top:28px;padding-bottom:48px}.cinematic .principles-cinema>.eyebrow{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){.cinematic .photo-frame img{animation:none!important;transform:none!important}}

/* Jogging scene: broad fixed fades into Paper, with caption outside the mask. */
.cinematic .health-film{height:auto;min-height:900px;padding:300px 0 260px;background:var(--paper);-webkit-mask-image:none;mask-image:none;overflow:hidden}
.cinematic .health-film::after{content:none;display:none}
.cinematic .health-film-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none;--jogging-fade:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.03) 3%,rgba(0,0,0,.12) 6%,rgba(0,0,0,.32) 10%,rgba(0,0,0,.62) 15%,rgba(0,0,0,.88) 20%,#000 25%,#000 64%,rgba(0,0,0,.97) 69%,rgba(0,0,0,.88) 75%,rgba(0,0,0,.68) 81%,rgba(0,0,0,.38) 88%,rgba(0,0,0,.12) 95%,transparent 100%);-webkit-mask-image:var(--jogging-fade);mask-image:var(--jogging-fade)}
.cinematic .health-film-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,11,16,.88),rgba(9,11,16,.45) 35%,transparent 72%)}
.cinematic .health-film figcaption{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;padding:0;margin-left:max(var(--gutter),calc((100% - 1200px)/2));max-width:40%;z-index:2}
@media(max-width:800px){
 .cinematic .health-film{min-height:1000px;padding:480px 24px 270px}
 .cinematic .health-film figcaption{margin:0;padding:0;max-width:none;left:auto;right:auto;top:auto;bottom:auto;transform:none}
 .cinematic .health-film-visual::after{background:linear-gradient(to bottom,transparent 25%,rgba(9,11,16,.2) 42%,rgba(9,11,16,.78) 62%,rgba(9,11,16,.88) 80%)}
}