/* One muted steel-blue sweep moves through the packages in reading order.
   Only opacity and transform animate; content and card sizes stay fixed. */
.package-heading-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; margin-top: 14px; }
.package-heading-tools .package-help-link { margin-top: 0; }
.package-motion-toggle { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.package-motion-toggle[hidden] { display: none; }
.package-card { --pulse-delay: 0s; }
.package-card:nth-child(2) { --pulse-delay: .8s; }
.package-card:nth-child(3) { --pulse-delay: 1.6s; }
.package-card:nth-child(4) { --pulse-delay: 2.4s; }
.package-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 8%, rgba(109,129,150,.08) 26%, rgba(109,129,150,.3) 55%, rgba(109,129,150,.08) 82%, transparent 96%); }
.package-card.vision-card { box-shadow: inset 0 3px 0 var(--accent); }
.package-focus-ring { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: inherit; opacity: .32; pointer-events: none; }
.package-name h3 { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .packages-section.has-package-motion .package-card::after { animation: package-color-sweep 8s ease-in-out var(--pulse-delay) infinite; animation-play-state: paused; }
  .packages-section.has-package-motion .package-focus-ring { animation: vision-color-arrival 8s ease-in-out 2.8s infinite; animation-play-state: paused; }
  .packages-section[data-motion-running='true'] .package-card::after,
  .packages-section[data-motion-running='true'] .package-focus-ring { animation-play-state: running; }
  .packages-section[data-motion-running='true'] .package-card::after { will-change: transform, opacity; }
}
@keyframes package-color-sweep {
  0% { transform: translateX(-120%); opacity: 0; }
  3% { opacity: 1; }
  19% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}
@keyframes vision-color-arrival {
  0%, 40%, 100% { opacity: .32; }
  9%, 22% { opacity: 1; }
}
@media (max-width: 767px) {
  .package-heading-tools { gap: 0 18px; }
  .package-motion-toggle { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .package-card::after { display: none; }
  .package-focus-ring { opacity: .65; }
  .package-motion-toggle { display: none; }
}
@media print {
  .package-card::after, .package-focus-ring, .package-motion-toggle { display: none; }
}