html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: #1f2937;
  background: #fffdf8;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Quicksand", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Playful wavy divider */
.wavy-divider {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,40 C120,80 240,0 360,40 C480,80 600,0 720,40 C840,80 960,0 1080,40 C1200,80 1320,0 1440,40 L1440,80 L0,80 Z' fill='%23fffdf8'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

.wavy-divider-pink {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,40 C120,80 240,0 360,40 C480,80 600,0 720,40 C840,80 960,0 1080,40 C1200,80 1320,0 1440,40 L1440,80 L0,80 Z' fill='%23fff1f6'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

.wavy-divider-yellow {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,40 C120,80 240,0 360,40 C480,80 600,0 720,40 C840,80 960,0 1080,40 C1200,80 1320,0 1440,40 L1440,80 L0,80 Z' fill='%23fff9db'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

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

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}

/* Confetti dots background */
.confetti-bg {
  background-image:
    radial-gradient(circle at 10% 20%, #ffd23f 0 6px, transparent 7px),
    radial-gradient(circle at 85% 15%, #ff6fa5 0 5px, transparent 6px),
    radial-gradient(circle at 25% 80%, #38bdf8 0 7px, transparent 8px),
    radial-gradient(circle at 70% 75%, #4ade80 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, #a78bfa 0 4px, transparent 5px);
  background-size: 400px 400px;
}

/* Dotted pattern */
.dots-pattern {
  background-image: radial-gradient(circle, rgba(255, 64, 136, 0.15) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Marquee infinite scroll */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-slider {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 35s linear infinite;
}

.animate-marquee-slider {
  animation: marquee-slider 25s linear infinite;
}

.pause-on-hover:hover .animate-marquee,
.pause-on-hover:hover .animate-marquee-slider {
  animation-play-state: paused;
}


/* Twemoji sizing */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  display: inline-block;
}