/* These homepage siblings sit outside .container, so include them explicitly
   in every popup's background treatment. Blur the wrapper once, not its cards. */
body:is(.modal-open,:has(#changelogModal.active,#contentPanelBackdrop.active,.desk-object-dialog[open],.shopping-overlay.active)) :is(.homepage-resources,ry-launch-banner .lb-wrap){
  filter:blur(5px);
}

/* Native object dialogs use their open state rather than the voice modal flag. */
body:has(.desk-object-dialog[open]) :is(.container,.controls-group,.stars,.leaves,.snow){filter:blur(5px);opacity:.5}
body:has(.desk-object-dialog[open]) .top-nav{filter:blur(5px)}
@media(max-width:768px){body:has(.desk-object-dialog[open]) .controls-group :is(.changelog-button,.theme-toggle){filter:blur(5px);opacity:.5}}

/* Match voice settings: a 10px rise and 200ms ease fade on each opening. */
@keyframes popup-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes popup-backdrop-arrive{from{opacity:0}to{opacity:1}}
.desk-object-dialog[open]{animation:popup-arrive .2s ease both}
.desk-object-dialog[open]::backdrop{animation:popup-backdrop-arrive .2s ease both}
@media(prefers-reduced-motion:reduce){
 .desk-object-dialog[open],.desk-object-dialog[open]::backdrop{animation:none}
}

/* Feather only the bottom boundary; the top and side edges remain opaque. */
body:is(.modal-open,:has(#changelogModal.active,#contentPanelBackdrop.active,.desk-object-dialog[open],.shopping-overlay.active)) .launch-banner{
 background:#000;
 border-bottom:0;
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),rgba(0,0,0,.85) calc(100% - 9.8px),rgba(0,0,0,.4) calc(100% - 5.6px),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),rgba(0,0,0,.85) calc(100% - 9.8px),rgba(0,0,0,.4) calc(100% - 5.6px),transparent 100%);
}