/* Motion for the retreat pages, matching the church pages (assets/refine.css):
   smooth eased reveals, photos that unveil upward, headlines that rise word by word.
   Added by tools/port_st_abraam.py; driven by assets/st-abraam/motion.js. */
:root{--glide:cubic-bezier(.16,1,.3,1)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* the St. Abraam nav tucks away while scrolling down and returns on the way up */
body.has-church-bar .nav-outer{transition:transform .5s var(--glide),box-shadow .4s}
body.has-church-bar .nav-outer.tucked{transform:translateY(-101%)}

/* blocks drift up into place */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--glide),transform 1.2s var(--glide)}
.reveal.in{opacity:1;transform:none}

/* items inside a block follow one after another */
.sa-kids>*{opacity:0;transform:translateY(26px);transition:opacity .9s var(--glide),transform 1.1s var(--glide);transition-delay:calc(var(--i,0) * 90ms + 120ms)}
.in .sa-kids>*,.sa-kids.in>*{opacity:1;transform:none}

/* photos unveil upward as they arrive */
.reveal img:not(.keep){clip-path:inset(18% 0 0 0);transform:scale(1.08);transition:clip-path 1.4s var(--glide),transform 1.8s var(--glide),opacity .4s ease}
.reveal.in img:not(.keep){clip-path:inset(0 0 0 0);transform:none}
.flow-stage.reveal img{transform:none}

/* hero: the aerial settles in, the arch photo unveils, the headline rises word by word */
.hero .bg{animation:sa-settle 2.6s var(--glide) both;will-change:translate}
@keyframes sa-settle{from{transform:scale(1.1)}to{transform:none}}
.hero .arch img{animation:sa-unveil 1.6s var(--glide) .5s both}
@keyframes sa-unveil{from{clip-path:inset(18% 0 0 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}
.sa-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
.sa-words .w>span{display:inline-block;transform:translateY(108%);animation:sa-line 1.2s var(--glide) forwards;animation-delay:calc(var(--i,0) * 70ms + 150ms)}
@keyframes sa-line{to{transform:none}}
.hero h1.sa-words{opacity:1;animation:none}

@media (prefers-reduced-motion: reduce){
  .reveal,.sa-kids>*{opacity:1!important;transform:none!important}
  .reveal img,.hero .arch img{clip-path:none!important;transform:none!important}
  .sa-words .w>span{transform:none!important}
}