/* 🍂 HERFST THEMA */
:root{
  --h-bg: #2c1a0e;
  --h-orange: #e67a2e;
  --h-brown: #5c3a23;
  --h-cream: #fcebd3;
}

body {
  background: var(--h-bg) url('/assets/img/herfst-background.jpg') center/cover no-repeat fixed;
  color: var(--h-cream);
}

.site-header {
  background: var(--h-brown);
  border-bottom: 3px solid var(--h-orange);
}
nav a { color: var(--h-orange); font-weight:600; }
nav a:hover { text-shadow:0 0 10px var(--h-orange); }

.hero {
  background: radial-gradient(circle, #3b2415, #2c1a0e);
  text-shadow: 0 0 10px rgba(230,122,46,0.6);
}

.btn-listen{
  background: var(--h-orange);
  color: #2c1a0e;
  box-shadow:0 0 12px rgba(230,122,46,0.8);
}
.btn-listen:hover{
  box-shadow:0 0 25px rgba(230,122,46,1);
}

.section{ background: rgba(44,26,14,0.9); }
.section.alt{ background: rgba(92,58,35,0.9); }

.site-footer{
  background: #1a0f07;
  color: var(--h-orange);
}

/* Vallende bladeren */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    url('/assets/img/leaves1.png'),
    url('/assets/img/leaves2.png');
  background-size: 300px, 400px;
  animation: leavesFall 30s linear infinite;
  opacity:0.25;
}
@keyframes leavesFall{
  from { background-position:0 -500px, 200px -800px; }
  to   { background-position:0 1000px, 200px 1200px; }
}