/* Reusable reveal primitive. Observe stable anchors; animate only inner layers. */
[data-motion-region] .motion-anchor,
[data-motion-region] .motion-visual { display: grid; min-width: 0; }
[data-motion-region] .motion-visual {
  --motion-item-distance: var(--jyh-motion-distance);
  --motion-item-scale: var(--jyh-motion-scale);
  transform-origin: center bottom;
}
[data-motion-region] .motion-heading .motion-visual {
  --motion-item-distance: var(--jyh-motion-heading-distance);
  --motion-item-scale: var(--jyh-motion-heading-scale);
}
[data-motion-region] .motion-visual.is-motion-enabled {
  opacity: 0;
  transform: translate3d(0, var(--motion-item-distance), 0) scale(var(--motion-item-scale));
  transition: transform var(--jyh-motion-exit) var(--jyh-motion-ease-exit),
    opacity calc(var(--jyh-motion-exit) * var(--jyh-motion-opacity-ratio)) var(--jyh-motion-ease-interaction);
  pointer-events: none;
}
[data-motion-region] .motion-visual.is-motion-enabled.is-motion-visible {
  opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto;
  transition-delay: var(--motion-item-delay, 0ms);
}
[data-motion-region] .motion-visual.is-motion-enabled.is-motion-entering {
  animation: jyh-motion-pop-up var(--jyh-motion-enter) var(--jyh-motion-ease-enter) both;
  animation-delay: var(--motion-item-delay, 0ms);
}
[data-motion-region] .motion-visual.is-motion-enabled.is-motion-exiting {
  animation: jyh-motion-pop-down var(--jyh-motion-exit) var(--jyh-motion-ease-exit) both;
  pointer-events: none;
}
@keyframes jyh-motion-pop-up {
  0% { opacity: 0; transform: translate3d(0, var(--motion-item-distance), 0) scale(var(--motion-item-scale)); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes jyh-motion-pop-down {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, var(--jyh-motion-exit-distance), 0) scale(var(--jyh-motion-exit-scale)); }
}
[data-motion-region] .motion-visual.is-motion-focused {
  opacity: 1; transform: none; transition: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-region] .motion-visual.is-motion-enabled {
    opacity: 1; transform: none; transition: none; animation: none; pointer-events: auto;
  }
}