/* ================================================
   Global Styles — Birthday Surprise App
   ================================================ */

/* --- Base --- */
body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  background-color: #000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* --- Font Utilities --- */
.font-handwriting { font-family: 'Dancing Script', cursive; }
.font-elegant { font-family: 'Playfair Display', serif; }

/* ================================================
   Keyframe Animations
   ================================================ */

@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.95) skewX(2deg); }
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes smoke {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  50% { opacity: 0.5; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}

@keyframes appear {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatUp {
  0% { top: 110%; opacity: 0.8; transform: translateX(0) rotate(0deg); }
  100% { top: -20%; opacity: 1; transform: translateX(20px) rotate(10deg); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ================================================
   Animation Utility Classes
   ================================================ */

.candle-flame {
  animation: flicker 1.5s infinite ease-in-out alternate;
  transform-origin: center bottom;
}

.floating-doll {
  animation: float 6s ease-in-out infinite;
}

.animate-appear {
  animation: appear 1.5s ease-out forwards;
}

.animate-float-up {
  animation: floatUp 10s linear infinite;
}

.animate-sway {
  animation: sway 3s ease-in-out infinite;
}

/* ================================================
   Scrollbar Utilities
   ================================================ */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}