/* ============================================================
   motion.css — 入场、循环动效与减少动态效果
   ============================================================ */

.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 720ms var(--ease-out) var(--d, 0ms),
    translate 720ms var(--ease-out) var(--d, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

/* 入场使用 translate，给卡片的 hover transform 与阴影保留独立过渡。 */
.js .cap[data-reveal] {
  transition:
    opacity 720ms var(--ease-out) var(--d, 0ms),
    translate 720ms var(--ease-out) var(--d, 0ms),
    transform 380ms var(--ease),
    box-shadow 380ms var(--ease);
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes pulse-dot {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.28;
  }
}

@keyframes nudge-down {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(5px);
  }
}

@keyframes block-tick {
  0%,
  88% {
    background: var(--red);
  }
  89%,
  100% {
    background: var(--ink);
  }
}

@media (hover: none) {
  .cap:hover {
    transform: none;
    box-shadow: none;
  }

  .btn--solid:hover,
  .btn--ghost:hover,
  .btn--download:hover {
    transform: none;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .btn--download:hover {
    box-shadow: 8px 8px 0 var(--red);
    background: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    translate: none;
  }

  .cap:hover {
    transform: none;
    box-shadow: none;
  }

  .marquee-track {
    animation: none;
  }

  .hero-block,
  .hero-scroll span,
  .wb-pulse {
    animation: none;
  }

  .workbench {
    transition: none;
  }

  .cube {
    transition: none;
  }
}