/*
 * 官网动效样式。
 * 用途：集中维护入场动画、循环动效和动效降级策略，便于移动端性能治理。
 * 修改注意：新增动画必须同时评估 prefers-reduced-motion 降级表现。
 */
.reveal-block {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-block--top {
  transform: translate3d(0, -24px, 0);
}

.reveal-block--left {
  transform: translate3d(-38px, 24px, 0);
}

.reveal-block--right {
  transform: translate3d(38px, 24px, 0);
}

.reveal-block--scale {
  transform: translate3d(0, 28px, 0) scale(0.97);
  transform-origin: center top;
}

.reveal-block.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 0.06s;
}

.reveal-delay-2 {
  transition-delay: 0.14s;
}

.reveal-delay-3 {
  transition-delay: 0.22s;
}

@keyframes brandLogoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes auroraFloatPrimary {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-26px, 34px, 0) scale(1.12);
  }
}

@keyframes auroraFloatSecondary {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(28px, -30px, 0) scale(1.08);
  }
}

@keyframes heroGlowOrbit {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.92;
  }
  50% {
    transform: translate3d(-30px, 18px, 0) scale(1.16);
    opacity: 0.72;
  }
}

@keyframes gridShift {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 36px, 36px 0;
  }
}

@keyframes dashboardLineReveal {
  from {
    stroke-dashoffset: 340;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dashboardPointPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 181, 58, 0.22);
  }
  50% {
    transform: scale(1.16);
    box-shadow: 0 0 0 8px rgba(255, 181, 58, 0);
  }
}

@keyframes summaryGlowShift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-2px);
    opacity: 0.96;
  }
}

@keyframes deviceHoverFloat {
  0%,
  100% {
    transform: perspective(2200px) rotateY(-2deg) rotateX(0.45deg) translateY(0);
  }
  50% {
    transform: perspective(2200px) rotateY(-1.4deg) rotateX(0.45deg) translateY(-8px);
  }
}

@keyframes flowLineSweep {
  0% {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(520%, -50%, 0);
    opacity: 0;
  }
}

@keyframes flowBadgePulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.86);
  }
  45% {
    opacity: 0.7;
  }
  70% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes cardSheen {
  0%,
  72% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(16deg);
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(320%, 0, 0) rotate(16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .website-page::before,
  .website-page::after,
  .reveal-block,
  .website-page--animated .brand-mark__image,
  .website-page--animated .dashboard-chart__svg path,
  .website-page--animated .dashboard-chart__point,
  .website-page--animated .summary-strip__content,
  .website-page--animated .solution-device__tablet,
  .website-page--animated .hero-section::before,
  .website-page--animated .hero-section::after,
  .website-page--animated .solution-section::before,
  .website-page--animated .flow-line::after,
  .website-page--animated .flow-item__badge::after,
  .website-page--animated .value-card::after,
  .website-page--animated .dashboard-feature-card::after,
  .website-page--animated .consult-step-card::after {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .mobile-nav-layer,
  .mobile-nav-panel {
    transition: none;
  }
}