/* TheLazyFam Halloween layer. Everything is scoped to #tlf-* / .tlf-* so it can't clash with Elementor or the theme. */
:root{
  --tlf-red:#E5281D; --tlf-cream:#FFF6DC; --tlf-parch:#F4EBCB; --tlf-ink:#141114; --tlf-blood:#D3161B; --tlf-gold:#F2C14E;
  --tlf-display:"Creepster","Impact",fantasy;
  --tlf-comic:"Bangers","Impact","Arial Black",sans-serif;
  --tlf-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ================= CAPE TRANSITION ================= */
/* Not position:fixed. iPhone Safari (iOS 26) and other glass-toolbar browsers crop fixed layers above their bars,
   but draw normal page content underneath them. So the cape is placed in the page itself, at the current scroll
   position, 160px taller than the screen at the top and bottom, and scrolling is frozen while it is on: 0 margins. */
#tlf-robe{position:absolute;top:var(--tlf-top,-160px);left:0;right:0;height:0;z-index:2147483000;pointer-events:none;overflow:hidden;visibility:hidden;touch-action:none;
  --hs:clamp(118px,32vw,190px)}
#tlf-robe *{box-sizing:border-box}
#tlf-robe.tlf-active{visibility:visible;pointer-events:auto}
/* Safari (iOS 15+ and the iOS 26 floating bar) paints the area under its address/tab bars from solid fixed
   backgrounds and the page canvas, not from transformed children. So once the cape is closed the overlay itself
   turns solid and the page canvas turns dark: the bars' area goes dark with it. */
