/* Test page only: a single encrypted ledger handoff, with a reversible return. */
.sync-demo .sync-pc .d-frame,
.sync-demo .sync-phone .t-phone-shot{position:relative;transition:box-shadow .5s ease,transform .5s ease}
.sync-demo .sync-pc-veil{position:absolute;inset:32px 0 0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--paper);color:var(--ink);font:800 16px/1.3 var(--body);opacity:0;pointer-events:none;transition:opacity .55s ease}
.sync-demo .sync-pc-veil .icon{width:38px;height:38px;color:var(--azure)}
.sync-demo .sync-phone .zoom{position:relative;width:100%}
.sync-demo .sync-phone-home{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease;pointer-events:none}
.sync-demo .sync-link{align-self:center;min-height:130px;justify-content:center;overflow:visible}
.sync-demo .sync-line{width:100%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--azure) 0 8px,transparent 8px 16px);opacity:.55}
.sync-demo .sync-packet{position:absolute;z-index:4;top:calc(50% - 38px);left:50%;display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--azure);border-radius:999px;background:var(--nile);color:var(--on-nile);box-shadow:var(--shadow);font:800 13px/1 var(--body);white-space:nowrap;opacity:0;transform:translateX(-50%);pointer-events:none}
.sync-demo .sync-packet .icon{width:16px;height:16px}
.sync-demo .sync-link p{max-width:120px}
.sync-demo .sync-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;text-align:center}
.sync-demo .sync-state{color:var(--ink2);font:700 15px/1.4 var(--body)}
.sync-demo .sync-action{min-height:44px;white-space:nowrap}
.sync-demo .sync-action[hidden]{display:none}
.sync-demo.is-home .sync-pc-veil,
.sync-demo.is-returning .sync-pc-veil{opacity:1}
.sync-demo.is-home .sync-phone-home,
.sync-demo.is-returning .sync-phone-home{opacity:1}
.sync-demo.is-lending .sync-pc-veil,
.sync-demo.is-lent .sync-pc-veil{opacity:0;pointer-events:none}
.sync-demo.is-lending .sync-phone-home,
.sync-demo.is-lent .sync-phone-home{opacity:0}
.sync-demo.is-lending .sync-pc-veil,
.sync-demo.is-lending .sync-phone-home{transition-delay:1.55s}
.sync-demo.is-returning .sync-pc-veil,
.sync-demo.is-returning .sync-phone-home{transition-delay:1.45s}
.sync-demo.is-lending .sync-pc .d-frame,
.sync-demo.is-returning .sync-phone .t-phone-shot{box-shadow:0 0 0 6px var(--t-green),var(--shadow-screen)}
.sync-demo.is-lending .sync-line,
.sync-demo.is-returning .sync-line{animation:sync-line-flash 2.8s ease both}
.sync-demo.is-lending .sync-packet{animation:sync-to-pc 2.8s cubic-bezier(.3,.1,.2,1) both}
.sync-demo.is-returning .sync-packet{animation:sync-to-phone 2.8s cubic-bezier(.3,.1,.2,1) both}
@keyframes sync-line-flash{15%,70%{opacity:1;filter:drop-shadow(0 0 8px var(--azure))}100%{opacity:.55;filter:none}}
@keyframes sync-to-pc{0%,12%{opacity:0;transform:translateX(18px) scale(.8)}25%{opacity:1}72%{opacity:1;transform:translateX(-100px) scale(1.08)}88%,100%{opacity:0;transform:translateX(-110px) scale(.8)}}
@keyframes sync-to-phone{0%,12%{opacity:0;transform:translateX(-110px) scale(.8)}25%{opacity:1}72%{opacity:1;transform:translateX(18px) scale(1.08)}88%,100%{opacity:0;transform:translateX(28px) scale(.8)}}
@media (max-width:900px){
  .sync-demo .sync-link{min-height:90px;flex-direction:column;gap:8px;padding:12px 0}
  .sync-demo .sync-line{width:3px;height:56px;background:repeating-linear-gradient(180deg,var(--azure) 0 8px,transparent 8px 16px)}
  .sync-demo .sync-packet{top:18px;left:calc(50% + 24px)}
  .sync-demo .sync-link p{max-width:none}
  .sync-demo .sync-controls{flex-direction:column;gap:10px}
  @keyframes sync-to-pc{0%,12%{opacity:0;transform:translateY(42px) scale(.8)}25%{opacity:1}72%{opacity:1;transform:translateY(-32px) scale(1.08)}88%,100%{opacity:0;transform:translateY(-42px) scale(.8)}}
  @keyframes sync-to-phone{0%,12%{opacity:0;transform:translateY(-42px) scale(.8)}25%{opacity:1}72%{opacity:1;transform:translateY(42px) scale(1.08)}88%,100%{opacity:0;transform:translateY(52px) scale(.8)}}
}
@media (prefers-reduced-motion:reduce){
  .sync-demo *{animation:none!important;transition:none!important}
}