/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Styles */
body {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Ensure all emojis are visible throughout the page */
.emoji-visible {
  filter: none !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: inherit !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;
}

/* Common animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes floatAround {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(50px, 30px) rotate(90deg);
  }
  50% {
    transform: translate(0, 60px) rotate(180deg);
  }
  75% {
    transform: translate(-50px, 30px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

/* Animation classes */
.animate-on-scroll {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image loading animations */
.img-loading {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.img-loaded {
  opacity: 1;
}

/* Enhanced hover effects */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Common utility classes */
.gradient-text {
  background: linear-gradient(135deg, #ff7b00, #ffb800, #db2b28);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.highlight-text {
  font-weight: 600;
  color: #ffb800;
  position: relative;
}

.pulse-animation {
  display: inline-block;
  animation: pulse 1.5s infinite;
}