@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 62px 62px, 62px 62px; }
}

@keyframes small-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

@keyframes orb-float-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-42px, 24px, 0) scale(1.05); }
}

@keyframes orb-float-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(38px, -20px, 0) scale(1.07); }
}

@keyframes particle-float {
  0%, 100% { opacity: 0.18; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.7; transform: translate3d(8px, -18px, 0); }
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 211, 158, 0.12), 0 0 18px rgba(65, 211, 158, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(65, 211, 158, 0), 0 0 24px rgba(65, 211, 158, 0.9); }
}

@keyframes frame-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes signal-card-cycle {
  0%, 4% { opacity: 0.48; transform: translateY(8px) scale(0.985); filter: saturate(0.65); }
  8%, 67% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
  78%, 100% { opacity: 0.62; transform: translateY(2px) scale(0.995); filter: saturate(0.78); }
}

@keyframes signal-glow-cycle {
  0%, 8%, 100% { box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18); }
  12%, 28% { box-shadow: 0 14px 35px rgba(65, 211, 158, 0.17), 0 0 0 1px rgba(65, 211, 158, 0.16); }
  40%, 100% { box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18); }
}

@keyframes packet-one-cycle {
  0%, 14% { left: -3px; opacity: 0; transform: scale(0.65); }
  16% { opacity: 1; transform: scale(1); }
  29% { left: calc(100% - 7px); opacity: 1; transform: scale(1); }
  31%, 100% { left: calc(100% - 7px); opacity: 0; transform: scale(0.65); }
}

@keyframes packet-two-cycle {
  0%, 44% { left: -3px; opacity: 0; transform: scale(0.65); }
  47% { opacity: 1; transform: scale(1); }
  60% { left: calc(100% - 7px); opacity: 1; transform: scale(1); }
  62%, 100% { left: calc(100% - 7px); opacity: 0; transform: scale(0.65); }
}

@keyframes connector-flash-one {
  0%, 13%, 32%, 100% { opacity: 0.45; filter: brightness(0.75); }
  16%, 29% { opacity: 1; filter: brightness(1.5); }
}

@keyframes connector-flash-two {
  0%, 44%, 63%, 100% { opacity: 0.45; filter: brightness(0.75); }
  47%, 60% { opacity: 1; filter: brightness(1.5); }
}

@keyframes parser-node-cycle {
  0%, 20%, 100% { border-color: rgba(148, 169, 194, 0.18); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  28%, 50% { border-color: rgba(102, 227, 255, 0.42); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28), 0 0 35px rgba(46, 167, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  65%, 100% { border-color: rgba(148, 169, 194, 0.18); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
}

@keyframes scan-cycle {
  0%, 20% { top: 0; opacity: 0; }
  23% { opacity: 1; }
  43% { top: calc(100% - 2px); opacity: 1; }
  46%, 100% { top: calc(100% - 2px); opacity: 0; }
}

@keyframes field-cycle {
  0%, 22% { opacity: 0.38; transform: translateY(2px); border-color: rgba(148, 169, 194, 0.11); background: rgba(255, 255, 255, 0.025); }
  29%, 53% { opacity: 1; transform: translateY(0); border-color: rgba(102, 227, 255, 0.22); background: rgba(46, 167, 255, 0.07); }
  67%, 100% { opacity: 0.62; transform: translateY(0); border-color: rgba(148, 169, 194, 0.11); background: rgba(255, 255, 255, 0.025); }
}

@keyframes rule-chip-cycle {
  0%, 35% { opacity: 0.38; transform: translateY(4px); }
  42%, 66% { opacity: 1; transform: translateY(0); box-shadow: 0 0 18px rgba(159, 140, 255, 0.09); }
  78%, 100% { opacity: 0.58; transform: translateY(0); box-shadow: none; }
}

@keyframes execute-node-cycle {
  0%, 48%, 100% { border-color: rgba(148, 169, 194, 0.18); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  57%, 78% { border-color: rgba(65, 211, 158, 0.4); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28), 0 0 35px rgba(65, 211, 158, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

@keyframes account-cycle {
  0%, 52% { opacity: 0.5; transform: translateX(5px); }
  59%, 82% { opacity: 1; transform: translateX(0); border-color: rgba(65, 211, 158, 0.24); }
  92%, 100% { opacity: 0.68; transform: translateX(0); border-color: rgba(148, 169, 194, 0.14); }
}

@keyframes check-cycle {
  0%, 55% { opacity: 0.25; transform: scale(0.65); }
  62%, 83% { opacity: 1; transform: scale(1); box-shadow: 0 0 15px rgba(65, 211, 158, 0.18); }
  93%, 100% { opacity: 0.5; transform: scale(0.9); box-shadow: none; }
}

@keyframes toast-cycle {
  0%, 59% { opacity: 0.25; transform: translateY(7px) scale(0.985); }
  66%, 84% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 22px rgba(65, 211, 158, 0.08); }
  94%, 100% { opacity: 0.48; transform: translateY(2px) scale(0.995); box-shadow: none; }
}

@keyframes state-blue-cycle {
  0%, 5% { opacity: 0.45; }
  9%, 22% { opacity: 1; box-shadow: 0 0 15px rgba(46, 167, 255, 0.11); }
  36%, 100% { opacity: 0.55; box-shadow: none; }
}

@keyframes state-cyan-cycle {
  0%, 21% { opacity: 0.42; }
  27%, 50% { opacity: 1; box-shadow: 0 0 15px rgba(102, 227, 255, 0.12); }
  65%, 100% { opacity: 0.52; box-shadow: none; }
}

@keyframes state-green-cycle {
  0%, 50% { opacity: 0.4; }
  58%, 84% { opacity: 1; box-shadow: 0 0 15px rgba(65, 211, 158, 0.12); }
  94%, 100% { opacity: 0.55; box-shadow: none; }
}

@keyframes footer-pulse-cycle {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 10px rgba(65, 211, 158, 0.4); }
  62%, 78% { opacity: 1; box-shadow: 0 0 18px rgba(65, 211, 158, 0.9); }
}

@keyframes orbit-rotate {
  to { transform: rotate(351deg); }
}

@keyframes security-breathe-one {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.985); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.015); }
}

@keyframes security-breathe-two {
  0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1.01); }
  50% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.99); }
}

