/*
Theme Name: Health Burst
Theme URI: https://healthburst.co.ke
Author: Health Burst
Description: A custom theme for Health Burst, replicating the React design.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: health-burst
*/

/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600;700&family=Poppins:wght@300;400;600&display=swap');

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #fefce8; /* yellow-50 */
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', sans-serif;
}

.font-display {
  font-family: 'Fredoka', sans-serif;
}

.blob-shape {
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

/* 
   Custom Animations & Utilities 
*/

/* Burst Colors (CSS Variables for backup) */
:root {
  --burst-green: #84cc16;
  --burst-orange: #f97316;
  --burst-yellow: #facc15;
  --burst-dark: #1e293b;
}

/* Animation: Spin Slow */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Animation: Bounce Slow */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.animate-bounce-slow {
  animation: bounce-slow 3s infinite;
}

/* Animation: Wiggle */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

/* Animation: Blob */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}