/* Cove seasonal Halloween layer
   Scoped to [data-theme="halloween"]. Remove this file and its <link> to retire
   the seasonal artwork; all original themes remain independent. */
:root[data-theme="halloween"] {
  --g1: #100a18;
  --g2: #3d1858;
  --acc: #deafd2;
  --surf: #1b1128;
  --fg: #fffff7;
  --mut: #c9bad3;
  --card: rgba(126, 77, 154, .16);
  --line: rgba(222, 175, 210, .20);
  --bgd: radial-gradient(ellipse at 82% -10%, #542076 0, transparent 46%), radial-gradient(ellipse at -15% 45%, #281038 0, transparent 45%), linear-gradient(180deg, #100a18 0%, #1b0d2b 54%, #351448 100%);
}

[data-theme="halloween"] body { background-color: #100a18; }
[data-theme="halloween"] header { background: rgba(16, 10, 24, .82); border-bottom-color: rgba(222, 175, 210, .24); }
[data-theme="halloween"] h1,
[data-theme="halloween"] h2,
[data-theme="halloween"] .wt { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; letter-spacing: -.02em; }
[data-theme="halloween"] h1 { font-size: 34px; }
[data-theme="halloween"] h2 { font-size: 27px; }
[data-theme="halloween"] .hero h1 { font-size: 42px; }
[data-theme="halloween"] .logo span { color: #deafd2; }
[data-theme="halloween"] .logo-mark { filter: hue-rotate(285deg) saturate(.8) brightness(1.1); }
[data-theme="halloween"] .btn.w,
[data-theme="halloween"] .tab.on,
[data-theme="halloween"] .on:not(.li):not(.eg),
[data-theme="halloween"] .fab,
[data-theme="halloween"] .eg.cur { background: #deafd2; color: #1c1616; border-color: #deafd2; }
[data-theme="halloween"] .btn.w:hover,
[data-theme="halloween"] .tab.on:hover { background: #efd1e7; }
[data-theme="halloween"] .btn:not(.bmc):not(.dc):not(.w),
[data-theme="halloween"] .pill,
[data-theme="halloween"] .lkp,
[data-theme="halloween"] .chip { background: rgba(78, 38, 103, .36); }
[data-theme="halloween"] .ib:hover,
[data-theme="halloween"] .btn:hover,
[data-theme="halloween"] .chip:hover,
[data-theme="halloween"] .pill:hover,
[data-theme="halloween"] .tab:hover { background: rgba(222, 175, 210, .15); }
[data-theme="halloween"] .hero { border-color: rgba(222, 175, 210, .34); box-shadow: 0 24px 70px rgba(7, 3, 12, .35); }
[data-theme="halloween"] .hero::before { background: linear-gradient(transparent 20%, rgba(16, 10, 24, .97)), linear-gradient(90deg, rgba(61, 24, 88, .26), transparent 65%); }
[data-theme="halloween"] .pw,
[data-theme="halloween"] .ec,
[data-theme="halloween"] .cm,
[data-theme="halloween"] .kp,
[data-theme="halloween"] .box,
[data-theme="halloween"] .pop { box-shadow: inset 0 1px 0 rgba(255, 255, 247, .025); }
[data-theme="halloween"] .ec.cur { border-color: #deafd2; }
[data-theme="halloween"] .bar { background: #deafd2; }
[data-theme="halloween"] .av { color: #1c1616; }
[data-theme="halloween"] .sk { background: linear-gradient(90deg, rgba(126, 77, 154, .13), rgba(222, 175, 210, .16), rgba(126, 77, 154, .13)); background-size: 200% 100%; }
[data-theme="halloween"] ::selection { background: #deafd2; color: #1c1616; }
[data-theme="halloween"] footer { background: rgba(10, 5, 16, .38); }
[data-theme="halloween"] option { background: #1b1128; color: #fffff7; }
[data-theme="halloween"] .sw button[data-th="halloween"] { border-color: #deafd2; background: rgba(222, 175, 210, .09); position: relative; }
[data-theme="halloween"] .sw button[data-th="halloween"] i { background: radial-gradient(circle at 70% 30%, #deafd2 0 8%, transparent 9%), linear-gradient(145deg, #100a18, #6b2b91) !important; }
[data-theme="halloween"] .sw button[data-th="halloween"]::after { content: "Seasonal"; display: block; margin-top: 3px; color: var(--mut); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* Hand-drawn sticker artwork. The whole layer is inert and click-through. */
#halloween-decor { position: fixed; inset: 64px 0 0; z-index: 6; overflow: hidden; pointer-events: none; user-select: none; contain: layout style; }
.hw-sticker { position: absolute; top: 0; left: 0; width: 74px; height: 74px; opacity: .88; filter: drop-shadow(0 8px 12px rgba(5, 2, 9, .38)); will-change: transform; }
.hw-sticker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hw-sticker .hw-inner { animation: hw-breathe 3.8s ease-in-out infinite; transform-origin: center; }
.hw-bats { width: 104px; height: 62px; }
.hw-ghost { width: 62px; height: 78px; }
.hw-pumpkin { width: 70px; height: 70px; }
.hw-spider { width: 58px; height: 104px; }
.hw-spider .hw-inner { animation: hw-swing 4.6s ease-in-out infinite; transform-origin: 50% 0; }
.hw-bats .hw-inner { animation-duration: 2.8s; }
.hw-pumpkin .hw-inner { animation-delay: -1.4s; }
.hw-web { position: absolute; width: 142px; height: 142px; opacity: .22; }
.hw-web path { stroke-dasharray: 3 5; animation: hw-web-shimmer 8s linear infinite; }
.hw-web-left { top: 0; left: 0; }
.hw-web-right { right: 0; bottom: 0; transform: rotate(180deg); opacity: .13; }
@keyframes hw-breathe { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); } 50% { transform: translateY(-5px) rotate(2deg) scale(1.025); } }
@keyframes hw-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes hw-web-shimmer { to { stroke-dashoffset: -64; } }

@media (max-width: 900px) {
  .hw-ghost, .hw-pumpkin { display: none; }
}
@media (max-width: 600px) {
  #halloween-decor { top: 64px; }
  .hw-sticker { opacity: .64; }
  .hw-bats { width: 76px; height: 48px; }
  .hw-ghost { width: 45px; height: 58px; }
  .hw-pumpkin { width: 50px; height: 50px; }
  .hw-spider { width: 40px; height: 78px; }
  .hw-web { width: 96px; height: 96px; }
  .hw-web-right { display: none; }
  [data-theme="halloween"] h1 { font-size: 31px; }
  [data-theme="halloween"] .hero h1 { font-size: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-sticker .hw-inner, .hw-web path { animation: none !important; }
  .hw-sticker { will-change: auto; }
}
[data-rm] .hw-sticker .hw-inner,
[data-rm] .hw-web path { animation: none !important; }
[data-rm] .hw-sticker { will-change: auto; }