/* Koopjeserver.nl - seasonal layer "Halloween: Middernacht-voxel" (the brand at night).
   Loaded only while ks_season() === 'halloween' (config/ks/season.php); every rule is scoped under body.ks-halloween,
   so without that class the site is exactly as always.
   Hooks: .ks-hero-home / .ks-hero-cta / .ks-hero-cta2 / .ks-hero-status (pages/home.inc.php), .ks-actiekaart and
   .ks-actiekaart-beeld (purple action cards), .ks-label (small uppercase labels), .ks-mascotte--<sprite> + .ksh-kostuum
   (ks_mascotte), .ks-logo, .ks-footer, .ks-actiebalk-pil, .ksh-hero-kaart (dark hero with a framed art card:
   pages/game-hosting/hytale + conan-exiles), .ksh-scene-klein (mascot card that clips its scene: config/ks/auth.php
   + the empty cart), .ksh-geen-sterren (dark card with glass tiles: pages/webhosting-kopen), .ksh-geen-maan (action
   card with its own art in the moon's corner: pages/game-hosting/hytale). Night layers of the home
   hero (moon, pumpkins, bats, mist) are server-side markup from ks_hero_eiland(); the static island scene
   (ks_mascotte('eiland')) gets the same pumpkins. Images: /assets/img/halloween/*.
   Decoration is aria-hidden, absolutely positioned (no layout shift) and pointer-events: none; all motion lives in
   the prefers-reduced-motion: no-preference block and is paused off-screen by ks-halloween.js. */

body.ks-halloween {
  --ksh-nacht-0: #0D0826;
  --ksh-nacht-1: #170E42;
  --ksh-nacht-2: #24145F;
  --ksh-pompoen: #FF8A1F;
  --ksh-pompoen-donker: #C4560B;
}

/* ================================================================ 1. promo bar: night purple, glowing pumpkin pill ("Vaste prijs") */
body.ks-halloween .ks-actiebalk {
  background: url(/assets/img/halloween/sterren.svg) 0 -40px / 240px repeat, linear-gradient(90deg, #160C3D, #261366 50%, #160C3D) !important;
  color: #F6F1FF !important;
  overflow: hidden;  /* the breathing pill glow stays inside the night bar (no orange smudge on the white header) */
}
body.ks-halloween .ks-actiebalk-pil {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ksh-pompoen) !important; color: #1F1147 !important; padding-left: 7px !important;
  box-shadow: 0 0 12px rgba(255, 138, 31, 0.45);
}
body.ks-halloween .ks-actiebalk-pil::before {
  content: ""; flex: none; width: 16px; height: 14px;
  background: url(/assets/img/halloween/pompoen-icoon-nacht.svg) 0 0 / 16px 14px no-repeat;
}
/* the glow breathes on its own layer (opacity only: no repaint of the bar) */
body.ks-halloween .ks-actiebalk-pil::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 20px 3px rgba(255, 138, 31, 0.7); opacity: 0;
}

/* ================================================================ 2. header + footer logo: little witch hat, orange active tab */
/* desktop tab bar only (the opened mobile menu keeps its neutral separators); dark pumpkin = 4.5:1 on white */
@media (min-width: 761px) {
  body.ks-halloween .ks-nav a[aria-current="page"] { border-bottom-color: var(--ksh-pompoen-donker) !important; }
}
body.ks-halloween .ks-header-top { padding-top: 18px !important; }
/* pages without the promo bar (customer panel): a little more air above the hat */
body.ks-halloween .ks-site > .ks-header:first-child .ks-header-top { padding-top: 22px !important; }
body.ks-halloween .ks-logo > span:first-child { position: relative; }
body.ks-halloween .ks-logo > span:first-child::after {
  content: ""; position: absolute; left: 8px; top: -13px; width: 36px; height: 29px; pointer-events: none;
  background: url(/assets/img/halloween/logo-hoed.svg) center / contain no-repeat;
  transform: rotate(-9deg); transform-origin: 50% 90%;
}
body.ks-halloween .ks-footer .ks-logo > span:first-child::after { background-image: url(/assets/img/halloween/logo-hoed-licht.svg); }

/* ================================================================ 3. mascot costume (hat baked into the sprite, server-side) */
/* the costume box is taller (hat), so the hop height is scaled back to the original jump: 16% x 238/270 */
@keyframes ksh-hop {
  0%, 70%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.06, 0.94); }
  30% { transform: translateY(-14.1%) scale(0.97, 1.05); }
  42% { transform: translateY(-15.87%) scale(1, 1); }
  58% { transform: translateY(0) scale(1.05, 0.95); }
  64% { transform: translateY(0) scale(0.99, 1.01); }
}

