/* Motion stays on visual wrappers, preserving the dashboard and phone perspective. */
@property --ring-progress {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; }
  .reveal-entered { animation: reveal-arrival .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms) both; }
  @keyframes reveal-arrival {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
  }

  .hero-atmosphere { animation: atmosphere-breathe 12s ease-in-out infinite alternate; }
  @keyframes atmosphere-breathe {
    from { opacity: .7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.035); }
  }
  .floating-status { animation: status-float 6s ease-in-out infinite; }
  .payment-status { animation-delay: -3s; }
  @keyframes status-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
  }
  .spark-bars i, .bar-chart i, .bar-chart b { transform-origin: bottom; }
  .hero-visual.reveal-entered .spark-bars i,
  .hero-visual.reveal-entered .bar-chart i,
  .hero-visual.reveal-entered .bar-chart b {
    animation: chart-grow .9s cubic-bezier(.2,.7,.2,1) both, chart-breathe 5s ease-in-out infinite;
    animation-delay: calc(.4s + var(--bar-delay, 0s)), calc(1.3s + var(--bar-delay, 0s));
  }
  .spark-bars i:nth-child(2), .bar-chart > div:nth-child(2) { --bar-delay: .12s; }
  .spark-bars i:nth-child(3), .bar-chart > div:nth-child(3) { --bar-delay: .24s; }
  .spark-bars i:nth-child(4), .bar-chart > div:nth-child(4) { --bar-delay: .36s; }
  .spark-bars i:nth-child(5), .bar-chart > div:nth-child(5) { --bar-delay: .48s; }
  @keyframes chart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes chart-breathe {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.88); }
  }
  .hero-visual.reveal-entered .donut {
    background: conic-gradient(#2879ff 0deg calc(var(--ring-progress) * .43), #65adea 0deg calc(var(--ring-progress) * .69), #254f86 0deg var(--ring-progress), transparent 0deg);
    animation: donut-expand 1.4s cubic-bezier(.2,.7,.2,1) .6s both, donut-glow 6s ease-in-out 2s infinite;
  }
  @keyframes donut-expand { from { --ring-progress: 0deg; } to { --ring-progress: 360deg; } }
  @keyframes donut-glow {
    0%, 100% { filter: drop-shadow(0 0 0 #2879ff00); }
    50% { filter: drop-shadow(0 0 5px #2879ff44); }
  }

  .flow-track li::after, .preview-track li::before {
    background: linear-gradient(90deg, #3479d6 0%, #3479d6 35%, #a0e8ff 50%, #3479d6 65%, #3479d6 100%);
    background-size: 250% 100%;
    animation: flow-light 4.8s linear infinite;
  }
  .flow-track li::before, .preview-track i { animation: flow-node 4.8s ease-in-out infinite; }
  .flow-track li:nth-child(2)::before, .flow-track li:nth-child(2)::after,
  .preview-track li:nth-child(2)::before, .preview-track li:nth-child(2) i { animation-delay: .7s; }
  .flow-track li:nth-child(3)::before, .flow-track li:nth-child(3)::after,
  .preview-track li:nth-child(3)::before, .preview-track li:nth-child(3) i { animation-delay: 1.4s; }
  .flow-track li:nth-child(4)::before, .preview-track li:nth-child(4) i { animation-delay: 2.1s; }
  @keyframes flow-light { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  @keyframes flow-node {
    0%, 35%, 100% { box-shadow: 0 0 0 0 #438fff00; }
    15% { box-shadow: 0 0 0 5px #438fff22, 0 0 14px #438fff66; }
  }
  .hero:not(.motion-active) .hero-atmosphere,
  .hero:not(.motion-active) .floating-status,
  .hero:not(.motion-active) .spark-bars i,
  .hero:not(.motion-active) .bar-chart i,
  .hero:not(.motion-active) .bar-chart b,
  .hero:not(.motion-active) .donut,
  .workflow-section:not(.motion-active) .flow-track li::before,
  .workflow-section:not(.motion-active) .flow-track li::after,
  .workflow-section:not(.motion-active) .preview-track li::before,
  .workflow-section:not(.motion-active) .preview-track i { animation-play-state: paused; }
  .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

  .button { transition: translate .2s, box-shadow .2s, background .2s; }
  .button span, .text-link svg { transition: transform .2s; }
  .button:active { translate: 0 1px; }
  .navigation a { position: relative; }
  .navigation a::after { content: ""; position: absolute; bottom: 6px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .navigation a:hover::after, .navigation a:focus-visible::after { transform: scaleX(1); }
  .capabilities article, .solution-points article { transition: translate .25s; }
  dialog[open] { animation: dialog-arrival .25s ease-out; }
  dialog[open]::backdrop { animation: backdrop-arrival .25s ease-out; }
  @keyframes dialog-arrival { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  @keyframes backdrop-arrival { from { opacity: 0; } to { opacity: 1; } }
}
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
  .button:hover { translate: 0 -2px; }
  .button:hover span { transform: translate(2px, -2px); }
  .text-link:hover svg { transform: translateX(4px); }
  .capabilities article:hover, .solution-points article:hover { translate: 4px 0; }
}
@media print { .reveal-pending { opacity: 1; } }