/* halloween.css: Halloween 2026 for the marketing pages ("Trick or Treat", docs/brand/halloween-2026.md).
   Loaded after www.css, and only while the season is on (cloud/src/site/halloween.mjs). It recolours the sticker look through
   the same tokens www.css uses and adds a ribbon and a little decoration. It moves no layout and changes no words.
   The brand mark (the head in the logo, the "Sniff" highlight, the chat button) keeps its own colours. */

:root {
  --bg: #fff0d9; --surface-2: #ffe0b0; --hair: rgba(27, 15, 42, .14);
  --ink: #1b0f2a; --text: #1b0f2a;
  --mustard: #ff8a1f; --sky: #b68cff; --mint: #b7ec5a;
  --stamp: #5b2a9e;
  --brand-mustard: #f2c14e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17101f; --surface: #231a32; --surface-2: #2e2142;
    --mustard: #ff9a3c; --sky: #a78bfa; --mint: #9be15d;
    --stamp: #c9a6ff;
    --brand-mustard: #e3b23c;
  }
}
:root[data-theme="dark"] {
  --bg: #17101f; --surface: #231a32; --surface-2: #2e2142;
  --mustard: #ff9a3c; --sky: #a78bfa; --mint: #9be15d;
  --stamp: #c9a6ff;
  --brand-mustard: #e3b23c;
}

/* the mark stays the mark */
.logo .snf, .wm-hl, .sc-launch, .sc-mini { background: var(--brand-mustard); }

/* the ribbon above the nav: the season's offer and one button */
.hw-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; min-height: 40px; padding: 5px 16px; background: #1b0f2a; color: #ffe8c2;
             font: 700 14px/1.3 var(--font); text-align: center; border-bottom: 1.5px solid rgba(255, 232, 194, .16); }
.hw-ribbon svg { flex: none; width: 26px; height: 12px; fill: #ff8a1f; }
.hw-ribbon a { flex: none; background: #ff8a1f; color: #1b0f2a; text-decoration: none; font-weight: 800; border-radius: var(--r-pill); padding: 3px 14px; }
.hw-ribbon a:hover { background: #ffa04d; }
.hw-ribbon a:focus-visible { outline: 3px solid #ffe8c2; outline-offset: 2px; }
:root[data-theme="dark"] .hw-ribbon { background: #0d0813; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hw-ribbon { background: #0d0813; } }
@media (max-width: 640px) { .hw-ribbon { font-size: 13px; padding: 6px 12px; } .hw-ribbon svg { display: none; } }

/* decoration: behind the page, in the top corners, never over text. Hidden where it would crowd a phone. */
.halloween main { position: relative; isolation: isolate; }
.hw-decor { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: -1; color: var(--ink); }
.hw-web { position: absolute; left: 0; top: 0; width: 150px; height: 150px; opacity: .38; }
.hw-bat { position: absolute; fill: currentColor; transform-origin: 50% 60%; animation: hw-flap .5s ease-in-out infinite; }
.hw-bat-1 { left: 38%; top: 22px; width: 44px; height: 21px; }
.hw-bat-2 { left: 42%; top: 48px; width: 28px; height: 13px; animation-delay: .25s; }
.hw-bat-3 { right: 20%; top: 36px; width: 36px; height: 17px; animation-delay: .4s; }
.hw-spider { position: absolute; right: 14px; top: 0; width: 40px; height: 100px; transform-origin: 50% 0; animation: hw-swing 4s ease-in-out infinite; }
.hw-spider .t { stroke: currentColor; stroke-width: 1.6; fill: none; }
.hw-spider .b { fill: currentColor; stroke: currentColor; }
.hw-spider .e { fill: var(--bg); }
@keyframes hw-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
@keyframes hw-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 899px) { .hw-spider, .hw-bat-2, .hw-bat-3 { display: none; } .hw-web { width: 96px; height: 96px; } .hw-bat-1 { left: auto; right: 16px; } }


@media (prefers-reduced-motion: reduce) { .hw-bat, .hw-spider { animation: none; } }
@media print { .hw-ribbon, .hw-decor { display: none; } }