/* 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%,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;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;aspect-ratio:5/4}
.handoff-backdrop::after{content:"";position:absolute;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,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 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);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%,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;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 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}
}