/* ==========================================================================
   Meesterbrein — aanvullende stijlen (bovenop Tailwind CDN)
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
}

h1, h2, h3, h4, .font-heading {
  font-family: "Poppins", sans-serif;
}

/* Scroll reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky header shadow state */
#site-header.header-scrolled {
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
}

/* Active nav link underline */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #ec4899;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #ffffff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0d0d0d;
}

::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Floating animation for the hero logo */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

/* Gentle "waving hello" sway for the hero mascot */
@keyframes mascotWave {
  0%, 100% {
    transform: rotate(-3deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-8px);
  }
}

.mascot-wave {
  transform-origin: bottom center;
  animation: mascotWave 3.4s ease-in-out infinite;
}

/* Form field invalid state */
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float {
    animation: none;
  }

  .mascot-wave {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}