/* 奉卦功德匣：只使用合成层的纵向位移，避免旧侧栏横移与重绘闪屏。 */
#sp-bg.gua-open {
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: opacity .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .46s;
  will-change: opacity;
}

#sp-bg.gua-open.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
}

#sp-panel[data-view^="gua-"] {
  bottom: 0;
  height: min(calc(168vw - 33.6px), calc(100dvh - 10px), 672px);
  max-height: 672px;
  opacity: 0;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, 104%, 0) scale(.98, .965);
  transition:
    transform .62s cubic-bezier(.32,.72,0,1),
    opacity .24s ease-out;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: layout paint style;
}

#sp-panel[data-view^="gua-"].open {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

#sp-panel[data-view^="gua-"].gua-closing {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 104%, 0) scale(.98, .965);
  transition:
    transform .44s cubic-bezier(.32,0,.67,0),
    opacity .26s ease-in .08s;
}

/* 面板移动时暂停内部常驻动画，给底部开合独占合成器预算。 */
#sp-panel.gua-moving .gua-celestial,
#sp-panel.gua-moving .gua-bagua-ring,
#sp-panel.gua-moving .gua-taiji-core,
#sp-panel.gua-moving .gua-wuxing-orbit,
#sp-panel.gua-moving .gua-incense i,
#sp-panel.gua-moving .gua-box-blessing,
#sp-panel.gua-moving .gua-qr-wrap,
#sp-panel.gua-moving [class*="glow"],
#sp-panel.gua-moving [class*="aura"] {
  animation-play-state: paused !important;
}

/* “继续问卦”仅让输入区升起，不改变焦点，因此不会唤起软键盘。 */
#input-bar.gua-composer-returning {
  animation: guaComposerRise .52s cubic-bezier(.32,.72,0,1) both;
  will-change: transform, opacity;
}

@keyframes guaComposerRise {
  from { opacity: 0; transform: translate3d(0,28px,0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

/* 奉卦提示：完整展示后台文案，并以醒目深红色强调。 */
#sp-panel[data-view^="gua-"] .gua-gift-copy {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
  white-space: pre-line;
  color: #b42318 !important;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: .15px;
  text-wrap: pretty;
  max-width: 360px;
  min-height: 0;
  margin: 1px auto 8px;
  padding: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  #sp-bg.gua-open,
  #sp-panel[data-view^="gua-"],
  #input-bar.gua-composer-returning {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}