/* Custom theme variables for light and dark modes */

/* Light theme (default) */
:root {
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --container-bg: #f3f4f6;
  --header-bg: #f9fafb;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --border: #e5e7eb;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark theme */
.dark {
  --bg-primary: #0c0c0c;
  --bg-secondary: #1f2937;
  --container-bg: #374151;
  --header-bg: #0c0c0c;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --border: #374151;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* Apply CSS variables to elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-custom-primary {
  background-color: var(--bg-primary);
}

.bg-custom-secondary {
  background-color: var(--bg-secondary);
}

.bg-custom-container {
  background-color: var(--container-bg);
}

.bg-custom-header {
  background-color: var(--header-bg);
}

.text-custom-primary {
  color: var(--text-primary);
}

.text-custom-secondary {
  color: var(--text-secondary);
}

.text-accent {
  color: var(--accent);
}

.hover\:text-accent:hover {
  color: var(--accent);
}

.hover\:text-accent-hover:hover {
  color: var(--accent-hover);
}

.border-custom {
  border-color: var(--border);
}

/* Special styling for header container */
header .container {
  background-color: var(--container-bg);
  border: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Wave animation */
@keyframes wave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(-3deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(3deg);
  }
}

.animate-wave {
  animation: wave 2.5s ease-in-out infinite;
}

.animate-wave:hover {
  animation-play-state: paused;
}

/* Theme transition */
body, a, button, div {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Scroll animations */
/* Default state - elements should be visible immediately */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation only applies when body has the js-animation-ready class */
body.js-animation-ready .animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
}

/* Class added when animation should trigger */
body.js-animation-ready .animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variants for staggered animations */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }