/*
 * Kruidenbuurt Halloween: als laatste geladen, na Kruidenbuurt, de kern en donker.css. theme.php zet de site
 * op donker ('kleurmodus' => 'donker'), dus alles hangt aan [data-bs-theme=dark]. 'html[...]' weegt even
 * zwaar als de donkere regels van de kern (Theme::darkCss()) en wint omdat dit bestand later komt.
 * Plaatjes met een absoluut pad: dit bestand wordt vaak in de pagina gezet (inline), dan werkt url(../) niet.
 */

html[data-bs-theme=dark] {
    --hw-nacht: #120d1a;
    --hw-kaart: #1e1628;
    --hw-paars: #2e1b47;
    --hw-paars-licht: #6b3fa0;
    --hw-oranje: #ff7a1a;
    --hw-oranje-licht: #ffa552;
    --hw-groen: #8fd14f;

    --primary-color: var(--hw-oranje);
    --primary-rgb: 255, 122, 26;
    --primary-hover: #e8620e;
    --primary-hover-color: #e8620e;
    --hover-color: #e8620e;
    --primary-light: rgba(255, 122, 26, 0.12);
    --primary-gradient-end: #ff4d00;
    --primary-contrast: #1a0f00;
    --primary-text: var(--hw-oranje-licht);
    --bs-success: var(--hw-oranje);
    --bs-success-rgb: 255, 122, 26;
    --bs-success-text-emphasis: var(--hw-oranje-licht);

    --page-bg: var(--hw-nacht);
    --bs-body-bg: var(--hw-kaart);
    --bs-body-bg-rgb: 30, 22, 40;
    --bs-tertiary-bg: #251c31;
    --bs-tertiary-bg-rgb: 37, 28, 49;
    --bs-secondary-bg: #2c2239;
    --bs-secondary-bg-rgb: 44, 34, 57;
    --bs-body-color: #ece4f5;
    --bs-border-color: #3a2d4c;

    --bs-link-color: var(--hw-oranje-licht);
    --bs-link-color-rgb: 255, 165, 82;
    --bs-link-hover-color: #ffc48a;
    --bs-link-hover-color-rgb: 255, 196, 138;

    --menu-text: #f3eafc;
    --dark-nav-bg: var(--hw-paars);
    --dark-nav-hover: var(--hw-oranje);
    --dark-nav-hover-text: #1a0f00;
    --footer-bg: #0b0810;
    --footer-text: #d9cfe6;
    --notice-color: var(--hw-oranje);
    --notice-bg: #2b1d18;
    --notice-text: #f3eafc;
}

