/* ============================================
   DEBORA'S PLAYFUL DESIGN SYSTEM 🎨
   Making things fun, personal, and delightful!
   ============================================ */

/* Import Fun Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Caveat:wght@400;500;600;700&family=Fredoka:wght@300;400;500;600;700&display=swap');

/* ============================================
   COLOR PALETTE - Warm & Playful
   ============================================ */
:root {
  /* Primary playful colors */
  --playful-purple: #8B5CF6;
  --playful-pink: #EC4899;
  --playful-orange: #F97316;
  --playful-yellow: #FCD34D;
  --playful-teal: #14B8A6;
  --playful-blue: #3B82F6;
  --playful-coral: #FB7185;
  
  /* Soft backgrounds */
  --soft-purple: #F3E8FF;
  --soft-pink: #FCE7F3;
  --soft-orange: #FFEDD5;
  --soft-teal: #CCFBF1;
  --soft-yellow: #FEF3C7;
  
  /* Neutrals with warmth */
  --warm-white: #FFFBF5;
  --warm-gray: #78716C;
  --warm-dark: #44403C;
  
  /* Fun gradients */
  --gradient-sunset: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%);
  --gradient-ocean: linear-gradient(135deg, #3B82F6 0%, #14B8A6 100%);
  --gradient-candy: linear-gradient(135deg, #EC4899 0%, #F97316 50%, #FCD34D 100%);
  --gradient-soft: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 50%, #FFEDD5 100%);
}

/* ============================================
   TYPOGRAPHY - Friendly & Approachable
   ============================================ */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--warm-white);
  color: var(--warm-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--warm-dark);
}

/* Playful handwritten accents */
.handwritten, .playful-accent {
  font-family: 'Caveat', cursive !important;
  font-weight: 600;
  color: var(--playful-purple);
  font-size: 1.3em;
}

/* Fun display text */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Fredoka', sans-serif !important;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gentle-pulse 3s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

/* ============================================
   ROUNDED EVERYTHING - Soft & Friendly
   ============================================ */
.btn, .card, .badge, .navbar, .form-control, .form-select, 
.offcanvas, .modal-content, .dropdown-menu, .alert {
  border-radius: 1.5rem !important;
}

.btn-lg {
  border-radius: 2rem !important;
}

.btn-sm {
  border-radius: 1.25rem !important;
}

img, .jarallax-img, video {
  border-radius: 1.5rem !important;
}

/* ============================================
   PLAYFUL BUTTONS - Fun & Inviting
   ============================================ */
.btn-primary {
  background: var(--gradient-sunset) !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-weight: 600 !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(249, 115, 22, 0.35);
}

.btn-primary:active {
  transform: translateY(-1px) scale(1.02);
}

/* Secondary button - playful purple */
.btn-secondary {
  background: var(--playful-purple) !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
}

.btn-secondary:hover {
  background: var(--playful-pink) !important;
  transform: translateY(-3px) scale(1.05);
}

/* Outline buttons - fun borders */
.btn-outline-primary {
  border: 3px solid var(--playful-purple) !important;
  color: var(--playful-purple) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: var(--playful-purple) !important;
  color: white !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

/* ============================================
   NAVIGATION - Friendly & Welcoming
   ============================================ */
.navbar {
  background: rgba(255, 251, 245, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--soft-purple);
  padding: 1rem 0;
}

.navbar-brand {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05) rotate(-2deg);
}

.nav-link {
  font-weight: 500 !important;
  color: var(--warm-dark) !important;
  position: relative;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--gradient-sunset);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--playful-purple) !important;
  transform: translateY(-2px);
}

.nav-link:hover::after {
  width: 80%;
}

/* ============================================
   CARDS - Playful & Interactive
   ============================================ */
.card {
  border: 3px solid transparent;
  background: white;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--gradient-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.card:hover {
  transform: translateY(-10px) rotate(1deg);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
  border-color: var(--playful-purple);
}

.card:hover::before {
  opacity: 0.3;
}

.card-body {
  position: relative;
  z-index: 1;
}

/* ============================================
   FUN BADGES & TAGS
   ============================================ */
.badge {
  font-weight: 600 !important;
  padding: 0.5em 1em !important;
  font-size: 0.9rem !important;
}

.badge-playful {
  background: var(--gradient-candy) !important;
  color: white;
  box-shadow: 0 5px 15px rgba(236, 72, 153, 0.3);
}

/* ============================================
   PLAYFUL ICONS - Bouncy & Fun
   ============================================ */
.bx, i[class*="bx-"] {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.playful-icon:hover {
  transform: scale(1.2) rotate(10deg);
  color: var(--playful-purple);
}

/* Icon circles with gradients */
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-sunset);
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
  transition: all 0.3s ease;
}

