/* =====================================================
   BASE
===================================================== */
* { box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background: #fff0f3; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff0f3; }
::-webkit-scrollbar-thumb { background: #ffb7c5; border-radius: 3px; }

/* =====================================================
   ANIMATIONS
===================================================== */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes floatUp {
  0%   { transform: translateY(0)      scale(1);   opacity: 1; }
  100% { transform: translateY(-280px) scale(0.4); opacity: 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cursorHeart {
  0%   { transform: translate(0, 0)              scale(1);   opacity: 1; }
  60%  { transform: translate(var(--dx), -60px)  scale(0.8); opacity: 0.7; }
  100% { transform: translate(var(--dx), -110px) scale(0.3); opacity: 0; }
}

.confetti-piece { animation: confettiFall linear forwards; }
.float-heart    { animation: floatUp 2s ease-out forwards; pointer-events: none; position: fixed; font-size: 1.8rem; z-index: 999; }
.fade-in-up     { animation: fadeInUp 0.7s ease-out forwards; }
.pulse-soft     { animation: pulseSoft 2.2s ease-in-out infinite; }
.slide-in       { animation: slideIn 0.5s ease-out forwards; }

/* =====================================================
   ENVELOPE / CARD
===================================================== */
.envelope-wrap {
  perspective: 1200px;
  width: 320px;
  margin: 0 auto;
}
.envelope-inner {
  position: relative;
  transition: transform 0.8s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}
.envelope-inner.flipped { transform: rotateY(180deg); }
.env-front, .env-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.env-back { transform: rotateY(180deg); position: absolute; inset: 0; }

/* =====================================================
   CAROUSEL SLIDE TRANSITION
===================================================== */
.carousel-img { transition: opacity 0.5s ease, transform 0.5s ease; }