@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --color-brand-pink: #ff6b9e;
  --color-brand-yellow: #ffd166;
  --color-brand-teal: #06d6a0;
  --color-brand-blue: #0b6482; /* Darkened for AA contrast with white text */
  --color-brand-dark: #073b4c;
  --color-brand-bg: #fffcf9;
}

body {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
  overflow-x: hidden;
}

::selection {
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-dark);
}

/* Custom Animations */
@keyframes blob-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(10deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.animate-blob {
  animation: blob-spin 8s infinite ease-in-out;
  transform-origin: center;
}

@keyframes star-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-star {
  animation: star-spin 20s infinite linear;
  transform-origin: center;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* Scroll Reveal Utility */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
    transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Navbar Scroll State */
.nav-scrolled {
  background-color: rgba(255, 252, 249, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(7, 59, 76, 0.05);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Typing Cursor Animation */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.typing-cursor::after {
  content: "|";
  animation: blink 1s step-end infinite;
  font-weight: 300;
  color: var(--color-brand-pink);
  margin-left: 2px;
}