/* ==========================================================================
   Halloween-thema (komt elk jaar vanzelf terug)
   Alles hangt aan html.hw. Die klasse wordt in de <head> gezet tussen
   17 oktober en 1 november, of met ?halloween=1 (preview) en ?halloween=0 (uit).
   Na Halloween doet dit bestand niets meer.
   ========================================================================== */

html:not(.hw) .hw-fx { display: none !important; }

/* ---------- Tokens: oranje en nachtpaars ---------- */
.hw {
  --ink: #1B1530;
  --ink-2: #261D42;
  --ink-3: #43386A;
  --blue: #C2410C;
  --blue-hover: #9A3412;
  --blue-soft: #FFEDDF;
  --blue-light: #FFA25C;
  --on-dark: #CFC7E2;
  --bg: #FBF7F2;
  --line: #ECE4DA;
  --night: #0E0A1C;
  --ground: #0B0816;
  --glow: #FF9A3C;
  --candle: #FFD25A;
}
.hw .btn-primary { box-shadow: 0 8px 22px -8px rgba(232, 98, 12, .7); }
.hw .btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(232, 98, 12, .8), 0 0 0 4px rgba(255, 154, 60, .18); }
.hw .checks li::before, .hw .values li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='5,12 10,17 19,7' fill='none' stroke='%23FF9A3C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hw .values li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='5,12 10,17 19,7' fill='none' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hw .field input:focus, .hw .field textarea:focus, .hw .field select:focus { box-shadow: 0 0 0 4px rgba(255, 154, 60, .25); background: #2E2350; }
.hw .footer-inner { border-top-color: var(--line); }

