/* One CSS clock: receiving link out, text scrambles at the sender, ciphertext
   comes back, text unscrambles inside the recipient. No animation JavaScript. */
.handoff { margin: 18px auto 24px; max-width: 440px; }
.handoff-picture { display: block; width: 100%; height: auto; }
.handoff-device { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.handoff-routes { fill: none; stroke: var(--veil-4); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 7; }
.handoff-label { fill: var(--ink-2); font: 18px var(--font); }
.handoff-kept { fill: var(--ink-3); font: italic 15px var(--font); }
.handoff-key { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.handoff-card { fill: var(--accent); stroke: var(--ground-2); stroke-width: 6; paint-order: stroke; }
.handoff-ink { fill: none; stroke: var(--ground-0); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.handoff-message { fill: var(--accent); font: 500 19px var(--font-mono); stroke: var(--ground-2); stroke-width: 5; stroke-linejoin: round; paint-order: stroke; }
.handoff-plain { fill: var(--cream); }
.handoff-check circle { fill: var(--positive); stroke: var(--ground-2); stroke-width: 3; }
.handoff-check path { fill: none; stroke: var(--ground-0); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.handoff-caption { margin: 0; color: var(--ink-2); font: 16px/1.4 var(--font); text-align: center; }
.handoff-still { display: none; }

/* Circular arms move smoothly; counterrotation keeps text upright. */
.handoff-link-arm { transform-origin: 189px 300px; }
.handoff-link { transform-origin: 82px 106px; }
.handoff-reply-arm { transform-origin: 189px -80px; }
.handoff-reply { transform-origin: 296px 106px; }
.handoff-link-arm, .handoff-link, .handoff-reply-arm, .handoff-reply,
.handoff-reply text, .handoff-check { animation-duration: 10s; animation-iteration-count: infinite; }
.handoff-link-arm { animation-name: handoff-link-arm; }
.handoff-link { animation-name: handoff-link; }
.handoff-reply-arm { animation-name: handoff-reply-arm; }
.handoff-reply { animation-name: handoff-reply; }
.handoff-reply text { animation-timing-function: steps(1, end); opacity: 0; }
.handoff-reply .handoff-plain { animation-name: handoff-plain; }
.handoff-frame-one { animation-name: handoff-frame-one; }
.handoff-frame-two { animation-name: handoff-frame-two; }
.handoff-frame-three { animation-name: handoff-frame-three; }
.handoff-cipher { animation-name: handoff-cipher; }
.handoff-check { animation-name: handoff-check; opacity: 0; }

@keyframes handoff-link-arm {
  0%, 8% { transform: rotate(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  28%, 100% { transform: rotate(57.8deg); }
}
@keyframes handoff-link {
  0%, 3% { opacity: 0; transform: rotate(0); }
  8% { opacity: 1; transform: rotate(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  28% { opacity: 1; transform: rotate(-57.8deg); }
  32%, 100% { opacity: 0; transform: rotate(-57.8deg); }
}
@keyframes handoff-reply-arm {
  0%, 46% { transform: rotate(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  74%, 100% { transform: rotate(59.8deg); }
}
@keyframes handoff-reply {
  0% { opacity: 0; transform: rotate(0); }
  4%, 46% { opacity: 1; transform: rotate(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  74%, 96% { opacity: 1; transform: rotate(-59.8deg); }
  100% { opacity: 0; transform: rotate(-59.8deg); }
}
/* The short intermediate frames reverse on arrival. Plaintext never travels. */
@keyframes handoff-plain { 0%, 84%, 100% { opacity: 1; } 32% { opacity: 0; } }
@keyframes handoff-frame-one { 0%, 34%, 84%, 100% { opacity: 0; } 32%, 82% { opacity: 1; } }
@keyframes handoff-frame-two { 0%, 36%, 82%, 100% { opacity: 0; } 34%, 80% { opacity: 1; } }
@keyframes handoff-frame-three { 0%, 38%, 80%, 100% { opacity: 0; } 36%, 78% { opacity: 1; } }
@keyframes handoff-cipher { 0%, 78%, 100% { opacity: 0; } 38% { opacity: 1; } }
@keyframes handoff-check {
  0%, 84% { opacity: 0; }
  88%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .handoff * { animation: none; }
  .handoff-link-arm, .handoff-reply-arm { display: none; }
  .handoff-still { display: block; }
  .handoff-check { opacity: 1; }
}
@media (max-width: 420px) {
  .handoff { margin: 12px auto 20px; }
  .handoff-caption { font-size: 15px; }
}