/* Halloween 2026: only applies while html.hw is set (public/js/halloween.js removes nothing; it just
   never adds the class after 2 Nov). Pumpkin orange replaces the brand yellow, with a purple night glow. */
html.hw{
  --y:#ff8a1f; --y-2:#ffb35c; --y-3:#e2570b; --y-dim:rgba(255,138,31,.13); --y-line:rgba(255,138,31,.4);
  --hw-purple:#8b5cf6; --hw-purple-dim:rgba(139,92,246,.16);
  background:radial-gradient(1200px 600px at 85% -10%,rgba(139,92,246,.22),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(255,138,31,.08),transparent 60%),var(--bg);
}
html.hw .btn-primary{box-shadow:0 8px 30px -8px rgba(255,138,31,.6)}
html.hw ::selection{background:var(--y);color:#111}
html.hw .sale-bar:not(.upcoming){background:linear-gradient(90deg,#3b1366,#e2570b 55%,#3b1366)!important;color:#fff}
html.hw .sale-bar .sale-cta{background:#111;color:#ffb35c}
.hw-grad{background:linear-gradient(100deg,#ffb35c,#ff8a1f 45%,#b98cff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Bats: four drift across the top of the screen now and then. */
.hw-bats{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.hw-bats i{position:absolute;left:-80px;top:calc(12% + var(--i) * 9%);width:calc(46px - var(--i) * 6px);opacity:0;
  animation:hwBat 19s linear infinite;animation-delay:calc(var(--i) * 4.3s + 2s)}
.hw-bats svg{width:100%;fill:#120a1f;filter:drop-shadow(0 0 6px rgba(139,92,246,.55));animation:hwFlap .22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes hwBat{0%{transform:translate(0,0);opacity:0}4%{opacity:.9}25%{transform:translate(32vw,-6vh)}50%{transform:translate(64vw,4vh)}70%{opacity:.9}76%{transform:translate(105vw,-8vh);opacity:0}100%{transform:translate(105vw,-8vh);opacity:0}}
@keyframes hwFlap{to{transform:scaleY(.45)}}
@media (prefers-reduced-motion:reduce){.hw-bats{display:none}}

/* Hero: a moon behind the title and fog along the floor. */
html.hw .hero::before{content:"";position:absolute;width:min(46vw,420px);aspect-ratio:1;right:8%;top:40px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 36%,#fff3d6 0%,#ffcf7a 38%,#ff8a1f 70%,transparent 72%);opacity:.16;filter:blur(1px)}
html.hw .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%,rgba(139,92,246,.22),transparent),radial-gradient(50% 100% at 75% 100%,rgba(255,138,31,.14),transparent)}

/* Homepage Halloween card */
.hw-card{position:relative;border-radius:var(--r);padding:28px;border:1px solid rgba(255,138,31,.35);overflow:hidden;
  background:linear-gradient(135deg,rgba(255,138,31,.12),rgba(139,92,246,.14) 60%,rgba(16,16,20,.9))}
.hw-card .title{margin:0 0 8px}
.hw-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.hw-head p{margin:0;max-width:560px}
.hw-pumpkin{font-size:72px;line-height:1;filter:drop-shadow(0 0 24px rgba(255,138,31,.7));animation:hwBob 3.2s ease-in-out infinite}
@keyframes hwBob{50%{transform:translateY(-8px) rotate(-6deg)}}
.hw-ladder{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hw-ladder li{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;background:rgba(7,7,10,.55);display:flex;flex-direction:column;gap:2px}
.hw-ladder b{font-family:var(--head);font-size:28px;line-height:1;color:var(--y)}
.hw-ladder span{font-weight:600}
.hw-ladder i{font-style:normal;font-size:12px;color:var(--muted)}
.hw-ladder li.cur{border-color:var(--y);box-shadow:0 0 0 1px var(--y),0 10px 30px -10px rgba(255,138,31,.6)}
.hw-ladder li.cur i{color:var(--y);font-weight:700;letter-spacing:.08em}
.hw-ladder li.done{opacity:.45}
.hw-ladder li.done b{text-decoration:line-through}
.hw-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hw-perks>*{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:12px 14px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3)}
.hw-perks>* > span{font-size:26px;line-height:1.1}
.hw-perks b{display:block}
.hw-perks small{color:var(--text-2);font-size:13px;line-height:1.4}
a.hw-perks,.hw-perks a:hover{border-color:var(--hw-purple)}
@media (max-width:640px){
  .hw-card{padding:20px}
  .hw-pumpkin{font-size:48px}
  .hw-perks{grid-template-columns:1fr}
  .hw-ladder{grid-template-columns:1fr 1fr}
}

/* Trick-or-treat pop-up */
.hw-pop{text-align:center;position:relative;padding:6px 2px 2px}
.hw-pop h3{font-size:clamp(30px,7vw,40px)!important;line-height:1.05;margin:6px 0 8px!important}
.hw-pop-moon{width:90px;height:90px;margin:0 auto 6px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff3d6,#ffb35c 45%,#e2570b 75%);box-shadow:0 0 50px rgba(255,138,31,.55)}
.hw-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.hw-choice button{border:1px solid var(--line-2);background:var(--card-2);border-radius:18px;padding:18px 10px;font-weight:700;font-size:17px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,border-color .15s}
.hw-choice button span{font-size:44px;line-height:1}
.hw-choice button:hover{transform:translateY(-3px) rotate(-2deg);border-color:var(--y)}
.hw-treats{list-style:none;margin:14px 0 18px;padding:0;text-align:left;display:grid;gap:8px}
.hw-treats li{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.hw-treats a{color:var(--y);text-decoration:underline}
.hw-remind-q{margin:16px 0 0!important;font-size:14px;color:var(--text-2)}
.hw-remind{display:flex;gap:8px;margin-top:8px}
.hw-remind .input{flex:1;min-width:0}
html.hw .modal{border-color:rgba(255,138,31,.35)}