/* South Shore Sea Burials — directional page motion + image reveal
   Desktop: header drops, lead rises, body pulls inward, footer rises.
   Lazy-loaded photography gets an independent soft rise/fade.
   Mobile: vertical rise/fade only. */
:root{
  --sssb-motion-y:24px;
  --sssb-motion-x:36px;
  --sssb-motion-duration:1100ms;
  --sssb-motion-ease:cubic-bezier(.22,.61,.36,1);
  --sssb-image-y:14px;
  --sssb-image-duration:950ms;
}
[data-motion].motion-initialized{
  opacity:0;
  transition:
    opacity var(--sssb-motion-duration) var(--sssb-motion-ease),
    transform var(--sssb-motion-duration) var(--sssb-motion-ease);
  will-change:opacity,transform;
}
[data-motion="rise"].motion-initialized{transform:translate3d(0,var(--sssb-motion-y),0)}
[data-motion="drop"].motion-initialized{transform:translate3d(0,calc(var(--sssb-motion-y) * -1),0)}
[data-motion="pull-left"].motion-initialized{transform:translate3d(calc(var(--sssb-motion-x) * -1),0,0)}
[data-motion="pull-right"].motion-initialized{transform:translate3d(var(--sssb-motion-x),0,0)}
[data-motion="fade"].motion-initialized{transform:none}
[data-motion].motion-initialized.motion-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}
.motion-delay-1{transition-delay:85ms!important}
.motion-delay-2{transition-delay:170ms!important}
.motion-delay-3{transition-delay:255ms!important}
.motion-delay-4{transition-delay:340ms!important}
.motion-delay-5{transition-delay:425ms!important}

/* Independent image reveal. This is intentionally applied only after JS
   initializes a native-lazy image, so content never stays hidden if JS fails. */
img.image-reveal-initialized{
  opacity:0;
  transform:translate3d(0,var(--sssb-image-y),0);
  transition:
    opacity var(--sssb-image-duration) var(--sssb-motion-ease),
    transform var(--sssb-image-duration) var(--sssb-motion-ease);
  will-change:opacity,transform;
}
img.image-reveal-initialized.image-reveal-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

@media(max-width:700px){
  :root{
    --sssb-motion-y:18px;
    --sssb-motion-duration:900ms;
    --sssb-image-y:12px;
    --sssb-image-duration:820ms;
  }
  [data-motion].motion-initialized{
    transform:translate3d(0,var(--sssb-motion-y),0)!important;
  }
  [data-motion].motion-initialized.motion-visible{
    transform:translate3d(0,0,0)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  [data-motion].motion-initialized,
  [data-motion].motion-initialized.motion-visible,
  img.image-reveal-initialized,
  img.image-reveal-initialized.image-reveal-visible{
    opacity:1;
    transform:none!important;
    transition:none!important;
    will-change:auto;
  }
}