/* Animated gradient background */
.bg-animated {
  background: linear-gradient(-45deg, #FFF7ED, #FDF2F8, #EFF6FF, #FFF7ED);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glassmorphism */
.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.4); }
.glass-strong { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); }

/* Dot pattern */
.bg-dots { background-image: radial-gradient(circle, #F9A8D4 0.8px, transparent 0.8px); background-size: 28px 28px; }

/* Glow effects */
.glow-pink { box-shadow: 0 0 40px rgba(249,168,212,0.25), 0 0 80px rgba(249,168,212,0.1); }
.glow-blue { box-shadow: 0 0 40px rgba(147,197,253,0.25), 0 0 80px rgba(147,197,253,0.1); }

/* Page enter animation */
.page-enter { animation: pageSlideIn 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Float animation for decorations */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}
.float-1 { animation: float 4s ease-in-out infinite; }
.float-2 { animation: float 5s ease-in-out 0.5s infinite; }
.float-3 { animation: float 4.5s ease-in-out 1s infinite; }
.float-4 { animation: float 5.5s ease-in-out 1.5s infinite; }
.float-5 { animation: float 4s ease-in-out 0.8s infinite; }
.float-6 { animation: float 5s ease-in-out 1.2s infinite; }

/* Bounce animation */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #F9A8D4, #93C5FD); border-radius: 3px; }

/* Slider styling */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #F9A8D4, #F472B6); cursor: pointer;
  border: 4px solid white; box-shadow: 0 4px 12px rgba(244,114,182,0.4); transition: transform 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #F9A8D4, #F472B6); cursor: pointer;
  border: 4px solid white; box-shadow: 0 4px 12px rgba(244,114,182,0.4);
}

/* Focus ring */
input:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #F9A8D4; outline-offset: 2px;
}

/* Selection */
::selection { background-color: #FBCFE8; color: #831843; }

/* Smooth transitions for HTMX swaps */
.htmx-settling { transition: opacity 0.3s ease; }
.htmx-added { opacity: 0; }
.htmx-added.htmx-settling { opacity: 1; }

/* Tab active indicator */
.tab-active { border-bottom: 2px solid #F472B6; color: #F472B6; }

/* Card hover */
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }