/* Kerstlaag homepage. Alles hangt aan html.kerst, die een klein script in de <head> zet tot en met de einddatum. */
html.kerst {
  --kerst-goud: #f2c879;
  --kerst-warm: rgba(242, 200, 121, .55);
}

/* Warm kaarslicht linksonder in de hero, naast het koele blauw */
html.kerst .hero .copy { position: relative; }
html.kerst .hero .copy::before {
  content: ""; position: absolute; z-index: -1; left: -12%; bottom: -10%; width: min(900px, 120vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(242, 200, 121, .16), rgba(242, 200, 121, .05) 55%, transparent 75%);
  pointer-events: none;
}

/* Groet boven de naam */
.kerst-groet { display: none; }
html.kerst .kerst-groet {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font: 500 var(--t-label, 13px)/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--kerst-goud);
  animation: kerst-in 1.2s var(--ease) .4s both;
}
html.kerst .kerst-groet svg { width: 14px; height: 14px; fill: currentColor; animation: kerst-ster 4s ease-in-out infinite; }

/* Bolletjes bij de rollen: de eerste krijgt een gouden gloed */
html.kerst .hero .roles li:first-child::before { background: var(--kerst-goud); }
html.kerst .hero .roles li::before { animation-name: kerst-puls-rond; }

/* Lichtjesslinger onder de menubalk, alleen bovenaan de pagina */
.kerst-slinger { display: none; }
html.kerst .kerst-slinger {
  display: block; position: absolute; left: 0; right: 0; top: calc(var(--header) - 6px); height: 58px; z-index: 1; pointer-events: none;
  animation: kerst-in 1.6s var(--ease) .2s both;
}
html.kerst .kerst-slinger svg { width: 100%; height: 100%; overflow: visible; }
html.kerst .kerst-slinger path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
html.kerst .kerst-slinger circle { fill: #fff3d6; filter: drop-shadow(0 0 4px var(--kerst-warm)) drop-shadow(0 0 10px rgba(242, 200, 121, .35)); }
html.kerst .kerst-slinger circle:nth-child(3n) { fill: #9fd8ff; filter: drop-shadow(0 0 4px rgba(1, 152, 233, .7)) drop-shadow(0 0 10px rgba(1, 152, 233, .35)); }
html.kerst .kerst-slinger circle { animation: kerst-twinkel var(--t, 3s) ease-in-out var(--d, 0s) infinite; }

/* Sneeuw in de hero */
.kerst-sneeuw { display: none; }
html.kerst .kerst-sneeuw { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

@keyframes kerst-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes kerst-twinkel { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes kerst-ster { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 20deg; scale: 1.15; } }
@keyframes kerst-puls-rond { 0% { box-shadow: 0 0 0 0 rgba(242, 200, 121, .6); } 23% { box-shadow: 0 0 0 12px rgba(242, 200, 121, 0); } 33.4%, 100% { box-shadow: 0 0 0 0 rgba(242, 200, 121, 0); } }

@media (max-width: 700px) {
  html.kerst .kerst-slinger { height: 40px; }
  html.kerst .kerst-groet { margin-bottom: 16px; letter-spacing: .18em; }
}
@media (prefers-reduced-motion: reduce) {
  html.kerst .kerst-slinger circle, html.kerst .kerst-groet svg, html.kerst .hero .roles li::before { animation: none; }
}

/* ===== Variant "goud" (html.kerst.kerst-goud): gouden lijntekeningen, naam in vintage feestletter ===== */
@font-face { font-family: "Abril Fatface"; src: url(/fonts/AbrilFatface-latin.woff2) format("woff2"); font-display: block; }
html.kerst-goud { --kerst-goud: #e2b866; --kerst-rood: #e0362c; }
html.kerst-goud .kerst-slinger, html.kerst-goud .kerst-sneeuw { display: none !important; }
html.kerst-goud .hero .copy { display: flex; flex-direction: column; align-items: flex-start; }
/* Naam als opgemaakte titel (SVG uit src/kerst-naam.svg); de gewone tekst blijft voor schermlezers en Google */
.kerst-naam { display: none; }
html.kerst-goud .hero h1 { order: 0; max-width: none; margin-left: -1.2%; align-self: stretch; }
html.kerst-goud .hero h1 > span:not(.sr) { display: none !important; }
html.kerst-goud .hero h1 .kerst-naam { display: block; width: min(640px, 48vw); height: auto; overflow: visible; animation: kerst-in 1.2s var(--ease) .2s both; }
html.kerst-goud .kerst-groet { order: 1; margin: 18px 0 0; gap: 14px; color: var(--kerst-goud); letter-spacing: .26em; }
html.kerst-goud .kerst-groet svg { display: none; }
html.kerst-goud .kerst-groet::before, html.kerst-goud .kerst-groet::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--kerst-goud)); }
html.kerst-goud .kerst-groet::after { background: linear-gradient(90deg, var(--kerst-goud), transparent); }
html.kerst-goud .hero .roles { order: 2; }
html.kerst-goud .hero .roles li::before { background: var(--kerst-goud); }
html.kerst-goud .hero .copy::before { background: radial-gradient(closest-side, rgba(224, 54, 44, .10), rgba(226, 184, 102, .06) 55%, transparent 75%); }

/* Gouden lijntekeningen: hangende kerstballen en sterretjes */
.kerst-ornament { display: none; }
html.kerst-goud .kerst-ornament { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html.kerst-goud .kerst-ornament svg { position: absolute; overflow: visible; }
html.kerst-goud .kerst-ornament .lijn { fill: none; stroke: var(--kerst-goud); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
html.kerst-goud .kerst-ornament .bal { transform-box: view-box; animation: kerst-zwaai var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate; }
html.kerst-goud .kerst-ornament .ster { fill: var(--kerst-goud); animation: kerst-twinkel var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
@keyframes kerst-zwaai { from { rotate: -3deg; } to { rotate: 3deg; } }
@media (max-width: 700px) {
  html.kerst-goud .hero h1 { margin-left: 0; width: 100%; }
  html.kerst-goud .hero h1 .kerst-naam { width: 100%; max-width: 100%; margin: 0; }
  html.kerst-goud .kerst-groet { margin-top: 18px; letter-spacing: .2em; }
  html.kerst-goud .kerst-groet::before, html.kerst-goud .kerst-groet::after { width: 26px; }
}
@media (prefers-reduced-motion: reduce) { html.kerst-goud .kerst-ornament .bal, html.kerst-goud .kerst-ornament .ster { animation: none; } }

/* ===== Variant "groen" (html.kerst-goud.kerst-groen): naam van dennentakken (afbeelding uit het lettertype Xmas Joy) ===== */
html.kerst-groen .hero h1 .kerst-naam { width: min(660px, 48vw); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .65)); }
@media (min-width: 701px) { html.kerst-groen .hero h1 { margin-top: 40px; } }
@media (max-width: 700px) { html.kerst-groen .hero h1 .kerst-naam { width: 100%; } }

/* Foto-elementen aan de randen (variant groen) */
.kerst-rand { display: none; }
html.kerst-groen .kerst-rand { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.kerst-groen .kerst-rand img { position: absolute; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .65)); animation: kerst-in 1.4s var(--ease) .3s both; }
html.kerst-groen .r-dennenappel-1 { width: 200px; left: -64px; top: 82px; rotate: -18deg; }
html.kerst-groen .r-dennenappel-2 { width: 136px; left: 116px; top: 92px; rotate: 28deg; }
html.kerst-groen .r-ster { width: 66px; left: 272px; top: 150px; rotate: 14deg; }
html.kerst-groen .r-cadeau-1 { width: clamp(170px, 25vh, 300px); left: -50px; bottom: clamp(14px, 3vh, 34px); rotate: -10deg; }
html.kerst-groen .r-cadeau-2 { width: clamp(124px, 18vh, 210px); left: clamp(130px, 19vh, 222px); bottom: clamp(10px, 2.4vh, 26px); rotate: 16deg; }
html.kerst-groen .r-dennenappel-3 { width: clamp(70px, 10vh, 110px); left: clamp(270px, 37vh, 432px); bottom: clamp(30px, 5vh, 60px); rotate: -32deg; }
html.kerst-groen .r-sneeuwvlok { width: 120px; right: 26px; bottom: 34px; rotate: 10deg; opacity: .9; }
@media (max-width: 700px) {
  html.kerst-groen .r-dennenappel-1 { width: 96px; left: -34px; top: 74px; }
  html.kerst-groen .r-dennenappel-2 { width: 62px; left: 48px; top: 84px; }
  html.kerst-groen .r-ster, html.kerst-groen .r-cadeau-1, html.kerst-groen .r-dennenappel-3, html.kerst-groen .r-sneeuwvlok { display: none; }
  html.kerst-groen .r-cadeau-2 { width: 118px; left: auto; right: -18px; bottom: 18px; }
}
/* Lage schermen (laptops met weinig hoogte): alleen een kleine dennenappel en de sneeuwvlok, zodat naam en tekst vrij blijven */
@media (min-width: 701px) and (max-height: 800px) {
  html.kerst-groen .r-dennenappel-2, html.kerst-groen .r-ster, html.kerst-groen .r-cadeau-1, html.kerst-groen .r-cadeau-2, html.kerst-groen .r-dennenappel-3 { display: none; }
  html.kerst-groen .r-dennenappel-1 { width: 130px; left: -50px; top: 74px; }
  html.kerst-groen .r-sneeuwvlok { width: 96px; }
}