/* 链接与按钮共用右上箭头；方向控件保留原有含义。 */
:root {
  --action-arrow-size: 20px;
  --action-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M7 7H17V17' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-arrow,
.showcase-arrow {
  display: inline-block;
  position: relative;
  flex: none;
  width: var(--action-arrow-size);
  height: var(--action-arrow-size);
  line-height: 1;
  vertical-align: middle;
  align-self: center;
  overflow: hidden;
  text-indent: -9999px;
}
.site-arrow::before,
.site-arrow::after,
.showcase-arrow::before,
.showcase-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--action-arrow-mask) center/contain no-repeat;
  mask: var(--action-arrow-mask) center/contain no-repeat;
}
/* 双箭头接力参考 https://uiverse.io/karthik092726122003/clever-crab-26 ，保留本站图形。 */
.site-arrow::before,
.showcase-arrow::before,
.insight .link-arrow::before,
.svc-arrow::before {
  translate: var(--arrow-shift-x, 0px) var(--arrow-shift-y, 0px);
  transition: translate var(--arrow-duration, 0s) ease;
}
.site-arrow::after,
.showcase-arrow::after,
.insight .link-arrow::after,
.svc-arrow::after {
  translate: calc(var(--arrow-shift-x, 0px) - 28px) calc(var(--arrow-shift-y, 0px) + 28px);
  transition: translate var(--arrow-duration, 0s) ease;
}
/* 返回、上下滚动和拖动提示使用原方向，不参与前进箭头动效。 */
.site-arrow:is([data-direction="←"],[data-direction="↑"],[data-direction="↓"],[data-direction="↖"],[data-direction="↙"],[data-direction="↘"])::before,
.story-drag-hint .site-arrow::before {
  -webkit-mask-image: var(--circle-arrow-mask);
  mask-image: var(--circle-arrow-mask);
  rotate: var(--arrow-turn, 0deg);
}
.site-arrow:is([data-direction="←"],[data-direction="↑"],[data-direction="↓"],[data-direction="↖"],[data-direction="↙"],[data-direction="↘"])::after,
.story-drag-hint .site-arrow::after { display: none; }
.site-arrow[data-direction="←"] { --arrow-turn: 180deg; }
.site-arrow[data-direction="↑"] { --arrow-turn: -90deg; }
.site-arrow[data-direction="↓"] { --arrow-turn: 90deg; }
.site-arrow[data-direction="↖"] { --arrow-turn: -135deg; }
.site-arrow[data-direction="↙"] { --arrow-turn: 135deg; }
.site-arrow[data-direction="↘"] { --arrow-turn: 45deg; }

/* 菜单和圆形入口沿用原来的布局、颜色反馈，只统一内部图形。 */
.insight .link-arrow::before,
.insight .link-arrow::after,
.svc-arrow::before,
.svc-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--action-arrow-size);
  height: var(--action-arrow-size);
  background: currentColor;
  -webkit-mask: var(--action-arrow-mask) center/contain no-repeat;
  mask: var(--action-arrow-mask) center/contain no-repeat;
  transform: none;
}
.insight .link-arrow,
.svc-arrow { overflow: hidden; }
.svc-arrow,
.svc:is(:hover,:focus-visible) .svc-arrow,
.insight:is(:hover,:focus-visible) .link-arrow::before { transform: none; }
.mega-service-link::after,
.mega-service-grid a::after { content: none; }
.mega-service-link > .site-arrow { color: #c7cbc7; }
.mega-service-link:is(:hover,:focus-visible) > .site-arrow { color: var(--accent); }
.mega-service-grid a > .site-arrow { color: var(--brand-green); }
.products-page #main .system-product details[open] summary .site-arrow { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  :is(a,button,summary):is(:hover,:focus-visible) .site-arrow:not([data-direction="←"]):not([data-direction="↑"]):not([data-direction="↓"]):not([data-direction="↖"]):not([data-direction="↙"]):not([data-direction="↘"]),
  :is(a,button):is(:hover,:focus-visible) .showcase-arrow,
  .insight:is(:hover,:focus-visible) .link-arrow,
  .svc:is(:hover,:focus-visible) .svc-arrow {
    --arrow-shift-x: 28px;
    --arrow-shift-y: -28px;
    --arrow-duration: .65s;
  }
}