/* Motion system for the How It Works page */
@keyframes hiw-console-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes hiw-progress-fill {
  0%, 5% { transform: scaleY(0.03); opacity: 0.35; }
  18% { transform: scaleY(0.25); opacity: 0.9; }
  36% { transform: scaleY(0.5); }
  54% { transform: scaleY(0.75); }
  72%, 91% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.03); opacity: 0.35; }
}

@keyframes hiw-step-cycle {
  0%, 100% { border-color: transparent; background: rgba(255, 255, 255, 0.018); box-shadow: none; transform: translateX(0); }
  7%, 17% { border-color: rgba(102, 227, 255, 0.3); background: rgba(46, 167, 255, 0.085); box-shadow: inset 2px 0 0 var(--color-cyan), 0 10px 28px rgba(0, 0, 0, 0.16); transform: translateX(2px); }
  23%, 94% { border-color: rgba(65, 211, 158, 0.12); background: rgba(65, 211, 158, 0.025); box-shadow: none; transform: translateX(0); }
}

@keyframes hiw-step-check-cycle {
  0%, 8% { opacity: 0.28; transform: scale(0.65); }
  14%, 91% { opacity: 1; transform: scale(1); box-shadow: 0 0 13px rgba(65, 211, 158, 0.14); }
  100% { opacity: 0.28; transform: scale(0.65); box-shadow: none; }
}

@keyframes hiw-map-dash {
  to { stroke-dashoffset: -48; }
}

@keyframes hiw-map-packet-one {
  0%, 20% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
  23% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  38% { opacity: 1; transform: translate3d(185px, 0, 0) scale(1); }
  40%, 100% { opacity: 0; transform: translate3d(185px, 0, 0) scale(0.7); }
}

@keyframes hiw-map-packet-two {
  0%, 48% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
  51% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  66% { opacity: 1; transform: translate3d(170px, -97px, 0) scale(1); }
  68%, 100% { opacity: 0; transform: translate3d(170px, -97px, 0) scale(0.7); }
}

@keyframes hiw-map-packet-three {
  0%, 56% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.7); }
  59% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  74% { opacity: 1; transform: translate3d(170px, 97px, 0) scale(1); }
  76%, 100% { opacity: 0; transform: translate3d(170px, 97px, 0) scale(0.7); }
}

@keyframes hiw-ring-breathe {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.97); }
  50% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes hiw-core-cycle {
  0%, 37%, 100% { border-color: rgba(102, 227, 255, 0.3); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  44%, 68% { border-color: rgba(102, 227, 255, 0.62); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3), 0 0 35px rgba(46, 167, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
}

@keyframes hiw-event-cycle {
  0%, 68% { opacity: 0.38; transform: translateY(6px); }
  74%, 91% { opacity: 1; transform: translateY(0); box-shadow: 0 0 24px rgba(65, 211, 158, 0.07); }
  100% { opacity: 0.38; transform: translateY(6px); box-shadow: none; }
}

@keyframes hiw-handoff-run {
  0% { left: -7px; opacity: 0; transform: scale(0.7); }
  8% { opacity: 1; transform: scale(1); }
  88% { left: calc(100% - 7px); opacity: 1; transform: scale(1); }
  100% { left: calc(100% - 7px); opacity: 0; transform: scale(0.7); }
}

@keyframes hiw-loop-run {
  0% { left: 7%; opacity: 0; transform: scale(0.7); }
  6% { opacity: 1; transform: scale(1); }
  92% { left: calc(93% - 10px); opacity: 1; transform: scale(1); }
  100% { left: calc(93% - 10px); opacity: 0; transform: scale(0.7); }
}

@keyframes hiw-panel-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.992); }
  to { opacity: 1; transform: none; }
}