#tlf-robe{transition:background-color .2s}
#tlf-robe.tlf-wrapped,html.tlf-robe-in #tlf-robe{background-color:#0b0a0c}
html.tlf-dark,html.tlf-robe-in{background-color:#0b0a0c}
/* iOS 26 Safari clips fixed layers above its floating bars and shows the page itself in the gaps (top and bottom).
   While the cape is closed the page is made invisible, so those gaps show the dark page background instead.
   The cape and its pieces opt back in with visibility:visible. */
/* (the page's own blocks are hidden, never <body> itself: iPhone Safari won't draw the cape's head and lightning
   inside a hidden body, even when they are set back to visible) */
html.tlf-dark body,html.tlf-robe-in body{background:#0b0a0c!important}
html.tlf-dark body>*:not(#tlf-robe):not(:has(#tlf-robe)),html.tlf-robe-in body>*:not(#tlf-robe):not(:has(#tlf-robe)){visibility:hidden}
html.tlf-robe-in body>*:not(#tlf-robe):not(:has(#tlf-robe)){animation:tlfBodyBack 0s linear 5s forwards}
@keyframes tlfBodyBack{to{visibility:visible}}
/* own compositing layers so Safari always paints them over the swinging cape */
#tlf-robe .tlf-drac,#tlf-robe .tlf-flash,#tlf-robe .tlf-bolt,#tlf-robe .tlf-dwrap{will-change:transform,opacity;transform:translateZ(0)}
#tlf-robe .tlf-drac{transform:translateX(-50%) translateZ(0)}
#tlf-robe .tlf-dim{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .35s}
#tlf-robe .tlf-cape{position:absolute;top:-45vh;height:250vh;width:calc(80vw + 2px);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#tlf-robe .tlf-l{right:50vw;margin-right:-1px;transform-origin:100% 45vh;transform:rotate(100deg)}
#tlf-robe .tlf-r{left:50vw;margin-left:-1px;transform-origin:0 45vh;transform:rotate(-100deg)}
#tlf-robe .tlf-velvet{position:absolute;inset:0;
  background:
    radial-gradient(80% 30% at 70% 48%,rgba(255,255,255,.06),transparent 70%),
    linear-gradient(90deg,#050406 0%,#16131a 6%,#0a090c 11%,#1f1b23 17%,#08070a 23%,#141118 30%,#060508 36%,
      #1c1820 43%,#09080b 50%,#18151c 57%,#070609 63%,#1e1a22 70%,#0b0a0d 77%,#15121a 85%,#08070a 93%,#120f15 100%);}
#tlf-robe .tlf-r .tlf-velvet{transform:scaleX(-1)}
#tlf-robe .tlf-lw{position:absolute;top:45vh;bottom:0;width:clamp(84px,22vw,280px)}
#tlf-robe .tlf-l .tlf-lw{right:0}
#tlf-robe .tlf-r .tlf-lw{left:0;transform:scaleX(-1)}
#tlf-robe .tlf-lining{position:absolute;top:0;bottom:0;right:0;width:100%;clip-path:polygon(100% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(90deg,#3d0005 0%,#8c0912 22%,#e3242c 46%,#ff6a5c 53%,#c8141e 62%,#6e0610 85%,#2a0003 100%)}
#tlf-robe .tlf-lining::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,transparent 35%,rgba(255,220,210,.22) 48%,transparent 60%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 75%,rgba(0,0,0,.3))}

#tlf-robe .tlf-drac{position:absolute;left:50%;top:calc(160px + env(safe-area-inset-top,0px) + clamp(20px,8vh,90px));width:calc(var(--hs)*2.5);transform:translateX(-50%);pointer-events:none;z-index:3}
#tlf-robe .tlf-collar{position:absolute;left:0;right:0;top:calc(var(--hs)*.1);width:100%;height:auto;transform-origin:50% 100%;transform:scaleY(0);opacity:0;filter:brightness(.25)}
#tlf-robe .tlf-clasp{position:absolute;left:50%;top:calc(var(--hs)*1.02);width:calc(var(--hs)*.62);height:auto;transform:translateX(-50%) scale(0);filter:brightness(.3)}
#tlf-robe .tlf-dwrap{position:relative;width:var(--hs);margin:0 auto;opacity:0;transform-origin:50% 60%}
#tlf-robe .tlf-dwrap img{display:block;width:100%;height:auto;max-width:none;margin:0;border:0;filter:brightness(0) drop-shadow(0 0 1px #000)}
#tlf-robe .tlf-vig{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 50% 35%,transparent 35%,rgba(110,0,8,.55) 100%);opacity:0}
#tlf-robe .tlf-fog{position:absolute;left:-20%;right:-20%;bottom:-6%;height:42%;z-index:2;opacity:0;
  background:radial-gradient(40% 50% at 25% 70%,rgba(190,180,200,.28),transparent 70%),radial-gradient(45% 55% at 70% 80%,rgba(170,160,185,.3),transparent 70%),radial-gradient(30% 40% at 50% 95%,rgba(220,210,230,.25),transparent 70%)}
#tlf-robe .tlf-flash{position:absolute;inset:0;z-index:4;background:#e8e6ff;opacity:0;pointer-events:none}
#tlf-robe .tlf-bolt{position:absolute;top:140px;z-index:1;width:clamp(90px,24vw,220px);height:auto;opacity:0;filter:drop-shadow(0 0 14px #b9b5ff)}

/* wrapped (closed) look: used by JS, and by html.tlf-robe-in before JS has started */
#tlf-robe.tlf-wrapped .tlf-dim,html.tlf-robe-in #tlf-robe .tlf-dim{opacity:.35}
#tlf-robe.tlf-wrapped .tlf-collar,html.tlf-robe-in #tlf-robe .tlf-collar{transform:scaleY(1);opacity:1;transition:transform .32s cubic-bezier(.3,1.5,.5,1),opacity .1s}
#tlf-robe.tlf-wrapped .tlf-clasp,html.tlf-robe-in #tlf-robe .tlf-clasp{transform:translateX(-50%) scale(1);transition:transform .26s cubic-bezier(.3,1.9,.5,1) .22s}
#tlf-robe.tlf-wrapped .tlf-dwrap,html.tlf-robe-in #tlf-robe .tlf-dwrap{opacity:1;transition:opacity .25s}
#tlf-robe.tlf-wrapped .tlf-vig,html.tlf-robe-in #tlf-robe .tlf-vig{animation:tlfBeat 1.1s ease-in-out infinite}
#tlf-robe.tlf-wrapped .tlf-fog,html.tlf-robe-in #tlf-robe .tlf-fog{opacity:1;transition:opacity .6s;animation:tlfFog 4s ease-in-out infinite alternate}
/* Dracula stays a black silhouette: the lightning only lights up the collar around him */
#tlf-robe.tlf-lit .tlf-collar,#tlf-robe.tlf-lit .tlf-clasp{filter:none;transition:filter .1s}
#tlf-robe.tlf-lit.tlf-idle .tlf-dwrap{animation:tlfCreep 2.4s ease-in-out infinite}
html.tlf-robe-in #tlf-robe{visibility:visible;pointer-events:auto;animation:tlfSafeHide 0s linear 6s forwards}
#tlf-robe.tlf-active,html.tlf-robe-in #tlf-robe{height:calc(100vh + 320px);height:calc(100lvh + 320px)}
html.tlf-robe-in #tlf-robe .tlf-cape{transform:rotate(0)}
@keyframes tlfSafeHide{to{visibility:hidden}}

@keyframes tlfCreep{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-2.5deg)}60%{transform:translateY(2px) rotate(1.5deg)}}
@keyframes tlfBeat{0%,100%{opacity:.25}12%{opacity:.85}22%{opacity:.35}34%{opacity:.75}55%{opacity:.25}}
@keyframes tlfFog{to{transform:translateX(6%)}}

/* ================= BATS ================= */
.tlf-bat{position:fixed;left:0;top:0;z-index:2147482000;pointer-events:none;width:clamp(72px,19vw,112px);will-change:transform}
.tlf-burst{position:fixed;left:0;top:0;z-index:2147483100;pointer-events:none;width:56px}
.tlf-bat svg,.tlf-burst svg{display:block;width:100%;height:auto;overflow:visible}
.tlf-bat path,.tlf-burst path{fill:#141114}
.tlf-wl,.tlf-wr{animation:tlfFlapL .26s ease-in-out infinite alternate}
.tlf-wl{transform-origin:250px 440px}
.tlf-wr{transform-origin:292px 430px;animation-name:tlfFlapR}
.tlf-bat.tlf-fast .tlf-wl,.tlf-bat.tlf-fast .tlf-wr,.tlf-burst .tlf-wl,.tlf-burst .tlf-wr{animation-duration:.15s}
.tlf-bat .tlf-eye,.tlf-burst .tlf-eye{fill:#ff2a2a}
@keyframes tlfFlapL{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(-.5) rotate(-6deg)}}
@keyframes tlfFlapR{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(-.5) rotate(6deg)}}

/* ================= DRACULA CHAT-HEAD ================= */
/* placed by CSS straight away (side + height remembered by the boot script), then JS takes over for dragging */
#tlf-dh{position:fixed;left:auto;right:10px;top:var(--tlf-dhy,62vh);z-index:2147482200;width:68px;height:68px;margin:0;padding:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html.tlf-dh-l #tlf-dh{left:10px;right:auto}
html.tlf-dh-gone #tlf-dh,html.tlf-dh-gone .tlf-dz,html.tlf-dh-gone .tlf-dz-fade{display:none!important}
#tlf-dh.tlf-js{left:0!important;right:auto!important;top:0!important}
#tlf-dh.tlf-snap{transition:transform .38s cubic-bezier(.3,1.35,.5,1)}
#tlf-dh .tlf-bubble{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3b1520,#140709 70%);border:3px solid var(--tlf-red);box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 2px var(--tlf-ink);transition:transform .18s}
#tlf-dh img{position:absolute;left:50%;top:50%;width:94%;height:auto;max-width:none;margin:0;transform:translate(-50%,-52%);pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
#tlf-dh .tlf-badge{position:absolute;right:-3px;top:-3px;min-width:22px;height:22px;border-radius:11px;background:var(--tlf-gold);color:var(--tlf-ink);border:2px solid var(--tlf-ink);font:400 14px/18px var(--tlf-comic);text-align:center;letter-spacing:.04em;animation:tlfPulse 1.8s infinite}
#tlf-dh.tlf-dragging{cursor:grabbing}
#tlf-dh.tlf-dragging .tlf-bubble{transform:scale(1.08)}
#tlf-dh.tlf-gone{transition:transform .25s ease,opacity .25s ease;opacity:0}
#tlf-dh:focus-visible{outline:3px solid var(--tlf-gold);outline-offset:3px;border-radius:50%}
@keyframes tlfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.tlf-dz-fade{position:fixed;left:0;right:0;bottom:0;height:200px;z-index:2147482100;pointer-events:none;background:linear-gradient(transparent,rgba(10,6,8,.55));opacity:0;transition:opacity .2s}
.tlf-dz{position:fixed;left:50%;bottom:calc(34px + env(safe-area-inset-bottom,0px));z-index:2147482150;width:62px;height:62px;margin-left:-31px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(20,12,16,.55);display:flex;align-items:center;justify-content:center;color:#fff;font:400 26px/1 var(--tlf-body);opacity:0;transform:translateY(30px) scale(.8);transition:opacity .2s,transform .22s cubic-bezier(.3,1.4,.6,1);pointer-events:none}
.tlf-dz.tlf-show,.tlf-dz-fade.tlf-show{opacity:1}
.tlf-dz.tlf-show{transform:translateY(0) scale(1)}
.tlf-dz.tlf-hot{transform:scale(1.28);background:rgba(229,40,29,.85);border-color:#fff}

/* ================= POPUP (poster style) ================= */
#tlf-pop{position:fixed;inset:0;z-index:2147482300;display:flex;align-items:center;justify-content:center;padding:70px 16px 20px;background:rgba(12,6,8,.62);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;font-family:var(--tlf-body);line-height:1.4}
#tlf-pop[hidden]{display:none!important}
#tlf-pop *{box-sizing:border-box}
#tlf-pop.tlf-open{opacity:1;visibility:visible}
#tlf-pop .tlf-poster{position:relative;width:100%;max-width:420px;margin:auto;background:var(--tlf-red);color:var(--tlf-ink);border:4px solid var(--tlf-ink);border-radius:18px;padding:66px 20px 22px;box-shadow:8px 8px 0 var(--tlf-ink);transform:translateY(30px) scale(.94) rotate(-1deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1);text-align:center}
#tlf-pop.tlf-open .tlf-poster{transform:none}
#tlf-pop .tlf-peek{position:absolute;left:50%;top:-62px;width:118px;height:auto;max-width:none;margin:0;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(4px 4px 0 var(--tlf-ink))}
#tlf-pop .tlf-x{position:absolute;right:10px;top:10px;width:36px;height:36px;min-height:0;padding:0;margin:0;border-radius:50%;background:var(--tlf-ink);color:var(--tlf-cream);border:0;cursor:pointer;font:400 18px/36px var(--tlf-body);text-transform:none;box-shadow:none;letter-spacing:0;z-index:2}
#tlf-pop .tlf-ptitle{font-family:var(--tlf-display);font-size:clamp(42px,12vw,58px);line-height:.92;color:var(--tlf-cream);-webkit-text-stroke:2px var(--tlf-ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--tlf-ink);margin:0;padding:0;letter-spacing:.02em;font-weight:400;text-transform:none;text-wrap:balance}
#tlf-pop .tlf-ptag{font-family:var(--tlf-comic);font-size:15px;letter-spacing:.07em;margin:8px 0 16px;padding:0;color:var(--tlf-ink);line-height:1.2}
#tlf-pop .tlf-deco{position:absolute;pointer-events:none;height:auto}
#tlf-pop .tlf-web{right:-2px;top:46px;width:70px;opacity:.9}
#tlf-pop .tlf-star1{left:16px;top:84px;width:16px}
#tlf-pop .tlf-star2{right:26px;bottom:140px;width:12px}
#tlf-pop .tlf-sign{background:var(--tlf-parch);border:3px solid var(--tlf-ink);padding:14px 12px 12px;clip-path:polygon(0 4%,7% 0,22% 3%,40% 0,58% 2%,76% 0,93% 3%,100% 0,99% 30%,100% 62%,98% 100%,80% 97%,60% 100%,41% 97%,20% 100%,3% 97%,0 100%,1% 60%);transform:rotate(1deg)}
#tlf-pop .tlf-on{font-family:var(--tlf-display);font-size:24px;letter-spacing:.06em;line-height:1}
#tlf-pop .tlf-date{font-family:var(--tlf-display);color:var(--tlf-blood);font-size:clamp(48px,14vw,64px);line-height:.95;letter-spacing:.03em}
#tlf-pop .tlf-count{display:flex;justify-content:center;gap:8px;margin-top:8px}
#tlf-pop .tlf-count div{min-width:52px;background:var(--tlf-ink);color:var(--tlf-cream);border-radius:8px;padding:4px 6px 3px}
#tlf-pop .tlf-count b{display:block;font-family:var(--tlf-comic);font-weight:400;font-size:22px;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1.1}
#tlf-pop .tlf-count span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.75}
#tlf-pop .tlf-limited{display:inline-flex;align-items:center;gap:8px;margin:16px 0 4px;background:var(--tlf-ink);color:var(--tlf-gold);font-family:var(--tlf-comic);letter-spacing:.07em;font-size:15px;padding:6px 12px;border-radius:999px;line-height:1.2}
#tlf-pop .tlf-limited-sub{font-size:13px;font-weight:600;margin:4px 0 14px;padding:0;color:var(--tlf-ink)}
#tlf-pop .tlf-pform{display:grid;gap:10px;text-align:left;margin:0}
#tlf-pop .tlf-pform label,#tlf-pop .tlf-wpforms label{font-family:var(--tlf-comic);letter-spacing:.07em;font-size:15px;display:block;margin:0 0 3px;color:var(--tlf-ink);font-weight:400;text-transform:uppercase}
#tlf-pop .tlf-pform input,#tlf-pop .tlf-wpforms input[type=text],#tlf-pop .tlf-wpforms input[type=email]{width:100%;max-width:100%;height:auto;font:500 16px/1.3 var(--tlf-body);padding:11px 12px;margin:0;border:3px solid var(--tlf-ink);border-radius:10px;background:var(--tlf-cream);color:var(--tlf-ink);box-shadow:none;outline:none}
#tlf-pop .tlf-pform input:focus,#tlf-pop .tlf-wpforms input:focus{box-shadow:3px 3px 0 var(--tlf-ink)}
#tlf-pop .tlf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#tlf-pop .tlf-err{color:var(--tlf-cream);background:var(--tlf-ink);font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:6px;margin-top:4px;display:inline-block}
#tlf-pop .tlf-pbtn,#tlf-pop .tlf-wpforms button[type=submit]{display:block;margin:4px 0 0;width:100%;min-height:0;background:var(--tlf-ink);color:var(--tlf-cream);border:3px solid var(--tlf-ink);border-radius:12px;padding:13px;font:400 22px/1 var(--tlf-comic);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--tlf-cream);transition:transform .1s,box-shadow .1s}
#tlf-pop .tlf-pbtn:active,#tlf-pop .tlf-wpforms button[type=submit]:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tlf-cream)}
#tlf-pop .tlf-pbtn[disabled]{opacity:.7;cursor:wait}
#tlf-pop .tlf-wpforms{text-align:left}
#tlf-pop .tlf-wpforms .wpforms-container{margin:0!important}
#tlf-pop .tlf-done{display:grid;gap:8px;justify-items:center;padding:6px 0 4px}
#tlf-pop .tlf-done h3{font-family:var(--tlf-display);font-weight:400;font-size:38px;line-height:1;color:var(--tlf-cream);-webkit-text-stroke:1.5px var(--tlf-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--tlf-ink);margin:6px 0 0;padding:0;text-transform:none}
#tlf-pop .tlf-done p{margin:0;font-weight:600;max-width:30ch;color:var(--tlf-ink)}

.tlf-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--tlf-ink);color:var(--tlf-cream);padding:9px 16px;border-radius:999px;font:600 13.5px/1.3 var(--tlf-body);z-index:2147483200;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
.tlf-toast.tlf-show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .tlf-wl,.tlf-wr,#tlf-dh .tlf-badge{animation:none}
}
