/* A restrained global motion language: lift, mask, stagger and quiet depth. */
html.motion-v16 .motion-rise,
html.motion-v16 .motion-card {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .85s cubic-bezier(.2,.65,.25,1),
    transform .95s cubic-bezier(.2,.65,.25,1);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-v16 .motion-card { transform: translate3d(0, 38px, 0); }

html.motion-v16 .motion-image {
  opacity: 0;
  clip-path: inset(9% 0 0 0);
  transform: scale(1.025);
  transition:
    opacity 1s cubic-bezier(.2,.65,.25,1),
    clip-path 1.25s cubic-bezier(.2,.65,.25,1),
    transform 1.45s cubic-bezier(.2,.65,.25,1);
  transition-delay: var(--motion-delay, 0ms);
}

html.motion-v16 .motion-rise.motion-in,
html.motion-v16 .motion-card.motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-v16 .motion-image.motion-in {
  opacity: 1;
  clip-path: inset(0);
  transform: scale(1);
}

html.motion-v16 .site-divider {
  transform-origin: center;
  transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
}
html.motion-v16 .site-divider.motion-divider { clip-path: inset(0 50%); opacity: .35; }
html.motion-v16 .site-divider.motion-divider.motion-in { clip-path: inset(0); opacity: 1; }

html.motion-v16 .motion-depth {
  --motion-y: 0px;
  transform: translate3d(0, var(--motion-y), 0) scale(1.035);
  will-change: transform;
}

/* Keep the overlay locked to its scroll-animated photo. */
html.motion-v16 .family-generations-story::after,
html.motion-v16 .family-global-horizon::after {
  transform: translate3d(0, var(--motion-y, 0px), 0) scale(1.035);
}
html.motion-v16 .family-generations-story,
html.motion-v16 .family-global-horizon { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html.motion-v16 .motion-rise,
  html.motion-v16 .motion-card,
  html.motion-v16 .motion-image,
  html.motion-v16 .site-divider.motion-divider {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
  html.motion-v16 .motion-depth,
  html.motion-v16 .family-generations-story::after,
  html.motion-v16 .family-global-horizon::after { transform: none; }
}