/* cards that clip their scene (login/register/password, empty cart; hook class ksh-scene-klein, set server-side only
   while the season is on): the hat starts 0.8% above the scene and the ks-veer spring stretches the mascot 10% from its
   feet, so the tip got cut by the card's top border. The WHOLE scene (render + mascot together, so the mascot in the
   render never peeks out) is scaled around its bottom: hat 6% below the top at rest, still inside at the top of the
   spring. */
body.ks-halloween .ksh-scene-klein > .ks-mascotte-scene { scale: 0.93; transform-origin: 50% 100%; }

/* ================================================================ 4. HOME HERO: the world at night */
body.ks-halloween .ks-hero-home {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--ksh-nacht-1) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(120% 70% at 78% 0%, rgba(120, 80, 220, 0.30), transparent 60%),
    linear-gradient(180deg, #0D0826 0%, #170E42 38%, #27146A 74%, #3D1F8E 100%) !important;
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100% !important;
  border-bottom-color: #3D1F8E !important;
  color: #FFFFFF;
}
/* pixel stars, mostly top-right around the moon (hardly behind the text) */
body.ks-halloween .ks-hero-home::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/img/halloween/sterren.svg) 0 0 / 480px repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 95% at 82% 8%, #000 35%, rgba(0, 0, 0, 0.14) 80%);
  mask-image: radial-gradient(ellipse 70% 95% at 82% 8%, #000 35%, rgba(0, 0, 0, 0.14) 80%);
}
/* low lilac mist along the bottom of the hero */
body.ks-halloween .ks-hero-home::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -2px; height: 46%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 22% 100%, rgba(214, 200, 255, 0.18), transparent 70%),
    radial-gradient(38% 50% at 70% 104%, rgba(214, 200, 255, 0.15), transparent 70%),
    linear-gradient(0deg, rgba(190, 170, 255, 0.15), transparent 70%);
}
/* text column: white with a pumpkin-orange accent (every override keyed to .ks-hero-home) */
body.ks-halloween .ks-hero-home h1,
body.ks-halloween .ks-hero-home p { color: #FFFFFF !important; }
body.ks-halloween .ks-hero-home h1 > span {
  color: var(--ksh-pompoen) !important;
  text-shadow: 0 0 12px rgba(255, 138, 31, 0.26);
}
body.ks-halloween .ks-hero-home h1 + p { color: #DCD2F8 !important; }
body.ks-halloween .ks-hero-home > div > div:first-child > p:first-child {
  background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important;
}
body.ks-halloween .ks-hero-home > div > div:first-child > div:last-child { color: #CFC5EE !important; }
body.ks-halloween .ks-hero-home > div > div:first-child > div:last-child > span { color: #CFC5EE !important; }
body.ks-halloween .ks-hero-home > div > div:first-child > div:last-child > span:not(:first-child):not(:last-child) {
  background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important;
}
/* buttons: orange primary (navy text, 7.2:1), ghost secondary */
body.ks-halloween .ks-hero-home .ks-hero-cta {
  background: var(--ksh-pompoen) !important; color: #1F1147 !important;
  box-shadow: 0 4px 0 var(--ksh-pompoen-donker), 0 10px 30px rgba(255, 138, 31, 0.3) !important;
}
body.ks-halloween .ks-hero-home .ks-hero-cta:hover {
  background: #FF9A3A !important;
  box-shadow: 0 4px 0 var(--ksh-pompoen-donker), 0 10px 30px rgba(255, 138, 31, 0.38) !important;
}
body.ks-halloween .ks-hero-home .ks-hero-cta2 {
  background: rgba(255, 255, 255, 0.06) !important; color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25) !important;
}
body.ks-halloween .ks-hero-home .ks-hero-cta2:hover { background: rgba(255, 255, 255, 0.12) !important; }
body.ks-halloween .ks-hero-home .ks-hero-cta:focus-visible,
body.ks-halloween .ks-hero-home .ks-hero-cta2:focus-visible {
  outline: 3px solid #FFFFFF !important; outline-offset: 3px;
}
body.ks-halloween .ks-hero-home .ks-hero-cta:focus-visible {
  box-shadow: 0 4px 0 var(--ksh-pompoen-donker), 0 0 0 9px rgba(255, 138, 31, 0.45) !important;
}
/* "server online" badge */
body.ks-halloween .ks-hero-home .ks-hero-status {
  z-index: 3; background: rgba(20, 11, 52, 0.82) !important; border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
body.ks-halloween .ks-hero-home .ks-hero-status span span:first-child { color: #FFFFFF !important; }
body.ks-halloween .ks-hero-home .ks-hero-status span span:last-child { color: #CFC5EE !important; }
@media (min-width: 761px) {
  body.ks-halloween .ks-hero-home > div > div:first-child > p:first-child,
  body.ks-halloween .ks-hero-home .ks-hero-status { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* the island by moonlight: graded, mascot and pumpkins stay bright */
body.ks-halloween .ks-hero-home .ks-hero-scene > img:first-child,
body.ks-halloween .ks-hero-home .ks-hero-scene > picture:first-child > img,
body.ks-halloween .ks-hero-home .ks-hero-kruin,
body.ks-halloween .ks-hero-home .ks-hero-vlag,
body.ks-halloween .ks-hero-home .ksh-zweef > img {
  filter: brightness(0.74) saturate(0.78) hue-rotate(-8deg) contrast(1.04);
}
body.ks-halloween .ks-hero-home .ks-hero-scene > img:first-child,
body.ks-halloween .ks-hero-home .ks-hero-scene > picture:first-child > img {
  filter: brightness(0.74) saturate(0.78) hue-rotate(-8deg) contrast(1.04) drop-shadow(0 0 22px rgba(140, 100, 255, 0.26));
}
/* waterfall: same moonlight (the stripes become a faint lilac shimmer instead of daylight white) */
body.ks-halloween .ks-hero-home .ks-hero-water { background: rgba(58, 40, 128, 0.5); }
body.ks-halloween .ks-hero-home .ks-hero-water-strepen {
  background-image: linear-gradient(170deg, rgba(200, 186, 255, 0) 0%, rgba(200, 186, 255, 0) 40%, rgba(200, 186, 255, 0.5) 48%, rgba(200, 186, 255, 0) 56%, rgba(200, 186, 255, 0) 100%);
  mix-blend-mode: normal; opacity: 0.5;
}
body.ks-halloween .ks-hero-home .ks-hero-wolk { opacity: 0.9; }
body.ks-halloween .ks-hero-home .ks-mascotte { filter: drop-shadow(0 0 12px rgba(170, 130, 255, 0.32)); }
/* floating island + its pumpkin share one animated element (server-side) */
body.ks-halloween .ksh-zweef > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* voxel moon (behind the islands and the night cloud, which only covers its lower right) */
body.ks-halloween .ksh-maan {
  position: absolute; z-index: -1; left: 65.5%; top: -9%; width: 21%; aspect-ratio: 1; pointer-events: none;
  background: url(/assets/img/halloween/maan.webp) center / 100% no-repeat;
}
body.ks-halloween .ksh-maan::before {
  content: ""; position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 240, 205, 0.26) 0%, rgba(255, 240, 205, 0.1) 30%, rgba(160, 120, 255, 0.08) 46%, transparent 64%);
}
/* twinkling stars (behind the island) */
body.ks-halloween .ksh-twinkel {
  position: absolute; z-index: -1; left: -45%; right: -15%; top: -20%; bottom: 25%; pointer-events: none;
  background: url(/assets/img/halloween/sterren-twinkel.svg) 120px 40px / 480px repeat;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 20%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 80% 20%, #000 30%, transparent 80%);
  opacity: 0.6;
}
/* low mist in front of the island base and the waterfall (no blur filter: the gradients are already soft) */
body.ks-halloween .ksh-mist {
  position: absolute; left: -8%; right: -8%; bottom: -4%; height: 34%; pointer-events: none;
  background:
    radial-gradient(40% 44% at 28% 52%, rgba(226, 216, 255, 0.28), transparent 70%),
    radial-gradient(42% 42% at 62% 58%, rgba(226, 216, 255, 0.22), transparent 70%),
    radial-gradient(24% 34% at 82% 50%, rgba(226, 216, 255, 0.14), transparent 70%);
}

/* carved pumpkins on the islands (server-side) */
body.ks-halloween .ksh-pompoen { position: absolute; display: block; pointer-events: none; transform: translate(-50%, -100%); }
body.ks-halloween .ksh-pompoen img { position: relative; display: block; width: 100%; height: auto; z-index: 1; }
body.ks-halloween .ksh-pompoen::before {
  content: ""; position: absolute; left: 50%; top: 62%; width: 320%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 186, 70, 0.55) 0%, rgba(255, 138, 31, 0.24) 26%, rgba(255, 120, 20, 0.07) 44%, transparent 62%);
  border-radius: 50%;
}

/* pixel bats: always an integer scale of the 18 x 10 sprite (crisp) */
/* the <i> holds both wing frames side by side; the flap slides it by half its width (transform: compositor only) */
body.ks-halloween .ksh-vleermuis { position: absolute; display: block; pointer-events: none; width: 36px; height: 20px; overflow: hidden; }
body.ks-halloween .ksh-vleermuis i {
  display: block; width: 200%; height: 100%;
  background: url(/assets/img/halloween/vleermuis.svg) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
/* the moon bat is a dark silhouette that crosses the bright disc; the other one is lilac on the dark sky */
body.ks-halloween .ksh-vleermuis--maan { left: 72%; top: -1%; }
body.ks-halloween .ksh-vleermuis--maan i { background-image: url(/assets/img/halloween/vleermuis-silhouet.svg); }
body.ks-halloween .ksh-vleermuis--eiland { left: 28%; top: -2%; width: 36px; }

/* ================================================================ 5. dark page heroes (/game-hosting, /webhosting-kopen, ...) */
body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"] {
  position: relative; isolation: isolate; overflow: hidden;
}
body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(/assets/img/halloween/maan.webp) right max(24px, calc(50% - 560px)) top 22px / 76px no-repeat,
    radial-gradient(220px 220px at right max(62px, calc(50% - 522px)) top 60px, rgba(255, 240, 205, 0.15), transparent 70%),
    url(/assets/img/halloween/sterren.svg) 0 0 / 240px repeat;
  /* full sky around the moon (top right), only faint stars behind the text column */
  -webkit-mask-image: radial-gradient(ellipse 65% 100% at 85% 0%, #000 40%, rgba(0, 0, 0, 0.18) 85%);
  mask-image: radial-gradient(ellipse 65% 100% at 85% 0%, #000 40%, rgba(0, 0, 0, 0.18) 85%);
}
/* heroes whose right column is a framed art card (hytale, conan-exiles): the moon and the bat would hide behind the
   card's corner, so those keep only the stars (hook class ksh-hero-kaart on the hero <section>) */
body.ks-halloween .ksh-hero-kaart::before { background: url(/assets/img/halloween/sterren.svg) 0 0 / 240px repeat !important; }
body.ks-halloween .ksh-hero-kaart::after { content: none !important; }
/* one lilac bat near the moon (CSS only, desktop) */
body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::after {
  content: none; position: absolute; z-index: -1; pointer-events: none;
  right: max(150px, calc(50% - 440px)); top: 46px; width: 36px; height: 20px;
  background: url(/assets/img/halloween/vleermuis.svg) 0 0 / 200% 100% no-repeat; image-rendering: pixelated;
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::after { content: ""; }
}

/* ================================================================ 6. light page heroes: graveyard skyline along the bottom */
body.ks-halloween :is(.ks-header + section, .ks-header + style + section, .ks-header + :is(main, div) > section:first-child, .ks-header + style + main > section:first-child)[style*="background-color: #F1EAFF"]:not(.ks-hero-home),
body.ks-halloween .ks-acc-hero {
  position: relative; isolation: isolate;
}
/* not when the hero is the last section (login, register, password, 404): the footer graveyard follows right below it */
body.ks-halloween :is(.ks-header + section, .ks-header + style + section, .ks-header + :is(main, div) > section:first-child, .ks-header + style + main > section:first-child)[style*="background-color: #F1EAFF"]:not(.ks-hero-home):not(:last-of-type)::after,
body.ks-halloween .ks-acc-hero::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none;
  background: url(/assets/img/halloween/kerkhof.svg) right bottom / 960px 60px repeat-x; image-rendering: pixelated;
}
/* phones: anchored right, the jack-o'-lantern (the only colour) fell off-screen and a bare tree poked up behind the
   account balance pill; this offset puts the pumpkin at about 2/3 of the width and the tree out of view */
@media (max-width: 600px) {
  body.ks-halloween :is(.ks-header + section, .ks-header + style + section, .ks-header + :is(main, div) > section:first-child, .ks-header + style + main > section:first-child)[style*="background-color: #F1EAFF"]:not(.ks-hero-home):not(:last-of-type)::after,
  body.ks-halloween .ks-acc-hero::after { background-position: -202px bottom; }
}

/* ================================================================ 7. light touch in the content */
/* a pixel pumpkin before every small uppercase label */
body.ks-halloween .ks-label::before,
body.ks-halloween :is(p, span)[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"]::before,
body.ks-halloween :is(p, span)[style*="letter-spacing: 0.14em"][style*="text-transform: uppercase"]::before {
  content: ""; display: inline-block; width: 16px; height: 14px; margin-right: 8px; vertical-align: -2px;
  background: url(/assets/img/halloween/pompoen-icoon.svg) 0 0 / 16px 14px no-repeat;
}
/* ...but not right after an icon tile (two icons in a row) and not on labels over a photo (trailer cards) */
body.ks-halloween span[style*="width: 48px"] + p[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"]::before { content: none; }
body.ks-halloween div[style*="position: absolute"] > p[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"]::before { display: none; }
/* centred labels on phones: the pumpkin sits centred above the label, so the label itself stays on one line */
@media (max-width: 420px) {
  body.ks-halloween p[style*="text-align: center"][style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"]::before {
    display: block; margin: 0 auto 6px;
  }
}
/* yellow pills ("Vaste prijs" on the action cards): yellow becomes pumpkin orange (navy text 7.0:1) */
body.ks-halloween span[style*="background: #FFC83D"][style*="border-radius: 999px"] {
  background: var(--ksh-pompoen) !important; color: #1F1147 !important;
}
/* cobweb in the corner of at most two plain cards per page (ks-halloween.js picks them: never on prices,
   order options, forms, tables or product art) */
body.ks-halloween .ksh-web { position: relative; }
body.ks-halloween .ksh-web::after {
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; pointer-events: none; z-index: 1;
  border-top-right-radius: inherit;
  background: url(/assets/img/halloween/spinnenweb.svg) 0 0 / 64px 64px no-repeat; image-rendering: pixelated;
}
body.ks-halloween .ksh-web.ksh-web--donker::after { background-image: url(/assets/img/halloween/spinnenweb-donker.svg); }
/* dark content cards: a few stars in the top-right corner, only where that corner is the card's art column (wide
   screens). Stacked cards (< 1040px) put the heading and body text there, so they keep their plain grid; the
   webhosting card has glass tiles in that corner (hook class ksh-geen-sterren) and keeps it too. */
@media (min-width: 1040px) {
  body.ks-halloween div[style*="background-color: #1F1147"][style*="border-radius: 28px"]:not(.ksh-geen-sterren) {
    background-image:
      url(/assets/img/halloween/sterren-hoek.svg),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 320px 220px, 36px 36px, 36px 36px !important;
    background-position: right top, 0 0, 0 0 !important;
    background-repeat: no-repeat, repeat, repeat !important;
  }
}

/* ================================================================ 8. purple action card: the same night as the hero */
body.ks-halloween .ks-actiekaart {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--ksh-nacht-2) !important;
  background-image:
    radial-gradient(260px 260px at calc(100% - 90px) 70px, rgba(255, 236, 196, 0.2), transparent 70%),
    linear-gradient(135deg, #170E42 0%, #2B1670 55%, #5326B8 100%) !important;
  background-size: 100% 100%, 100% 100% !important;
  box-shadow: 0 6px 0 #120A33 !important;
}
body.ks-halloween .ks-actiekaart::before {
  content: ""; position: absolute; right: 40px; top: 24px; width: 84px; height: 84px; z-index: -1; pointer-events: none;
  background: url(/assets/img/halloween/maan.webp) center / contain no-repeat;
}
/* the Hytale newsletter card has its own sparkles and a notification badge in that corner (side by side from about
   1045px): no moon there. Stacked, the moon sits beside the NIEUWSBRIEF pill and stays. */
@media (min-width: 1040px) {
  body.ks-halloween .ks-actiekaart.ksh-geen-maan::before { content: none; }
}
/* stars on their own layer behind the moon: faint behind the text, full on the chest side */
body.ks-halloween .ks-actiekaart::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(/assets/img/halloween/sterren.svg) 0 0 / 240px repeat;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0 45%, #000 75%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0 45%, #000 75%);
}
/* trick-or-treat: a candy bucket on the chest's ground plane, left of the chest, in its shadow */
body.ks-halloween .ks-actiekaart-beeld { position: relative; }
/* reserve the chest's box (800 x 640) before the lazy image is in, so the bucket never floats over the CTA */
body.ks-halloween .ks-actiekaart-beeld img { aspect-ratio: 5 / 4; }
body.ks-halloween .ks-actiekaart-beeld::after {
  content: ""; position: absolute; pointer-events: none; aspect-ratio: 110 / 116;
  left: calc(50% - min(170px, 50%) + 6%); width: calc(min(340px, 100%) * 0.22); bottom: 17%;
  background: url(/assets/img/halloween/snoepemmer.webp) center bottom / contain no-repeat;
  filter: drop-shadow(0 6px 4px rgba(10, 4, 30, 0.35));
}

/* ================================================================ 9. footer by moonlight: a friendly graveyard */
body.ks-halloween .ks-footer { position: relative; isolation: isolate; }
body.ks-halloween .ks-footer > div { position: relative; z-index: 1; padding-top: 176px !important; }
body.ks-halloween .ks-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 136px; z-index: 0; pointer-events: none;
  /* no moon here: the action card right above already has one. The groups hug the centre on wide screens and are
     clamped 16px from the edges below ~1170px (left) / ~1000px (right), with their spacing intact */
  background:
    /* left group: arched stone, rounded stone, pumpkin, candles */
    url(/assets/img/halloween/graf-boog.webp) max(16px, calc(50% - 552px)) calc(100% - 12px) / 34px auto no-repeat,
    url(/assets/img/halloween/graf-rond.webp) max(58px, calc(50% - 510px)) calc(100% - 12px) / 34px auto no-repeat,
    url(/assets/img/halloween/pompoen-klein.webp) max(102px, calc(50% - 462px)) calc(100% - 12px) / 42px auto no-repeat,
    url(/assets/img/halloween/kaarsen.webp) max(147.5px, calc(50% - 424px)) calc(100% - 14px) / 27px auto no-repeat,
    /* middle: one small stone */
    url(/assets/img/halloween/graf-blok.webp) calc(50% - 60px) calc(100% - 13px) / 28px auto no-repeat,
    /* right group: candle, big pumpkin, two stones */
    url(/assets/img/halloween/kaars.webp) min(calc(100% - 163px), calc(50% + 330px)) calc(100% - 15px) / 14px auto no-repeat,
    url(/assets/img/halloween/pompoen-r.webp) min(calc(100% - 105px), calc(50% + 370px)) calc(100% - 12px) / 50px auto no-repeat,
    url(/assets/img/halloween/graf-rond.webp) min(calc(100% - 55px), calc(50% + 428px)) calc(100% - 12px) / 34px auto no-repeat,
    url(/assets/img/halloween/graf-blok.webp) min(calc(100% - 16px), calc(50% + 470px)) calc(100% - 13px) / 28px auto no-repeat,
    radial-gradient(70px 34px at max(123px, calc(50% - 462px)) calc(100% - 24px), rgba(255, 150, 40, 0.3), transparent 70%),
    radial-gradient(86px 40px at min(calc(100% - 130px), calc(50% + 370px)) calc(100% - 26px), rgba(255, 150, 40, 0.3), transparent 70%),
    url(/assets/img/halloween/grond.svg) 0 100% / 96px 20px repeat-x,
    url(/assets/img/halloween/sterren.svg) 0 -40px / 480px repeat,
    linear-gradient(180deg, #120A33 0%, #1F1147 100%);
}
/* a pair of Enderman eyes between the graves, blinking now and then (motion only) */
body.ks-halloween .ks-footer::after {
  content: none; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 120px); top: 96px; width: 10px; height: 4px; opacity: 0;
  background: #D36CFF; box-shadow: 18px 0 0 #D36CFF, 0 0 6px 1px rgba(211, 108, 255, 0.7), 18px 0 6px 1px rgba(211, 108, 255, 0.7);
}
body.ks-halloween .ks-footer a:focus-visible { outline: 2px solid #FFB13B; outline-offset: 3px; border-radius: 6px; }

/* ================================================================ 10. a friendly ghost (404 and the login/register card) */
body.ks-halloween .ksh-spookje {
  position: absolute; z-index: 2; display: block; width: 61px; height: 72px; pointer-events: none;
  background: url(/assets/img/halloween/spookje.webp) center / contain no-repeat;
  filter: drop-shadow(0 10px 10px rgba(31, 17, 71, 0.16));
}
body.ks-halloween .ksh-spookje--404 { left: 7%; top: 26%; }
body.ks-halloween .ksh-spookje--auth { left: -6px; top: 50%; }
@media (max-width: 760px) { body.ks-halloween .ksh-spookje { width: 46px; height: 54px; } }

/* ================================================================ 11. buttons: pumpkin focus ring + a soft glow on hover */
/* light surfaces: a soft pumpkin ring (the orange home CTA has its own hover in section 4) */
body.ks-halloween a[style*="box-shadow: 0 4px 0 #5B27B8"]:not(.ks-hero-cta):hover,
body.ks-halloween button[style*="box-shadow: 0 4px 0 #5B27B8"]:hover {
  box-shadow: 0 4px 0 #5B27B8, 0 0 0 4px rgba(255, 138, 31, 0.32) !important;
}
/* night surfaces (navy heroes and cards): a translucent ring turns muddy on navy, so a brighter, near-solid one */
body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"] a[style*="box-shadow: 0 4px 0 #5B27B8"]:hover,
body.ks-halloween div[style*="background-color: #1F1147"] a[style*="box-shadow: 0 4px 0 #5B27B8"]:hover {
  box-shadow: 0 4px 0 #5B27B8, 0 0 0 3px rgba(255, 154, 58, 0.85) !important;
}
/* keyboard focus: dark pumpkin on light backgrounds (4.5:1 on white, 3.8:1 on lilac), bright pumpkin at night.
   The home hero CTAs keep their white ring (section 4, more specific). */
body.ks-halloween a[style*="background: #7D3CEE"]:focus-visible,
body.ks-halloween button[style*="background: #7D3CEE"]:focus-visible {
  outline: 3px solid var(--ksh-pompoen-donker) !important; outline-offset: 3px;
}
/* every link and button on a night surface (breadcrumbs too), so one hero never mixes a pumpkin and a purple ring */
body.ks-halloween .ks-actiekaart :is(a, button, input, select, textarea):focus-visible,
body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"] :is(a, button):focus-visible,
body.ks-halloween div[style*="background-color: #1F1147"] :is(a, button):focus-visible {
  outline: 3px solid var(--ksh-pompoen) !important; outline-offset: 3px;
}

/* ================================================================ 12. motion (only when the visitor is fine with it) */
@media (prefers-reduced-motion: no-preference) {
  body.ks-halloween .ks-actiebalk-pil::after { animation: ksh-gloei 3.4s ease-in-out infinite; }
  body.ks-halloween .ks-mascotte--hop.ksh-kostuum { animation-name: ksh-hop; }
  body.ks-halloween .ks-hero-home::after { animation: ksh-mist 26s ease-in-out -8s infinite alternate; }
  body.ks-halloween .ksh-mist { animation: ksh-mist 18s ease-in-out infinite alternate; }
  body.ks-halloween .ksh-pompoen::before { animation: ksh-flakker 2.8s steps(1, end) infinite; }
  body.ks-halloween .ksh-zweef .ksh-pompoen::before { animation-duration: 3.5s; animation-delay: -1.2s; }
  body.ks-halloween .ksh-twinkel { animation: ksh-twinkel 4.2s ease-in-out infinite; }
  body.ks-halloween .ksh-vleermuis i { animation: ksh-flap 0.34s steps(1, end) infinite; }
  body.ks-halloween .ksh-vleermuis--maan { animation: ksh-baan-maan 15s ease-in-out -4s infinite; }
  body.ks-halloween .ksh-vleermuis--eiland { animation: ksh-baan-1 21s ease-in-out -9s infinite; }
  /* dark heroes: the pseudo-element bat glides (a frame flap would need background-position = a repaint per frame) */
  body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::after {
    animation: ksh-baan-1 18s ease-in-out -4s infinite;
  }
  body.ks-halloween .ks-footer::after { content: ""; animation: ksh-ogen 13s steps(1, end) 4s infinite; }
  body.ks-halloween .ksh-spookje { animation: ksh-zweven 4.6s ease-in-out infinite; }
}
/* stacked home hero: the island bat flies a little lower and never climbs, so it stays clear of the payment row; it
   starts in the open sky between the left floating island and the moon (not on the island and its pumpkin) */
@media (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
  body.ks-halloween .ksh-vleermuis--eiland { left: 46%; top: 5%; animation-name: ksh-baan-laag; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  body.ks-halloween .ksh-vleermuis--eiland { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.ks-halloween .ksh-vleermuis, body.ks-halloween .ksh-twinkel { display: none; }
}
@keyframes ksh-gloei { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.85; } }
@keyframes ksh-mist { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes ksh-flakker { 0% { opacity: 1; } 18% { opacity: 0.82; } 24% { opacity: 1; } 51% { opacity: 0.9; } 57% { opacity: 0.74; } 63% { opacity: 1; } 88% { opacity: 0.86; } }
@keyframes ksh-twinkel { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
@keyframes ksh-flap { 0% { transform: translateX(0); } 50% { transform: translateX(-50%); } }
@keyframes ksh-zweven { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ksh-ogen { 0%, 90%, 100% { opacity: 0; } 91%, 93.4%, 95.2% { opacity: 1; } 92.6%, 94.6% { opacity: 0; } }
@keyframes ksh-baan-maan {
  0% { transform: translate(-90px, 18px) scale(0.9); }
  45% { transform: translate(40px, -8px) scale(1); }
  55% { transform: translate(58px, -2px) scale(1); }
  100% { transform: translate(-90px, 18px) scale(0.9); }
}
@keyframes ksh-baan-1 {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-60px, 18px) scale(0.96); }
  50% { transform: translate(-110px, -6px) scale(0.92); }
  75% { transform: translate(-48px, -22px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes ksh-baan-laag {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 14px) scale(0.96); }
  66% { transform: translate(-90px, 4px) scale(0.93); }
}

/* animations of a block that is off-screen are paused by ks-halloween.js */
body.ks-halloween .ksh-pauze, body.ks-halloween .ksh-pauze *,
body.ks-halloween .ksh-pauze::before, body.ks-halloween .ksh-pauze::after,
body.ks-halloween .ksh-pauze *::before, body.ks-halloween .ksh-pauze *::after { animation-play-state: paused !important; }

/* ================================================================ 13. smaller screens */
@media (max-width: 1039px) {
  /* hero stacked: text on top, island below -> stars around the island */
  body.ks-halloween .ks-hero-home::before {
    -webkit-mask-image: radial-gradient(ellipse 110% 46% at 60% 78%, #000 35%, rgba(0, 0, 0, 0.1) 85%);
    mask-image: radial-gradient(ellipse 110% 46% at 60% 78%, #000 35%, rgba(0, 0, 0, 0.1) 85%);
  }
  /* a little air between the payment row and the night scene, so the moon (which rises above the scene) never
     reaches the text; the moon, cloud and bat keep their arrangement */
  body.ks-halloween .ks-hero-home > div > div:first-child { padding-bottom: 24px; }
}
@media (max-width: 760px) {
  body.ks-halloween .ks-header-top { padding-top: 16px !important; }
  body.ks-halloween .ks-site > .ks-header:first-child .ks-header-top { padding-top: 20px !important; }
  body.ks-halloween .ks-footer > div { padding-top: 148px !important; }
  body.ks-halloween .ks-footer::before {
    height: 112px;
    background:
      url(/assets/img/halloween/graf-boog.webp) calc(50% - 150px) calc(100% - 12px) / 28px auto no-repeat,
      url(/assets/img/halloween/graf-rond.webp) calc(50% - 116px) calc(100% - 12px) / 30px auto no-repeat,
      url(/assets/img/halloween/kaarsen.webp) calc(50% - 80px) calc(100% - 14px) / 23px auto no-repeat,
      url(/assets/img/halloween/pompoen-r.webp) calc(50% + 70px) calc(100% - 12px) / 44px auto no-repeat,
      url(/assets/img/halloween/graf-blok.webp) calc(50% + 122px) calc(100% - 13px) / 26px auto no-repeat,
      radial-gradient(76px 36px at calc(50% + 70px) calc(100% - 24px), rgba(255, 150, 40, 0.3), transparent 70%),
      url(/assets/img/halloween/grond.svg) 0 100% / 96px 20px repeat-x,
      url(/assets/img/halloween/sterren.svg) 0 -40px / 480px repeat,
      linear-gradient(180deg, #120A33 0%, #1F1147 100%);
  }
  body.ks-halloween .ks-footer::after { left: calc(50% - 10px); top: 78px; }
  /* the moon hangs in the sky, clear of the card's rounded corner */
  body.ks-halloween .ks-actiekaart::before { width: 44px; height: 44px; right: 22px; top: 22px; }
  /* the discount line (pill + promo text) wraps before the moon's column (never white text on the pale moon) */
  body.ks-halloween .ks-actiekaart > div:first-child > p:first-child { padding-right: 60px; }
}
@media (max-width: 600px) {
  /* dark heroes on phones: stars only (the moon would sit in the headline band or behind the hero art) */
  body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::before {
    background: url(/assets/img/halloween/sterren.svg) 0 0 / 240px repeat;
  }
  /* on phones the text spans the whole width: keep the stars faint everywhere (never read as punctuation) */
  body.ks-halloween :is(.ks-header + section, .ks-header + style + section)[style*="background-color: #1F1147"]::before,
  body.ks-halloween .ks-actiekaart::after {
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
    mask-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
  }
}