/* Halloween 2025 — Cinematic decorations */

.halloween-layer{
  position:fixed;inset:0;pointer-events:none;z-index:18;overflow:hidden;
  contain:strict;isolation:isolate;
  background:radial-gradient(ellipse at 50% 50%,
    transparent 30%,
    rgba(20,10,40,.15) 60%,
    rgba(8,4,18,.45) 100%);
}
.halloween-layer[hidden]{display:none!important}

/* ===== STARS ===== */
.halloween-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.85),transparent 50%),
    radial-gradient(1px 1px at 27% 8%,rgba(255,240,200,.75),transparent 50%),
    radial-gradient(1px 1px at 43% 14%,rgba(255,255,255,.6),transparent 50%),
    radial-gradient(1px 1px at 61% 6%,rgba(255,220,180,.7),transparent 50%),
    radial-gradient(1px 1px at 78% 20%,rgba(255,255,255,.55),transparent 50%),
    radial-gradient(1px 1px at 88% 10%,rgba(255,240,200,.65),transparent 50%),
    radial-gradient(1px 1px at 5% 35%,rgba(255,255,255,.4),transparent 50%),
    radial-gradient(1px 1px at 93% 32%,rgba(255,255,255,.55),transparent 50%),
    radial-gradient(1px 1px at 33% 25%,rgba(255,255,255,.45),transparent 50%),
    radial-gradient(1px 1px at 67% 28%,rgba(255,255,255,.5),transparent 50%);
  animation:stars-twinkle 6s ease-in-out infinite alternate;
}
@keyframes stars-twinkle{0%{opacity:.65}100%{opacity:1}}

/* ===== MOON (cinematic) ===== */
.halloween-moon{
  position:absolute;top:5vh;right:6vw;width:150px;height:150px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fffbe6 0%,#ffe0a3 32%,#ffc55c 68%,#e89b3c 90%,#b5651d 100%);
  box-shadow:
    inset -14px -16px 34px rgba(120,60,10,.45),
    inset 10px 12px 24px rgba(255,250,200,.55),
    0 0 70px 22px rgba(255,210,120,.42),
    0 0 160px 60px rgba(255,160,60,.22),
    0 0 240px 100px rgba(180,100,40,.12);
  animation:moon-breathe 8s ease-in-out infinite;
}
.halloween-moon::before,.halloween-moon::after{
  content:"";position:absolute;border-radius:50%;
  background:rgba(140,80,20,.18);
}
.halloween-moon::before{
  width:24px;height:24px;top:28%;left:26%;
  box-shadow:
    26px -8px 0 3px rgba(140,80,20,.14),
    34px 30px 0 -3px rgba(140,80,20,.16),
    50px -2px 0 -1px rgba(140,80,20,.12);
}
.halloween-moon::after{
  width:15px;height:15px;top:64%;left:52%;
  box-shadow:
    -30px -14px 0 -2px rgba(140,80,20,.14),
    -38px 10px 0 -3px rgba(140,80,20,.12),
    22px 12px 0 -3px rgba(140,80,20,.13);
}
@keyframes moon-breathe{
  0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 30px rgba(255,190,100,.5))}
  50%{transform:scale(1.02);filter:brightness(1.06) drop-shadow(0 0 50px rgba(255,200,120,.7))}
}

/* ===== TREELINE SILHOUETTE ===== */
.halloween-treeline{
  position:absolute;bottom:-10px;left:0;right:0;height:340px;
  filter:drop-shadow(0 -24px 50px rgba(8,3,20,.9));
}
.halloween-treeline svg{width:100%;height:100%;display:block}

