/* One landing pose for the viewer and the invisible source-page measuring box. */
:root { --memory-orb-diameter:min(30vw,50dvh,580px); --memory-orb-y:40dvh; --memory-orb-x:50vw; }
@media (width<=700px) {
  :root { --memory-orb-diameter:min(72vw,49dvh); --memory-orb-y:40dvh; }
}
@media (height<=500px) {
  :root { --memory-orb-diameter:52dvh; --memory-orb-y:52dvh; --memory-orb-x:28vw; }
}
#app[data-entry=share] {
  --orb-diameter:var(--memory-orb-diameter);
  --orb-y:var(--memory-orb-y);
}
#app[data-entry=share] #share-orb { left:var(--memory-orb-x); }
.orb-destination {
  position:fixed; left:var(--memory-orb-x); top:var(--memory-orb-y);
  width:var(--memory-orb-diameter); height:var(--memory-orb-diameter);
  transform:translate(-50%,-50%); visibility:hidden; pointer-events:none;
}

/* Keep the selected orb above the scene, with site navigation available. */
#orb-handoff { position:fixed; inset:0; z-index:19; pointer-events:none; }
#orb-handoff img { position:absolute; display:block; border-radius:50%; transform-origin:top left; }
.orb-leaving #world, .orb-leaving main, .orb-leaving .social-links { pointer-events:none; }
.orb-arriving #app { visibility:hidden; }
.orb-auto-entry #app:not([data-preparation=failed]) .share-tap,
.orb-auto-entry .share-invitation > .eyebrow { visibility:hidden; }
@media (prefers-reduced-motion:reduce) {
  #orb-handoff { transition:none; }
}

/* Copy yields while the live WebGL field performs the focus move. */
.orb-leaving main, .orb-leaving .social-links { opacity:0; transition:opacity .28s ease; }
@media (prefers-reduced-motion:reduce) {
  .orb-leaving main, .orb-leaving .social-links { transition:none; }
}

/* A decoded source snapshot replaces its live copy, never stacks over it. */
.orb-leaving.orb-snapshot-held #world { visibility:hidden; }
/* Retain the outgoing document while the next page reaches its first paint. */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:none; }
::view-transition-new(root) { animation:document-arrival .16s ease both; }
@keyframes document-arrival { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { ::view-transition-new(root) { animation:none; } }

.orb-auto-entry.orb-snapshot-held #app { visibility:hidden; }
.orb-returning #world { visibility:hidden; }
.orb-returning main { opacity:0; }