/* extinction.meme · seasonal layer (halloween), the styling half of season.js.
   Everything here hangs off html[data-season="halloween"], which theme.js sets before first paint (Oct 1 to Oct 31 by default,
   or whatever the visitor picked in settings). Remove the attribute and the site looks exactly like it did before.
   - light "discord kitten"  -> pastel spooky: lilac + pumpkin gingham, pink pumpkins, a kitty in a witch hat, lilac ghosts
   - dark  "reddit mod"      -> neckbeard spooky: purple-black + pumpkin orange, a skeleton in a fedora, cobwebs
   Decoration only: nothing here takes pointer events (except the draggable stickers) or moves the layout, and it all goes
   still under prefers-reduced-motion / calm mode. All art is inline SVG made by season.js (CSP: no inline styles, no CDNs). */

/* ============================================================ tokens: light = discord kitten ============================================================ */
html[data-season="halloween"] {
  --ink: #2a1238; --shade: #2a1238; --line: #d6bdf6; --card: #fff; --well: #f1e3ff;
  --header-bg: rgba(255, 247, 238, .93); --rule-line: #d9c6ff; --toast-bg: #2a1238; --toast-fg: #ffd37a;
  --title-stroke: #2a1238; --title-shadow: #2a1238; --ink-soft: #5e3a85; --paper: #fff9f2;
  --bg: #ead9ff; --gingham: rgba(255, 126, 32, .17);
  --hot: #e4560a; --pink: #ffa8b8; --bubble: #ffd9b8; --butter: #fff27a; --sky: #aadcff; --mint: #bdf2a4; --lilac: #d5bcff; --nope: #7f9eff;
  /* art */
  --xs-ink: #2a1238; --xs-wire: #2a1238; --xs-web: rgba(94, 58, 133, .5);
  --xs-pump-a: #ffa0bd; --xs-pump-b: #ffb54d; --xs-glow: #fff27a; --xs-stem: #8bd96f;
  --xs-ghost: #e6d6ff; --xs-shine: #fff; --xs-blush: #ff9ccf;
  --xs-corn-1: #fff; --xs-corn-2: #ffa94d; --xs-corn-3: #ffe45c;
  --xs-cat: #4a2c69; --xs-hat: #9a6be0; --xs-hat-band: #ffa23d; --xs-bone: #fff;
  --xs-bat: #54307a; --xs-bat-in: #ff9ccf; --xs-bat-rim: #2a1238; --xs-eye: #ffe45c;
  --xs-spider: #4a2c69;
  --xs-tld: #fff; --xs-hot-ink: #fff;
  --xs-glow-a: rgba(255, 168, 84, .30); --xs-glow-b: rgba(255, 255, 255, .55);
  --xs-d-kitten: block; --xs-d-mod: none;
}

