/* Composited motion preserves the illustration's existing perspective and tilt. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual.has-motion .app-window {
    animation: accordwise-workspace-enter 1.15s cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero-visual.has-motion .floating-notice {
    animation:
      accordwise-card-enter .95s cubic-bezier(.22, 1, .36, 1) .2s both,
      accordwise-notice-drift 8s ease-in-out 1.15s infinite;
  }

  .hero-visual.has-motion .floating-review {
    animation:
      accordwise-card-enter 1s cubic-bezier(.22, 1, .36, 1) .38s both,
      accordwise-review-drift 9.5s ease-in-out 1.38s infinite;
  }

  .hero-visual.has-motion .tiny-progress span {
    transform-origin: left center;
    animation: accordwise-progress-enter 1.6s cubic-bezier(.22, 1, .36, 1) .6s both;
  }

  .hero-visual.has-motion .audit-row:nth-of-type(2) .tiny-progress span {
    animation-delay: .78s;
  }

  .hero-visual.has-motion .notice-icon {
    position: relative;
  }

  .hero-visual.has-motion .notice-icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid #76a98d;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: accordwise-status-pulse 5.6s ease-out 1.5s infinite;
  }

  .hero-visual.motion-paused *,
  .hero-visual.motion-paused *::after {
    animation-play-state: paused !important;
  }
}

@keyframes accordwise-workspace-enter {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes accordwise-card-enter {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes accordwise-notice-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes accordwise-review-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

@keyframes accordwise-progress-enter {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes accordwise-status-pulse {
  0%, 55%, 100% { opacity: 0; scale: .94; }
  8% { opacity: .35; scale: .94; }
  42% { opacity: 0; scale: 1.25; }
}