/*
Theme Name: WijsZorg
Theme URI: https://wijszorg.nl
Author: WijsZorg
Description: Kaal, eigen thema voor de WijsZorg-landingspagina. Ambulante begeleiding in Noord-Brabant en Gelderland.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: wijszorg
*/

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }

.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-bg {
  background:
    radial-gradient(760px circle at 88% -8%, rgba(46,82,72,0.12), transparent 60%),
    radial-gradient(520px circle at -6% 96%, rgba(192,57,43,0.06), transparent 55%),
    #faf9f7;
}

.dark-bg {
  background:
    radial-gradient(620px circle at 12% 0%, rgba(92,138,124,0.20), transparent 60%),
    radial-gradient(520px circle at 92% 100%, rgba(192,57,43,0.12), transparent 55%),
    #1c352d;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fade-up 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.15s; }
.fade-up-3 { animation-delay: 0.25s; }
.fade-up-4 { animation-delay: 0.35s; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

#mobile-menu { transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s cubic-bezier(0.16,1,0.3,1); }
#mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}