.icon-circle:hover {
  transform: translateY(-5px) rotate(360deg);
  box-shadow: 0 15px 35px rgba(249, 115, 22, 0.4);
}

/* ============================================
   BACKGROUNDS - Soft & Whimsical
   ============================================ */
.bg-playful-gradient {
  background: var(--gradient-soft) !important;
}

.bg-warm {
  background: var(--warm-white) !important;
}

.section-playful {
  background: var(--soft-purple);
  position: relative;
  overflow: hidden;
}

.section-playful::before {
  content: '✨';
  position: absolute;
  font-size: 100px;
  opacity: 0.1;
  top: 20px;
  right: 20px;
  animation: float 6s ease-in-out infinite;
}

.section-playful::after {
  content: '🎨';
  position: absolute;
  font-size: 80px;
  opacity: 0.1;
  bottom: 20px;
  left: 20px;
  animation: float 8s ease-in-out infinite;
}

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

/* ============================================
   HERO SECTION - Big & Welcoming
   ============================================ */
.hero-playful {
  background: var(--gradient-soft);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hero-playful h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Floating elements in background */
.hero-playful::before,
.hero-playful::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: blob 20s ease-in-out infinite;
}

.hero-playful::before {
  width: 300px;
  height: 300px;
  background: var(--playful-purple);
  top: -100px;
  right: -100px;
}

.hero-playful::after {
  width: 200px;
  height: 200px;
  background: var(--playful-pink);
  bottom: -50px;
  left: -50px;
  animation-delay: -5s;
}

@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -20px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(20px, 20px) scale(1.05); }
}

/* ============================================
   SPECIAL EFFECTS - Delightful Details
   ============================================ */

/* Wiggle animation for fun elements */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.wiggle-on-hover:hover {
  animation: wiggle 0.5s ease-in-out;
}

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

.bounce-on-hover:hover {
  animation: bounce 0.6s ease-in-out infinite;
}

/* Sparkle effect */
.sparkle {
  position: relative;
  display: inline-block;
}

.sparkle::before {
  content: '✨';
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 20px;
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* ============================================
   TESTIMONIALS - Warm & Personal
   ============================================ */
.testimonial-card {
  background: white;
  border: 3px solid var(--soft-purple);
  border-radius: 2rem;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 100px;
  font-family: 'Fredoka', sans-serif;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.3;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.2);
}

/* ============================================
   FOOTER - Playful & Personal
   ============================================ */
footer {
  background: var(--gradient-soft);
  border-top: 3px solid var(--playful-purple);
  padding: 3rem 0;
}

/* Footer text - better contrast on light background */
footer .text-light {
  color: var(--warm-dark) !important;
  opacity: 1 !important;
}

footer .opacity-75,
footer .opacity-50 {
  opacity: 1 !important;
  color: var(--warm-gray) !important;
}

/* ============================================
   FUN CURSOR EFFECTS (Optional)
   ============================================ */
a, button, .btn {
  cursor: pointer;
  transition: all 0.3s ease;
}

a:hover, button:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="20" font-size="20">👆</text></svg>'), auto;
}

/* ============================================
   RESPONSIVE PLAYFULNESS
   ============================================ */
@media (max-width: 768px) {
  .hero-playful h1 {
    font-size: 2.5rem;
  }
  
  .display-1, .display-2, .display-3 {
    font-size: 2.5rem !important;
  }
  
  .handwritten {
    font-size: 1.2em;
  }
}

/* ============================================
   UTILITY CLASSES - Quick Fun Additions
   ============================================ */
.text-gradient-sunset {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-ocean {
  background: var(--gradient-ocean);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-playful-purple {
  color: var(--playful-purple) !important;
}

.text-playful-pink {
  color: var(--playful-pink) !important;
}

.shadow-playful {
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25) !important;
}

.border-playful {
  border: 3px solid var(--playful-purple) !important;
}

/* Emoji decorations */
.emoji-large {
  font-size: 3rem;
  display: inline-block;
  animation: bounce 2s ease-in-out infinite;
}

/* ============================================
   PAGE TRANSITION - Smooth & Fun
   ============================================ */
.page-loading {
  background: var(--gradient-soft) !important;
}

.page-spinner {
  border-color: var(--playful-purple) !important;
  border-right-color: transparent !important;
}