/* Nachtlucht met sterren */
html[data-bs-theme=dark] body {
    background-color: var(--hw-nacht);
    background-image:
        radial-gradient(1px 1px at 12% 8%, #fff8 50%, transparent 51%),
        radial-gradient(1px 1px at 34% 3%, #fff6 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 11%, #fff9 50%, transparent 51%),
        radial-gradient(1px 1px at 81% 6%, #fff7 50%, transparent 51%),
        radial-gradient(1px 1px at 93% 14%, #fff5 50%, transparent 51%),
        linear-gradient(180deg, #1d1230 0, var(--hw-nacht) 320px);
    background-repeat: no-repeat;
}

/* De logobalk (de .container met het logo) houdt de maan vast, ook als de werkbalk voor beheerders erboven staat */
html[data-bs-theme=dark] .kop-logobalk {
    position: relative;
}

html[data-bs-theme=dark] .kop-logobalk::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(50% - 110px);
    width: 220px;
    height: 110px;
    background: url("/themes/kruidenbuurt-halloween/assets/maan.svg") no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
    animation: hw-zweven 6s ease-in-out infinite;
}

/* Logobalk en knop blijven boven de maan */
html[data-bs-theme=dark] .navbar-brand,
html[data-bs-theme=dark] .header-cta {
    position: relative;
    z-index: 1;
}

/* De knop naast het logo (Word vrijwilliger e.d.): pompoenoranje */
html[data-bs-theme=dark] .header-cta .btn {
    background: linear-gradient(135deg, var(--hw-oranje), #ff4d00) !important;
    color: #1a0f00 !important;
    font-weight: 600;
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.45) !important;
}

/* Menubalk: paars met een oranje gloeirand */
html[data-bs-theme=dark] .main-nav {
    background-color: var(--hw-paars);
    border-bottom: 3px solid var(--hw-oranje);
    box-shadow: 0 6px 18px -8px rgba(255, 122, 26, 0.6);
}

/* Spinnenwebben in de hoeken onder de menubalk; rechts bungelt een spin (beweging zit in de SVG) */
html[data-bs-theme=dark] .main-nav {
    position: relative;
}

html[data-bs-theme=dark] .main-nav::before,
html[data-bs-theme=dark] .main-nav::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 90px;
    pointer-events: none;
    z-index: 1;
}

html[data-bs-theme=dark] .main-nav::before {
    left: 0;
    height: 90px;
    background: url("/themes/kruidenbuurt-halloween/assets/web-links.svg") no-repeat left top / contain;
}

html[data-bs-theme=dark] .main-nav::after {
    right: 0;
    height: 180px;
    background: url("/themes/kruidenbuurt-halloween/assets/web-rechts-spin.svg") no-repeat right top / contain;
}

/* Uitschuifmenu op mobiel: Kruidenbuurt geeft het de primaire kleur, hier pompoenoranje met witte tekst
   (slecht leesbaar); daarom paars zoals de menubalk, met een oranje rand */
@media (max-width: 991.98px) {
    html[data-bs-theme=dark] .main-nav .offcanvas {
        background-color: var(--hw-paars);
        border-right: 3px solid var(--hw-oranje);
    }

    html[data-bs-theme=dark] .main-nav .offcanvas-title {
        color: var(--hw-oranje);
    }
}

html[data-bs-theme=dark] .main-nav .nav-link.active,
html[data-bs-theme=dark] .main-nav .nav-link[aria-current="page"] {
    color: var(--hw-oranje-licht) !important;
}

/* Koppen in pompoenoranje */
html[data-bs-theme=dark] :is(h1, h2, .h1, .h2, .text-success) {
    color: var(--hw-oranje) !important;
}

html[data-bs-theme=dark] :is(h1, .h1) {
    text-shadow: 0 0 14px rgba(255, 122, 26, 0.35);
}

html[data-bs-theme=dark] :is(h3, h4, h5, .h3, .h4, .h5) {
    color: #f3eafc;
}

/* Kaarten: nachtpaars, oranje gloed bij aanwijzen */
html[data-bs-theme=dark] .card {
    background-color: var(--hw-kaart);
    border: 1px solid #33264a !important;
}

html[data-bs-theme=dark] .hover-card:hover {
    border-color: var(--hw-oranje) !important;
    box-shadow: 0 0 22px rgba(255, 122, 26, 0.3) !important;
}

html[data-bs-theme=dark] .bg-light {
    background-color: #1a1324 !important;
}

/* Icoonbolletjes (blokken op de voorpagina e.d.): een pompoen met steel en blaadje; het icoon is er als het
   ware uitgesneden, donker met het oranje-gele licht van een kaarsje erachter dat zacht flakkert */
html[data-bs-theme=dark] .icon-circle.bg-success {
    background: url("/themes/kruidenbuurt-halloween/assets/pompoen-icoon.svg") no-repeat center / contain !important;
    border-radius: 0;
    color: #2a1100 !important;
    filter: drop-shadow(0 4px 10px rgba(255, 122, 26, 0.35));
}

html[data-bs-theme=dark] .icon-circle.bg-success i {
    top: 60%;
    text-shadow: 0 0 4px #ffd36b, 0 0 10px rgba(255, 196, 0, 0.8);
    animation: hw-kaarsje 3s ease-in-out infinite;
}

/* Het grote icoon (fa-2x) iets kleiner, zodat het binnen de pompoen blijft */
html[data-bs-theme=dark] .icon-circle.bg-success i.fa-2x {
    font-size: 1.7em;
}

html[data-bs-theme=dark] .hover-card:hover .icon-circle.bg-success {
    animation: hw-wiebelen 0.6s ease-in-out;
}

@keyframes hw-kaarsje {
    0%, 100% { text-shadow: 0 0 4px #ffd36b, 0 0 10px rgba(255, 196, 0, 0.8); }
    45% { text-shadow: 0 0 3px #ffc04d, 0 0 6px rgba(255, 170, 0, 0.55); }
    55% { text-shadow: 0 0 5px #ffe08a, 0 0 13px rgba(255, 210, 60, 0.9); }
}

@keyframes hw-wiebelen {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
}

/* Knoppen */
html[data-bs-theme=dark] .btn-primary,
html[data-bs-theme=dark] .btn-success {
    color: #1a0f00 !important;
    background-color: var(--hw-oranje) !important;
    border-color: var(--hw-oranje) !important;
}

html[data-bs-theme=dark] .btn-primary:hover,
html[data-bs-theme=dark] .btn-success:hover {
    color: #fff !important;
    background-color: var(--hw-paars-licht) !important;
    border-color: var(--hw-paars-licht) !important;
}

html[data-bs-theme=dark] .btn-outline-primary,
html[data-bs-theme=dark] .btn-outline-success {
    color: var(--hw-oranje-licht) !important;
    border-color: var(--hw-oranje) !important;
}

html[data-bs-theme=dark] .btn-outline-primary:hover,
html[data-bs-theme=dark] .btn-outline-success:hover {
    color: #1a0f00 !important;
    background-color: var(--hw-oranje) !important;
}

/* Voet: rij pompoenen in het gras erboven, kopjes oranje */
html[data-bs-theme=dark] .footer {
    position: relative;
    margin-top: 48px;
    background-color: var(--footer-bg);
}

html[data-bs-theme=dark] .footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -48px;
    height: 48px;
    background: url("/themes/kruidenbuurt-halloween/assets/pompoenen.svg") repeat-x left bottom / 160px 48px;
    pointer-events: none;
}

/* Skelet dat tussen de eerste twee pompoenen uit het gras omhoog komt (alleen het bovenlijf: de rest zit
   "onder de grond"). De pompoentegel is 160px breed en begint links, dus 116px valt altijd in een gat. */
html[data-bs-theme=dark] .footer::after {
    content: "";
    position: absolute;
    left: 116px;
    top: -100px;
    width: 84px;
    height: 100px;
    background: url("/themes/kruidenbuurt-halloween/assets/skelet.svg") no-repeat center top / 84px auto;
    pointer-events: none;
}

html[data-bs-theme=dark] .footer-kop {
    color: var(--hw-oranje) !important;
}

html[data-bs-theme=dark] .footer a:hover {
    color: var(--hw-oranje-licht) !important;
}

/* Tekstselectie en focus in de huisstijl */
html[data-bs-theme=dark] ::selection {
    background: var(--hw-oranje);
    color: #1a0f00;
}

@keyframes hw-zweven {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* Mobiel en tablet: geen aparte menubalk onder het logo. De balk (daar staan dan alleen het hamburgerknopje
   en het zoekicoon; het menu zelf is een uitschuifpaneel) schuift omhoog over de logobalk, knoppen rechts.
   61px = hoogte logobalk (logo 45px in header.css + py-2). De balk is doorzichtig en laat kliks door, behalve
   op de knoppen en het paneel (dat zit in de balk en zou anders meedoen). */
@media (max-width: 991.98px) {
    html[data-bs-theme=dark] .main-nav {
        margin-top: -61px;
        height: 61px;
        background-color: transparent;
        pointer-events: none;
    }

    html[data-bs-theme=dark] .main-nav > .container {
        justify-content: flex-end;
        align-items: center;
        height: 100%;
    }

    html[data-bs-theme=dark] .main-nav .navbar-toggler,
    html[data-bs-theme=dark] .main-nav .mobile-search-toggle,
    html[data-bs-theme=dark] .main-nav .offcanvas {
        pointer-events: auto;
    }

    html[data-bs-theme=dark] .main-nav .mobile-search-toggle {
        order: 1;
        margin-right: 6px;
    }

    html[data-bs-theme=dark] .main-nav .navbar-toggler {
        order: 2;
    }

    /* Tablet: de knop naast het logo opzij voor zoekicoon + hamburger */
    html[data-bs-theme=dark] .header-cta {
        margin-right: 72px;
    }

    /* Tablet: kleinere maan in het gat tussen logo en knop */
    html[data-bs-theme=dark] .kop-logobalk::before {
        left: calc(50% - 130px);
        width: 160px;
        height: 80px;
        top: -4px;
    }
}

@media (max-width: 767.98px) {
    /* Alleen de maan (rechterdeel van maan.svg), direct links van zoekicoon + hamburger */
    html[data-bs-theme=dark] .kop-logobalk::before {
        top: calc(50% - 28px);
        left: auto;
        right: 112px;
        width: 56px;
        height: 56px;
        background-size: 130px auto;
        background-position: right center;
    }

    html[data-bs-theme=dark] .main-nav::before {
        width: 56px;
        height: 56px;
    }

    html[data-bs-theme=dark] .main-nav::after {
        width: 56px;
        height: 112px;
    }
}

/* Smalle telefoons: kleinere maan, anders schuift hij over de sitenaam */
@media (max-width: 389.98px) {
    html[data-bs-theme=dark] .kop-logobalk::before {
        top: calc(50% - 20px);
        right: 108px;
        width: 40px;
        height: 40px;
        background-size: 93px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-bs-theme=dark] .kop-logobalk::before,
    html[data-bs-theme=dark] .icon-circle.bg-success,
    html[data-bs-theme=dark] .icon-circle.bg-success i {
        animation: none !important;
    }
}

/* ---- Griezelig op een bericht (functions.php, hook post.after_content) ---- */
.pagina-posts-blog-single article { position: relative; }

/* Spin aan een draad, rechtsboven; zakt bij het laden, schommelt, schiet omhoog als je erop gaat staan */
.hw-spin { position: absolute; top: 0; right: 6%; z-index: 3; display: flex; flex-direction: column; align-items: center;
    transform-origin: 50% 0; animation: hw-spin-zak 2.2s ease-out .6s both, hw-spin-schommel 4s ease-in-out 2.8s infinite; }
.hw-spin__draad { width: 1px; height: 90px; background: linear-gradient(rgba(236, 228, 245, .2), rgba(236, 228, 245, .85)); transition: height .4s ease-in; }
.hw-spin svg { filter: drop-shadow(0 0 4px rgba(236, 228, 245, .45)) drop-shadow(0 0 10px rgba(255, 122, 26, .35)); }
.hw-spin:hover .hw-spin__draad { height: 8px; }
@keyframes hw-spin-zak { from { transform: translateY(-140px); } to { transform: translateY(0); } }
@keyframes hw-spin-schommel { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

/* Leesbalk bovenin met een vleermuis die meevliegt */
.hw-leesbalk { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 1090; pointer-events: none; --hw-lees: 0%; }
.hw-leesbalk__vulling { position: absolute; left: 0; top: 0; bottom: 0; width: var(--hw-lees);
    background: linear-gradient(90deg, var(--hw-paars-licht, #6b3fa0), var(--hw-oranje, #ff7a1a)); box-shadow: 0 0 8px rgba(255, 122, 26, .6); }
.hw-leesbalk__vleermuis { position: absolute; top: 1px; left: clamp(0px, calc(var(--hw-lees) - 17px), calc(100% - 34px));
    animation: hw-fladder .35s ease-in-out infinite alternate; }
@keyframes hw-fladder { from { transform: translateY(0) scaleY(1); } to { transform: translateY(2px) scaleY(.8); } }

/* Spook midden in beeld tijdens het lezen (5% en 50%): schiet op je af met een uitval naar je toe, "Boe!" trillend, zweeft even en lost dan op
   (functions.php zet .hw-spook--boe en haalt die na afloop weg) */
.hw-spook { position: fixed; left: 50%; top: 50%; z-index: 1080; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.hw-spook__geest { width: clamp(120px, 22vw, 170px); height: auto; }
.hw-spook__geest { opacity: 0; transform-origin: 50% 60%; filter: drop-shadow(0 0 12px rgba(243, 238, 250, .45)); }
.hw-spook__tekst { opacity: 0; margin-bottom: 5rem; font: italic 700 2.6rem/1 Georgia, "Times New Roman", serif; letter-spacing: .05em;
    color: var(--hw-oranje, #ff7a1a); text-shadow: 0 0 8px rgba(255, 122, 26, .8), 0 0 20px rgba(107, 63, 160, .8); }
.hw-spook--boe .hw-spook__geest { animation: hw-spook-boe 5.5s ease-out forwards; }
.hw-spook--boe .hw-spook__tekst { animation: hw-spook-tekst 5.5s linear forwards; }
.hw-spook--boe .hw-spook__ogen { animation: hw-spook-ogen .5s ease-in-out infinite alternate; }
@keyframes hw-spook-boe {
    0% { opacity: 0; transform: scale(.2); }
    10% { opacity: 1; transform: scale(1.35); }
    16% { transform: translateY(0) scale(1); }
    30% { transform: translate(-6px, -6px) rotate(-3deg); }
    44% { transform: translate(5px, 0) rotate(2deg); }
    58% { opacity: 1; transform: translate(-3px, -8px) rotate(-1deg); filter: drop-shadow(0 0 12px rgba(243, 238, 250, .45)) blur(0); }
    100% { opacity: 0; transform: translateY(-35%) scale(.85); filter: drop-shadow(0 0 12px rgba(243, 238, 250, 0)) blur(6px); }
}
@keyframes hw-spook-tekst {
    0%, 9% { opacity: 0; transform: scale(.4); }
    12% { opacity: 1; transform: scale(1.3) rotate(-6deg); }
    14% { transform: translate(-2px, 1px) rotate(4deg); } 16% { transform: translate(2px, -1px) rotate(-3deg); }
    18% { transform: translate(-1px, 1px) rotate(2deg); } 20%, 48% { opacity: 1; transform: none; }
    60%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes hw-spook-ogen { from { opacity: .55; } to { opacity: 1; filter: drop-shadow(0 0 3px #ff7a1a); } }

/* Gloeiende beginletter (niet zwevend: een korte eerste alinea zoals "Beste ...," duwt dan geen tekst opzij) */
.pagina-posts-blog-single .blog-content > p:first-of-type::first-letter {
    font-size: 2.1em; line-height: 1; font-family: Georgia, "Times New Roman", serif; font-style: normal;
    color: var(--hw-oranje, #ff7a1a); text-shadow: 0 0 10px rgba(255, 122, 26, .7), 0 0 22px rgba(107, 63, 160, .6); }

@media (prefers-reduced-motion: reduce) {
    .hw-spin, .hw-leesbalk__vleermuis { animation: none; }
    .hw-spook { display: none; }   /* midden in beeld zonder beweging zou alleen in de weg staan */
}
@media print { .hw-spin, .hw-leesbalk, .hw-spook { display: none !important; } }

/* ---- Nieuwsoverzicht en archieven: skelet dat even van achter een artikel kijkt (functions.php, site.footer) ----
   De kolom van het gekozen artikel komt tijdelijk boven de andere (hw-kijk-kolom); daarin ligt het skelet achter het
   artikel en komt het met kop en schouders boven de bovenrand uit. */
.hw-kijk-kolom { position: relative; z-index: 2; }
.hw-kijk-kolom > .blog-item { position: relative; z-index: 1; }
.hw-skelet-kijk { position: absolute; top: 0; width: 96px; height: auto; z-index: 0; pointer-events: none;
    transform: translateY(16px) rotate(var(--hw-r, 0deg)); filter: drop-shadow(0 0 8px rgba(243, 238, 250, .35)); }
/* Stiekem: voorzichtig een stukje (ogen), even wachten, nieuwsgierig verder met een kopknikje, dan snel wegduiken */
.hw-skelet-kijk--boven.hw-skelet-kijk--op { animation: hw-stiekem-boven 4.2s ease-in-out forwards; }
@keyframes hw-stiekem-boven {
    0% { transform: translateY(16px) rotate(var(--hw-r, 0deg)); }
    24% { transform: translateY(-26px) rotate(var(--hw-r, 0deg)); }
    44% { transform: translateY(-26px) rotate(var(--hw-r, 0deg)); }
    54% { transform: translateY(-58px) rotate(calc(var(--hw-r, 0deg) + 3deg)); }
    64% { transform: translateY(-58px) rotate(calc(var(--hw-r, 0deg) - 4deg)); }
    76% { transform: translateY(-58px) rotate(calc(var(--hw-r, 0deg) + 2deg)); }
    84%, 100% { transform: translateY(16px) rotate(var(--hw-r, 0deg)); }
}
/* Om de hoek: van de zijkant, leunend om het onderste punt (alsof het achter het artikel staat) */
.hw-skelet-kijk--rechts, .hw-skelet-kijk--links { transform-origin: 50% 100%; }
.hw-skelet-kijk--rechts { left: auto; right: 0; transform: translateX(-34px) rotate(0deg); }
.hw-skelet-kijk--links { left: 0; transform: translateX(34px) rotate(0deg); }
.hw-skelet-kijk--rechts.hw-skelet-kijk--op { animation: hw-stiekem-rechts 4.2s ease-in-out forwards; }
.hw-skelet-kijk--links.hw-skelet-kijk--op { animation: hw-stiekem-links 4.2s ease-in-out forwards; }
@keyframes hw-stiekem-rechts {
    0% { transform: translateX(-34px) rotate(0deg); }
    24% { transform: translateX(20px) rotate(8deg); }
    44% { transform: translateX(20px) rotate(8deg); }
    54% { transform: translateX(24px) rotate(16deg); }
    64% { transform: translateX(24px) rotate(13deg); }
    76% { transform: translateX(24px) rotate(17deg); }
    84%, 100% { transform: translateX(-34px) rotate(0deg); }
}
@keyframes hw-stiekem-links {
    0% { transform: translateX(34px) rotate(0deg); }
    24% { transform: translateX(-20px) rotate(-8deg); }
    44% { transform: translateX(-20px) rotate(-8deg); }
    54% { transform: translateX(-24px) rotate(-16deg); }
    64% { transform: translateX(-24px) rotate(-13deg); }
    76% { transform: translateX(-24px) rotate(-17deg); }
    84%, 100% { transform: translateX(34px) rotate(0deg); }
}
@media print { .hw-skelet-kijk { display: none !important; } }

/* Contactformulier: zwarte kat op het berichtvak (ogen volgen muis en invoer) en een pompoen in de verzendknop die
   feller brandt naarmate meer verplichte velden goed zijn (functions.php, hook site.footer) */
.hw-kat-vak { position: relative; }
.hw-kat { position: absolute; right: 18px; width: 70px; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 6px rgba(140, 100, 190, .45)); }
.hw-kat svg { display: block; overflow: visible; }
.hw-kat__staart { transform-origin: 58px 64px; animation: hw-kat-staart 3.2s ease-in-out infinite; }
.hw-kat__ogen { transform-origin: 40px 28px; transform-box: view-box; animation: hw-kat-knipper 5s infinite; }
.hw-kat__pupillen { transition: transform .15s; }
.hw-kat__kop { transform-origin: 40px 40px; transform-box: view-box; transition: transform .35s ease; }
.hw-kat--nieuwsgierig .hw-kat__kop { transform: rotate(-12deg); }
@keyframes hw-kat-staart { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
@keyframes hw-kat-knipper { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.hw-pompoen-knop { position: relative; }
.hw-pompoen { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); line-height: 0; pointer-events: none; }
.hw-pompoen__licht { opacity: var(--hw-licht, 0); transition: opacity .4s; }
.hw-pompoen svg { filter: drop-shadow(0 0 1px #3a1d08) drop-shadow(0 0 calc(var(--hw-licht, 0) * 10px) rgba(255, 230, 120, .95)); transition: filter .4s; }
.hw-pompoen--aan .hw-pompoen__licht { animation: hw-pompoen-flakker .18s steps(2) infinite alternate; }
@keyframes hw-pompoen-flakker { from { opacity: 1; } to { opacity: .72; } }
/* Alles goed ingevuld: de kat zwiept met haar staart en kijkt met grote ogen */
.hw-kat--blij .hw-kat__staart { animation-duration: .7s; }
.hw-kat--blij .hw-kat__ogen { transform: scale(1.18); animation: none; transition: transform .3s; }
/* Toverstof bij de cursor en de vleermuizenzwerm bij verzenden (position: fixed, schermcoördinaten) */
.hw-vonk { position: fixed; z-index: 1090; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 8px 3px rgba(255, 190, 80, .75); animation: hw-vonk 1.4s ease-out forwards; }
@keyframes hw-vonk { from { opacity: 1; transform: translate(0, 0) scale(1); } 50% { opacity: .9; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
.hw-zwerm { position: fixed; z-index: 1090; height: auto; margin: -12px 0 0 -20px; pointer-events: none; opacity: 0;
    animation: hw-zwerm 1.8s cubic-bezier(.3, .1, .6, 1) forwards; }
.hw-zwerm svg { display: block; width: 100%; height: auto; animation: hw-fladder .18s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(255, 122, 26, .9)); }
/* Contactpagina, kolom met de gegevens: gloeiende pictogrammen die bij aanwijzen bewegen, en een borrelende heksenketel */
.hw-gegevens i.fas { text-shadow: 0 0 8px rgba(255, 122, 26, .65); display: inline-block; }
.hw-gegevens p:hover .fa-map-marker-alt { animation: hw-stuiter .5s ease-in-out 2; }
.hw-gegevens p:hover .fa-phone { animation: hw-rinkel .08s linear 8; }
.hw-gegevens p:hover .fa-envelope { animation: hw-wiebel .4s ease-in-out 2; }
.hw-gegevens li:hover .fa-clock { animation: hw-draai .9s cubic-bezier(.5, 0, .5, 1); }
@keyframes hw-stuiter { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } 60% { transform: translateY(1px) scaleY(.85); } }
@keyframes hw-rinkel { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes hw-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.15); } 75% { transform: rotate(10deg) scale(1.15); } }
@keyframes hw-draai { to { transform: rotate(720deg); } }
.hw-ketel { margin: 2rem 0 0; display: flex; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hw-ketel svg { overflow: visible; }
.hw-ketel__brouwsel { filter: drop-shadow(0 0 10px rgba(87, 217, 58, .9)); transition: filter .3s; }
.hw-ketel__bubbel { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: hw-bubbel 2.8s ease-in infinite; }
@keyframes hw-bubbel { 0% { opacity: 0; transform: translateY(2px) scale(.3); } 15% { opacity: 1; }
    70% { opacity: 1; transform: translateY(-10px) scale(1); } 80%, 100% { opacity: 0; transform: translateY(-12px) scale(1.6); } }
.hw-ketel__damp path { opacity: 0; animation: hw-damp 2.4s ease-out infinite; }
@keyframes hw-damp { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.hw-ketel__vuur { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-vuur .22s ease-in-out infinite alternate; }
@keyframes hw-vuur { from { transform: scale(1, 1); } to { transform: scale(.94, 1.1); } }
.hw-ketel--kook .hw-ketel__bubbel { animation-duration: .9s; }
.hw-ketel--kook .hw-ketel__brouwsel { filter: drop-shadow(0 0 22px rgba(140, 255, 106, 1)); }
.hw-ketel--kook .hw-ketel__damp path { animation-duration: .9s; stroke: rgba(190, 255, 170, .6); }
.hw-ketel--kook svg { animation: hw-schud .1s linear 12; }
@keyframes hw-schud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px) rotate(1deg); } }
@keyframes hw-zwerm { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 10% { opacity: 1; }
    70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
    .hw-kat__staart, .hw-kat__ogen, .hw-pompoen--aan .hw-pompoen__licht { animation: none; }
    .hw-gegevens i.fas, .hw-ketel *, .hw-ketel svg { animation: none !important; }
    .hw-ketel__bubbel { opacity: 1; }
    .hw-kat__kop, .hw-kat__pupillen { transition: none; }
}
@media print { .hw-kat, .hw-pompoen, .hw-ketel { display: none !important; } }