/* ═══════════════════════════════════════════════════════════════
   Picture Hunt — Enhanced Celebration CSS
   ═══════════════════════════════════════════════════════════════
   Companion styles for new-celebrations.js.
   Paste into style.css or include separately.
   ═══════════════════════════════════════════════════════════════ */

/* --- Sticker Pop Overlay --- */
.sticker-pop-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 210; /* above confetti canvas (200) */
}

/* --- Sticker Pop Emoji --- */
.sticker-pop-emoji {
  font-size: 20px;
  opacity: 0;
  transform: scale(0);
  transition: none;
  will-change: transform, opacity;
  /* Text shadow gives depth on all backgrounds */
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* No user interaction */
  user-select: none;
  -webkit-user-select: none;
}

/* Phase 1: Pop in — scale from 0 to huge with a spring overshoot */
.sticker-pop-emoji.sticker-pop-active {
  opacity: 1;
  transform: scale(1);
  font-size: 140px;
  animation: stickerPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             stickerWiggle 0.6s ease 0.5s;
}

/* Phase 2: Float up + fade out */
.sticker-pop-emoji.sticker-pop-float {
  transition: transform 1s ease-in, opacity 0.8s ease-in;
  transform: scale(1.1) translateY(-120px);
  opacity: 0;
}

@keyframes stickerPopIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes stickerWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-8deg) scale(1.05); }
  30% { transform: rotate(8deg) scale(1.05); }
  45% { transform: rotate(-5deg) scale(1.02); }
  60% { transform: rotate(5deg) scale(1.02); }
  75% { transform: rotate(-2deg) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Respect reduced-motion preferences
   No rapid animations — just instant show/hide.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sticker-pop-emoji,
  .sticker-pop-emoji.sticker-pop-active,
  .sticker-pop-emoji.sticker-pop-float {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }

  .sticker-pop-emoji.sticker-pop-active {
    font-size: 140px;
    transform: scale(1);
    opacity: 1;
  }

  .sticker-pop-emoji.sticker-pop-float {
    opacity: 0;
    transform: scale(1);
  }
}