/* Shared scroll reveal motion for POPBOX pages */
:root { --motion-ease: cubic-bezier(.2,.7,.2,1); }
.motion-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .72s var(--motion-ease), transform .72s var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
.motion-item.motion-left { transform: translate3d(-30px, 0, 0); }
.motion-item.motion-right { transform: translate3d(30px, 0, 0); }
.motion-item.motion-zoom { transform: scale(.94); }
.motion-item.is-visible { opacity: 1; transform: none; }
.motion-line { position: relative; }
.motion-line::after {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--accent, #f8b62d);
  transition: width .7s var(--motion-ease);
  transition-delay: calc(var(--motion-delay, 0ms) + 160ms);
}
.motion-line.is-visible::after { width: min(100%, 92px); }
@media (prefers-reduced-motion: reduce) {
  .motion-item, .motion-item.motion-left, .motion-item.motion-right, .motion-item.motion-zoom { opacity: 1; transform: none; transition: none; will-change: auto; }
  .motion-line::after { width: min(100%, 92px); transition: none; }
}