/* Jack-o'-lantern porch (owner, Oct 15 2026; second pass: fewer pumpkins with the creepy carved cut, more realistic,
   bats): homepage decoration through October only (common/home: halloween, block 'halloween' in
   home_story_blocks.twig). Everything sits between the photo and the text (z-index 1) and never takes a click. */

.fr-halloween{--hw-orange:#F08A2A;--hw-ember:#E3741A}

.hw{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* candlelight from the pumpkins on the ground */
.hw-glow{position:absolute;right:0;bottom:0;width:70%;height:42%;background:radial-gradient(ellipse at 70% 100%,rgba(255,140,40,.32),rgba(255,120,30,.08) 45%,transparent 70%)}

/* three carved jack-o'-lanterns on the right, lit from inside */
.hw-pumpkins{position:absolute;right:6%;bottom:-8px;display:flex;align-items:flex-end;gap:26px}
.hw-p{display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,140,40,.45));animation:hw-glowpulse 3.2s ease-in-out infinite}
.hw-p--1{width:104px;animation-delay:-1.1s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(140,230,80,.45))}
.hw-p--2{width:168px;margin-bottom:-4px}
.hw-p--3{width:136px;animation-delay:-2.3s}
.hw-face{animation:hw-flicker 2.1s steps(1,end) infinite}
.hw-p--1 .hw-face{animation-delay:-.7s}.hw-p--3 .hw-face{animation-delay:-1.4s}
@keyframes hw-flicker{0%{opacity:1}12%{opacity:.82}18%{opacity:1}46%{opacity:.9}52%{opacity:1}74%{opacity:.78}80%{opacity:1}}
@keyframes hw-glowpulse{0%,100%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,140,40,.42))}50%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(255,150,50,.6))}}

/* two sheet ghosts that fade into the air */
.hw-ghost{position:absolute;opacity:.8;filter:drop-shadow(0 0 18px rgba(220,235,255,.55));animation:hw-float 16s ease-in-out infinite,hw-fade 9s ease-in-out infinite}
.hw-ghost--a{right:31%;top:20%;width:84px}
.hw-ghost--b{right:22%;top:50%;width:56px;animation-duration:20s,11s;animation-delay:-8s,-4s}
@keyframes hw-float{0%,100%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(-34px,-18px) rotate(3deg)}50%{transform:translate(-10px,12px) rotate(-2deg)}75%{transform:translate(22px,-8px) rotate(4deg)}}
@keyframes hw-fade{0%,100%{opacity:.82}50%{opacity:.45}}

/* a big web in the top-right corner, a real spider lowering on its thread */
.hw-web{position:absolute;right:0;top:0;width:260px;height:260px;fill:none;stroke:rgba(235,240,245,.5);stroke-width:1}
.hw-spider{position:absolute;z-index:3;right:150px;top:0} /* the ghosts keep left of / below the spider and its web; it stays in front anyway */
.hw-spider i{display:block;width:1px;height:170px;margin:0 auto;background:linear-gradient(rgba(235,240,245,.2),rgba(235,240,245,.7));animation:hw-drop 9s ease-in-out infinite}
.hw-spider svg{display:block;width:46px;margin:-3px auto 0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));animation:hw-sway 3.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes hw-drop{0%,100%{height:170px}45%,60%{height:250px}}
@keyframes hw-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* bats flying across now and then (each one: across the photo, then a rest off screen) */
.hw-bat{position:absolute;left:-90px;display:block;animation:hw-fly 13s linear infinite}
.hw-bat svg{display:block;width:100%;animation:hw-flap .26s ease-in-out infinite alternate;transform-origin:50% 40%;filter:drop-shadow(0 0 6px rgba(200,215,235,.35))}
.hw-bat--1{top:18%;width:72px}
.hw-bat--2{top:30%;width:52px;animation-delay:-4.5s;animation-duration:15s}
.hw-bat--3{top:12%;width:40px;animation-delay:-8s;animation-duration:17s}
.hw-bat--4{top:24%;width:60px;animation-delay:-11s;animation-duration:19s}
@keyframes hw-fly{0%{transform:translate(0,0)}10%{transform:translate(22vw,-34px)}20%{transform:translate(44vw,10px)}30%{transform:translate(66vw,-26px)}40%{transform:translate(88vw,6px)}46%,100%{transform:translate(112vw,-40px)}}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

/* pumpkin-orange accents around the page */
.fr-halloween .hero h1 em{color:var(--hw-orange);text-shadow:0 0 22px rgba(255,140,40,.35)}
.fr-halloween .prod .price{background:var(--hw-ember)}
.fr-halloween .hs-tc:hover{box-shadow:0 0 0 2px rgba(240,138,42,.75),0 16px 36px rgba(240,138,42,.3)}
.fr-halloween .hs-tc[aria-pressed="true"]{outline-color:var(--hw-orange)}
.fr-halloween .hs-start-title em,.fr-halloween .hs-reels-intro h2 em{color:var(--hw-orange)}

/* phones and tablets: the photo stacks above the text - a smaller set, on the photo only */
@media (max-width:900px){
  .hw{bottom:auto;aspect-ratio:3/2}
  .hw-pumpkins{right:4%;gap:10px}
  .hw-p--1{width:50px}.hw-p--2{width:80px}.hw-p--3{width:66px}
  .hw-ghost--a{width:40px;right:30%;top:30%}.hw-ghost--b{display:none}
  .hw-web,.hw-spider,.hw-bat--3,.hw-bat--4{display:none}
  .hw-bat--1{width:30px;top:30%}.hw-bat--2{width:22px;top:40%}
}

@media (prefers-reduced-motion:reduce){.hw *{animation:none!important}.hw-bat{display:none}}