/* 🎄 KERST THEMA COMPLETE STYLESHEET */

/* Kleuren */
:root{
  --kerst-bg: #003300;
  --kerst-bg-2: #002200;
  --kerst-accent: #8bff83;
  --kerst-text: #eaffea;
  --kerst-glow: rgba(139,255,131,0.9);
}

/* Achtergrond + tekst */
body {
  background: var(--kerst-bg) url('/assets/img/kerst/kerst-background.jpg') center/cover no-repeat fixed;
  color: var(--kerst-text);
}

/* Header + Menu */
.site-header {
  background: var(--kerst-bg-2);
  border-bottom: 3px solid #b3ffb3;
}

nav a {
  color: var(--kerst-accent);
  font-weight: 600;
}
nav a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px #9aff9a;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #003600, #001800);
  color: #b7ffd6;
  text-shadow: 0 0 18px #8bff83;
}

.btn-listen {
  background: var(--kerst-accent);
  color: #003300;
  font-weight: 700;
  box-shadow: 0 0 18px var(--kerst-glow);
}
.btn-listen:hover {
  box-shadow: 0 0 28px var(--kerst-glow);
}

/* Secties */
.section { background: rgba(0,40,0,0.9); }
.section.alt { background: rgba(0,60,0,0.9); }

/* Footer */
.site-footer {
  background: var(--kerst-bg-2);
  color: var(--kerst-accent);
}

/* ===========================
   🎅 KERST DECORATIE ICONS
   =========================== */
.decor {
  position:absolute;
  width:120px;
  height:120px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  will-change: transform, filter;
}

.decor--sm { width:72px; height:72px; }
.decor--md { width:120px; height:120px; }
.decor--lg { width:164px; height:164px; }

.decor--glow {
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.8))
    drop-shadow(0 0 18px rgba(255,240,200,.4))
    drop-shadow(0 0 28px rgba(255,220,120,.25));
}

/* Hangt aan touwtje */
.decor--hang::before {
  content:"";
  position:absolute;
  left:50%;
  top:-22px;
  width:2px;
  height:22px;
  background: linear-gradient(#d7c173,#9b802f);
  transform:translateX(-50%);
  border-radius:2px;
}

/* Zwaaianimatie */
@keyframes sway {
  0% { transform: rotate(-3deg); }
  50%{ transform: rotate(3deg); }
  100%{transform: rotate(-3deg); }
}
.decor--sway { animation: sway 4.8s ease-in-out infinite; transform-origin: top center; }

/* Specifieke afbeeldingen */
.decor--bauble-red     { background-image:url('/assets/img/kerst/decor/bauble-red.png'); }
.decor--bauble-green   { background-image:url('/assets/img/kerst/decor/bauble-green.png'); }
.decor--bauble-stars   { background-image:url('/assets/img/kerst/decor/bauble-stars.png'); }
.decor--gift-red-gold  { background-image:url('/assets/img/kerst/decor/gift-red-gold.png'); }
.decor--gift-green-red { background-image:url('/assets/img/kerst/decor/gift-green-red.png'); }
.decor--gift-gold-star { background-image:url('/assets/img/kerst/decor/gift-gold-star.png'); }

/* Positionering helpers */
.relative { position: relative; }
.pos-tl { top:  6%; left: 6%; }
.pos-tr { top:  8%; right: 8%; }
.pos-bl { bottom: 6%; left: 6%; }
.pos-br { bottom: 8%; right: 8%; }
.pos-c  { top:50%; left:50%; transform:translate(-50%,-50%); }

/* =========================================
   ❄️ PURE CSS SNEEUW (GEEN HTML NODIG)
   ========================================= */
body::after,
body::before {
    content:"";
    position: fixed;
    inset: 0;
    pointer-events:none;
    background-repeat: repeat;
    z-index: 9999;
    mix-blend-mode: normal;
}

/* Voorgrond: grotere vlokken + glow */
body::after {
    opacity: 0.55;
    background-image:
      radial-gradient(white 0, white 2px, transparent 3px),
      radial-gradient(white 0, white 2px, transparent 3px),
      radial-gradient(white 0, white 3px, transparent 4px);
    background-size: 200px 200px, 300px 300px, 400px 400px;
    animation: snowLayer1 18s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}

/* Achtergrond: kleiner en subtiel */
body::before {
    opacity: 0.25;
    background-image:
      radial-gradient(white 0, white 1px, transparent 2px),
      radial-gradient(white 0, white 1px, transparent 2px);
    background-size: 150px 150px, 220px 220px;
    animation: snowLayer2 28s linear infinite;
}

/* Animaties */
@keyframes snowLayer1 {
    from { background-position: 0 0, 50px 100px, -70px 20px; }
    to   { background-position: 0 1000px, 50px 1100px, -70px 1020px; }
}
@keyframes snowLayer2 {
    from { background-position: 0 0, 80px 20px; }
    to   { background-position: 0 1200px, 80px 1220px; }
}