/* ============================================================ tokens: dark = reddit mod ============================================================ */
@media (prefers-color-scheme: dark) {
  html[data-season="halloween"]:not([data-theme="light"]) {
    --ink: #e6dff0; --ink-soft: #a99db8; --paper: #17121d; --bg: #0b0910; --gingham: rgba(255, 106, 0, .075);
    --line: #e2dbea; --shade: #ff6a00; --card: #241d2c; --well: #110d16; --header-bg: rgba(11, 9, 16, .92);
    --rule-line: rgba(226, 219, 234, .12); --toast-bg: #e6dff0; --toast-fg: #17121d; --title-stroke: #0b0910; --title-shadow: #7c3aed;
    --hot: #ff6b1a; --pink: #ffb98a; --bubble: #ffd7b8; --nope: #8aa4ff; --mint: #bdf2a4; --lilac: #d5bcff;
    --xs-ink: #120d18; --xs-wire: #8a7a9c; --xs-web: rgba(226, 219, 234, .42);
    --xs-pump-a: #ff7a1a; --xs-pump-b: #ff9a2e; --xs-glow: #ffe27a; --xs-stem: #7fcf6a;
    --xs-ghost: #efe9f5; --xs-shine: #fff; --xs-blush: #ffb199;
    --xs-corn-1: #f4efe6; --xs-corn-2: #ff8a1f; --xs-corn-3: #ffd23f;
    --xs-cat: #2a1d3a; --xs-hat: #7a4ec0; --xs-hat-band: #ff6b1a; --xs-bone: #f4efe6;
    --xs-bat: #3a2650; --xs-bat-in: #6b4690; --xs-bat-rim: #ff8a3d; --xs-eye: #ff8a1f;
    --xs-spider: #2b1d3a;
    --xs-tld: #f4efe6; --xs-hot-ink: #1a0f22;
    --xs-glow-a: rgba(255, 106, 0, .22); --xs-glow-b: rgba(150, 96, 255, .24);
    --xs-d-kitten: none; --xs-d-mod: block;
  }
}
html[data-season="halloween"][data-theme="dark"] {
  --ink: #e6dff0; --ink-soft: #a99db8; --paper: #17121d; --bg: #0b0910; --gingham: rgba(255, 106, 0, .075);
  --line: #e2dbea; --shade: #ff6a00; --card: #241d2c; --well: #110d16; --header-bg: rgba(11, 9, 16, .92);
  --rule-line: rgba(226, 219, 234, .12); --toast-bg: #e6dff0; --toast-fg: #17121d; --title-stroke: #0b0910; --title-shadow: #7c3aed;
  --hot: #ff6b1a; --pink: #ffb98a; --bubble: #ffd7b8; --nope: #8aa4ff; --mint: #bdf2a4; --lilac: #d5bcff;
  --xs-ink: #120d18; --xs-wire: #8a7a9c; --xs-web: rgba(226, 219, 234, .42);
  --xs-pump-a: #ff7a1a; --xs-pump-b: #ff9a2e; --xs-glow: #ffe27a; --xs-stem: #7fcf6a;
  --xs-ghost: #efe9f5; --xs-shine: #fff; --xs-blush: #ffb199;
  --xs-corn-1: #f4efe6; --xs-corn-2: #ff8a1f; --xs-corn-3: #ffd23f;
  --xs-cat: #2a1d3a; --xs-hat: #7a4ec0; --xs-hat-band: #ff6b1a; --xs-bone: #f4efe6;
  --xs-bat: #3a2650; --xs-bat-in: #6b4690; --xs-bat-rim: #ff8a3d; --xs-eye: #ff8a1f;
  --xs-spider: #2b1d3a;
  --xs-tld: #f4efe6; --xs-hot-ink: #1a0f22;
  --xs-glow-a: rgba(255, 106, 0, .22); --xs-glow-b: rgba(150, 96, 255, .24);
  --xs-d-kitten: none; --xs-d-mod: block;
}

/* black-on-orange is the classic halloween pair, and it reads better than white on a bright pumpkin */
html[data-season="halloween"] :is(.tabs a[aria-current="page"], .btn.hot, .chip[aria-pressed="true"], .chip[aria-current="page"],
  .icon-btn[aria-pressed="true"], .music-btn[aria-pressed="true"], .share-grid .native, .share-grid .native:hover) { color: var(--xs-hot-ink); }

/* ============================================================ the home page title ============================================================ */
html[data-season="halloween"] .hero-title .tld { color: var(--xs-tld); }      /* "meme" = a ghost (light) / bone (dark) */
html[data-season="halloween"] .hero::before {                                  /* candlelight behind the title + a moon-ish haze top right */
  content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 30px; height: 380px; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 48% at 50% 48%, var(--xs-glow-a), transparent 72%),
    radial-gradient(ellipse 20% 40% at 90% 18%, var(--xs-glow-b), transparent 70%);
  animation: xs-flicker 6.5s linear infinite;
}
@keyframes xs-flicker { 0%, 100% { opacity: 1; } 7% { opacity: .78; } 11% { opacity: 1; } 38% { opacity: .9; } 43% { opacity: .74; } 49% { opacity: 1; } 76% { opacity: .92; } 80% { opacity: 1; } }

/* ============================================================ decoration plumbing ============================================================ */
.xs-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.xs-fx { position: fixed; inset: 0; z-index: 89; pointer-events: none; overflow: hidden; }

