/* 文字和黑线分别显现，右侧黑线保持从右向左的方向。 */
.is-loading[data-page="vamsys"] .vamsys-detail-copy h1,
.is-loading[data-page="vamsys"] .vamsys-detail-copy h2,
.is-loading[data-page="vamsys"] .vamsys-detail-copy p,
.vamsys-motion .vamsys-detail-copy h1,
.vamsys-motion .vamsys-detail-copy h2,
.vamsys-motion .vamsys-detail-copy p { clip-path: inset(0 100% 0 0); }
.vamsys-motion .is-copy-visible .vamsys-detail-copy h1,
.vamsys-motion .is-copy-visible .vamsys-detail-copy h2,
.vamsys-motion .is-copy-visible .vamsys-detail-copy p {
  animation: vamsys-copy-in 2000ms cubic-bezier(.2,.65,.25,1) both;
}
.is-loading[data-page="vamsys"] .vamsys-detail-rule,
.vamsys-motion .vamsys-detail-rule {
  transform: scaleX(0);
  transform-origin: left center;
}
.vamsys-motion .vamsys-copy-right .vamsys-detail-rule { transform-origin: right center; }
.vamsys-motion .is-rule-visible .vamsys-detail-rule {
  animation: vamsys-rule-in 1000ms cubic-bezier(.2,.65,.25,1) both;
}
@keyframes vamsys-copy-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes vamsys-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .vamsys-motion .vamsys-detail-copy h1,
  .vamsys-motion .vamsys-detail-copy h2,
  .vamsys-motion .vamsys-detail-copy p { clip-path: none; animation: none; }
  .vamsys-motion .vamsys-detail-rule { transform: none; animation: none; }
}