/* ---------- Header: altijd nacht ---------- */
.hw .site-header { background: var(--night); }
.hw .site-header.scrolled { background: rgba(14, 10, 28, .94); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.hw .logo, .hw .logo:hover { color: #FFF; }
.hw .nav a:not(.btn) { color: #EDE7FA; }
.hw .nav a:not(.btn):hover { color: #FFF; }
.hw .nav a:not(.btn)::after { background: var(--glow); }
.hw .nav .btn-dark { background: var(--blue); }
.hw .nav .btn-dark:hover { background: var(--blue-hover); }
.hw .lang-switch { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.hw .nav .lang-switch a.lang { color: #B9B0D0; }
.hw .nav .lang-switch a.lang:hover { color: #FFF; }
.hw .nav .lang-switch a.lang[aria-current="page"] { background: var(--blue); color: #FFF; }
.hw .menu-bar { background: #FFF; }
.hw .logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }
@media (max-width: 960px) {
  .hw .nav { background: rgba(14, 10, 28, .97); box-shadow: 0 24px 30px -20px rgba(0, 0, 0, .6); }
  .hw .nav a:not(.btn) { border-bottom-color: rgba(255, 255, 255, .08); }
  .hw .site-header.menu-open { background: rgba(14, 10, 28, .97); }
}

/* ---------- Hero: maanverlichte nacht ---------- */
.hw .hero {
  position: relative; isolation: isolate; color: #FFF;
  background: linear-gradient(180deg, var(--night) 0%, #1B1433 55%, #2C1F4A 100%);
  padding-bottom: clamp(150px, 16vw, 210px);
}
.hw .hero-grid { position: relative; z-index: 2; }
.hw .lead { color: #D6CFE8; }
.hw .chip { color: var(--ink); }
.hw .checks { color: #D6CFE8; }
.hw .status { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #EDE7FA; backdrop-filter: blur(6px); }
.hw .status-dot, .hw .status-dot::after { background: var(--glow); }
.hw .hero .btn-ghost { background: rgba(255, 255, 255, .08); color: #FFF; border-color: rgba(255, 255, 255, .22); }
.hw .hero .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #FFF; color: #FFF; }

.hw .hero-title .line { padding-bottom: .5em; margin-bottom: -.44em; }
.hw .hero-title .accent {
  position: relative; color: var(--glow);
  text-shadow: 0 0 28px rgba(255, 154, 60, .55), 0 0 2px rgba(255, 154, 60, .6);
}
/* Druipende letters */
.hw .hero-title .accent::after {
  content: ""; position: absolute; left: 3%; right: 6%; top: 82%; height: .42em;
  background: no-repeat top / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23FF9A3C' d='M0 0H200V5Q186 5 185 9V22Q185 28 180 28Q175 28 175 22V10Q174 5 160 5Q140 5 139 9V14Q139 18 135 18Q131 18 131 14V9Q130 5 110 5Q92 5 91 10V30Q91 37 85 37Q79 37 79 30V10Q78 5 60 5Q42 5 41 9V17Q41 22 36 22Q31 22 31 17V9Q30 5 14 5Q2 5 0 5Z'/%3E%3C/svg%3E");
  transform-origin: top; animation: hw-drip-grow 2.2s cubic-bezier(.5, 0, .3, 1) 1.5s both;
  filter: drop-shadow(0 0 8px rgba(255, 154, 60, .45));
}
.hw .hero-title .accent::before {
  content: ""; position: absolute; left: 44%; top: 112%; width: .09em; height: .13em; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--glow); opacity: 0; animation: hw-drop 3.4s ease-in 3.8s infinite;
}
@keyframes hw-drip-grow { from { transform: scaleY(0); } }
@keyframes hw-drop {
  0% { opacity: 0; transform: translateY(0) scale(.4); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  45% { opacity: 1; transform: translateY(1.6em); }
  50%, 100% { opacity: 0; transform: translateY(1.8em); }
}

.hw-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hw-stars { position: absolute; inset: 0; transform: translateY(calc(var(--sy, 0) * .2px)); }
.hw-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFF;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .5); animation: hw-twinkle var(--t, 3s) ease-in-out var(--dl, 0s) infinite;
}
.hw-star.big { width: 3px; height: 3px; }
@keyframes hw-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.hw-shooting {
  position: absolute; top: 12%; left: 20%; width: 140px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF); opacity: 0;
  transform: rotate(-18deg); animation: hw-shoot 9s ease-out 4s infinite;
}
@keyframes hw-shoot {
  0% { opacity: 0; transform: rotate(-18deg) translateX(0); }
  2% { opacity: 1; }
  8%, 100% { opacity: 0; transform: rotate(-18deg) translateX(420px); }
}

.hw-moon {
  position: absolute; top: 26px; right: 6%; width: clamp(110px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(214, 170, 96, .55) 0 9%, transparent 10%),
    radial-gradient(circle at 34% 64%, rgba(214, 170, 96, .45) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 70%, rgba(214, 170, 96, .35) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 34%, #FFFBEA, #FFE6A8 55%, #F2BE62);
  box-shadow: 0 0 60px 18px rgba(255, 214, 140, .32), 0 0 180px 70px rgba(255, 150, 60, .14);
  transform: translateY(calc(var(--sy, 0) * .38px));
  animation: hw-moon-glow 6s ease-in-out infinite;
}
@keyframes hw-moon-glow {
  0%, 100% { box-shadow: 0 0 60px 18px rgba(255, 214, 140, .32), 0 0 180px 70px rgba(255, 150, 60, .14); }
  50% { box-shadow: 0 0 80px 26px rgba(255, 214, 140, .42), 0 0 220px 90px rgba(255, 150, 60, .2); }
}
.hw-cloud {
  position: absolute; height: 34px; border-radius: 40px; background: rgba(60, 46, 100, .85); filter: blur(2px);
  animation: hw-cloud var(--d, 60s) linear var(--dl, 0s) infinite;
}
.hw-cloud::before, .hw-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.hw-cloud::before { width: 50%; height: 170%; left: 14%; bottom: 20%; }
.hw-cloud::after { width: 36%; height: 130%; right: 14%; bottom: 25%; }
@keyframes hw-cloud { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }

.hw-skyline {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(130px, 15vw, 220px); z-index: 1;
}
.hw-window { fill: var(--candle); animation: hw-flicker 4s steps(1) infinite; }
.hw-window:nth-of-type(2) { animation-delay: -1.3s; animation-duration: 5.5s; }
.hw-window:nth-of-type(3) { animation-delay: -2.6s; animation-duration: 3.2s; }
@keyframes hw-flicker {
  0%, 100% { opacity: 1; } 41% { opacity: .55; } 43% { opacity: 1; } 71% { opacity: .2; } 73% { opacity: .9; } 74% { opacity: .4; } 76% { opacity: 1; }
}

.hw-fog {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 160px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 55% at 12% 75%, rgba(205, 195, 235, .2), transparent 70%),
    radial-gradient(ellipse 18% 45% at 36% 85%, rgba(205, 195, 235, .16), transparent 70%),
    radial-gradient(ellipse 26% 50% at 64% 80%, rgba(205, 195, 235, .18), transparent 70%),
    radial-gradient(ellipse 16% 40% at 88% 88%, rgba(205, 195, 235, .14), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: hw-fog 48s linear infinite;
}
.hw-fog.slow { animation-duration: 75s; animation-direction: reverse; opacity: .8; height: 110px; }
@keyframes hw-fog { to { transform: translateX(-50%); } }

/* Vliegende vleermuizen in de hero */
.hw-bat { display: block; fill: var(--ground); overflow: visible; }
.hw-bat .hw-eye { fill: var(--glow); }
.hw-wing { transform-origin: 60px 28px; }
.hw-wing-l { animation: hw-flap-l .32s ease-in-out infinite; }
.hw-wing-r { animation: hw-flap-r .32s ease-in-out infinite; }
@keyframes hw-flap-l { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(-22deg) scaleY(.7); } }
@keyframes hw-flap-r { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(22deg) scaleY(.7); } }
.hw-hero-bat { position: absolute; left: 0; width: var(--w, 54px); animation: hw-bat-path var(--d, 16s) linear var(--dl, 0s) infinite; }
.hw-hero-bat .hw-bat { fill: #07050F; }
@keyframes hw-bat-path {
  0% { transform: translate(-12vw, 0) rotate(4deg); }
  20% { transform: translate(18vw, -36px) rotate(-6deg); }
  40% { transform: translate(42vw, 24px) rotate(5deg); }
  60% { transform: translate(66vw, -28px) rotate(-4deg); }
  80% { transform: translate(90vw, 16px) rotate(6deg); }
  100% { transform: translate(115vw, -12px) rotate(0); }
}

/* Spookje dat achter de mockup uit piept */
.hw-peek {
  position: absolute; z-index: -1; left: 58%; top: 26px; width: 74px;
  animation: hw-peek 9s var(--ease-out) 2.6s infinite both;
}
@keyframes hw-peek {
  0%, 12% { transform: translateY(70px) rotate(0); }
  22% { transform: translateY(-58px) rotate(-6deg); }
  28% { transform: translateY(-52px) rotate(6deg); }
  34% { transform: translateY(-58px) rotate(-6deg); }
  40% { transform: translateY(-54px) rotate(0); }
  52%, 100% { transform: translateY(70px) rotate(0); }
}
.hw .mock-url::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 6px var(--glow); vertical-align: 1px; }

/* ---------- Spookje ---------- */
.hw-ghost { display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(27, 21, 48, .3)); }
.hw-ghost .body { fill: #FBF9FF; stroke: #DCD3EE; stroke-width: 1.5; }
.hw-ghost .face { fill: var(--ink, #1B1530); }
.hw-ghost .blush { fill: #FF9EB0; opacity: .55; }
.hw-float { animation: hw-float 3.6s ease-in-out infinite; }
@keyframes hw-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

/* ---------- Pompoen ---------- */
.hw-pumpkin { display: block; overflow: visible; }
.hw-pumpkin .face { fill: var(--candle); filter: drop-shadow(0 0 4px rgba(255, 190, 60, .9)); animation: hw-candle 2.8s ease-in-out infinite; }
.hw-pumpkin.dim .face { fill: #5A2A08; filter: none; animation: none; }
@keyframes hw-candle { 0%, 100% { opacity: 1; } 30% { opacity: .78; } 34% { opacity: .95; } 60% { opacity: .85; } }
.hw-clicky { cursor: pointer; pointer-events: auto; transition: transform .3s var(--ease-out); }
.hw-clicky:hover { transform: scale(1.1) rotate(-5deg); }
.hw-clicky:active { transform: scale(.94); }

/* ---------- Druppels die de nacht in de witte sectie laten lopen ---------- */
.hw .hero + .section { position: relative; }
.hw-drips { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 1; pointer-events: none; }
.hw-drips::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 8px; background: var(--ground); }
.hw-drip {
  position: absolute; top: 0; width: var(--w); height: var(--h); background: var(--ground);
  border-radius: 0 0 999px 999px; transform-origin: top;
  transform: scaleY(clamp(0, calc(var(--p, 1) * 1.6 - var(--o, 0)), 1));
}
.hw-drip::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 70%; aspect-ratio: .8; margin-left: -35%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--ground); opacity: 0;
  animation: hw-fall var(--fd, 5s) ease-in var(--fdl, 2s) infinite;
}
@keyframes hw-fall {
  0%, 70% { opacity: 0; transform: translateY(0) scale(.3); }
  76% { opacity: 1; transform: translateY(2px) scale(1); }
  96% { opacity: 1; transform: translateY(90px); }
  100% { opacity: 0; transform: translateY(100px); }
}

/* ---------- Spinnenwebben en spinnetjes ---------- */
.hw-web { position: absolute; top: 0; right: 0; width: 96px; height: 96px; pointer-events: none; fill: none; stroke: #CDC3DE; stroke-width: .9; }
.hw-web.left { right: auto; left: 0; transform: scaleX(-1); }
.hw-web.light { stroke: rgba(255, 255, 255, .22); }
.hw .card { position: relative; overflow: hidden; }
.hw-dangle {
  position: absolute; top: 0; right: 34px; width: 22px; pointer-events: none;
  transform: translateY(-100%); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);
}
.hw-dangle .thread { width: 1px; height: 58px; margin: 0 auto; background: #B4A8CB; }
.hw-dangle svg { width: 22px; margin-top: -3px; animation: hw-wiggle 1.6s ease-in-out infinite; }
.hw .card:hover .hw-dangle { transform: translateY(0); }
.hw-spider-svg { fill: var(--ground); stroke: var(--ground); }
.hw-spider-svg .legs { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.hw-spider-svg .eye { fill: #FF5A3C; stroke: none; }
@keyframes hw-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Spin die met het scrollen naar beneden zakt */
.hw-spider {
  position: fixed; top: 0; right: clamp(16px, 6vw, 90px); z-index: 49; width: 40px;
  transform-origin: 50% 0; animation: hw-sway 4.5s ease-in-out infinite; pointer-events: none;
}
.hw-spider .thread { width: 1.5px; margin: 0 auto; height: var(--len, 40px); background: linear-gradient(#6B5F86, #B4A8CB); }
.hw-spider svg { width: 40px; margin-top: -4px; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.hw-spider .legs { animation: hw-legs .5s ease-in-out infinite alternate; transform-origin: 30px 32px; }
@keyframes hw-sway { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@keyframes hw-legs { to { transform: scaleY(.9) scaleX(1.06); } }

/* Spin in de contactkaart */
.hw .contact-card { position: relative; }
.hw .contact-card > :not(.hw-fx) { position: relative; z-index: 1; }
.hw-card-spider {
  position: absolute !important; z-index: 2 !important; top: 0; left: 70px; width: 30px; pointer-events: none;
  transform-origin: 50% 0; transform: translateY(-110%); transition: transform 1.6s cubic-bezier(.34, 1.4, .64, 1);
}
.hw-card-spider .thread { width: 1px; height: 110px; margin: 0 auto; background: rgba(255, 255, 255, .35); }
.hw-card-spider svg { width: 30px; margin-top: -3px; }
.hw-card-spider .hw-spider-svg { fill: #000; stroke: #000; }
.hw-card-spider.in { transform: translateY(0); animation: hw-sway 3.5s ease-in-out 1.6s infinite; }

/* ---------- Werkwijze: zaklamp in het donker ---------- */
.hw .section-dark { position: relative; overflow: hidden; isolation: isolate; }
.hw .section-dark > .container { position: relative; z-index: 2; }
.hw .step { background: rgba(38, 29, 66, .92); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, .05); transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
.hw .step:hover { border-color: rgba(255, 154, 60, .4); box-shadow: 0 0 40px -10px rgba(255, 154, 60, .35); transform: translateY(-4px); }
.hw .step-num { color: var(--glow); text-shadow: 0 0 18px rgba(255, 154, 60, .5); }
.hw-haunt {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r, 230px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 230px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 100%);
}
.hw-beam {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle calc(var(--r, 230px) * 1.15) at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 120, .13), rgba(255, 196, 120, .04) 55%, transparent 75%);
}
.hw-haunt > * { position: absolute; }
.hw-haunt .hw-ghost { filter: drop-shadow(0 0 22px rgba(220, 210, 255, .55)); }
.hw-boo {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 9vw, 140px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 154, 60, .7); letter-spacing: -.02em; transform: rotate(-8deg);
}
.hw-eyes { position: absolute; z-index: 1; display: flex; gap: 9px; pointer-events: none; }
.hw-eyes i {
  width: 9px; height: 6px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: var(--candle);
  box-shadow: 0 0 8px 2px rgba(255, 200, 80, .6); animation: hw-blink var(--b, 5s) ease-in-out var(--bd, 0s) infinite;
}
@keyframes hw-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); opacity: 1; } 48% { transform: scaleY(.1); } 70%, 90% { opacity: .0; } }
.hw-hint {
  position: absolute; z-index: 2; right: 24px; bottom: 26px; font-size: 14px; font-style: italic; color: rgba(255, 210, 160, .7);
  animation: hw-hint 3s ease-in-out infinite;
}
@keyframes hw-hint { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- Projecten: een spookje komt kijken ---------- */
.hw .project { position: relative; isolation: isolate; }
.hw .project-img { position: relative; z-index: 1; }
.hw-project-ghost {
  position: absolute; z-index: 0; top: 4px; right: 18%; width: 64px; pointer-events: none;
  transform: translateY(40px) rotate(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .05s;
}
.hw .project:hover .hw-project-ghost, .hw .project:focus-visible .hw-project-ghost { transform: translateY(-52px) rotate(-8deg); }
.hw .project:nth-child(2) .hw-project-ghost { right: auto; left: 16%; }
.hw .project:nth-child(2):hover .hw-project-ghost { transform: translateY(-52px) rotate(8deg); }

/* ---------- Over mij: vleermuis die wegvliegt ---------- */
.hw .about-copy { position: relative; }
.hw-hang {
  position: absolute; z-index: 2; top: -58px; right: 8%; width: 62px; pointer-events: none;
  transform: rotate(180deg);
}
.hw-hang .hw-wing { animation: none; transform: scaleX(.32) rotate(0); }
.hw-hang .hw-bat { animation: hw-swing 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hw-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.hw-hang.fly { animation: hw-bat-away 2.6s cubic-bezier(.5, 0, .75, 1) forwards; }
.hw-hang.fly .hw-bat { animation: none; }
.hw-hang.fly .hw-wing-l { animation: hw-flap-l .26s ease-in-out infinite; }
.hw-hang.fly .hw-wing-r { animation: hw-flap-r .26s ease-in-out infinite; }
@keyframes hw-bat-away {
  0% { transform: rotate(180deg); }
  14% { transform: rotate(0) translate(0, -10px); }
  40% { transform: translate(-60px, -60px) rotate(-8deg); }
  70% { transform: translate(120px, -180px) rotate(10deg) scale(.85); opacity: 1; }
  100% { transform: translate(420px, -520px) rotate(-6deg) scale(.5); opacity: 0; }
}

/* ---------- Over mij: bliksem, en de foto wordt een vampier ---------- */
.hw .about-photo { position: relative; isolation: isolate; }
/* styles.css geeft elke svg in .about-photo een vaste maat; hier niet */
.hw .about-photo svg { width: 100%; height: auto; }
.hw .about-photo svg.hw-photo-web { width: 120px; height: 120px; }
.hw .about-photo .hw-photo-spider svg { width: 26px; }

.hw .about-photo img.hw-vamp { position: absolute; inset: 0; opacity: 0; }
.hw-spooked img.hw-vamp { opacity: 1; animation: hw-transform 1.6s steps(1) .4s both; }
@keyframes hw-transform {
  0% { opacity: 0; } 12% { opacity: 1; } 20% { opacity: 0; } 30% { opacity: 1; } 38% { opacity: 0; } 52%, 100% { opacity: 1; }
}
.hw-flash { position: absolute; inset: 0; z-index: 1; background: #F4EEFF; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.hw-spooked .hw-flash { animation: hw-lightning 1.6s ease-out .4s both; }
@keyframes hw-lightning {
  0% { opacity: 0; } 4% { opacity: .9; } 10% { opacity: .1; } 26% { opacity: .75; } 34% { opacity: 0; } 50% { opacity: .55; } 100% { opacity: 0; }
}
.hw-spooked { animation: hw-shake .5s ease-in-out .9s; }
@keyframes hw-shake { 0%, 100% { translate: 0; } 20% { translate: -4px 1px; } 40% { translate: 4px -1px; } 60% { translate: -3px 0; } 80% { translate: 2px 1px; } }

.hw-photo-web { left: 0; right: auto; z-index: 2; transform: scaleX(-1); stroke: rgba(255, 255, 255, .45); }
.hw-photo-spider {
  position: absolute; z-index: 2; top: 0; left: 64px; width: 26px; pointer-events: none;
  transform-origin: 50% 0; transform: translateY(-110%);
  transition: transform 1.8s cubic-bezier(.34, 1.4, .64, 1) 2s;
}
.hw-photo-spider .thread { width: 1px; height: 150px; margin: 0 auto; background: rgba(255, 255, 255, .5); }
.hw-photo-spider svg { width: 26px; margin-top: -3px; }
.hw-spooked .hw-photo-spider { transform: translateY(0); animation: hw-sway 3.8s ease-in-out 3.8s infinite; }

.hw-photo-bat { position: absolute; z-index: 2; left: 50%; top: 45%; width: 46px; opacity: 0; pointer-events: none; }
.hw-photo-bat .hw-bat { fill: #07050F; filter: drop-shadow(0 0 5px rgba(255, 170, 90, .6)); }
.hw-spooked .hw-photo-bat { animation: hw-photo-bat 2.4s ease-in calc(1.2s + var(--i) * .3s) both; }
.hw-spooked .hw-photo-bat:nth-of-type(2n) { animation-name: hw-photo-bat-r; }
@keyframes hw-photo-bat {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-340px, -420px) scale(1.2) rotate(-12deg); }
}
@keyframes hw-photo-bat-r {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(320px, -380px) scale(1.1) rotate(10deg); }
}

/* ---------- Pakketten ---------- */
.hw .plan-featured { position: relative; box-shadow: 0 30px 60px -24px rgba(27, 21, 48, .5), 0 0 0 1px rgba(255, 154, 60, .25), 0 0 60px -20px rgba(255, 154, 60, .45); }
.hw .plan-price { background: #FBF0E4; }
.hw .plan-featured .plan-price { background: var(--ink-2); }
.hw-plan-pumpkin { position: absolute; top: -38px; right: 26px; width: 66px; z-index: 2; }
.hw .badge { box-shadow: 0 0 0 0 rgba(255, 154, 60, .6); animation: hw-pulse 2.4s ease-out infinite; }
@keyframes hw-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 60, .6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 154, 60, 0); } }

/* ---------- Footer: pompoenen die één voor één aangaan ---------- */
.hw .footer-inner { position: relative; }
.hw-patch { position: absolute; right: 24px; top: -50px; display: flex; align-items: flex-end; gap: 6px; }
.hw-patch > div { width: 46px; }
.hw-patch > div:nth-child(2) { width: 60px; }
.hw-patch > div:nth-child(3) { width: 38px; }

/* ---------- Heks die je scrollvoortgang toont ---------- */
.hw-witch {
  position: fixed; top: 84px; left: 0; z-index: 48; width: 70px; pointer-events: none;
  transform: translateX(var(--x, 0px));
}
.hw-witch-inner { animation: hw-bob 2.2s ease-in-out infinite; }
.hw-witch svg { width: 100%; transition: transform .35s var(--ease-out); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .2)); }
.hw-witch.right svg { transform: scaleX(-1); }
@keyframes hw-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(8px) rotate(2deg); } }
.hw-spark {
  position: fixed; z-index: 47; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: var(--candle); box-shadow: 0 0 8px 2px rgba(255, 170, 60, .8);
}

/* ---------- Vonkjes achter de muis ---------- */
.hw-ember {
  position: fixed; z-index: 70; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: var(--glow); box-shadow: 0 0 10px 2px rgba(255, 140, 40, .7);
}

/* ---------- Losse vleermuizen, snoep en spookjes ---------- */
.hw-flyer { position: fixed; top: 0; left: 0; z-index: 46; pointer-events: none; }
.hw-flyer .hw-bat { filter: drop-shadow(0 0 4px rgba(255, 170, 90, .5)); }
.hw-candy { position: fixed; z-index: 80; top: 0; left: 0; width: 18px; pointer-events: none; }
.hw-swarm { position: fixed; z-index: 80; top: 0; left: 0; width: 80px; pointer-events: none; }

/* ---------- Schakelaar ---------- */
.hw-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; padding: 8px;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  background: var(--night, #0E0A1C); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45), 0 0 0 0 rgba(255, 154, 60, .5);
  cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s;
}
.hw-toggle:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 154, 60, .2); }
.hw-toggle .hw-pumpkin { width: 34px; }
html:not(.hw) .hw-toggle { background: #12203A; }
html:not(.hw) .hw-toggle .hw-pumpkin { filter: grayscale(1) brightness(1.2); opacity: .7; }
html:not(.hw) .hw-toggle .hw-pumpkin .face { fill: #333; filter: none; animation: none; }
.hw-toggle-tip {
  position: absolute; left: calc(100% + 10px); white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: #0E0A1C; color: #FFF; font: 600 13px/1.2 var(--font-body); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .25s var(--ease-out); pointer-events: none;
}
.hw-toggle:hover .hw-toggle-tip, .hw-toggle:focus-visible .hw-toggle-tip { opacity: 1; transform: none; }

/* ---------- 404 ---------- */
.hw .notfound { position: relative; }
.hw-404-ghost { position: absolute; right: 7%; top: 90px; width: 150px; }
@media (max-width: 1100px) { .hw-404-ghost { display: none; } }
.hw .notfound-code { color: var(--blue); }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 960px) {
  .hw-moon { top: 18px; right: 18px; }
  .hw-peek { display: none; }
  .hw-hint { display: none; }
}
@media (max-width: 700px) {
  .hw-moon { width: 84px; top: 14px; right: 14px; }
  .hw .status { background: rgba(14, 10, 28, .7); }
  .hw-toggle { width: 46px; height: 46px; left: 12px; bottom: 12px; }
  .hw-toggle .hw-pumpkin { width: 28px; }
  .hw-404-ghost { display: none; }
  .hw-witch { width: 52px; top: 82px; }
  .hw-spider { width: 30px; }
  .hw-spider svg { width: 30px; }
  .hw-hero-bat:nth-of-type(n+3) { display: none; }
  .hw-patch { top: -44px; right: 12px; }
}

/* ---------- Minder beweging: alles staat stil, maar de sfeer blijft ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-hero-bat, .hw-cloud, .hw-shooting, .hw-witch, .hw-spider, .hw-hint, .hw-peek, .hw-dangle { display: none !important; }
  .hw-haunt, .hw-beam { display: none; }
  .hw .hero-title .accent::before { display: none; }
  .hw-card-spider { transform: none !important; }
}