/* Sunday Reset Co. Halloween, adapted from Northstar's Holiday Themes option C. Nothing shows unless hw-kit.js adds .hw-on. */
.hw-on .hero h1 em{background:linear-gradient(92deg,#B4470C,#8A3FB8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hw-webs{display:none}
.hw-on .hw-webs{display:block;position:fixed;z-index:60;pointer-events:none;mix-blend-mode:difference}
.hw-webs.hw-bl,.hw-webs.hw-br{bottom:0}

/* hero: a soft purple dusk at the bottom, bats, and the hay-bale scene in the side margins */
.hw-on .hero{position:relative;isolation:isolate;overflow:hidden}
.hw-hero{display:none}
.hw-on .hw-hero{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 90% 55% at 50% 115%,rgba(138,63,184,.16),transparent 70%)}
.hw-ground{position:absolute;left:0;right:0;bottom:0;height:0;z-index:3;pointer-events:none}
.hw-spot{--w:clamp(112px,13.5vw,200px);position:absolute;bottom:0;width:var(--w);height:calc(var(--w)*1.5)}
.hw-spot.hw-left{left:max(-10px,calc((100% - min(1120px,100%))/4 - var(--w)/2))}
.hw-spot.hw-right{right:max(-10px,calc((100% - min(1120px,100%))/4 - var(--w)/2))}
.hw-spot .hw-scarecrow{left:0;bottom:7%;width:100%}
.hw-spot .hw-field{position:absolute;left:-40%;width:180%;bottom:-2px;height:auto}
.hw-spot .hw-pumpkin{position:absolute;bottom:2%;width:32%}
.hw-spot .pk-a{left:-16%}
.hw-spot .pk-b{right:-10%;width:24%;bottom:3%}
.hw-spot .pk-big{left:14%;width:72%;bottom:3%}
.hw-spot.hw-right .pk-a{left:auto;right:-14%;width:30%}
.hw-spot.hw-right .pk-b{right:auto;left:-10%}
/* below the two-column hero there are no side margins: keep just the pumpkins, small, in the bottom-right corner */
@media (max-width:1279px){.hw-spot.hw-left{display:none}.hw-spot{--w:104px}.hw-spot.hw-right{right:-8px}}

/* peek-a-boo scarecrow */
.hw-peek{display:none}
.hw-on .hw-peek{display:block;position:fixed;right:clamp(8px,4vw,60px);bottom:0;z-index:63;width:190px;height:170px;pointer-events:none;overflow:visible}
.peek-clip{position:absolute;top:-40px;right:-20px;bottom:0;left:-40px;overflow:hidden;pointer-events:none}
.hw-peek .peek-sc{position:absolute;left:40px;top:40px;width:190px;transform:translateY(105%) rotate(-8deg);transition:transform .7s cubic-bezier(.3,1.4,.5,1);pointer-events:auto}
.hw-peek.up .peek-sc{transform:translateY(8%) rotate(-6deg)}
.hw-bubble{position:absolute;right:150px;top:-14px;width:max-content;max-width:min(70vw,260px);font:600 15px/1.35 Figtree,Arial,sans-serif;color:#22301F;background:#FBF8F1;border:1px solid #DCD2BF;border-radius:16px 16px 4px 16px;padding:.7rem .9rem;box-shadow:0 12px 34px rgba(34,48,31,.28);opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;transition:.35s .35s;pointer-events:none}
.hw-peek.up .hw-bubble{opacity:1;transform:none;pointer-events:auto}

/* ghost buddy */
.hw-ghost{display:none}
.hw-on .hw-ghost{display:block;opacity:0;position:fixed;left:0;top:0;z-index:64;width:34px;pointer-events:none;transition:opacity .4s;filter:drop-shadow(0 4px 10px rgba(34,48,31,.35))}
.hw-ghost svg{display:block;width:100%;height:auto}

/* the kit's on/off button in her font */
.hw-toggle{font-family:Figtree,Arial,sans-serif}
/* her phone tap bar is 76px tall and only shows under 720px (the kit assumes Northstar's 66px bar under 820px) */
@media (max-width:820px){
  .hw-on .hw-peek{bottom:calc(76px + env(safe-area-inset-bottom));width:150px;height:130px;right:6px}
  .hw-peek .peek-sc{width:150px}
  .hw-bubble{right:110px;font-size:13px}
  .hw-toggle{bottom:calc(86px + env(safe-area-inset-bottom))}
  .hw-bl,.hw-br,.hw-webs.hw-bl,.hw-webs.hw-br{bottom:calc(76px + env(safe-area-inset-bottom))}
  .hw-spider{right:22vw}
}
@media (min-width:720px) and (max-width:820px){
  .hw-on .hw-peek{bottom:0}
  .hw-toggle{bottom:14px}
  .hw-bl,.hw-br,.hw-webs.hw-bl,.hw-webs.hw-br{bottom:0}
}