/* Beulah motion layer — transitions for scroll reveals, wipes, hover polish.
   Per-design character is set by overriding these variables after the import. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-wipe-ease: cubic-bezier(.77, 0, .18, 1);
  --motion-rise: .72s;
  --motion-wipe: 1.05s;
  --motion-lift: 26px;
  --motion-heading-lift: 34px;
}
html.motion-active .motion-heading,
html.motion-active .motion-reveal,
html.motion-active .motion-image { will-change: transform, opacity, clip-path; }

html.motion-active .motion-heading { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, var(--motion-heading-lift), 0); }
html.motion-active .motion-reveal { opacity: 0; transform: translate3d(0, var(--motion-lift), 0); }
html.motion-active .motion-image.motion-from-left { clip-path: inset(0 100% 0 0); }
html.motion-active .motion-image.motion-from-right { clip-path: inset(0 0 0 100%); }

html.motion-active .motion-heading.is-visible {
  opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0);
  transition: opacity var(--motion-rise) var(--motion-ease), transform var(--motion-rise) var(--motion-ease), clip-path var(--motion-rise) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}
html.motion-active .motion-reveal.is-visible {
  opacity: 1; transform: translate3d(0, 0, 0);
  transition: opacity var(--motion-rise) var(--motion-ease), transform var(--motion-rise) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}
html.motion-active .motion-image.is-visible {
  clip-path: inset(0);
  transition: clip-path var(--motion-wipe) var(--motion-wipe-ease);
  transition-delay: var(--motion-delay, 0ms);
}

/* Hover micro-transitions: links and buttons settle smoothly; card lifts are left to each design. */
html.motion-active a, html.motion-active button { transition-duration: .25s; }

@media (prefers-reduced-motion: reduce) {
  .motion-heading, .motion-reveal, .motion-image,
  .motion-heading.is-visible, .motion-reveal.is-visible, .motion-image.is-visible {
    opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important;
  }
}

html.motion-active{--motion-rise:.72s;--motion-wipe:1.05s;--motion-lift:26px;--motion-heading-lift:34px;}