:root {
  --bg-paper: #FDFBF6;
}

body {
  background-color: #F4F1EA;
  color: #2F362B;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(214, 232, 245, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(246, 226, 232, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(197, 214, 178, 0.45) 0%, transparent 50%);
}

/* Subtle paper grain overlay */
.paper-texture {
  background-image: radial-gradient(rgba(67, 88, 59, 0.06) 1px, transparent 0);
  background-size: 18px 18px;
}

/* Scallop & Wavy Card Borders inspired by physical stationery */
.scallop-frame {
  position: relative;
  background: #FDFBF6;
  border-radius: 28px;
  box-shadow: 0 18px 40px -15px rgba(47, 54, 43, 0.14), 0 0 0 8px #C5D6B2, 0 0 0 12px #FDFBF6, 0 0 0 14px rgba(127, 154, 101, 0.35);
}

.wavy-sage-card {
  position: relative;
  background: #FDFBF6;
  border-radius: 24px;
  border: 6px solid #5D7453;
  box-shadow: 0 14px 32px -10px rgba(47, 54, 43, 0.15), inset 0 0 0 4px #EBF0D6;
}

/* Interactive Pocket Envelope Animation */
.envelope-wrapper {
  perspective: 1200px;
}

.envelope-card {
  transition: all 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
  cursor: pointer;
}

.envelope-card:hover {
  transform: translateY(-16px) rotate(0deg) scale(1.03) !important;
  z-index: 40 !important;
}

.envelope-open .card-slot-1 {
  transform: translate(-18%, -42px) rotate(-6deg);
}

.envelope-open .card-slot-2 {
  transform: translate(16%, -48px) rotate(5deg);
}

.envelope-open .card-slot-3 {
  transform: translate(-6%, -22px) rotate(-2deg);
}

.envelope-open .card-slot-4 {
  transform: translate(26%, -18px) rotate(8deg);
}

.envelope-open .card-slot-5 {
  transform: translate(22%, -58px) rotate(10deg);
}

/* Floating animation */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

.animate-float {
  animation: floatSlow 5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatSlow 6s ease-in-out 1.5s infinite;
}

/* Vinyl spin for music player */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-vinyl {
  animation: spinSlow 8s linear infinite;
}

.spin-paused {
  animation-play-state: paused;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F4F1EA;
}

::-webkit-scrollbar-thumb {
  background: #9DB188;
  border-radius: 9999px;
}

/* Falling petals canvas */
#petals-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}