vnidrop/docs/components/illustration-motion.css

@keyframes scene-orbits { to { transform: rotate(360deg); } }
@keyframes laptop-files {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes conduit-energy { to { stroke-dashoffset: -38; } }
@keyframes gate-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes received-file {
  0%, 9% { opacity: 0.55; transform: translateY(12px) scale(0.92); }
  17%, 70% { opacity: 1; transform: translateY(0) scale(1); }
  83%, 100% { opacity: 0.55; transform: translateY(12px) scale(0.92); }
}
@keyframes hero-packet-one {
  0%, 6% { opacity: 0; transform: translate(245px, 320px) scale(0.55) rotate(-8deg); }
  14% { opacity: 1; }
  43% { opacity: 1; transform: translate(380px, 427px) scale(0.82) rotate(5deg); }
  54% { opacity: 1; transform: translate(415px, 430px) scale(0.82) rotate(2deg); }
  84% { opacity: 1; transform: translate(556px, 296px) scale(0.65) rotate(10deg); }
  92%, 100% { opacity: 0; transform: translate(585px, 270px) scale(0.35) rotate(14deg); }
}
@keyframes hero-packet-two {
  0%, 6% { opacity: 0; transform: translate(255px, 327px) scale(0.5) rotate(8deg); }
  15% { opacity: 0.85; }
  45% { opacity: 0.9; transform: translate(382px, 440px) scale(0.75) rotate(-4deg); }
  56% { opacity: 0.9; transform: translate(414px, 436px) scale(0.75) rotate(-2deg); }
  85% { opacity: 0.8; transform: translate(560px, 308px) scale(0.55) rotate(-10deg); }
  93%, 100% { opacity: 0; transform: translate(588px, 278px) scale(0.25) rotate(-15deg); }
}
@keyframes hero-spark-one {
  0%, 12% { opacity: 0; transform: translate(266px, 346px) scale(0); }
  19% { opacity: 1; transform: translate(285px, 360px) scale(1); }
  29%, 100% { opacity: 0; transform: translate(310px, 380px) scale(0); }
}
@keyframes hero-spark-two {
  0%, 77% { opacity: 0; transform: translate(545px, 307px) scale(0); }
  87% { opacity: 1; transform: translate(575px, 279px) scale(1); }
  97%, 100% { opacity: 0; transform: translate(603px, 260px) scale(0); }
}
@keyframes status-hover {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(43, 196, 119, 0.1); }
  50% { box-shadow: 0 0 0 7px rgba(43, 196, 119, 0); }
}
@keyframes flow-glow {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}
@keyframes flow-drop {
  0%, 7% { offset-distance: 0%; opacity: 0; }
  13% { opacity: 1; }
  47% { offset-distance: 51%; opacity: 1; }
  57% { offset-distance: 51%; opacity: 1; }
  91% { offset-distance: 100%; opacity: 1; }
  97%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes gate-breathe {
  0%, 100% { transform: scale(0.98); }
  50% { transform: scale(1.04); }
}
@keyframes complete-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.18); }
  50% { box-shadow: 0 0 0 13px rgba(168, 85, 247, 0); }
}
@keyframes invite-panel-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes qr-card-float {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-8px); }
}
@keyframes qr-cell {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes qr-scan {
  0%, 100% { top: 40px; opacity: 0; }
  12%, 88% { opacity: 1; }
  50% { top: 222px; }
}
@keyframes nfc-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.2); }
  50% { box-shadow: 0 0 0 19px rgba(168, 85, 247, 0); }
}
@keyframes nfc-wave {
  0%, 100% { opacity: 0.25; transform: translateY(-50%) scale(0.88); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.04); }
}
@keyframes vnd-drop {
  0%, 8% { transform: translateX(-50%) translateY(-16px) rotate(-5deg); }
  20%, 78% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  88%, 100% { transform: translateX(-50%) translateY(-16px) rotate(-5deg); }
}
@keyframes avatar-pulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.24); }
  75%, 100% { box-shadow: 0 0 0 14px rgba(168, 85, 247, 0); }
}
@keyframes approval-state-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes progress-fill {
  from { width: 0; }
  to { width: 68%; }
}
@keyframes network-dash { to { stroke-dashoffset: -44; } }
@keyframes relay-ring {
  0% { opacity: 0.6; transform: translateX(-50%) scale(0.72); }
  85%, 100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}