/* symbol parts (the symbols live in .xs-defs; colours come from the tokens above, inherited through <use>) */
.xs-o { stroke: var(--xs-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.xs-o2 { stroke: var(--xs-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xs-ln { fill: none; stroke: var(--xs-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xs-ink-f { fill: var(--xs-ink); }
.xs-white-f { fill: #fff; }
.xs-nofill { fill: none; }
.xs-pump { fill: var(--xs-body, var(--xs-pump-b)); }
.xs-pa { --xs-body: var(--xs-pump-a); } .xs-pb { --xs-body: var(--xs-pump-b); }
.xs-stem { fill: var(--xs-stem); }
.xs-glow { fill: var(--xs-glow); }
.xs-ghost { fill: var(--xs-ghost); }
.xs-shine { fill: none; stroke: var(--xs-shine); stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.xs-blush { fill: var(--xs-blush); opacity: .85; }
.xs-c1 { fill: var(--xs-corn-1); } .xs-c2 { fill: var(--xs-corn-2); } .xs-c3 { fill: var(--xs-corn-3); }
.xs-cat { fill: var(--xs-cat); }
.xs-hatf { fill: var(--xs-hat); }
.xs-band { fill: var(--xs-hat-band); }
.xs-bone { fill: var(--xs-bone); }
.xs-batf { fill: var(--xs-bat); stroke: var(--xs-bat-rim); stroke-width: 2; stroke-linejoin: round; }
.xs-batin { fill: var(--xs-bat-in); }
.xs-eye { fill: var(--xs-eye); }
.xs-spiderf { fill: var(--xs-spider); }
.xs-leg { fill: none; stroke: var(--xs-spider); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xs-eyeglow { fill: var(--xs-eye); }

/* ============================================================ cobwebs: header + footer corners ============================================================ */
.xs-web { position: absolute; top: 0; width: 58px; height: 58px; z-index: -1; pointer-events: none; color: var(--xs-web); overflow: visible; }
.xs-web path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; }
.xs-web-l { left: 0; }
.xs-web-r { right: 0; transform: scaleX(-1); }
html[data-season="halloween"] footer { position: relative; }
footer > .xs-web { z-index: auto; width: 46px; height: 46px; opacity: .8; }

/* ============================================================ logo: a witch hat on the kitten skull, glowing eyes on the fedora skull ============================================================ */
html[data-season="halloween"] .logo { position: relative; }
html[data-season="halloween"] .logo .xs-logohat {   /* same box + same hover transform as the skull svgs (see ".logo svg" in style.css) */
  position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; overflow: visible; pointer-events: none;
}
html[data-season="halloween"] .logo .xs-hat-k { display: var(--xs-d-kitten); }
html[data-season="halloween"] .logo .xs-hat-m { display: var(--xs-d-mod); }

/* ============================================================ garland under the header (bunting / string lights) ============================================================ */
.xs-garland { position: absolute; left: -2%; width: 104%; top: -26px; height: 80px; z-index: 1; pointer-events: none; overflow: visible; }
.xs-garland .xs-string { fill: none; stroke: var(--xs-wire); stroke-width: 2.4; stroke-linecap: round; }
.xs-garland .xs-thread { stroke: var(--xs-wire); stroke-width: 1.6; stroke-linecap: round; }
.xs-garland .xs-pen { stroke: var(--xs-ink); stroke-width: 2.4; stroke-linejoin: round; }
.xs-pc0 { fill: var(--pink); } .xs-pc1 { fill: var(--butter); } .xs-pc2 { fill: var(--mint); } .xs-pc3 { fill: var(--lilac); }
.xs-garland .xs-bulbcap { fill: var(--xs-wire); }
.xs-garland .xs-bulb { fill: var(--xs-bulbc, #ff8a1f); filter: drop-shadow(0 0 5px var(--xs-bulbc, #ff8a1f)); }
.xs-deco-pen { display: var(--xs-d-kitten); }
.xs-deco-bulb { display: var(--xs-d-mod); }
.xs-hang { transform-box: fill-box; transform-origin: 50% 0; animation: xs-sway 3.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes xs-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.xs-bulb { animation: xs-twinkle 2.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes xs-twinkle { from { opacity: 1; } to { opacity: .55; } }

/* ============================================================ draggable seasonal stickers (look + feel of .sticker; season.js owns the dragging) ============================================================ */
.xs-sticker {
  position: absolute; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  font-size: 40px; line-height: 1; white-space: nowrap; transform: rotate(var(--r, 0deg)); transition: box-shadow .1s;
}
.xs-sticker.dragging { cursor: grabbing; z-index: 10; }
.xs-sticker.xs-art { filter: drop-shadow(2px 3px 0 var(--shade)); }
.xs-sticker.xs-art.dragging { filter: drop-shadow(4px 6px 0 var(--shade)); }
.xs-sticker svg { display: block; width: calc(1em * var(--sz, 1.15)); height: calc(1em * var(--sz, 1.15)); overflow: visible; }
.xs-sticker .xs-bob { animation: xs-bob 2.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes xs-bob { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
.xs-sticker.xs-pill {
  font-family: var(--hand); font-weight: 700; font-size: 24px; padding: 6px 12px; border: 2.5px solid var(--line); border-radius: 999px;
  background: var(--xs-bg, var(--lilac)); box-shadow: 3px 3px 0 var(--shade); color: var(--pastel-ink);
}
.xs-sticker.xs-pill.dragging { box-shadow: 6px 8px 0 var(--shade); }
.xs-sticker[hidden] { display: none; }
.xs-sticker svg.xs-only-kitten { display: var(--xs-d-kitten); }
.xs-sticker svg.xs-only-mod { display: var(--xs-d-mod); }

/* ============================================================ footer greeting ============================================================ */
footer .xs-foot { font-size: 26px; color: var(--hot); margin: 0 0 6px; }

/* ============================================================ flying bats (behind the page, so they never cover anything you read) ============================================================ */
.xs-bat { position: fixed; left: 0; top: var(--y, 20vh); z-index: -1; width: var(--w, 46px); opacity: .72; pointer-events: none; will-change: transform; animation: xs-cross var(--t, 9s) linear forwards; }
.xs-bat.rtl { animation-name: xs-cross-rtl; }
@keyframes xs-cross { from { transform: translate3d(-14vw, 0, 0); } to { transform: translate3d(114vw, 0, 0); } }
@keyframes xs-cross-rtl { from { transform: translate3d(114vw, 0, 0); } to { transform: translate3d(-14vw, 0, 0); } }
.xs-bat svg { display: block; width: 100%; height: auto; overflow: visible; animation: xs-flutter 1.1s ease-in-out infinite alternate; }
@keyframes xs-flutter { from { transform: translateY(-16px) rotate(-4deg); } to { transform: translateY(16px) rotate(4deg); } }
.xs-wing { transform-box: fill-box; transform-origin: 100% 55%; animation: xs-flap .22s ease-in-out infinite alternate; }
@keyframes xs-flap { from { transform: rotate(-26deg); } to { transform: rotate(16deg); } }

/* ============================================================ cursor trail, speech bubble, the boo ============================================================ */
.xs-trail { position: absolute; font-size: 15px; line-height: 1; animation: xs-trail .95s ease-out forwards; }
@keyframes xs-trail { from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4) rotate(var(--rot, 150deg)); } }

.xs-bubble {
  position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap;
  font-family: var(--hand); font-weight: 700; font-size: 28px; line-height: 1; color: var(--hot);
  -webkit-text-stroke: 5px var(--paper); paint-order: stroke fill; text-shadow: 2px 3px 0 var(--shade); animation: xs-rise 1.4s ease-out forwards;
}
@keyframes xs-rise { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -230%) scale(1); } }

.xs-boo { position: fixed; left: 0; top: 0; z-index: 110; width: 150px; pointer-events: none; animation: xs-boo-go 3.2s ease-in-out forwards; }
.xs-boo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 var(--shade)); animation: xs-boo-wob .5s ease-in-out infinite alternate; }
.xs-boo b { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) rotate(-6deg); font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1; color: var(--hot);
  -webkit-text-stroke: 3px var(--xs-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--xs-ink); white-space: nowrap; }
@keyframes xs-boo-go { 0% { transform: translate3d(-20vw, 78vh, 0) rotate(-8deg); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate3d(48vw, 36vh, 0) rotate(5deg); opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(112vw, 6vh, 0) rotate(-6deg); opacity: 0; } }
@keyframes xs-boo-wob { from { transform: translateY(-10px) scaleX(.97); } to { transform: translateY(10px) scaleX(1.03); } }

/* ============================================================ phones ============================================================ */
@media (max-width: 760px) {
  .xs-sticker { font-size: 32px; }
  .xs-sticker.xs-pill { font-size: 19px; }
  .xs-web { width: 44px; height: 44px; }
  footer > .xs-web { width: 32px; height: 32px; opacity: .6; }
  .xs-garland { top: -22px; height: 60px; }
  footer .xs-foot { font-size: 23px; }
  .xs-boo { width: 110px; }
  .xs-boo b { font-size: 32px; top: -28px; }
  html[data-season="halloween"] .hero::before { height: 260px; top: 10px; }
}

/* ============================================================ still, please: reduced motion + calm mode ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] .hero::before, .xs-hang, .xs-bulb, .xs-sticker .xs-bob, .xs-bat, .xs-bat svg, .xs-wing { animation: none; }
  .xs-bubble { animation: none; transform: translate(-50%, -115%); }
}
html[data-calm][data-season="halloween"] .hero::before, html[data-calm] .xs-hang, html[data-calm] .xs-bulb, html[data-calm] .xs-sticker .xs-bob,
html[data-calm] .xs-bat, html[data-calm] .xs-bat svg, html[data-calm] .xs-wing { animation: none; }
html[data-calm] .xs-bubble { animation: none; transform: translate(-50%, -115%); }

/* the halloween monkey jumpscare (season.js) */
dialog.xs-jump { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
dialog.xs-jump::backdrop { background: #000; }
dialog.xs-jump iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xs-jump-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 18px; cursor: pointer; }