/* Gift
 * Protected gift shell shared by gift.html and gift-for-quynh.html.
 * Extracted from the v1.0.0 stylesheet; keep page-specific overrides after shared.css.
 */

.gift-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(43, 45, 49, 0.1);
  border-top-color: #8f949a;
  border-radius: 50%;
  animation: giftSpin 0.8s linear infinite;
}

body.dark-mode .gift-spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: #ebe7e1;
}

/* Option A Transition: when cover is opening */
.is-cover-opening .gift-quynh-letter-img {
  display: block;
  opacity: 0;
  transform: scale(1.15) rotate(-1.5deg);
  filter: blur(6px);
  transition: opacity 0.6s ease-in, transform 0.6s ease-in, filter 0.6s ease-in;
}

.is-cover-opening .gift-quynh-img {
  display: block;
  animation: giftPortraitFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

body[data-page="gift-for-quynh"] .gift-3d-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 215, 0, 0.15);
  border-top-color: #ffd700;
  border-right-color: rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  animation: gift3DSpin 0.75s linear infinite;
  box-sizing: border-box;
}

/* Music button fades & shrinks gracefully when expanding */
body[data-page="gift-for-quynh"] .gift-pill-card.is-menu-open #giftMusicBtn {
  opacity: 0 !important;
  transform: scale(0.3) !important;
  pointer-events: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Menu button rotates into X icon (clean transparent, no circular background) */
body[data-page="gift-for-quynh"] .gift-pill-card.is-menu-open #giftMenuBtn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-page="gift-for-quynh"] .gift-3d-loading-overlay.is-error .gift-3d-spinner {
  display: none;
}

/* Gift for Quynh: show music/menu only after the cover opens */
body[data-page="gift-for-quynh"]:not(.is-cover-open):not(.is-cover-opening) .gift-topbar-wrapper {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