@keyframes security-core-pulse {
  0%, 100% { box-shadow: 0 0 70px rgba(46, 167, 255, 0.12), inset 0 0 40px rgba(102, 227, 255, 0.05); }
  50% { box-shadow: 0 0 95px rgba(46, 167, 255, 0.2), inset 0 0 48px rgba(102, 227, 255, 0.08); }
}

@keyframes live-row-pulse {
  0%, 100% { background: rgba(46, 167, 255, 0.025); }
  50% { background: rgba(46, 167, 255, 0.075); }
}

@keyframes chart-draw {
  from { stroke-dashoffset: 780; }
  to { stroke-dashoffset: 0; }
}

.hero-grid-motion {
  animation: grid-drift 32s linear infinite;
}

.final-cta-motion {
  animation: small-grid-drift 30s linear infinite;
}

.hero-orb--one {
  animation: orb-float-one 13s ease-in-out infinite;
}

.hero-orb--two {
  animation: orb-float-two 15s ease-in-out infinite;
}

.hero-particles span {
  animation: particle-float 6s ease-in-out infinite;
}

.hero-particles span:nth-child(2) { animation-delay: -1.6s; }
.hero-particles span:nth-child(3) { animation-delay: -3.2s; }
.hero-particles span:nth-child(4) { animation-delay: -4.4s; }
.hero-particles span:nth-child(5) { animation-delay: -2.4s; }
.hero-particles span:nth-child(6) { animation-delay: -5.1s; }

.live-dot,
.status-light {
  animation: live-pulse 2.6s ease-in-out infinite;
}

.workflow-frame {
  animation: frame-float 7s ease-in-out infinite;
}

.flow-node--signal {
  animation: signal-card-cycle var(--workflow-cycle) ease-in-out infinite;
}

.signal-message {
  animation: signal-glow-cycle var(--workflow-cycle) ease-in-out infinite;
}

.flow-connector--one .data-packet {
  animation: packet-one-cycle var(--workflow-cycle) linear infinite;
}

.flow-connector--two .data-packet {
  animation: packet-two-cycle var(--workflow-cycle) linear infinite;
}

.flow-connector--one .connector-line {
  animation: connector-flash-one var(--workflow-cycle) ease-in-out infinite;
}

.flow-connector--two .connector-line {
  animation: connector-flash-two var(--workflow-cycle) ease-in-out infinite;
}

.flow-node--parser {
  animation: parser-node-cycle var(--workflow-cycle) ease-in-out infinite;
}

.scanner-line {
  animation: scan-cycle var(--workflow-cycle) ease-in-out infinite;
}

.parser-field {
  animation: field-cycle var(--workflow-cycle) ease-in-out infinite;
  animation-delay: calc(var(--field-index) * 0.16s);
}

.risk-rule-chip {
  animation: rule-chip-cycle var(--workflow-cycle) ease-in-out infinite;
}

.flow-node--execute {
  animation: execute-node-cycle var(--workflow-cycle) ease-in-out infinite;
}

.account-row {
  animation: account-cycle var(--workflow-cycle) ease-in-out infinite;
}

.account-row--mt5 {
  animation-delay: 0.22s;
}

.execution-check {
  animation: check-cycle var(--workflow-cycle) ease-in-out infinite;
}

.account-row--mt5 .execution-check {
  animation-delay: 0.22s;
}

.execution-toast {
  animation: toast-cycle var(--workflow-cycle) ease-in-out infinite;
}

.node-state--blue {
  animation: state-blue-cycle var(--workflow-cycle) ease-in-out infinite;
}

.node-state--cyan {
  animation: state-cyan-cycle var(--workflow-cycle) ease-in-out infinite;
}

.node-state--green {
  animation: state-green-cycle var(--workflow-cycle) ease-in-out infinite;
}

.footer-pulse {
  animation: footer-pulse-cycle var(--workflow-cycle) ease-in-out infinite;
}

.cloud-orbit {
  animation: orbit-rotate 18s linear infinite;
}

.security-core {
  animation: security-core-pulse 5s ease-in-out infinite;
}

.security-ring--one {
  animation: security-breathe-one 7s ease-in-out infinite;
}

.security-ring--two {
  animation: security-breathe-two 9s ease-in-out infinite;
}

.security-ring--three {
  animation: security-breathe-one 11s ease-in-out infinite reverse;
}

.journey-row--live {
  animation: live-row-pulse 3.2s ease-in-out infinite;
}

.dashboard-window svg path[stroke="#66E3FF"],
.verified-chart svg path[stroke="#41D39E"] {
  stroke-dasharray: 780;
  stroke-dashoffset: 780;
  animation: chart-draw 2.2s 0.3s ease forwards;
}

.workflow-frame.is-paused,
.workflow-frame.is-paused *,
.workflow-frame.is-paused *::before,
.workflow-frame.is-paused *::after {
  animation-play-state: paused !important;
}

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

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

  .flow-node--signal,
  .parser-field,
  .risk-rule-chip,
  .account-row,
  .execution-check,
  .execution-toast,
  .node-state,
  .scanner-line,
  .data-packet {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .scanner-line,
  .data-packet {
    display: none;
  }

  .workflow-toggle {
    display: none;
  }
}