/* Halloween theme: ambient bats, floating bubbles, and edge ink spots */
:root{
  --hallow-orange:#ff6a00;
  --hallow-purple:#5e2b97;
  --hallow-black:#0b0f13;
  --hallow-green:#00d18f;
}

/* Scroll-bound scene wrapper */
.hallow-scene{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:12; overflow:visible; }


/* Pumpkins (jack-o'-lanterns) */
.hallow-pumpkins{ position:absolute; inset:0; pointer-events:none; z-index:14; }
.pumpkin{ position:absolute; pointer-events:auto; cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:none; width:var(--size,56px); height:calc(var(--size,56px)*.78); border-radius:50%/60%;
  background:
    /* edge vignette */ radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,.35), transparent 55%),
    /* highlight */ radial-gradient(80% 60% at 30% 40%, rgba(255,255,255,.18), transparent 60%),
    /* grooves */ repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, rgba(0,0,0,0) 2px 10px),
    /* body */ linear-gradient(90deg, #b44500 0 10%, #ff7a18 50%, #b44500 90%);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 18px rgba(0,0,0,.25), inset 8px 0 12px rgba(255,255,255,.06);
  transform: translate(-50%, -50%);
}
.pumpkin.dragging{ cursor:grabbing; filter:saturate(1.2) brightness(1.05); }
.pumpkin.purple{ background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,.35), transparent 55%), radial-gradient(80% 60% at 30% 40%, rgba(255,255,255,.14), transparent 60%), linear-gradient(90deg, #3e1977 0 10%, #7c4bd1 50%, #3e1977 90%); }
.pumpkin.green{ background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,.35), transparent 55%), radial-gradient(80% 60% at 30% 40%, rgba(255,255,255,.14), transparent 60%), linear-gradient(90deg, #0c6a4f 0 10%, #00d18f 50%, #0c6a4f 90%); }
.pumpkin:before{ content:''; position:absolute; top:-14%; left:50%; width:14%; height:26%; transform:translateX(-50%) rotate(8deg); background:linear-gradient(90deg,#2f5b17,#4d8f2a); border-radius:30% 30% 50% 50%; box-shadow:0 2px 2px rgba(0,0,0,.25); }
.pumpkin .face{ position:absolute; inset:0; display:block; }
.pumpkin .face{ transform: rotate(var(--face-tilt, 0deg)); }
.pumpkin .face svg{ width:100%; height:100%; }
.pumpkin .face .glow{ fill: #ffea61; filter: drop-shadow(0 0 10px rgba(255,230,120,.85)) drop-shadow(0 0 16px rgba(255,190,60,.45)); animation: flicker 2.6s infinite steps(2); opacity:.95; }
.pumpkin .face .candle{ filter: drop-shadow(0 0 2px rgba(255,240,200,.6)); }
.pumpkin .face .flame{ transform-origin:50% 50%; animation: flameFlicker 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255,200,60,.75)); }
@keyframes flameFlicker{ 0%{ transform: translateY(0) scale(1); opacity:.95 } 50%{ transform: translateY(-0.4px) scale(1.08); opacity:.8 } 100%{ transform: translateY(0) scale(1); opacity:.95 } }
.pumpkin .face .cut{ fill: #000; }
@keyframes flicker{ 0%,19%,21%,23%,80%,100%{ opacity:.95 } 20%,22%,24%{ opacity:.65 } }

/* Bats – positions updated via JS */
.hallow-bats{ position:absolute; inset:0; pointer-events:none; z-index:25; }
.hallow-bat{ position:absolute; width:48px; height:24px; will-change: transform; opacity:.95; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); transform: translate(-50%,-50%); pointer-events:auto; cursor:grab; }
.hallow-bat.dragging{ cursor:grabbing; }
.hallow-bat svg{ width:100%; height:100%; fill:var(--hallow-black); }

/* Webs */
.hallow-web{ position:absolute; inset:0; pointer-events:none; z-index:20; }
.hallow-web .corner{ position:absolute; width:28vmin; height:auto; opacity:.24; }
.hallow-web .top-right{ top:-2vmin; right:-2vmin; transform:rotate(-6deg); }
.hallow-web .top-left{ top:-2vmin; left:-2vmin; transform:rotate(6deg); }
.hallow-web svg{ width:100%; height:auto; stroke:#ffffff; stroke-opacity:.8; fill:none; stroke-width:1.2; }

/* Spiders */
.hallow-spiders{ position:absolute; inset:0; pointer-events:none; z-index:24; }
.spider{ position:absolute; width:16px; height:16px; transform: translate(-50%,-50%); pointer-events:auto; cursor:grab; }
.spider.dragging{ cursor:grabbing; }
.spider .body{ width:100%; height:100%; background:#111; border-radius:50%; box-shadow: inset 0 -2px 3px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.4); }
.spider .eyes{ position:absolute; top:40%; left:50%; width:8px; height:4px; transform:translate(-50%,-50%); display:flex; gap:2px; }
.spider .eyes span{ width:3px; height:3px; background:#fff; border-radius:50%; box-shadow:0 0 4px rgba(255,255,255,.8); }
.spider .silk{ position:absolute; width:1px; background:rgba(255,255,255,.55); left:50%; transform:translateX(-0.5px); bottom:50%; height:0; }
/* 8 legs with alternating gait */
.spider .legs{ position:absolute; inset:0; }
.spider .leg{ position:absolute; width:12px; height:2px; background:#222; top:50%; left:50%; transform-origin:0% 50%; opacity:.95; box-shadow: 0 0 2px rgba(0,0,0,.6); transform: translate(-50%,-50%) scaleX(var(--sx,1)) rotate(var(--rot, 0deg)); }
.spider .leg:after{ content:""; position:absolute; left:100%; top:50%; width:10px; height:2px; background:#222; transform-origin:0% 50%; transform: rotate(20deg); }
/* Left legs l1..l4 */
.spider .l1{ --rot:-160deg; animation:leg 0.8s ease-in-out infinite alternate; }
.spider .l2{ --rot:-135deg; animation:leg 0.8s ease-in-out infinite alternate .1s; }
.spider .l3{ --rot:-115deg; animation:leg 0.8s ease-in-out infinite alternate .2s; }
.spider .l4{ --rot:-95deg;  animation:leg 0.8s ease-in-out infinite alternate .3s; }
/* Right legs r1..r4 */
.spider .r1{ --sx:-1; --rot:160deg;  animation:leg 0.8s ease-in-out infinite alternate .4s; }
.spider .r2{ --sx:-1; --rot:135deg;  animation:leg 0.8s ease-in-out infinite alternate .5s; }
.spider .r3{ --sx:-1; --rot:115deg;  animation:leg 0.8s ease-in-out infinite alternate .6s; }
.spider .r4{ --sx:-1; --rot:95deg;   animation:leg 0.8s ease-in-out infinite alternate .7s; }
@keyframes leg{ from{ transform: translate(-50%,-50%) scaleX(var(--sx,1)) rotate(var(--rot,0deg)); } to{ transform: translate(-50%,-50%) scaleX(var(--sx,1)) rotate(calc(var(--rot,0deg) + 16deg)); } }

/* Coffin & vampire */
.hallow-coffin{ position:absolute; width:90px; height:auto; z-index:22; pointer-events:auto; cursor:grab; transform: translateZ(0) rotate(var(--drag-tilt, 0deg)); transition: transform .08s linear; }
.hallow-coffin.dragging{ cursor:grabbing; }
.hallow-coffin .coffin{ position:relative; width:100%; height:auto; }
.hallow-coffin .coffin-base{ width:100%; height:auto; display:block; }
.hallow-coffin .coffin-lid{ position:absolute; left:8%; top:-2%; width:84%; height:auto; transform-origin:8% 12%; transform: rotate(0deg); transition: transform .8s cubic-bezier(.22,.61,.36,1); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.hallow-coffin.open .coffin-lid{ transform: rotate(-70deg); }
.hallow-coffin .vampire{ position:absolute; left:50%; bottom:18%; width:34px; height:36px; transform:translate(-50%, 100%); transition: transform .6s ease; }
.hallow-coffin.awake .vampire{ transform:translate(-50%, 0); }
.hallow-coffin svg{ width:100%; height:auto; }

/* Subtle page tint */
.hallow-tint{ position:absolute; inset:0; pointer-events:none; z-index:10; background: radial-gradient(120vmax 80vmax at 10% -10%, rgba(94,43,151,.05), transparent 50%), radial-gradient(120vmax 80vmax at 110% 110%, rgba(255,106,0,.06), transparent 50%); }
/* Keep site interactive: raise header/nav over tint if needed */
header, .ed-menu { position: relative; z-index: 30; }
/* Ensure top UI like book viewer and buttons remain above Halloween visuals */
#open-installation-book, .viewer-overlay, .viewer, .modal, .modal-backdrop { position: relative; z-index: 50; }
/* Prevent pumpkins/bats from intercepting clicks over key UI elements */
#open-installation-book, .viewer-overlay, .viewer, .modal, .modal-backdrop, .ed-container .boxes-box-inner, .welcome-bubble, #services-2, #packages, #ed-hero-install-card { pointer-events:auto; }

/* Respect existing layout stacking; no interference with content */

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hallow-bubbles .bubble, .hallow-bat{ animation: none !important; }
}

/* Top-right badge for the Welcome bubble: graffiti WOW style */
.hallow-badge{ position:absolute; pointer-events:none; z-index:26; transform: rotate(-3deg); filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.hallow-badge *{ pointer-events:none; }
.hallow-badge .burst{ position:absolute; inset:-8px -10px -10px -8px; transform: scale(.6); opacity:.96; }
.hallow-badge .burst svg{ width:380px; height:auto; display:block; }
.hallow-badge .txt{ position:relative; padding:.35rem .6rem; font-family: "Bangers", Impact, "Anton", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; letter-spacing:.02em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hallow-badge .txt span{ font-size:24px; line-height:1; color:#fff; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0 0 12px rgba(255,255,255,.35); transform: skewX(-6deg); }
.hallow-badge .txt em{ font-size:34px; line-height:1; color:#111; -webkit-text-stroke: 3px #000; text-shadow: 0 0 12px rgba(255,255,255,.35); font-style:normal; background: linear-gradient(180deg,#ffed72,#ff9c40); -webkit-background-clip: text; background-clip:text; color:transparent; transform: skewX(-6deg); margin-top:2px; }
.hallow-badge:after{ content:""; position:absolute; inset:-14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6a00'/%3E%3Cstop offset='1' stop-color='%235e2b97'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='6' opacity='.3'%3E%3Cpath d='M0 12 l60 12 l60 -12 l60 12 l60 -12 l60 12 l60 -12'/%3E%3Cpath d='M-20 84 l60 12 l60 -12 l60 12 l60 -12 l60 12 l60 -12'/%3E%3Cpath d='M-10 150 l60 12 l60 -12 l60 12 l60 -12 l60 12 l60 -12'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat; opacity:.18; filter: blur(2px); pointer-events:none; }

/* Wand visual shown near pointer during castle/coffin drag */
.hallow-wand{ position:absolute; width:24px; height:24px; pointer-events:none; z-index:40; display:none; transform: translate(-50%,-50%); }
.hallow-wand:before{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; background: radial-gradient(circle, #fff, rgba(255,255,255,.6)); border-radius:50%; transform: translate(-50%,-50%); box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 28px rgba(255,180,80,.8); animation: sparkle 1.2s ease-in-out infinite; }
.hallow-wand:after{ content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; border:2px solid rgba(255,255,255,.6); border-radius:50%; transform: translate(-50%,-50%); animation: ripple 1.2s ease-out infinite; }
@keyframes sparkle{ 0%,100%{ transform: translate(-50%,-50%) scale(1); opacity:1 } 50%{ transform: translate(-50%,-58%) scale(1.15); opacity:.8 } }
@keyframes ripple{ 0%{ transform: translate(-50%,-50%) scale(.6); opacity:.55 } 100%{ transform: translate(-50%,-50%) scale(1.6); opacity:0 } }

/* Dracula castle with rising smog */
.hallow-castle{ position:absolute; left:1.8vmin; width:160px; pointer-events:auto; z-index:21; cursor:grab; transform: translateZ(0) rotate(var(--drag-tilt, 0deg)); transition: transform .08s linear; }
.hallow-castle.dragging{ cursor:grabbing; }
.hallow-castle .castle{ width:100%; height:auto; display:block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.hallow-castle .smog{ position:absolute; left:20%; bottom:60%; width:60%; height:40%; pointer-events:none; overflow:visible; }
.hallow-castle .smoke{ position:absolute; bottom:0; left:50%; width:22px; height:22px; border-radius:50%; background: radial-gradient(circle, rgba(200,200,200,.45), rgba(200,200,200,.08)); transform:translateX(-50%); animation: puff 5.5s linear infinite; }
.hallow-castle .smoke.s2{ width:28px; height:28px; left:60%; animation-duration: 6.5s; animation-delay: .8s; }
.hallow-castle .smoke.s3{ width:18px; height:18px; left:40%; animation-duration: 4.8s; animation-delay: 1.3s; }
@keyframes puff{ 0%{ opacity:.0; transform: translate(-50%, 10px) scale(.6); } 20%{ opacity:.6 } 60%{ opacity:.35 } 100%{ opacity:0; transform: translate(-50%, -140px) scale(1.4); } }