/* Prevent intermediate placeholders and scroll positions reaching the screen. */
html[data-avatar-return-path] :is(#main-navbar .nav-surface, #mobile-bottom-nav .bottom-nav-surface, .sm-pinned-backdrop) {
    view-transition-name: none;
}
html[data-avatar-restoring] body { visibility: hidden; }
.sm-avatar-return-status { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; visibility:visible; background:var(--sm-surface,#1a1a1a); color:var(--sm-text,#f4f4f4); text-align:center; }
.sm-avatar-return-status p { margin:0; font-size:15px; line-height:1.6; }
.sm-avatar-return-status button { padding:10px 20px; border:1px solid var(--sm-line,rgba(255,255,255,.2)); border-radius:12px; background:var(--sm-field-fill,rgba(255,255,255,.06)); color:inherit; font:inherit; cursor:pointer; }
html[data-avatar-restoring] *, html[data-avatar-restoring] *::before,
html[data-avatar-restoring] *::after { transition-duration: 0s; animation-duration: 0s; }
/* Hidden reconstruction must reach its real geometry before the one visible
   crossfade. Component rules otherwise override the generic gate above and
   animate the participant list's height for 360ms behind the snapshot. */
html[data-avatar-restoring] :is(#bookingDetailView,#hero-photo-viewer) *,
html[data-avatar-restoring] :is(#bookingDetailView,#hero-photo-viewer) *::before,
html[data-avatar-restoring] :is(#bookingDetailView,#hero-photo-viewer) *::after { transition-duration:0s; animation-duration:0s; }
html .sm-avatar-return-status > * { animation: avatar-return-in 220ms ease-out both; }

/* The previous profile remains on screen while the destination restores itself. */
html[data-avatar-restoring]::view-transition-old(root) {
    animation: avatar-return-hold 1s linear infinite;
    opacity: 1;
}
html[data-avatar-restoring]::view-transition-new(root) {
    animation: avatar-return-hold 1s linear infinite;
    opacity: 0;
}
html[data-avatar-restored]::view-transition-old(root),
html[data-avatar-entering]::view-transition-old(root),
html[data-avatar-waiting]::view-transition-old(root) {
    animation: avatar-return-out 220ms ease-out both;
}
html[data-avatar-restored]::view-transition-new(root),
html[data-avatar-entering]::view-transition-new(root),
html[data-avatar-waiting]::view-transition-new(root) {
    animation: avatar-return-in 220ms cubic-bezier(.22,.8,.2,1) both;
}
html[data-avatar-fallback] body {
    animation: avatar-return-fade 220ms cubic-bezier(.22,.8,.2,1) backwards;
}
@keyframes avatar-return-hold { from { transform: none; } to { transform: none; } }
@keyframes avatar-return-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes avatar-return-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes avatar-return-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html[data-avatar-restored]::view-transition-old(root),
    html[data-avatar-restored]::view-transition-new(root),
    html[data-avatar-entering]::view-transition-old(root),
    html[data-avatar-entering]::view-transition-new(root),
    html[data-avatar-waiting]::view-transition-old(root),
    html[data-avatar-waiting]::view-transition-new(root),
    html .sm-avatar-return-status > *,
    html[data-avatar-fallback] body { animation-duration: 1ms; }
}