@keyframes hiw-verified-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes hiw-go-live-breathe {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.97); }
  50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes hiw-runtime-card-source {
  0%, 7% { border-color: rgba(148, 169, 194, 0.17); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  11%, 26% { border-color: rgba(65, 211, 158, 0.34); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28), 0 0 30px rgba(65, 211, 158, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  34%, 100% { border-color: rgba(148, 169, 194, 0.17); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
}

@keyframes hiw-runtime-message {
  0%, 5% { opacity: 0.55; transform: translateY(5px); }
  10%, 30% { opacity: 1; transform: translateY(0); box-shadow: 0 17px 40px rgba(65, 211, 158, 0.11); }
  38%, 100% { opacity: 0.72; transform: translateY(0); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); }
}

@keyframes hiw-runtime-packet-in {
  0%, 20% { left: -2px; opacity: 0; transform: scale(0.7); }
  23% { opacity: 1; transform: scale(1); }
  34% { left: calc(100% - 10px); opacity: 1; transform: scale(1); }
  36%, 100% { left: calc(100% - 10px); opacity: 0; transform: scale(0.7); }
}

@keyframes hiw-runtime-engine {
  0%, 27%, 100% { border-color: rgba(148, 169, 194, 0.17); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  34%, 66% { border-color: rgba(102, 227, 255, 0.38); box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3), 0 0 38px rgba(46, 167, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
}

@keyframes hiw-runtime-stage {
  0%, 29% { opacity: 0.38; transform: translateX(4px); border-color: rgba(148, 169, 194, 0.11); background: rgba(255, 255, 255, 0.022); }
  38%, 61% { opacity: 1; transform: translateX(0); border-color: rgba(102, 227, 255, 0.22); background: rgba(46, 167, 255, 0.06); }
  72%, 100% { opacity: 0.65; transform: translateX(0); border-color: rgba(148, 169, 194, 0.11); background: rgba(255, 255, 255, 0.022); }
}

@keyframes hiw-runtime-stage-check {
  0%, 34% { opacity: 0.2; transform: scale(0.65); }
  43%, 68% { opacity: 1; transform: scale(1); }
  76%, 100% { opacity: 0.5; transform: scale(0.9); }
}

@keyframes hiw-runtime-packet-out {
  0%, 65% { left: -2px; opacity: 0; transform: scale(0.7); }
  68% { opacity: 1; transform: scale(1); }
  78% { left: calc(100% - 10px); opacity: 1; transform: scale(1); }
  80%, 100% { left: calc(100% - 10px); opacity: 0; transform: scale(0.7); }
}

@keyframes hiw-runtime-destination {
  0%, 70%, 100% { border-color: rgba(148, 169, 194, 0.17); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
  78%, 94% { border-color: rgba(65, 211, 158, 0.38); box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3), 0 0 38px rgba(65, 211, 158, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
}

@keyframes hiw-order-cycle {
  0%, 72% { opacity: 0.42; transform: translateY(5px); }
  79%, 94% { opacity: 1; transform: translateY(0); box-shadow: 0 0 24px rgba(65, 211, 158, 0.08); }
  100% { opacity: 0.42; transform: translateY(5px); box-shadow: none; }
}

@keyframes hiw-control-packet {
  0% { left: -4px; opacity: 0; }
  8% { opacity: 1; }
  48% { left: calc(50% - 6px); opacity: 1; }
  58% { left: calc(50% - 6px); opacity: 0.45; }
  65% { opacity: 1; }
  94% { left: calc(100% - 8px); opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes hiw-control-cloud {
  0%, 100% { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(46, 167, 255, 0.08); transform: translateY(0); }
  50% { box-shadow: 0 28px 58px rgba(0, 0, 0, 0.34), 0 0 55px rgba(46, 167, 255, 0.13); transform: translateY(-5px); }
}

@keyframes hiw-scope-scan {
  0%, 10% { left: -40%; opacity: 0; }
  16% { opacity: 1; }
  56% { left: 108%; opacity: 1; }
  62%, 100% { left: 108%; opacity: 0; }
}

@keyframes hiw-live-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(65, 211, 158, 0.1), 0 0 12px rgba(65, 211, 158, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(65, 211, 158, 0), 0 0 18px rgba(65, 211, 158, 0.85); }
}

.hiw-hero-grid {
  animation: grid-drift 34s linear infinite;
}

.hiw-orb--one {
  animation: orb-float-one 14s ease-in-out infinite;
}

.hiw-orb--two {
  animation: orb-float-two 17s ease-in-out infinite;
}

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

.hiw-particles span:nth-child(2) { animation-delay: -1.4s; }
.hiw-particles span:nth-child(3) { animation-delay: -3.4s; }
.hiw-particles span:nth-child(4) { animation-delay: -4.9s; }
.hiw-particles span:nth-child(5) { animation-delay: -2.6s; }
.hiw-particles span:nth-child(6) { animation-delay: -5.3s; }

.activation-console {
  animation: hiw-console-float 7.5s ease-in-out infinite;
}

.activation-progress span {
  animation: hiw-progress-fill 12s ease-in-out infinite;
}

.activation-step {
  animation: hiw-step-cycle 12s ease-in-out infinite;
  animation-delay: calc(var(--step-index) * 1.75s);
}

.activation-step > i {
  animation: hiw-step-check-cycle 12s ease-in-out infinite;
  animation-delay: calc(var(--step-index) * 1.75s);
}

.connection-lines path {
  animation: hiw-map-dash 3s linear infinite;
}

.map-packet--one {
  animation: hiw-map-packet-one 12s ease-in-out infinite;
}

.map-packet--two {
  animation: hiw-map-packet-two 12s ease-in-out infinite;
}

.map-packet--three {
  animation: hiw-map-packet-three 12s ease-in-out infinite;
}

.map-core {
  animation: hiw-core-cycle 12s ease-in-out infinite;
}

.map-core-rings,
.map-core-rings i,
.engine-rings,
.engine-rings i {
  animation: hiw-ring-breathe 6s ease-in-out infinite;
}

.map-core-rings i:first-child,
.engine-rings i:nth-child(1) { animation-delay: -1.4s; }
.map-core-rings i:last-child,
.engine-rings i:nth-child(2) { animation-delay: -2.7s; }
.engine-rings i:nth-child(3) { animation-delay: -4s; }

.activation-event {
  animation: hiw-event-cycle 12s ease-in-out infinite;
}

.handoff-packet {
  animation: hiw-handoff-run 4.5s ease-in-out infinite;
}

.loop-runner {
  animation: hiw-loop-run 5.8s ease-in-out infinite;
}

.verified-orbit {
  animation: hiw-verified-orbit 18s linear infinite;
}

.verified-orbit i:first-child {
  animation: hiw-verified-orbit 13s linear infinite reverse;
}

.verified-orbit i:last-child {
  animation: hiw-verified-orbit 24s linear infinite;
}

.go-live-card::before {
  animation: hiw-go-live-breathe 5.5s ease-in-out infinite;
}

.go-live-toggle span i,
.scope-dot,
.event-log-dot,
.stage-status i,
.live-badge i {
  animation: hiw-live-dot 2.7s ease-in-out infinite;
}

.runtime-source-card {
  animation: hiw-runtime-card-source 13.5s ease-in-out infinite;
}

.runtime-message {
  animation: hiw-runtime-message 13.5s ease-in-out infinite;
}

.runtime-connector--in .runtime-packet {
  animation: hiw-runtime-packet-in 13.5s linear infinite;
}

.runtime-engine-card {
  animation: hiw-runtime-engine 13.5s ease-in-out infinite;
}

.engine-stage {
  animation: hiw-runtime-stage 13.5s ease-in-out infinite;
  animation-delay: calc(var(--runtime-index) * 0.5s);
}

.engine-stage > i {
  animation: hiw-runtime-stage-check 13.5s ease-in-out infinite;
  animation-delay: calc(var(--runtime-index) * 0.5s);
}

.runtime-connector--out .runtime-packet {
  animation: hiw-runtime-packet-out 13.5s linear infinite;
}

.runtime-destination-card {
  animation: hiw-runtime-destination 13.5s ease-in-out infinite;
}

.destination-order,
.event-log-row {
  animation: hiw-order-cycle 13.5s ease-in-out infinite;
}

.event-log-row {
  animation-delay: 0.3s;
}

.control-handoff-packet {
  animation: hiw-control-packet 6.5s ease-in-out infinite;
}

.control-cloud {
  animation: hiw-control-cloud 6s ease-in-out infinite;
}

.control-cloud-ring {
  animation: hiw-ring-breathe 6.5s ease-in-out infinite;
}

.scope-channel.is-scanned::after {
  animation: hiw-scope-scan 5.5s ease-in-out infinite;
  animation-delay: var(--scan-delay, 0s);
}

.motion-paused .hiw-hero *,
.motion-paused .hiw-hero *::before,
.motion-paused .hiw-hero *::after,
.motion-paused .phase-grid *,
.motion-paused .phase-grid *::before,
.motion-paused .phase-grid *::after,
.motion-paused .runtime-board *,
.motion-paused .runtime-board *::before,
.motion-paused .runtime-board *::after,
.motion-paused .control-map *,
.motion-paused .control-map *::before,
.motion-paused .control-map *::after,
.motion-paused .privacy-scope-visual *,
.motion-paused .privacy-scope-visual *::before,
.motion-paused .privacy-scope-visual *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .activation-progress span {
    transform: scaleY(1);
  }

  .activation-step,
  .activation-step > i,
  .map-core,
  .activation-event,
  .runtime-source-card,
  .runtime-message,
  .runtime-engine-card,
  .engine-stage,
  .engine-stage > i,
  .runtime-destination-card,
  .destination-order,
  .event-log-row,
  .control-cloud {
    opacity: 1;
    transform: none;
  }

  .map-packet,
  .runtime-packet,
  .handoff-packet,
  .loop-runner,
  .control-handoff-packet,
  .scope-channel.is-scanned::after {
    display: none;
  }

  .activation-motion-toggle {
    display: none;
  }
}