/* Page-level motion is additive. Product demos and the hero keep their own clocks. */
:root {
  --page-motion-ease: cubic-bezier(.2, .7, .25, 1);
  --page-motion-rise: 18px;
}

/* Fail open: an unobserved item remains readable. The entry runs only once JS
   has marked it in view, and releases its styles when the animation finishes. */
html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion] .motion-item.is-inview:not(.motion-complete) {
  animation: page-motion-enter 620ms var(--page-motion-ease) var(--motion-delay, 0ms) backwards;
}
@keyframes page-motion-enter {
  from { opacity: 0; translate: 0 var(--page-motion-rise); }
  to { opacity: 1; translate: 0 0; }
}

/* A single underline adds a clear response without moving the product grid. */
[data-page-motion] .story-grid > a { isolation: isolate; }
[data-page-motion] .story-grid > a::before {
  content: "";
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  border-radius: 16px;
  background: radial-gradient(160px circle at var(--card-light-x, 50%) var(--card-light-y, 50%), #dcecffb3, #edf5ff33 70%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
[data-page-motion] .story-grid > a:focus-visible::before { opacity: 1; }
[data-page-motion] .story-grid > a::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0f54d4, #1cc7f6);
  opacity: .75;
  scale: .15 1;
  transform-origin: left center;
  pointer-events: none;
  transition: scale 380ms var(--page-motion-ease), opacity 280ms ease;
}
[data-page-motion] .story-grid > a:focus-visible::after {
  scale: 1 1;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  [data-page-motion] .story-grid > a:hover::before { opacity: 1; }
  [data-page-motion] .story-grid > a:hover::after { scale: 1 1; opacity: 1; }
}

/* Only editorial scene photography moves. UI screenshots, logos, maps and
   existing demo transforms are deliberately outside this selector. */
[data-page-motion] .scenario-visual > img {
  scale: 1;
  transform-origin: center;
  transition: scale 9s var(--page-motion-ease);
}
html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion].is-inview .scenario-visual > img {
  scale: 1.025;
}
html.page-motion-ready [data-page-motion]:not(.is-inview) .scenario-visual > img {
  transition-duration: 0s;
}
@media (hover: hover) and (pointer: fine) {
  html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion].is-inview .scenario:hover .scenario-visual > img {
    scale: 1.045;
    transition-duration: 1800ms;
  }
}

/* One pass along the delivery path. The number and connector share each
   item's observer delay, while the text keeps the normal reading treatment. */
