/* Houten Wandplank: season themes (thema.js). Decoration never takes a click. */
.thema-val{position:fixed;inset:0;width:100vw;height:100vh;z-index:29;pointer-events:none}
.thema-kerst{--thema:#2c4636;--thema-licht:#f4ead8}
.thema-pasen{--thema:#c98b98;--thema-licht:#fbf1f3}

/* the line */
.thema-pil{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:9px 16px 9px 12px;border-radius:999px;font-size:14.5px;line-height:1.35;color:#fff;background:rgba(20,16,12,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);max-width:100%}
.thema-pil::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#e6b25c;box-shadow:0 0 10px 2px rgba(255,200,120,.7)}
.thema-pasen .thema-pil{color:#3d2a2e;background:rgba(255,248,249,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.thema-pil .kort,.thema-bar .kort{display:none}
@media (max-width:760px){.thema-pil .lang,.thema-bar .lang{display:none}.thema-pil .kort,.thema-bar .kort{display:inline}.thema-pil{font-size:13px;padding:7px 13px 7px 10px;margin-bottom:12px}}
.thema-pasen .thema-pil::before{background:#e9a0ab;box-shadow:0 0 10px 2px rgba(240,170,185,.6)}
.thema-bar{position:relative;z-index:28;text-align:center;font-size:14px;padding:9px 16px;background:var(--thema);color:var(--thema-licht)}
.thema-pasen .thema-bar{background:var(--thema-licht);color:#5d3c43}

/* a hat on the H of the logo */
.thema .top .brand .hw-wm b{position:relative}
.thema-muts{position:absolute;left:-.4em;top:-.74em;width:1.2em;height:.96em;transform:rotate(-16deg);pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.thema-muts svg{display:block;width:100%;height:100%}

/* string lights along the bottom of the header */
.thema-lichtjes{position:absolute;left:0;right:0;bottom:-10px;height:18px;pointer-events:none;z-index:1}
.thema-lichtjes svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.thema-lichtjes i{position:absolute;top:9px;width:5px;height:7px;margin-left:-2.5px;border-radius:50% 50% 45% 45%;background:#ffd38a;box-shadow:0 0 6px 2px rgba(255,200,110,.55);animation:thema-twinkel 3.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes thema-twinkel{0%,100%{opacity:1}50%{opacity:.55}}

/* someone walks along the oak shelf in the logo band, once per visit */
.thema-loper{position:absolute;bottom:46.6%;left:17%;height:9cqw;aspect-ratio:60/90;opacity:0;pointer-events:none;z-index:2;filter:drop-shadow(0 .4cqw .3cqw rgba(60,40,20,.25))}
.thema-loper svg{display:block;width:100%;height:100%;overflow:visible}
.thema-loper.haas{height:7cqw;aspect-ratio:1;bottom:46.4%;left:42%}
.thema-loper.kerstman.gaat{animation:thema-loop 9s cubic-bezier(.3,0,.5,1) forwards}
.thema-loper.kerstman.gaat .been.l{animation:thema-been .5s ease-in-out 12 alternate;transform-origin:24px 62px}
.thema-loper.kerstman.gaat .been.r{animation:thema-been .5s ease-in-out 12 alternate-reverse;transform-origin:36px 62px}
.thema-loper.kerstman.gaat .arm{animation:thema-zwaai .45s ease-in-out 6.2s 6 alternate;transform-origin:45px 38px}
@keyframes thema-loop{0%{opacity:0;transform:translateX(0)}8%{opacity:1}66%{transform:translateX(330%)}88%{opacity:1;transform:translateX(330%)}100%{opacity:0;transform:translateX(330%)}}
@keyframes thema-been{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes thema-zwaai{from{transform:rotate(-10deg)}to{transform:rotate(-150deg)}}
.thema-loper.haas.gaat{animation:thema-hop-x 6s linear forwards}
.thema-loper.haas.gaat svg{animation:thema-hop .5s cubic-bezier(.3,0,.6,1) 8 alternate}
@keyframes thema-hop-x{0%{opacity:0;transform:translateX(0)}8%{opacity:1}75%{opacity:1;transform:translateX(260%)}100%{opacity:0;transform:translateX(300%)}}
@keyframes thema-hop{from{transform:translateY(0)}to{transform:translateY(-40%)}}
@media (prefers-reduced-motion:reduce){.thema-loper{display:none}.thema-lichtjes i{animation:none}}