/* Lavender Dream Template Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Great+Vibes&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --lavender-bg: #fbf8fe;
  --lavender-card: rgba(255, 255, 255, 0.85);
  --lavender-primary: #8e68ad;
  --lavender-dark: #4a286d;
  --lavender-soft: #ebdcfc;
  --gold-accent: #c49a45;
}

[x-cloak] { display: none !important; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f8f4fc;
}
::-webkit-scrollbar-thumb {
  background: #d4c2ea;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8e68ad;
}

/* Glassmorphism Pastel */
.glass-lavender {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(142, 104, 173, 0.18);
  box-shadow: 0 10px 30px rgba(142, 104, 173, 0.08);
}

.glass-lavender-glow {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(142, 104, 173, 0.3);
  box-shadow: 0 8px 32px rgba(142, 104, 173, 0.15), 0 0 20px rgba(235, 220, 252, 0.6);
}

.glass-nav-lavender {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(142, 104, 173, 0.2);
  box-shadow: 0 10px 30px rgba(74, 40, 109, 0.12);
}

.lavender-input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(142, 104, 173, 0.25);
  color: #3b2354;
  transition: all 0.3s ease;
}
.lavender-input:focus {
  outline: none;
  border-color: #8e68ad;
  box-shadow: 0 0 10px rgba(142, 104, 173, 0.25);
  background: #ffffff;
}

/* Floral Floating Animation */
@keyframes petal-float-1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes petal-float-2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-6deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.animate-petal-1 {
  animation: petal-float-1 6s ease-in-out infinite;
}

.animate-petal-2 {
  animation: petal-float-2 7s ease-in-out infinite;
}

/* Vinyl rotation animation */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}
.music-paused {
  animation-play-state: paused;
}

/* Lavender subtle texture pattern */
.lavender-bg-pattern {
  background-color: #fbf8fe;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(235, 220, 252, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(223, 203, 245, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(250, 242, 255, 0.5) 0%, transparent 60%);
}