/* ==========================================================================
   LUXURY & CUTE BIRTHDAY GREETING CARD - STYLES
   ========================================================================== */

/* Glassmorphism & Modern Utilities */
.glass-pill {
  box-shadow: 0 8px 32px 0 rgba(255, 105, 180, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-card {
  box-shadow: 0 16px 40px 0 rgba(25, 5, 20, 0.37);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --------------------------------------------------------------------------
   LUXURY 3D BIRTHDAY GIFT BOX STAGE & WEBGL CANVAS
   -------------------------------------------------------------------------- */
.gift-box-stage {
  box-shadow: 0 25px 60px -15px rgba(225, 29, 72, 0.4), 0 0 35px rgba(244, 63, 122, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#threeGiftMount {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  touch-action: none;
  border-radius: inherit;
  overflow: hidden;
}

#threeGiftMount canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

.is-gift-opened #letterPeek {
  transform: translateY(-120px) scale(1.06);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 30px 60px -12px rgba(225, 29, 72, 0.5);
  z-index: 45;
}

.shimmer-sweep {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 80%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   LUXURY LETTER PAPER
   -------------------------------------------------------------------------- */
.luxury-paper-card {
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.98), rgba(255, 245, 248, 0.92));
}

/* --------------------------------------------------------------------------
   CAKE ANIMATIONS & CANDLE
   -------------------------------------------------------------------------- */
@keyframes flameFlicker {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    opacity: 0.95;
  }
  25% {
    transform: scale(1.08, 0.92) rotate(2deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.95, 1.05) rotate(-2deg);
    opacity: 0.9;
  }
  75% {
    transform: scale(1.04, 0.98) rotate(1deg);
    opacity: 1;
  }
}

.animate-flame-flicker {
  animation: flameFlicker 0.8s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.smoke-puff {
  animation: smokeRise 1.6s forwards cubic-bezier(0.1, 0.8, 0.3, 1);
}

@keyframes smokeRise {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-25px) scale(1.4) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(2) rotate(30deg);
  }
}

/* --------------------------------------------------------------------------
   POLAROID STACK CAROUSEL
   -------------------------------------------------------------------------- */
.polaroid-card {
  transform-origin: center center;
}

.polaroid-card.active {
  z-index: 30;
  transform: scale(1) translateY(0px) rotate(0deg);
  opacity: 1;
  pointer-events: auto;
}

.polaroid-card.next-1 {
  z-index: 20;
  transform: scale(0.94) translateY(12px) rotate(4deg);
  opacity: 0.85;
  pointer-events: none;
}

.polaroid-card.next-2 {
  z-index: 10;
  transform: scale(0.88) translateY(24px) rotate(-5deg);
  opacity: 0.65;
  pointer-events: none;
}

.polaroid-card.hidden-card {
  z-index: 0;
  transform: scale(0.8) translateY(40px);
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   FLOATING HEARTS IN BACKGROUND
   -------------------------------------------------------------------------- */
.heart-float-item {
  position: absolute;
  color: rgba(251, 111, 155, 0.6);
  pointer-events: none;
  animation: floatUp linear forwards;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10vh) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #120815;
}
::-webkit-scrollbar-thumb {
  background: #f43f7a;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   STEP 1: FULL-SCREEN 3D GIFT SCENE
   -------------------------------------------------------------------------- */
#giftScene,
#cakeScene {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Warm studio backdrop with bokeh lights (dots added by gift3d.js) */
#giftBokeh,
#cakeBokeh {
  background:
    radial-gradient(ellipse 70% 45% at 50% 82%, rgba(250, 232, 208, 0.95) 0%, rgba(236, 206, 170, 0.55) 45%, rgba(236, 206, 170, 0) 75%),
    linear-gradient(180deg, #2e1d12 0%, #5a3a22 38%, #9a7048 62%, #e2c7a2 82%, #f1e0c8 100%);
}
#giftBokeh i,
#cakeBokeh i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
}

/* Clicks fall through the step-1 overlay to the 3D scene, except on the button */
main { pointer-events: none; }
main .step-section { pointer-events: auto; }
main #step1-envelope,
main #step3-cake { pointer-events: none; }
main #step1-envelope button,
main #step3-cake button,
main #wishRevealedBox { pointer-events: auto; }

#threeCakeMount canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

/* --------------------------------------------------------------------------
   INTRO: screen-record invitation
   -------------------------------------------------------------------------- */
#introScreen {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(244, 63, 122, 0.22) 0%, rgba(244, 63, 122, 0) 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(227, 173, 38, 0.16) 0%, rgba(227, 173, 38, 0) 70%),
    #120815;
}
.intro-rec-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
  animation: introRecBlink 1.2s ease-in-out infinite;
}
@keyframes introRecBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Step-3 "Tiup Lilin" button pulses once the wish is saved, inviting the next click */
.blow-ready {
  animation: blowReadyPulse 1.4s ease-in-out infinite;
}
@keyframes blowReadyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(251, 191, 36, 0); }
}