/* ====== GLOBAL SAFETY: keep the page clickable ====== */
/* Everything in the overlay ignores clicks… */
#halloween-overlay,
#halloween-overlay * { pointer-events: none !important; }
/* …except the control UI, which is intentionally interactive */
#halloween-overlay .hallow-ui,
#halloween-overlay .hallow-ui * { pointer-events: auto !important; }
/* Avoid invisible hit areas */
.hallow-ui { width: max-content; height: max-content; isolation: isolate; }

/* ====== Optional brand accents (used by your site styles) ====== */
:root{
  --season-accent: #ff7a18;      /* pumpkin */
  --season-accent-2: #7e3ff2;    /* eerie violet */
  --season-text: #f8f6ff;
  --hallow-ui-gap: 12px;         /* control margin to edges/safe-areas */
}

/* Gentle accent for common buttons (scoped by html.halloween) */
html.halloween .btn{
  background: var(--season-accent) !important;
  border-color: transparent !important;
  color: #120b16 !important;
}

/* ====== STATIC SCENE LAYERS (no vignette) ====== */
#halloween-overlay{ position: fixed; inset: 0; z-index: 50; overflow: hidden; }

/* Twinkling stars (cheap CSS) */
.hallow-stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.8) 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.8) 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.8) 50%, transparent 51%) repeat;
  background-size: 220px 220px, 260px 260px, 200px 200px;
  opacity:.22; animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from{opacity:.12} to{opacity:.32} }

/* Moon */
.hallow-moon{
  position:absolute; top:6vh; right:6vw; width:70px; height:70px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffe9c7 40%, #ffcf84 65%, rgba(255,140,64,.25) 100%);
  box-shadow: 0 0 30px rgba(255,200,120,.35); opacity:.9;
}
@media (min-width:768px){ .hallow-moon{ width:92px; height:92px; } }

/* Minimal skyline silhouette at the bottom */
.hallow-skyline{
  position:absolute; left:0; right:0; bottom:0; height:12vh; opacity:.28;
  background:
    linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 70%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0 100 L80 88 L120 92 L180 70 L240 80 L300 60 L360 72 L420 68 L480 76 L540 60 L600 82 L660 74 L720 88 L780 66 L840 76 L900 58 L960 80 L1020 72 L1080 90 L1140 76 L1200 86 L1200 120 L0 120 Z" fill="%23000000"/></svg>') repeat-x bottom/600px 120px;
}

/* Keep hero copy legible on mobiles without borders */
@media (max-width:768px){
  .hero-title, .hero-subtitle{
    background: rgba(0,0,0,.22);
    padding: .2em .48em;
    border-radius: .4em;
  }
}

/* ====== 🎃 CONTROL UI ====== */
.hallow-ui{ position: fixed; z-index: 60; }

/* Mobile default: bottom-left, panel opens upward */
@media (max-width:768px){
  .hallow-ui{
    top:auto; right:auto;
    bottom: calc(var(--hallow-ui-gap) + env(safe-area-inset-bottom));
    left:   calc(var(--hallow-ui-gap) + env(safe-area-inset-left));
  }
  .hallow-panel{ position:absolute; bottom:56px; left:0; }
}
/* Desktop default: top-right */
@media (min-width:769px){
  .hallow-ui{
    top:  calc(var(--hallow-ui-gap) + env(safe-area-inset-top));
    right:calc(var(--hallow-ui-gap) + env(safe-area-inset-right));
    bottom:auto; left:auto;
  }
  .hallow-panel{ position:absolute; top:50px; right:0; }
}

.hallow-btn{
  width:42px; height:42px; border-radius:9999px;
  display:grid; place-items:center; font-size:20px;
  background:#1a1a1a; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  border: none;
}

.hallow-panel{
  margin-top:8px; background:#111; color:#eee; border-radius:12px; padding:10px 12px;
  width: 230px;
  font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:none;
}
.hallow-panel input[type="range"]{ width:100% }
.hallow-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:.45rem 0; }
.hallow-panel label{ opacity:.9 }

/* Optional: hide the control on ultra-small screens */

@media (max-width:360px){
  .hallow-ui{ display:none; }
}