[data-page-motion] .delivery-steps > li:nth-child(1) { --delivery-order: 0; }
[data-page-motion] .delivery-steps > li:nth-child(2) { --delivery-order: 1; }
[data-page-motion] .delivery-steps > li:nth-child(3) { --delivery-order: 2; }
[data-page-motion] .delivery-steps > li:nth-child(4) { --delivery-order: 3; }
[data-page-motion] .delivery-steps > li:nth-child(5) { --delivery-order: 4; }
[data-page-motion] .delivery-steps > li.is-inview > span {
  color: #2357a3;
  background: #e5f0ff;
  box-shadow: inset 0 0 0 1px #0f54d414;
}
[data-page-motion] .delivery-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6695cf99, #b8d7f433);
  transform-origin: left center;
  pointer-events: none;
}
html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion] .delivery-steps > li.is-inview:not(.motion-complete) > span {
  animation: page-motion-step 580ms var(--page-motion-ease) var(--motion-delay, calc(var(--delivery-order) * 110ms)) backwards;
}
html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion] .delivery-steps > li.is-inview:not(.motion-complete) .delivery-line::after {
  animation: page-motion-connection 580ms var(--page-motion-ease) var(--motion-delay, calc(var(--delivery-order) * 110ms)) backwards;
}
@keyframes page-motion-step {
  0% { background: #eaf2ff; color: #527bad; box-shadow: inset 0 0 0 1px transparent; }
  55% { background: #d5e8ff; color: #0f54d4; box-shadow: 0 0 0 6px #0f54d409, inset 0 0 0 1px #0f54d42b; }
  100% { background: #e5f0ff; color: #2357a3; box-shadow: inset 0 0 0 1px #0f54d414; }
}
@keyframes page-motion-connection {
  from { scale: 0 1; opacity: .2; }
  to { scale: 1 1; opacity: 1; }
}

/* Light belongs to each product's own palette. These inset, noninteractive
   layers sit behind content without clipping menus or changing base artwork. */
#platform[data-page-motion],
#digital-employee[data-page-motion],
#contact[data-page-motion] {
  position: relative;
  isolation: isolate;
}
#platform[data-page-motion]::after,
#digital-employee[data-page-motion]::after,
#contact[data-page-motion]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .7;
  pointer-events: none;
}
#platform[data-page-motion]::after {
  background: radial-gradient(ellipse at 84% 24%, #edbe6326, transparent 44%),
    radial-gradient(ellipse at 12% 64%, #ac761e09, transparent 36%);
}
#digital-employee[data-page-motion]::after {
  /* Keep the supplied logo's white field intact at the top left. */
  inset: 280px 0 0 38%;
  background: radial-gradient(ellipse at 70% 24%, #11ae9a1c, transparent 54%),
    radial-gradient(ellipse at 42% 82%, #087f7912, transparent 48%);
}
#contact[data-page-motion]::after {
  background: radial-gradient(ellipse at 12% 44%, #1cc7f615, transparent 43%),
    radial-gradient(ellipse at 83% 62%, #0f54d412, transparent 49%);
}
html.page-motion-ready:not([data-motion-state="off"]) :is(#platform, #digital-employee, #contact)[data-page-motion].is-inview::after {
  animation: page-motion-light 12s ease-in-out infinite alternate;
}
@keyframes page-motion-light {
  from { opacity: .45; }
  to { opacity: .95; }
}
#platform[data-page-motion] .nexus-tour-product {
  box-shadow: 0 20px 64px #18243310, 0 2px 8px #ac761e08;
}
#contact[data-page-motion] .contact-form-wrap {
  box-shadow: 0 22px 54px #315e9712, inset 0 1px 0 #ffffffd9;
}

/* Keep real metrics accessible and maintain the existing responsive type.
   Only the unit (e.g. 条) retains the smaller caption treatment. */
.metric-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero--cinematic .hero-metric-value.metric-count > .metric-count-value,
.hero--cinematic .hero-metric-value.metric-count > .metric-count-suffix:not(.metric-count-unit) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: inherit;
}
.metric-count-value { display: inline-block; min-width: calc(var(--count-digits, 1) * 1ch); }
html.page-motion-ready:not([data-motion-state="off"]) .metric-count.is-counting .metric-count-value {
  animation: page-motion-number 800ms ease-out;
}
@keyframes page-motion-number {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  45% { text-shadow: 0 3px 18px #0f54d42b; }
}

@media (max-width: 640px) {
  :root { --page-motion-rise: 10px; }
  html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion].is-inview .scenario-visual > img { scale: 1.012; }
  [data-page-motion] .delivery-line::after {
    background: linear-gradient(180deg, #6695cf99, #b8d7f433);
    transform-origin: center top;
  }
  html.page-motion-ready:not([data-motion-state="off"]) [data-page-motion] .delivery-steps > li.is-inview:not(.motion-complete) .delivery-line::after {
    animation-name: page-motion-connection-vertical;
  }
  #digital-employee[data-page-motion]::after { inset: 320px 0 0 22%; }
}
@keyframes page-motion-connection-vertical {
  from { scale: 1 0; opacity: .2; }
  to { scale: 1 1; opacity: 1; }
}

/* The static states remain complete. Focus is never kept in a fading item. */
html.page-motion-ready [data-page-motion] .motion-item:focus-visible,
html.page-motion-ready [data-page-motion] .motion-item:focus-within,
html[data-motion-state="off"] [data-page-motion] .motion-item,
html[data-motion-state="off"] [data-page-motion] .delivery-steps > li > span,
html[data-motion-state="off"] [data-page-motion] .delivery-line::after,
html[data-motion-state="off"] .metric-count.is-counting .metric-count-value {
  animation: none !important;
}
html[data-motion-state="off"] :is(#platform, #digital-employee, #contact)[data-page-motion]::after {
  animation: none !important;
  opacity: .7;
}
html[data-motion-state="off"] [data-page-motion] .scenario-visual > img {
  scale: 1 !important;
  transition: none;
}
html[data-motion-state="off"] [data-page-motion] .story-grid > a::after { transition: none; }
html[data-motion-state="off"] [data-page-motion] .story-grid > a::before { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html.page-motion-ready [data-page-motion] .motion-item,
  [data-page-motion] .delivery-steps > li > span,
  [data-page-motion] .delivery-line::after,
  .metric-count.is-counting .metric-count-value {
    animation: none !important;
  }
  :is(#platform, #digital-employee, #contact)[data-page-motion]::after {
    animation: none !important;
    opacity: .7;
  }
  html.page-motion-ready [data-page-motion] .scenario-visual > img {
    scale: 1 !important;
    transition: none;
  }
  [data-page-motion] .story-grid > a::after { transition: none; }
  [data-page-motion] .story-grid > a::before { transition: none; }
}