/* Handoff page (Components/Handoff.razor). Uses the site's colour tokens with
   fallbacks, so the component works in any host. Motion: a comet travels
   ZUNVI → destination with anticipation and ease-out, the subject floats
   (docs/design/motion.md); reduced motion keeps only a short fade. */
.handoff-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(circle at 50% 18%,rgba(156,114,255,0.22),transparent 45%),var(--night,#07111f);background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--violet,#9c72ff) 22%,transparent),transparent 45%),var(--night,#07111f)}
/* Background image: the subject enlarged, blurred and drifting behind the page. */
.handoff-shell{position:relative;overflow:hidden}
.handoff-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:grid;place-items:center;pointer-events:none;opacity:.55;filter:blur(16px) saturate(1.5);animation:handoff-drift 14s ease-in-out infinite alternate}
.handoff-backdrop>*{width:min(150vw,1300px)}
.handoff-backdrop svg{width:100%;height:auto;max-height:none;min-height:30vw;aspect-ratio:5/4}
.handoff-backdrop::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(circle at 50% 45%,transparent 30%,var(--night,#07111f) 92%)}
html[data-theme="light"] .handoff-backdrop{opacity:.35}
@keyframes handoff-drift{from{transform:translate(-3%,-2%) rotate(-4deg)}to{transform:translate(3%,2%) rotate(4deg)}}
.handoff{position:relative;z-index:1;width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;color:var(--ink,#eef6ff);animation:handoff-in 420ms cubic-bezier(.2,.8,.2,1) both}
.handoff-route{display:flex;align-items:center;gap:.7rem;width:100%;font:700 .78rem/1 'Manrope',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink,#eef6ff)}
.handoff-from{display:inline-flex;align-items:center;gap:.5rem}
.handoff-from .brand-mark{width:28px;height:28px;font-size:.85rem;letter-spacing:0}
.handoff-to{letter-spacing:.04em;text-transform:none;font-size:.9rem}
.handoff-track{position:relative;flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(67,229,233,0.45),rgba(156,114,255,0.45));background:linear-gradient(90deg,color-mix(in srgb,var(--cyan,#43e5e9) 45%,transparent),color-mix(in srgb,var(--violet,#9c72ff) 45%,transparent))}
.handoff-comet{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--cyan,#43e5e9);box-shadow:0 0 0 4px rgba(67,229,233,0.25),-12px 0 14px var(--cyan,#43e5e9);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan,#43e5e9) 25%,transparent),-12px 0 14px var(--cyan,#43e5e9);animation:handoff-comet 1.1s cubic-bezier(.55,-0.25,.3,1) infinite}
.handoff-visual{width:min(220px,60vw);height:min(220px,60vw);aspect-ratio:1;display:grid;place-items:center;border-radius:28px;animation:handoff-float 2.6s ease-in-out infinite}
.handoff-visual>*{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;background:radial-gradient(circle at 50% 45%,rgba(67,229,233,0.28),transparent 65%);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--aura,#43e5e9) 28%,transparent),transparent 65%)}
.handoff-visual svg{width:100%;height:auto}
.handoff-title{margin:.4rem 0 0;font:600 clamp(1.4rem,5vw,1.9rem)/1.2 'Manrope',sans-serif;letter-spacing:-.03em}
.handoff-ellipsis span{animation:handoff-dot 1.2s infinite both}
.handoff-ellipsis span:nth-child(2){animation-delay:.2s}
.handoff-ellipsis span:nth-child(3){animation-delay:.4s}
.handoff-subject{margin:0;font-weight:600}
.handoff-note{color:var(--muted,#93a5b8);font-size:.85rem;max-width:40ch}
.handoff-note p{margin:0}
.handoff-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.3rem}
.handoff-continue,.handoff-back{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none}
.handoff-continue{background:var(--cyan,#43e5e9);color:#06141c}
.handoff-back{border:1px solid var(--line,rgba(180,220,255,.14));color:var(--muted,#93a5b8);font-weight:600}
.handoff-continue:focus-visible,.handoff-back:focus-visible{outline:3px solid var(--violet,#9c72ff);outline-offset:3px}
.handoff-status{margin:0;color:var(--muted,#93a5b8);font-size:.75rem}
html[data-theme="light"] .handoff-continue{background:#09716c;color:#fff}
/* While the destination loads (js/handoff.js sets --handoff-progress, 0–1):
   the Continue button fills like a progress bar with a light sweeping its
   leading edge, and the comet rides the route at the same position. */
.handoff-continue{position:relative;overflow:hidden;isolation:isolate}
.handoff-continue::before,.handoff-continue::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 200ms}
.handoff-continue::before{background:rgba(255,255,255,.38);transform-origin:left;transform:scaleX(var(--handoff-progress,0))}
.handoff-continue::after{width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);left:calc(var(--handoff-progress,0) * 100% - 40%)}
.handoff.is-loading .handoff-continue::before,.handoff.is-loading .handoff-continue::after{opacity:1}
html[data-theme="light"] .handoff-continue::before{background:rgba(255,255,255,.24)}
.handoff.is-loading .handoff-comet{animation:handoff-comet-glow 900ms ease-in-out infinite;left:calc(var(--handoff-progress,0) * 100%);opacity:1}
@keyframes handoff-comet-glow{50%{box-shadow:0 0 0 7px rgba(67,229,233,0.18),-18px 0 18px var(--cyan,#43e5e9);box-shadow:0 0 0 7px color-mix(in srgb,var(--cyan,#43e5e9) 18%,transparent),-18px 0 18px var(--cyan,#43e5e9)}}
@keyframes handoff-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes handoff-comet{0%{left:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes handoff-float{50%{transform:translateY(-6px)}}
@keyframes handoff-dot{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes handoff-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .handoff{animation:handoff-fade 200ms linear both}
  .handoff-comet,.handoff.is-loading .handoff-comet{animation:none}
  .handoff-comet{left:100%}
  .handoff-continue::after{display:none}
  .handoff-visual,.handoff-ellipsis span,.handoff-backdrop{animation:none}
}

/* Older Safari (13) has no flex gap, so rows of links, chips and buttons would touch.
   aspect-ratio arrives in the same browsers as flex gap (Safari 15, Chrome 88, Firefox 89), so where it is
   missing the spacing is carried by margins and gap is zeroed so the two never add up. Layout only. */
@supports not (aspect-ratio:1){
.handoff,.handoff-route,.handoff-from,.handoff-actions{gap:0}
.handoff>*+*{margin-top:1rem}
.handoff-route>*+*{margin-left:.7rem}
.handoff-from>*+*{margin-left:.5rem}
.handoff-actions>*{margin:.3rem .3rem 0}
}