/* Life at One — added motion. Loads after site.css and only affects .life-page.
   Every effect here is decoration: the page reads identically with CSS motion
   disabled, and the reduced-motion block at the bottom removes all of it. */

.life-page{--life-ease:cubic-bezier(.22,1,.36,1)}

/* --- opening: image drifts slower than the page, title lifts away --- */
.life-page .page-hero{overflow:clip}
.life-page .page-hero>picture>img{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.14)}
.life-page .page-hero>div{transform:translate3d(0,var(--hero-lift,0px),0);opacity:var(--hero-fade,1)}

/* --- entry photographs drift against the scroll, alternating direction --- */
.life-page .entry-media{overflow:hidden}
.life-page .entry-media img{transform:translate3d(0,var(--entry-drift,0px),0) scale(1.1)}

/* --- chapter headings settle as the chapter arrives --- */
.life-page .chapter h2{transform:translate3d(0,var(--head-rise,0px),0);opacity:var(--head-fade,1)}

/* --- one staggered cascade, reused wherever a group enters together --- */
@media(prefers-reduced-motion:no-preference){
 .life-page [data-life-stagger].life-ready>*{opacity:0;transform:translateY(var(--rise,20px));
  transition:opacity .75s var(--life-ease) calc(var(--i,0)*var(--step,90ms)),
             transform .75s var(--life-ease) calc(var(--i,0)*var(--step,90ms))}
 .life-page [data-life-stagger].life-in>*{opacity:1;transform:none}
 /* a container that cascades its children must not also fade as a block */
 .life-page [data-life-stagger][data-reveal]{opacity:1;transform:none;transition:none}

 /* pull quotes arrive a word at a time */
 .life-page .pull.life-ready span{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .62s var(--life-ease) calc(var(--i,0)*42ms),
             transform .62s var(--life-ease) calc(var(--i,0)*42ms)}
 .life-page .pull.life-in span{opacity:1;transform:none}
}

/* the year list cascades row by row */
.life-page #year dl{--step:70ms;--rise:16px}
.life-page #at-one{--step:110ms}
.life-page .chapter-copy{--step:130ms;--rise:24px}

@media(max-width:900px){
 /* shorter travel on phones, where sections fill the viewport sooner */
 .life-page [data-life-stagger]>*{--rise:14px;--step:70ms}
}

@media(prefers-reduced-motion:reduce){
 .life-page .page-hero>picture>img,.life-page .page-hero>div,
 .life-page .entry-media img,.life-page .chapter h2{transform:none;opacity:1}
 .life-page [data-life-stagger]>*,.life-page .pull span{opacity:1;transform:none;transition:none}
}