/* ===== FOG — 3 LAYERS PARALLAX ===== */
.halloween-fog{
  position:absolute;left:-15%;right:-15%;bottom:-120px;height:65vh;
  background:
    radial-gradient(ellipse at 25% 100%,rgba(124,58,237,.42),transparent 65%),
    radial-gradient(ellipse at 50% 95%,rgba(255,107,26,.22),transparent 60%),
    radial-gradient(ellipse at 78% 100%,rgba(124,58,237,.32),transparent 65%);
  filter:blur(22px);
  animation:fog-a 30s ease-in-out infinite alternate;
}
.halloween-fog-2{
  position:absolute;left:-20%;right:-20%;bottom:-90px;height:55vh;
  background:
    radial-gradient(ellipse at 15% 100%,rgba(168,85,247,.30),transparent 60%),
    radial-gradient(ellipse at 65% 100%,rgba(255,140,60,.26),transparent 55%),
    radial-gradient(ellipse at 92% 100%,rgba(168,85,247,.30),transparent 60%);
  filter:blur(30px);
  animation:fog-b 40s ease-in-out infinite alternate;
}
.halloween-fog-3{
  position:absolute;left:-25%;right:-25%;bottom:-70px;height:42vh;
  background:
    radial-gradient(ellipse at 40% 100%,rgba(88,28,135,.28),transparent 65%),
    radial-gradient(ellipse at 80% 100%,rgba(220,90,30,.20),transparent 60%);
  filter:blur(40px);
  animation:fog-c 50s ease-in-out infinite alternate;
}
@keyframes fog-a{0%{transform:translateX(-4%) translateY(0)}100%{transform:translateX(4%) translateY(-10px)}}
@keyframes fog-b{0%{transform:translateX(3%) translateY(0)}100%{transform:translateX(-3%) translateY(-8px)}}
@keyframes fog-c{0%{transform:translateX(-2%) translateY(0)}100%{transform:translateX(2%) translateY(-12px)}}

/* ===== CORNER WEBS ===== */
.halloween-web{
  position:absolute;width:170px;height:170px;opacity:.32;color:#e0d5f0;
  filter:drop-shadow(0 0 3px rgba(200,180,240,.4));
}
.halloween-web--tl{top:-4px;left:-4px}
.halloween-web--tr{top:-4px;right:-4px;transform:scaleX(-1)}
.halloween-web svg{width:100%;height:100%;display:block}

/* ===== PUMPKINS (with face glow flicker) ===== */
.halloween-pumpkin{
  position:absolute;bottom:44px;width:118px;height:118px;
  filter:drop-shadow(0 10px 34px rgba(255,107,26,.6));
  animation:pumpkin-bob 5s ease-in-out infinite;
}
.halloween-pumpkin--left{left:3vw}
.halloween-pumpkin--right{right:3vw;animation-delay:-2.5s}
.halloween-pumpkin svg{width:100%;height:100%;display:block;overflow:visible}
.halloween-pumpkin .pumpkin-face{animation:face-flicker 3.2s steps(8) infinite}
@keyframes face-flicker{
  0%,100%{opacity:1}
  45%{opacity:.8}
  70%{opacity:.95}
}
@keyframes pumpkin-bob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
}

/* ===== GHOSTS ===== */
.halloween-ghost{
  position:absolute;left:-180px;width:96px;height:140px;color:#e8e3f5;
  filter:drop-shadow(0 0 22px rgba(220,200,255,.65));
  animation:ghost-fly var(--ghost-dur,24s) linear 0s 1 forwards;
  opacity:0;will-change:transform,opacity;
}
.halloween-ghost svg{width:100%;height:100%;display:block}
@keyframes ghost-fly{
  0%{transform:translateX(0) translateY(0);opacity:0}
  8%{opacity:.72}
  25%{transform:translateX(28vw) translateY(-34px)}
  50%{transform:translateX(52vw) translateY(22px)}
  75%{transform:translateX(78vw) translateY(-28px)}
  92%{opacity:.65}
  100%{transform:translateX(115vw) translateY(-12px);opacity:0}
}

/* ===== BATS (wing flap) ===== */
.halloween-bat{
  position:absolute;top:var(--bat-top,20%);left:-100px;
  width:var(--bat-size,60px);height:calc(var(--bat-size,60px) * .42);
  color:#0a0612;
  filter:drop-shadow(0 0 10px rgba(255,100,30,.45));
  animation:bat-fly var(--bat-dur,16s) linear 0s 1 forwards;
  opacity:0;will-change:transform,opacity;
}
.halloween-bat svg{
  width:100%;height:100%;display:block;
  transform-origin:center top;
  animation:bat-flap .32s ease-in-out infinite alternate;
}
.halloween-bat svg path{fill:currentColor}
@keyframes bat-flap{
  from{transform:scaleY(1)}
  to{transform:scaleY(.6)}
}
@keyframes bat-fly{
  0%{transform:translateX(0) translateY(0) rotate(0);opacity:0}
  4%{opacity:1}
  20%{transform:translateX(22vw) translateY(-30px) rotate(-5deg)}
  40%{transform:translateX(44vw) translateY(14px) rotate(4deg)}
  60%{transform:translateX(66vw) translateY(-20px) rotate(-3deg)}
  80%{transform:translateX(88vw) translateY(10px) rotate(2deg)}
  94%{opacity:1}
  100%{transform:translateX(120vw) translateY(-6px) rotate(0);opacity:0}
}