@keyframes network-packet-top {
  0%, 8% { left: 15%; top: 40%; opacity: 0; transform: rotate(-7deg) scale(0.7); }
  15% { opacity: 1; }
  48% { left: 47%; top: 20%; opacity: 1; transform: rotate(3deg) scale(0.9); }
  85% { left: 82%; top: 40%; opacity: 1; transform: rotate(8deg) scale(0.72); }
  94%, 100% { left: 85%; top: 42%; opacity: 0; transform: rotate(10deg) scale(0.4); }
}
@keyframes network-packet-bottom {
  0%, 8% { left: 16%; top: 50%; opacity: 0; transform: rotate(8deg) scale(0.65); }
  15% { opacity: 0.8; }
  48% { left: 48%; top: 69%; opacity: 0.8; transform: rotate(-3deg) scale(0.8); }
  84% { left: 82%; top: 50%; opacity: 0.8; transform: rotate(-8deg) scale(0.7); }
  94%, 100% { left: 85%; top: 48%; opacity: 0; transform: rotate(-10deg) scale(0.4); }
}
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes platform-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes platform-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 1120px) {
  .flow-layout {
    grid-template-columns: minmax(450px, 1fr) minmax(350px, 0.8fr);
    gap: 45px;
  }

  .flow-device { transform: scale(0.88); }
  .flow-device-sender { transform: scale(0.88) rotate(-6deg); transform-origin: top left; }
  .flow-device-receiver { transform: scale(0.88) rotate(5deg); transform-origin: bottom right; }

  .invite-panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  }

  .invite-copy { padding: 45px; }
  .network-visual { min-height: 500px; }
}

@media (max-width: 920px) {
  .hero-visual {
    max-width: 720px;
    margin-inline: auto;
  }

  .flow-layout {
    grid-template-columns: 1fr;
  }

  .flow-visual {
    position: relative;
    top: auto;
  }

  .invite-panel {
    grid-template-columns: 1fr;
  }

  .invite-art {
    min-height: 450px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .network-visual {
    min-height: 520px;
  }

  .platform-orbit {
    max-width: 620px;
  }
}

@media (max-width: 680px) {
  .hero-stage {
    width: 112%;
    margin-left: -6%;
  }

  .hero-status-secure {
    top: 0;
    right: 2%;
    transform: scale(0.88) rotate(2deg);
    transform-origin: top right;
  }

  .hero-status-route { left: 4%; transform: scale(0.88) rotate(-3deg); transform-origin: top left; }
  .hero-file-label { bottom: 3%; left: 4%; transform: scale(0.88) rotate(-2deg); transform-origin: bottom left; }

  .flow-visual {
    height: 540px;
    border-radius: 21px;
  }

  .flow-device {
    width: 137px;
    height: 215px;
  }

  .flow-device-sender { top: 24px; left: 16px; }
  .flow-device-receiver { right: 14px; bottom: 20px; }
  .flow-track { inset: 0 -2%; width: 104%; height: 100%; }
  .flow-annotation { display: none; }

  .flow-step {
    grid-template-columns: auto 1fr;
    padding: 20px;
  }

  .invite-tabs button {
    min-height: 59px;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
  }

  .invite-tabs svg { width: 17px; }
  .invite-copy { padding: 42px 24px; }
  .invite-art { min-height: 390px; }
  .invite-qr-art { transform: scale(0.86) rotate(2deg); }
  .invite-nfc-art { transform: scale(0.82); }
  .invite-file-art { transform: scale(0.85); }

  .approval-body { min-height: 370px; padding: 28px 20px; }
  .approval-heading h3 { font-size: 18px; }
  .approval-actions { grid-template-columns: 1fr 1.2fr; }

  .network-visual {
    min-height: 430px;
    border-radius: 21px;
  }

  .network-device {
    top: 150px;
    width: 77px;
    height: 112px;
  }

  .network-device-left { left: 13px; }
  .network-device-right { right: 13px; }
  .network-device svg { width: 24px; }
  .network-relay-node { bottom: 29px; }
  .network-relay-node small { max-width: 160px; text-align: center; }
  .network-direct-label { top: 43px; }

  .platform-orbit { width: 112%; margin-left: -6%; }
  .platform-center { width: 112px; height: 112px; border-radius: 30px; }
  .platform-center img { width: 68px; height: 68px; }
  .platform-chip { width: 48px; height: 48px; padding: 0; }
  .platform-chip .platform-glyph { width: 25px; height: 25px; }
  .platform-chip-1 { left: 10%; }
  .platform-chip-2 { right: 0; }
  .platform-chip-3 { right: -2%; }
  .platform-chip-4 { left: 17%; }
}