/* Halloween 2026 skin for the homepage.
   Everything here is scoped to html.halloween, which the gate script in
   index.html only sets before Nov 1 2026 00:00 Pacific. After that this
   file does nothing and can be deleted at leisure. */

html.halloween {
    --red-glow: #ff7a1a;
    --red-deep: #c2410c;
    --pumpkin: #ff8a2a;
    --hex-purple: #8b5cf6;
}

/* ---------- Accents ---------- */
html.halloween .btn-red { box-shadow: 0 8px 28px rgba(255,122,26,.38), inset 0 1px 0 rgba(255,255,255,.22); }
html.halloween .btn-red:hover { box-shadow: 0 10px 36px rgba(255,122,26,.55), inset 0 1px 0 rgba(255,255,255,.22); }
html.halloween .glow.red { background: radial-gradient(circle, rgba(255,122,26,.26), rgba(139,92,246,.10) 45%, transparent 70%); }
html.halloween .eyebrow.red { color: var(--pumpkin); }
html.halloween .grad-red { background-image: linear-gradient(90deg, #ffb366, #ff7a1a); }
html.halloween .hero h1.grad { background-image: linear-gradient(180deg, #fff 0%, #ffd2a8 70%, #ff9a4d 100%); }
html.halloween .hero { position: relative; }

/* ---------- Top banner ---------- */
.hw-banner {
    position: relative; z-index: 101;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 9px 16px;
    font-size: .85rem; font-weight: 600; color: #ffe2c7; text-align: center;
    background: linear-gradient(90deg, #1a0b2e, #3a1405 50%, #1a0b2e);
    border-bottom: 1px solid rgba(255,138,42,.25);
}
.hw-banner a { color: var(--pumpkin); white-space: nowrap; }
.hw-banner a:hover { text-decoration: underline; }
.hw-banner .pk { font-size: 1rem; }

/* ---------- Hero pill ---------- */
.pill.hw-pill { background: rgba(255,122,26,.12); border-color: rgba(255,138,42,.4); color: var(--pumpkin); margin-right: 8px; }

/* ---------- Moon, bats, fog, web ---------- */
.hw-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hw-moon {
    position: absolute; right: 6%; top: 34px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fff7e6 0%, #ffe0b0 45%, #f5b46b 100%);
    box-shadow: 0 0 60px 18px rgba(255,170,90,.28), 0 0 160px 60px rgba(255,122,26,.14);
    opacity: .9;
}
.hw-moon::after { /* craters */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 62% 30%, rgba(200,120,60,.25) 0 9%, transparent 10%),
        radial-gradient(circle at 30% 64%, rgba(200,120,60,.22) 0 12%, transparent 13%),
        radial-gradient(circle at 70% 70%, rgba(200,120,60,.18) 0 6%, transparent 7%);
}
.hw-bat { position: absolute; left: -80px; width: 46px; color: #0b0613; filter: drop-shadow(0 0 1px rgba(255,170,90,.35)); animation: hw-fly linear infinite; }
.hw-bat svg { width: 100%; display: block; animation: hw-flap .32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.hw-bat.b1 { top: 70px;  animation-duration: 19s; animation-delay: -4s; }
.hw-bat.b2 { top: 150px; width: 30px; animation-duration: 26s; animation-delay: -15s; }
.hw-bat.b3 { top: 40px;  width: 24px; animation-duration: 31s; animation-delay: -22s; }
@keyframes hw-fly {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30vw, 26px); }
    50%  { transform: translate(60vw, -10px); }
    75%  { transform: translate(90vw, 20px); }
    100% { transform: translate(calc(100vw + 160px), 0); }
}
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

.hw-fog {
    position: absolute; left: -10%; right: -10%; bottom: -20px; height: 180px; pointer-events: none; z-index: 4;
    background:
        radial-gradient(60% 70% at 20% 100%, rgba(170,140,220,.16), transparent 70%),
        radial-gradient(50% 60% at 65% 100%, rgba(255,160,90,.10), transparent 70%),
        radial-gradient(70% 80% at 95% 100%, rgba(170,140,220,.12), transparent 70%);
    filter: blur(8px);
    animation: hw-drift 18s ease-in-out infinite alternate;
}
@keyframes hw-drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

.hw-web { position: absolute; left: 0; top: 0; width: 170px; color: rgba(255,255,255,.13); pointer-events: none; z-index: 1; }
.hw-web svg { width: 100%; display: block; }

/* ---------- Footer sign-off ---------- */
.hw-foot { color: var(--pumpkin); }

@media (max-width: 960px) {
    .hw-moon { width: 96px; height: 96px; right: 16px; top: 18px; }
    .hw-web { width: 110px; }
    .hw-bat.b1 { top: 40px; }
    .hw-bat.b2 { top: 110px; }
}
@media (max-width: 600px) {
    .hw-banner { display: block; font-size: .78rem; line-height: 1.5; }
    .hw-banner .pk { margin-right: 4px; }
    .hw-banner a { display: inline-block; margin-left: 6px; }
    .hw-moon { width: 60px; height: 60px; right: 12px; top: -18px; }
    .hero .pill.hw-pill { margin: 0 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-bat, .hw-bat svg, .hw-fog { animation: none; }
    .hw-bat.b1 { left: 58%; } .hw-bat.b2 { left: 70%; } .hw-bat.b3 { left: 50%; }
}