/* ===== SPIDER ===== */
.halloween-spider{
  position:absolute;top:-20px;left:var(--spider-left,60%);
  display:flex;flex-direction:column;align-items:center;
  animation:spider-drop var(--spider-dur,14s) ease-in-out 0s 1 forwards;
  opacity:0;
}
.halloween-spider-thread{
  width:1px;height:var(--spider-thread,140px);
  background:linear-gradient(to bottom,transparent,rgba(230,220,255,.5));
  box-shadow:0 0 2px rgba(200,180,240,.6);
}
.halloween-spider-body{
  width:30px;height:30px;color:#14081e;margin-top:-2px;
  filter:drop-shadow(0 0 6px rgba(255,60,60,.55));
  animation:spider-sway 3s ease-in-out infinite;
}
.halloween-spider-body svg{display:block;width:100%;height:100%}
@keyframes spider-drop{
  0%{transform:translateY(-100%);opacity:0}
  8%{opacity:1}
  35%{transform:translateY(var(--spider-travel,200px))}
  65%{transform:translateY(var(--spider-travel,200px))}
  92%{opacity:1}
  100%{transform:translateY(-100%);opacity:0}
}
@keyframes spider-sway{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}

/* ===== EMBERS ===== */
.halloween-ember{
  position:absolute;bottom:0;left:var(--ember-left,30%);
  width:var(--ember-size,6px);height:var(--ember-size,6px);border-radius:50%;
  background:radial-gradient(circle,#ffe4a8,var(--ember-color,#ff6b1a) 60%,transparent 78%);
  box-shadow:0 0 var(--ember-glow,10px) var(--ember-color,#ff6b1a);
  animation:ember-rise var(--ember-dur,12s) linear 0s 1 forwards;
  opacity:0;will-change:transform,opacity;
}
@keyframes ember-rise{
  0%{transform:translateY(0) translateX(0) scale(.4);opacity:0}
  12%{opacity:1}
  85%{opacity:.85}
  100%{transform:translateY(-100vh) translateX(var(--ember-drift,40px)) scale(.15);opacity:0}
}

/* ===== LIGHTNING (rare, subtle) ===== */
.halloween-lightning{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at var(--lightning-x,70%) -10%,rgba(220,210,255,.85),transparent 55%);
  opacity:0;
  animation:lightning-flash var(--lightning-dur,.6s) ease-out 0s 1 forwards;
}
@keyframes lightning-flash{
  0%{opacity:0}
  8%{opacity:1}
  20%{opacity:.3}
  32%{opacity:.85}
  50%{opacity:.1}
  65%{opacity:.5}
  100%{opacity:0}
}

/* ===== VIGNETTE ===== */
.halloween-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(40,10,60,.30) 100%),
    linear-gradient(to bottom,transparent 62%,rgba(20,8,30,.55) 100%);
}

/* ===== CLOSE BUTTON ===== */
.halloween-close{
  position:absolute;top:80px;left:18px;width:36px;height:36px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(15,8,25,.85);
  border:1px solid rgba(255,140,60,.6);
  color:#ffb347;font-size:18px;line-height:1;cursor:pointer;
  pointer-events:auto;backdrop-filter:blur(8px);
  opacity:.55;
  transition:opacity .2s,transform .2s,box-shadow .2s;
  box-shadow:0 0 12px rgba(255,120,40,.35);
}
.halloween-close:hover{opacity:1;transform:rotate(90deg) scale(1.1);box-shadow:0 0 20px rgba(255,140,50,.75)}
.halloween-close:focus-visible{outline:2px solid #ffb347;outline-offset:3px}

/* ===== MOBILE ===== */
@media (max-width:767px){
  .halloween-moon{width:96px;height:96px;top:4vh;right:5vw}
  .halloween-treeline{height:220px}
  .halloween-pumpkin{width:74px;height:74px;bottom:22px}
  .halloween-ghost{width:64px;height:96px}
  .halloween-bat{--bat-size:42px}
  .halloween-web{width:110px;height:110px}
  .halloween-close{top:58px;left:10px;width:32px;height:32px;font-size:16px}
  .halloween-fog,.halloween-fog-2,.halloween-fog-3{filter:blur(18px)}
}
@media (prefers-reduced-motion: reduce){
  .halloween-bat,.halloween-ghost,.halloween-spider,.halloween-ember,
  .halloween-lightning,.halloween-stars{display:none}
  .halloween-moon,.halloween-pumpkin,.halloween-fog,.halloween-fog-2,.halloween-fog-3{animation:none}
}