/* Seasonal studio redesign, v2.6 */
html.halloween .seasonal-banner--halloween {position:relative;padding:14px 42px;background:linear-gradient(110deg,#211923,#4a3040 58%,#734d3d);color:#fff4e8;text-align:center;border-bottom:1px solid #d9a778;letter-spacing:.02em}
html.halloween .seasonal-banner--halloween .wrap {display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap}
html.halloween .seasonal-banner--halloween strong {font:normal 1.12em Georgia,serif}
html.halloween .seasonal-banner--halloween:before,html.halloween .seasonal-banner--halloween:after {content:'✦';position:absolute;top:50%;transform:translateY(-50%);color:#e4b882}
html.halloween .seasonal-banner--halloween:before {left:5vw} html.halloween .seasonal-banner--halloween:after {right:5vw}
html.halloween section[style*="hero.jpg"] {isolation:isolate}
html.halloween section[style*="hero.jpg"]:after {content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,#21162460,transparent 70%),radial-gradient(circle at 80% 20%,#e8a26a33,transparent 35%)}
html.halloween section[style*="hero.jpg"]>.z-10 {position:relative}
html.halloween section[style*="hero.jpg"] h1 {font-family:Georgia,serif;font-weight:normal;text-shadow:0 3px 20px #0009}
html.halloween section[style*="hero.jpg"] a.bg-outline {background:#88543d;border:1px solid #edc59e;box-shadow:0 8px 26px #21162466}
html.halloween .hallow-stars {opacity:.22;background-image:radial-gradient(circle,#ffe2b6 1px,transparent 2px);background-size:90px 90px;mask-image:linear-gradient(#000,transparent 75%)}
html.halloween .hallow-moon {top:12vh;right:8vw;opacity:.65;box-shadow:0 0 36px 12px #e6a46d55}
html.halloween .hallow-skyline {height:15vh;opacity:.5;background:linear-gradient(to top,#452f3a44,transparent)}
html.halloween .hallow-btn {background:#362533;border:1px solid #e7b98e;cursor:pointer}
html.halloween .hallow-panel {background:#30212d;border:1px solid #bd9277;color:#fff5ea;border-radius:16px}
html.halloween .hallow-panel input {accent-color:#d9945a}
html.halloween .hallow-btn:focus-visible,html.halloween .hallow-panel input:focus-visible {outline:2px solid #ffd89c;outline-offset:3px}
@media(max-width:600px){html.halloween .seasonal-banner--halloween{font-size:13px}html.halloween .hallow-moon{opacity:.38}}
@media(prefers-reduced-motion:reduce){html.halloween .hallow-stars{animation:none}}
html.halloween .btn {background:#88543d !important;color:#fff5ea !important;border-color:#edc59e !important}
/* Studio scene artwork: intentionally attached to the actual hero photo. */
html.halloween section[style*="hero.jpg"] {background-color:#543442;background-blend-mode:multiply}
html.halloween section[style*="hero.jpg"] > .absolute.inset-0 {background:linear-gradient(110deg,#23182199,#2b1c2866 48%,#5f382e77) !important;opacity:1}
html.halloween section[style*="hero.jpg"]::after {background:radial-gradient(ellipse at 68% 12%,#e29b6655,transparent 44%),linear-gradient(to top,#291a2c88,transparent 48%)}
html.halloween .season-scene {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
html.halloween .hallow-edge-pumpkin {position:absolute;bottom:-17px;width:clamp(92px,14vw,210px);aspect-ratio:1.18;border-radius:46% 46% 44% 44%;background:radial-gradient(ellipse at 34% 40%,#e3a368,#a55e42 63%,#593a3b);box-shadow:inset 18px 0 22px #f3b17b44,inset -19px 0 23px #45262b77,0 8px 45px #e9a36c66;opacity:.82;filter:blur(.2px);animation:hallowPumpkinReveal 1s ease-out both}
html.halloween .hallow-edge-pumpkin::before {content:'';position:absolute;width:12%;height:18%;top:-9%;left:45%;border-radius:50% 18% 20% 0;background:#4f5c3f;transform:rotate(18deg)}
html.halloween .hallow-edge-pumpkin::after {content:'';position:absolute;inset:22% 24% 20%;background:#34252d;clip-path:polygon(7% 23%,29% 9%,43% 35%,65% 8%,91% 25%,74% 47%,95% 63%,72% 82%,50% 73%,26% 85%,6% 64%,27% 47%);opacity:.64;filter:drop-shadow(0 0 6px #ffbf78)}
html.halloween .hallow-edge-pumpkin--left {left:-3%;transform:rotate(-12deg)}
html.halloween .hallow-edge-pumpkin--right {right:-3%;width:clamp(74px,11vw,155px);transform:rotate(12deg);animation-delay:.14s}
html.halloween .hallow-bat {background:#241b2a;clip-path:polygon(50% 27%,59% 0,65% 29%,100% 20%,87% 45%,93% 68%,67% 58%,50% 77%,33% 58%,7% 68%,13% 45%,0 20%,35% 29%,41% 0);filter:drop-shadow(0 2px 3px #140d18)}
html.halloween .hallow-ghost-surprise {position:absolute;right:18%;bottom:22%;font-size:clamp(30px,4vw,54px);opacity:0;filter:drop-shadow(0 0 17px #fff2db);transform:translateY(20px)}
html.halloween .hallow-ghost-surprise.is-revealed {animation:hallowGhost 1.8s ease-out both}
@keyframes hallowPumpkinReveal {from {opacity:0;translate:0 28px}to {opacity:.82;translate:0 0}}
@keyframes hallowGhost {0%{opacity:0;transform:translateY(24px) rotate(-8deg)}20%,65%{opacity:.9}100%{opacity:0;transform:translateY(-80px) rotate(8deg)}}
html.halloween section[style*="hero.jpg"] h1 {animation:hallowTitleReveal .85s ease-out both}
@keyframes hallowTitleReveal {from {opacity:0;transform:translateY(10px);letter-spacing:.05em}to {opacity:1;transform:none;letter-spacing:normal}}
html.halloween .hallow-ui {display:block !important}
@media(max-width:600px){html.halloween .hallow-edge-pumpkin--left{left:-28px;bottom:-8px}html.halloween .hallow-edge-pumpkin--right{right:-25px;bottom:-5px}html.halloween .hallow-ghost-surprise{right:8%;bottom:17%}}
@media(prefers-reduced-motion:reduce){html.halloween .hallow-edge-pumpkin,html.halloween section[style*="hero.jpg"] h1,html.halloween .hallow-ghost-surprise{animation:none !important}html.halloween .hallow-ghost-surprise{display:none}}
html.halloween .effects-paused .hallow-ghost-surprise,html.halloween .effects-paused .hallow-edge-pumpkin {animation:none !important}
/* Final balance after local desktop render: preserve detail in the studio photograph. */
html.halloween section[style*="hero.jpg"] {background-color:#ad7775;background-blend-mode:soft-light}
html.halloween section[style*="hero.jpg"] > .absolute.inset-0 {background:linear-gradient(110deg,#23182180,#2b1c2840 48%,#5f382e55) !important}
html.halloween .hallow-moon {top:clamp(235px,29vh,320px);right:7vw}
html.halloween .hallow-ghost-surprise {width:clamp(34px,4vw,56px);height:clamp(44px,5vw,70px);border-radius:50% 50% 5% 5%;background:#fff2e4;clip-path:polygon(0 27%,8% 12%,25% 2%,50% 0,75% 2%,92% 12%,100% 27%,100% 100%,82% 88%,66% 100%,50% 88%,34% 100%,18% 88%,0 100%)}
html.halloween .hallow-ghost-surprise::before {content:'';position:absolute;left:24%;top:39%;width:13%;height:12%;border-radius:50%;background:#413143;box-shadow:22px 0 #413143}
@media(max-width:600px){html.halloween .hallow-moon{top:30vh}}
html.halloween .hallow-ui {top:auto !important;right:auto !important;bottom:calc(14px + env(safe-area-inset-bottom)) !important;left:calc(14px + env(safe-area-inset-left)) !important}
html.halloween .hallow-panel {top:auto !important;right:auto !important;bottom:54px !important;left:0 !important}
html.halloween #halloween-overlay.effects-paused .hallow-stars {animation:none !important}