/* 文案从左至右显现，白线从对应文字侧展开，每组只播放一次。 */
.is-loading[data-page="oc"] .oc-detail-copy h1,
.is-loading[data-page="oc"] .oc-detail-copy h2,
.is-loading[data-page="oc"] .oc-detail-copy p,
.oc-motion .oc-detail-copy h1,
.oc-motion .oc-detail-copy h2,
.oc-motion .oc-detail-copy p { clip-path: inset(0 100% 0 0); }
.oc-motion .is-copy-visible .oc-detail-copy h1,
.oc-motion .is-copy-visible .oc-detail-copy h2,
.oc-motion .is-copy-visible .oc-detail-copy p {
  animation: oc-copy-in 2000ms cubic-bezier(.2,.65,.25,1) both;
}
.is-loading[data-page="oc"] .oc-detail-rule,
.oc-motion .oc-detail-rule { transform: scaleX(0); }
.oc-motion .is-rule-visible .oc-detail-rule {
  animation: oc-rule-in 1000ms cubic-bezier(.2,.65,.25,1) both;
}
@keyframes oc-copy-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes oc-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .oc-motion .oc-detail-copy h1, .oc-motion .oc-detail-copy h2,
  .oc-motion .oc-detail-copy p { clip-path: none; animation: none; }
  .oc-motion .oc-detail-rule { transform: none; animation: none; }
}
