/* Motion follows the assembled source's nested-page push: enter from the
   trailing edge, reveal the retained page directly beneath it on back. */
#new-panels > .new-panel.final-panel-entering {
  transform: translate3d(100%, 0, 0);
  opacity: .96;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .28s ease;
  will-change: transform, opacity;
}

#new-panels > .new-panel.final-panel-entering.final-panel-open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

#new-panels > .new-panel.final-panel-closing {
  display: flex !important;
  transform: translate3d(18%, 0, 0);
  opacity: .82;
  transition: transform .28s cubic-bezier(.3,.7,.2,1), opacity .24s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

/* These source sheets own their own card geometry; do not push their entire
   backdrop sideways as if it were a full-screen account page. */
#new-panels > :is(.final-gift,.fp-voice-panel,.fn-editor,.fs-story-share,.fs-reply-panel,.new-comments-panel,.new-comment-menu).final-panel-entering {
  transform: none;
  opacity: 0;
}
#new-panels > :is(.final-gift,.fp-voice-panel,.fn-editor,.fs-story-share,.fs-reply-panel,.new-comments-panel,.new-comment-menu).final-panel-open {
  opacity: 1;
}
#new-panels > :is(.final-gift,.fp-voice-panel,.fn-editor,.fs-story-share,.fs-reply-panel,.new-comments-panel,.new-comment-menu).final-panel-closing {
  transform: none;
  opacity: 0;
}

#new-panels > .new-panel.new-comments-panel.final-panel-entering,
#new-panels > .new-panel.new-comments-panel.final-panel-open,
#new-panels > .new-panel.new-comments-panel.final-panel-closing {
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .25s ease;
}
#new-panels > .new-panel.new-comments-panel.final-panel-entering{transform:translate3d(0,100%,0);background-color:rgba(22,10,48,0)}
#new-panels > .new-panel.new-comments-panel.final-panel-open{transform:translate3d(0,0,0);background-color:rgba(22,10,48,.46)}
#new-panels > .new-panel.new-comments-panel.final-panel-closing{transform:translate3d(0,100%,0);background-color:rgba(22,10,48,0)}
#new-panels > .new-panel.new-comment-menu.final-panel-entering,
#new-panels > .new-panel.new-comment-menu.final-panel-open,
#new-panels > .new-panel.new-comment-menu.final-panel-closing{transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .22s ease}
#new-panels > .new-panel.new-comment-menu.final-panel-entering{transform:translate3d(0,100%,0);background-color:rgba(22,10,48,0)}
#new-panels > .new-panel.new-comment-menu.final-panel-open{transform:translate3d(0,0,0);background-color:rgba(22,10,48,.46)}
#new-panels > .new-panel.new-comment-menu.final-panel-closing{transform:translate3d(0,100%,0);background-color:rgba(22,10,48,0)}

/* Tactile response is limited to real controls, never document-level gestures. */
#app [data-action]:not(:disabled),
#new-panels .new-panel button:not(:disabled) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#app [data-action]:not(:disabled):active,
#new-panels .new-panel button:not(:disabled):active {
  transform: scale(.975);
}

@media (prefers-reduced-motion: reduce) {
  #new-panels > .new-panel.final-panel-entering,
  #new-panels > .new-panel.final-panel-closing {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }

  #app [data-action]:not(:disabled):active,
  #new-panels .new-panel button:not(:disabled):active {
    transform: none;
  }
}