/* 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(var(--hero-scale,1))}
.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(var(--entry-scale,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 day in your new life." opens the day as a chapter title --- */
.life-page .day-title{padding-block:clamp(110px,14vw,200px);text-align:center}
.life-page .day-title>h2{font-size:clamp(48px,7.4vw,112px);line-height:1;max-width:14ch;margin:0 auto;text-transform:uppercase}
.life-page .day-title>p{font-size:19px;line-height:1.8;max-width:62ch;margin:44px auto 0}

/* --- principles: six numbered text cards, three across --- */
.life-page .principles{padding:clamp(80px,10vw,150px) 7%}
.life-page .principles ol{list-style:none;margin:0;padding:0;counter-reset:principle;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(56px,6vw,96px) 6%}
.life-page .principles li{counter-increment:principle;border-top:1px solid var(--copper-rule);padding-top:26px}
.life-page .principles li:before{content:counter(principle,decimal-leading-zero);display:block;font-size:15px;font-weight:600;letter-spacing:.2em;color:var(--copper);margin-bottom:34px}
.life-page .principles h2{font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:.02em}
.life-page .principles .motto{display:block;font-size:clamp(19px,1.6vw,23px);line-height:1.35;margin-top:16px;letter-spacing:0;color:var(--copper)}
.life-page .principles .dash{font-size:0}
.life-page .principles p{margin-top:22px;font-size:18px;line-height:1.75;color:var(--muted);max-width:34ch}
@media(max-width:1000px){.life-page .principles ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.life-page .principles ol{grid-template-columns:1fr;gap:52px}.life-page .principles p{font-size:17px}}

/* --- 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}
}