/* ==========================================================================
   BON · Halloween layer ("Blood Moon")
   Loaded on every page, but every rule is scoped to html[data-theme="halloween"],
   which assets/js/halloween.js only sets inside the season window (1 Oct - 2 Nov)
   or when the visitor forces it. Outside that window this file matches nothing.

   Strategy: the pages already share one token vocabulary (--pink, --crimson,
   --gold, --grad-brand, --font-serif...). Re-pointing those tokens re-skins most
   of the site; the rules further down only chase colours that are hardcoded.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

html[data-theme="halloween"] {
  --hw-night: #07040b;
  --hw-night-2: #0e0716;
  --hw-pumpkin: #ff7a1a;
  --hw-pumpkin-soft: #ffae5e;
  --hw-blood: #d7193a;
  --hw-candle: #ffd79a;
  --hw-bone: #f2eadb;
  --hw-witch: #a6ff5c;
  --hw-violet: #8f6bff;

  --bg-0: var(--hw-night);
  --bg-1: var(--hw-night-2);
  --bg-2: #150a1f;
  --crimson: var(--hw-blood);
  --pink: var(--hw-pumpkin);
  --pink-soft: var(--hw-pumpkin-soft);
  --gold: var(--hw-candle);
  --violet: var(--hw-violet);
  --text-1: var(--hw-bone);
  --grad-brand: linear-gradient(135deg, #b3122e 0%, var(--hw-pumpkin) 52%, var(--hw-candle) 112%);
  --font-serif: 'Pirata One', 'Instrument Serif', Georgia, serif;
}

html[data-theme="halloween"] body { background-color: var(--hw-night); }
html[data-theme="halloween"] ::selection { background: var(--hw-pumpkin); color: #140600; }
html[data-theme="halloween"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--hw-blood), var(--hw-pumpkin));
}

/* Pirata One is a display blackletter: it only ever replaces the italic serif
   accent words, and it reads best upright and slightly tracked. */
html[data-theme="halloween"] .accent-word,
html[data-theme="halloween"] [class*="serif"] {
  font-style: normal;
  letter-spacing: 0.01em;
}
/* Long passages stay in the original serif: blackletter is for a few words. */
html[data-theme="halloween"] [class*="quote"],
html[data-theme="halloween"] blockquote {
  font-family: 'Instrument Serif', Georgia, serif;
}

/* Agency's scroll thread is coloured from JS, out of the recolour's reach. */
html[data-theme="halloween"] .rd-thread i { background: linear-gradient(#d7193a, #ff7a1a) !important; }

/* @generated recolor:start */
/* Every declaration below is generated from the site's own CSS: the same
   selectors, with hardcoded brand pinks swapped for the Halloween palette.
   Regenerate after the base CSS changes. */
/* from assets/css/motion.css */
html[data-theme="halloween"] .mx-curtain__slats > i {
  box-shadow: 0 0 60px rgba(255, 122, 26, 0.25), inset -2px 0 0 rgba(10, 2, 8, 0.55);
}
html[data-theme="halloween"] .mx-logo__rule {
  background: var(--grad-brand, linear-gradient(135deg, #d7193a, #ff7a1a 55%, #ffd18a));
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.55);
}
html[data-theme="halloween"] .mx-logo__mark {
  background: linear-gradient(150deg, rgba(215, 25, 58, 0.95), rgba(255, 122, 26, 0.9) 55%, rgba(255, 209, 138, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 22px rgba(215, 25, 58, 0.4);
}
html[data-theme="halloween"] .mx-logo__bloom {
  background: radial-gradient(circle, rgba(255, 122, 26, 0.85), rgba(215, 25, 58, 0.3) 55%, transparent 70%);
}
html[data-theme="halloween"] .mx-cursor__dot {
  background: var(--pink, #ff7a1a);
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.9);
}
html[data-theme="halloween"] .mx-cursor__ring {
  border: 1.5px solid rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.05);
}
html[data-theme="halloween"] .mx-underline::after {
  background: var(--grad-brand, linear-gradient(135deg, #d7193a, #ff7a1a 55%, #ffd18a));
}

/* from styles.css */
html[data-theme="halloween"][data-page="portfolio"] .cursor-ring {
  border: 1.5px solid rgba(255, 122, 26, 0.6);
}
html[data-theme="halloween"][data-page="portfolio"] .cursor-ring.hovering {
  border-color: rgba(215, 25, 58, 0.9);
  background: rgba(255, 122, 26, 0.08);
}
html[data-theme="halloween"][data-page="portfolio"] .progress-bar {
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.7);
}
html[data-theme="halloween"][data-page="portfolio"] .sound-chip:hover {
  border-color: rgba(255, 122, 26, 0.45);
}
html[data-theme="halloween"][data-page="portfolio"] .sound-chip.active {
  box-shadow: 0 4px 14px rgba(215, 25, 58, 0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .hero-bg-word {
  -webkit-text-stroke: 1px rgba(255, 122, 26, 0.1);
}
html[data-theme="halloween"][data-page="portfolio"] .hero-glow-1 {
  background: radial-gradient(circle, rgba(215, 25, 58,0.5), transparent 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .hero-glow-2 {
  background: radial-gradient(circle, rgba(255, 122, 26,0.4), transparent 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .hero-avatar {
  border: 3px solid rgba(255, 122, 26, 0.5);
  box-shadow: 0 0 40px rgba(255, 122, 26, 0.35), 0 0 90px rgba(215, 25, 58, 0.18);
}
html[data-theme="halloween"][data-page="portfolio"] .avatar-ring.ring-2 {
  border-color: rgba(255, 122, 26, 0.3);
}
html[data-theme="halloween"][data-page="portfolio"] .hero-badge {
  border: 1px solid rgba(255, 122, 26, 0.3);
  background: rgba(255, 122, 26, 0.07);
}
html[data-theme="halloween"][data-page="portfolio"] .btn-primary {
  box-shadow: 0 8px 30px rgba(215, 25, 58, 0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .btn-primary:hover {
  box-shadow: 0 14px 44px rgba(255, 122, 26, 0.5);
}
html[data-theme="halloween"][data-page="portfolio"] .marquee {
  background: rgba(255, 122, 26, 0.03);
}
html[data-theme="halloween"][data-page="portfolio"] .about {
  background: linear-gradient(180deg, transparent, rgba(215, 25, 58,0.045) 45%, transparent);
}
html[data-theme="halloween"][data-page="portfolio"] .stat-card.stat-hit {
  border-color: rgba(255, 122, 26, 0.7);
  box-shadow: 0 0 30px -6px rgba(255, 122, 26, 0.5);
}
html[data-theme="halloween"][data-page="portfolio"] .stat-card.stat-hit .stat-num {
  text-shadow: 0 0 22px rgba(255, 122, 26, 0.6);
}
html[data-theme="halloween"][data-page="portfolio"] .stat-card:hover {
  border-color: rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .xp-card:hover {
  border-color: rgba(255, 122, 26,0.45);
  box-shadow: 0 14px 40px rgba(215, 25, 58,0.16);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-title::before {
  box-shadow: 0 0 14px rgba(255, 122, 26, 0.85);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-card {
  background:
    linear-gradient(120deg, rgba(215, 25, 58, 0.08), rgba(255, 122, 26, 0.1) 48%, rgba(169, 152, 255, 0.07)),
    var(--glass);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-card::before {
  background: radial-gradient(circle at 8% 18%, rgba(255, 122, 26, 0.14), transparent 18rem);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-card::after {
  background: linear-gradient(120deg, transparent 30%, rgba(255, 122, 26, 0.1) 50%, transparent 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-card:hover {
  border-color: rgba(255, 122, 26, 0.5);
  box-shadow: 0 24px 54px rgba(215, 25, 58, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-avatar {
  box-shadow: 0 10px 26px rgba(255, 122, 26, 0.28);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-card:hover .strip-avatar {
  box-shadow: 0 12px 32px rgba(255, 122, 26, 0.45);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-link.ig:hover {
  background: linear-gradient(45deg, rgba(245, 133, 41, 0.3), rgba(200, 60, 20, 0.3), rgba(129, 52, 175, 0.3));
  border-color: rgba(200, 60, 20, 0.65);
  box-shadow: 0 8px 22px rgba(200, 60, 20, 0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .strip-link.ig svg path {
  fill: #ffae5e;
}
html[data-theme="halloween"][data-page="portfolio"] .filter-btn:hover {
  border-color: rgba(255, 122, 26,0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .filter-btn.active {
  box-shadow: 0 6px 22px rgba(215, 25, 58, 0.3);
}
html[data-theme="halloween"][data-page="portfolio"] .work-card:hover {
  border-color: rgba(255, 122, 26, 0.45);
  box-shadow: 0 24px 60px rgba(215, 25, 58, 0.14), 0 0 0 1px rgba(255, 122, 26,0.12);
}
html[data-theme="halloween"][data-page="portfolio"] .card-glow {
  background: radial-gradient(circle, rgba(255, 122, 26,0.16), transparent 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .game-cover {
  background: radial-gradient(120% 120% at 20% 0%, rgba(215, 25, 58,0.4), transparent 55%),
              radial-gradient(120% 120% at 85% 100%, rgba(255, 122, 26,0.35), transparent 55%),
              linear-gradient(135deg, #22091a, #0d0510);
}
html[data-theme="halloween"][data-page="portfolio"] .game-cover span {
  text-shadow: 0 0 30px rgba(255, 122, 26,0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .ct-ring {
  border: 3px solid rgba(255, 122, 26, 0.22);
}
html[data-theme="halloween"][data-page="portfolio"] .card-play-btn {
  border: 1px solid rgba(255, 122, 26, 0.45);
  box-shadow: 0 8px 24px rgba(255, 122, 26, 0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .card-play:hover .card-play-btn {
  background: linear-gradient(90deg, #ff7a1a 0%, #ff8a4a 100%);
}
html[data-theme="halloween"][data-page="portfolio"] .st-current {
  color: #ffc999;
  background: rgba(255, 122, 26, 0.16);
  border: 1px solid rgba(255, 122, 26,0.42);
}
html[data-theme="halloween"][data-page="portfolio"] .live-pill.on {
  border-color: rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .live-pill.on .live-dot,
html[data-theme="halloween"][data-page="portfolio"] .hcard-live.on .live-dot,
html[data-theme="halloween"][data-page="portfolio"] .live-dash-head .live-dot {
  box-shadow: 0 0 10px rgba(255, 122, 26,0.9);
}
html[data-theme="halloween"][data-page="portfolio"] .act-play {
  background: linear-gradient(90deg, #ff7a1a 0%, #ff8a4a 100%);
  box-shadow: 0 8px 22px rgba(255, 122, 26, 0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .act-play:hover {
  box-shadow: 0 14px 32px rgba(255, 122, 26, 0.5);
}
html[data-theme="halloween"][data-page="portfolio"] .process-card:hover {
  border-color: rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .process-num {
  -webkit-text-stroke: 1.5px rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .game-pill:hover {
  box-shadow: 0 8px 24px rgba(215, 25, 58, 0.3);
}
html[data-theme="halloween"][data-page="portfolio"] .team-avatar {
  box-shadow: 0 8px 26px rgba(215, 25, 58, 0.3);
}
html[data-theme="halloween"][data-page="portfolio"] .contact-bg-word {
  -webkit-text-stroke: 1px rgba(215, 25, 58, 0.12);
}
html[data-theme="halloween"][data-page="portfolio"] .social-card::after {
  background: linear-gradient(120deg, transparent 30%, rgba(255, 122, 26,0.1) 50%, transparent 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .social-card:hover {
  border-color: rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.05);
}
html[data-theme="halloween"][data-page="portfolio"] .social-icon-bg {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 30px -8px rgba(0,0,0,0.7), 0 0 22px -4px rgba(255, 122, 26,0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .social-card:hover .social-icon-bg {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 20px 44px -10px rgba(0,0,0,0.8), 0 0 30px -2px rgba(255, 122, 26,0.55);
}
html[data-theme="halloween"][data-page="portfolio"] .id-feature:hover {
  border-color: rgba(255, 122, 26,0.4);
}
html[data-theme="halloween"][data-page="portfolio"] .id-card {
  border: 1px solid rgba(255, 122, 26, 0.22);
  box-shadow: 0 30px 90px rgba(215, 25, 58, 0.16), 0 10px 40px rgba(0,0,0,0.6);
}
html[data-theme="halloween"][data-page="portfolio"] .id-card:hover {
  box-shadow: 0 44px 120px rgba(255, 122, 26, 0.28), 0 10px 40px rgba(0,0,0,0.6);
}
html[data-theme="halloween"][data-page="portfolio"] .id-banner {
  background: radial-gradient(120% 200% at 20% 0%, rgba(215, 25, 58,0.55), transparent 55%),
              radial-gradient(120% 220% at 85% 10%, rgba(255, 122, 26,0.5), transparent 60%),
              linear-gradient(120deg, #2a0a1e, #12051a 70%);
}
html[data-theme="halloween"][data-page="portfolio"] .id-avatar {
  box-shadow: 0 0 30px rgba(255, 122, 26,0.45), 0 0 70px rgba(215, 25, 58,0.25);
}
html[data-theme="halloween"][data-page="portfolio"] .id-badges span:hover {
  border-color: rgba(255, 122, 26,0.5);
  background: rgba(255, 122, 26,0.08);
}
html[data-theme="halloween"][data-page="portfolio"] .id-cta {
  box-shadow: 0 8px 26px rgba(215, 25, 58,0.3);
}
html[data-theme="halloween"][data-page="portfolio"] .id-cta:hover {
  box-shadow: 0 14px 40px rgba(255, 122, 26,0.45);
}
html[data-theme="halloween"][data-page="portfolio"] .id-row:hover {
  background: rgba(255, 122, 26,0.06);
}
html[data-theme="halloween"][data-page="portfolio"] .social-rail::before,
html[data-theme="halloween"][data-page="portfolio"] .social-rail::after {
  background: linear-gradient(180deg, transparent, rgba(255, 122, 26,0.5), transparent);
}
html[data-theme="halloween"][data-page="portfolio"] .rail-link:hover {
  box-shadow: 0 8px 22px rgba(215, 25, 58,0.35);
}
html[data-theme="halloween"][data-page="portfolio"] .statement-progress span {
  box-shadow: 0 0 10px rgba(255, 122, 26,0.8);
}
html[data-theme="halloween"][data-page="portfolio"] .hscroll-bar span {
  box-shadow: 0 0 8px rgba(255, 122, 26,0.7);
}
html[data-theme="halloween"][data-page="portfolio"] .hscroll-arrow:hover {
  border-color: rgba(255, 122, 26,0.5);
}
html[data-theme="halloween"][data-page="portfolio"] .hcard::before {
  background: radial-gradient(120% 90% at 80% -10%, rgba(215, 25, 58,0.22), transparent 55%),
              radial-gradient(120% 90% at 10% 110%, rgba(255, 122, 26,0.16), transparent 55%);
}
html[data-theme="halloween"][data-page="portfolio"] .hcard:hover {
  border-color: rgba(255, 122, 26,0.45);
}
html[data-theme="halloween"][data-page="portfolio"] .hcard-role {
  border: 1px solid rgba(255, 122, 26,0.3);
  background: rgba(255, 122, 26,0.07);
}
html[data-theme="halloween"][data-page="portfolio"] .live-dashboard {
  border: 1px solid rgba(255, 122, 26, 0.28);
  background: linear-gradient(160deg, rgba(215, 25, 58,0.08), rgba(255, 122, 26,0.05) 60%, var(--bg-0));
}
html[data-theme="halloween"][data-page="portfolio"] .live-dashboard::before {
  background: radial-gradient(60% 120% at 90% -10%, rgba(215, 25, 58,0.18), transparent 60%);
}
html[data-theme="halloween"][data-page="portfolio"] .live-bars i {
  background: linear-gradient(180deg, rgba(255, 122, 26,0.65), rgba(215, 25, 58,0.12));
}
html[data-theme="halloween"][data-page="portfolio"] .gauge-fill {
  filter: drop-shadow(0 0 6px rgba(255, 122, 26,0.6));
}
html[data-theme="halloween"][data-page="portfolio"] .live-refresh:hover {
  border-color: rgba(255, 122, 26,0.5);
}
html[data-theme="halloween"][data-page="portfolio"] .hcard-cta .hcard-num {
  -webkit-text-stroke-color: rgba(255, 122, 26,0.6);
}

/* from index.html */
html[data-theme="halloween"][data-page="index"] .cursor-dot {
  box-shadow: 0 0 14px rgba(255, 122, 26,0.9);
}
html[data-theme="halloween"][data-page="index"] .avatar-ring {
  filter: drop-shadow(0 0 18px rgba(255, 122, 26,0.45));
}
html[data-theme="halloween"][data-page="index"] .event-banner {
  background: linear-gradient(120deg, rgba(255,209,138,0.12), rgba(255, 122, 26,0.07) 60%, rgba(215, 25, 58,0.08));
}
html[data-theme="halloween"][data-page="index"] .event-banner::before {
  background: conic-gradient(from var(--spin3, 0deg), rgba(255,209,138,0.9), transparent 25%, rgba(255, 122, 26,0.8) 50%, transparent 75%, rgba(255,209,138,0.9));
}
html[data-theme="halloween"][data-page="index"] .event-banner:hover {
  box-shadow: 0 14px 36px rgba(255,209,138,0.22), 0 0 24px rgba(255, 122, 26,0.18);
}
html[data-theme="halloween"][data-page="index"] .social-btn.ig:hover {
  box-shadow: 0 12px 30px rgba(225, 70, 20,0.42), 0 0 22px rgba(98,40,215,0.3);
}
html[data-theme="halloween"][data-page="index"] .social-btn.rb:hover {
  box-shadow: 0 12px 30px rgba(215, 25, 58,0.42), 0 0 22px rgba(215, 25, 58,0.28);
}
html[data-theme="halloween"][data-page="index"] .page-btn::after {
  background: linear-gradient(120deg, rgba(215, 25, 58,0.14), rgba(255, 122, 26,0.10) 55%, transparent);
}
html[data-theme="halloween"][data-page="index"] .page-btn:hover {
  box-shadow: 0 18px 46px rgba(215, 25, 58,0.26), 0 0 30px rgba(255, 122, 26,0.15);
}
html[data-theme="halloween"][data-page="index"] .btn-glyph {
  box-shadow: 0 6px 20px rgba(215, 25, 58,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* from agency.html */
html[data-theme="halloween"][data-page="agency"] ::selection {
  background: rgba(255, 122, 26, 0.35);
}
html[data-theme="halloween"][data-page="agency"] body::before {
  background:
    radial-gradient(55% 45% at 10% 12%, rgba(255, 122, 26, 0.14), transparent 60%),
    radial-gradient(45% 40% at 85% 20%, rgba(215, 25, 58, 0.13), transparent 60%),
    radial-gradient(50% 50% at 70% 85%, rgba(169, 152, 255, 0.09), transparent 65%),
    radial-gradient(40% 35% at 20% 75%, rgba(255, 209, 138, 0.07), transparent 60%);
}
@media (pointer: fine) {
  html[data-theme="halloween"][data-page="agency"] .cur-dot {
    box-shadow: 0 0 12px rgba(255, 174, 94,0.9);
  }
  html[data-theme="halloween"][data-page="agency"] .cur-ring {
    border: 1.5px solid rgba(255, 174, 94,0.4);
  }
  html[data-theme="halloween"][data-page="agency"] .cur-ring.big {
    border-color: rgba(255, 122, 26,0.85);
    background: rgba(255, 122, 26,0.08);
  }
}
html[data-theme="halloween"][data-page="agency"] .progress {
  box-shadow: 0 0 12px rgba(255, 122, 26,0.7);
}
html[data-theme="halloween"][data-page="agency"] .logo-img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(255, 122, 26, 0.25);
}
html[data-theme="halloween"][data-page="agency"] .sfx-toggle:hover {
  border-color: rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.08);
}
html[data-theme="halloween"][data-page="agency"] .sfx-toggle.active {
  border-color: rgba(255, 122, 26, 0.6);
  background: rgba(255, 122, 26, 0.12);
  box-shadow: 0 0 16px rgba(255, 122, 26, 0.25);
}
html[data-theme="halloween"][data-page="agency"] nav.top a.cta {
  box-shadow: 0 4px 18px rgba(215, 25, 58,0.32);
}
html[data-theme="halloween"][data-page="agency"] nav.top a.cta:hover {
  box-shadow: 0 8px 26px rgba(255, 122, 26,0.45);
}
html[data-theme="halloween"][data-page="agency"] .hero-tag {
  border: 1px solid rgba(255, 122, 26,0.35);
  background: rgba(255, 122, 26,0.07);
  box-shadow: 0 0 24px rgba(255, 122, 26, 0.12);
}
html[data-theme="halloween"][data-page="agency"] .btn.primary {
  box-shadow: 0 8px 26px rgba(215, 25, 58,0.35);
}
html[data-theme="halloween"][data-page="agency"] .btn.primary:hover {
  box-shadow: 0 14px 38px rgba(255, 122, 26,0.48);
}
html[data-theme="halloween"][data-page="agency"] .btn.ghost:hover {
  border-color: rgba(255, 122, 26,0.5);
  background: rgba(255, 122, 26,0.06);
}
html[data-theme="halloween"][data-page="agency"] .live-cell:hover {
  border-color: rgba(255, 122, 26,0.45);
  box-shadow: 0 14px 34px rgba(215, 25, 58,0.16);
}
html[data-theme="halloween"][data-page="agency"] .sec-tag::after {
  background: linear-gradient(90deg, rgba(255, 122, 26,0.6), transparent);
}
html[data-theme="halloween"][data-page="agency"] .dept-btn:hover {
  border-color: rgba(255, 122, 26, 0.45);
  background: rgba(255, 122, 26, 0.08);
}
html[data-theme="halloween"][data-page="agency"] .dept-btn.active {
  box-shadow: 0 6px 24px rgba(215, 25, 58, 0.35);
}
html[data-theme="halloween"][data-page="agency"] .spotlight-card {
  background:
    radial-gradient(80% 80% at 20% 0%, rgba(215, 25, 58, 0.12), transparent 60%),
    radial-gradient(80% 80% at 90% 100%, rgba(255, 122, 26, 0.10), transparent 65%),
    linear-gradient(160deg, #110716 0%, #08030b 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 122, 26, 0.08);
}
html[data-theme="halloween"][data-page="agency"] .spotlight-card:hover {
  border-color: rgba(255, 122, 26, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 50px rgba(215, 25, 58, 0.16);
}
html[data-theme="halloween"][data-page="agency"] .btn-inspect {
  background: rgba(255, 122, 26, 0.12);
  border: 1px solid rgba(255, 122, 26, 0.45);
}
html[data-theme="halloween"][data-page="agency"] .btn-inspect:hover {
  box-shadow: 0 8px 24px rgba(215, 25, 58, 0.35);
}
html[data-theme="halloween"][data-page="agency"] .member-card {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 26, 0.14), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #0c0510;
}
html[data-theme="halloween"][data-page="agency"] .member-card:hover,
html[data-theme="halloween"][data-page="agency"] .member-card:focus-visible {
  border-color: rgba(255, 122, 26, 0.55);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 28px rgba(215, 25, 58, 0.2);
}
html[data-theme="halloween"][data-page="agency"] .member-card.spotlit {
  box-shadow: 0 0 35px rgba(255, 122, 26, 0.35), inset 0 0 20px rgba(255, 122, 26, 0.08);
}
html[data-theme="halloween"][data-page="agency"] .member-badge.lead {
  background: rgba(255, 122, 26, 0.14);
  border-color: rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="agency"] .dossier-window {
  background:
    radial-gradient(100% 100% at 90% 0%, rgba(255, 122, 26, 0.12), transparent 50%),
    linear-gradient(160deg, #110716 0%, #08030b 100%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85), 0 0 50px rgba(215, 25, 58, 0.2);
}
html[data-theme="halloween"][data-page="agency"] .dossier-close:hover {
  border-color: rgba(255, 122, 26, 0.7);
}
html[data-theme="halloween"][data-page="agency"] .dossier-nav button:hover {
  border-color: rgba(255, 122, 26, 0.6);
  background: rgba(255, 122, 26, 0.12);
}
html[data-theme="halloween"][data-page="agency"] .step:hover {
  border-color: rgba(255, 122, 26,0.45);
  box-shadow: 0 14px 34px rgba(215, 25, 58,0.14);
}
html[data-theme="halloween"][data-page="agency"] .game-card:hover {
  border-color: rgba(255, 122, 26,0.45);
}
html[data-theme="halloween"][data-page="agency"] .card-play-btn {
  border: 1px solid rgba(255, 122, 26, 0.45);
  box-shadow: 0 8px 24px rgba(255, 122, 26, 0.35);
}
html[data-theme="halloween"][data-page="agency"] .game-media .card-play:hover .card-play-btn {
  background: linear-gradient(90deg, #ff7a1a 0%, #ff8a4a 100%);
}
html[data-theme="halloween"][data-page="agency"] .ct-ring {
  border: 3px solid rgba(255, 122, 26, 0.22);
}
html[data-theme="halloween"][data-page="agency"] .game-cover-fallback {
  color: #ff7a1a;
}
html[data-theme="halloween"][data-page="agency"] .game-live.on {
  border-color: rgba(255, 122, 26, 0.4);
}
html[data-theme="halloween"][data-page="agency"] .game-live i {
  box-shadow: 0 0 10px rgba(255, 122, 26,0.9);
}
html[data-theme="halloween"][data-page="agency"] .game-links .act-play {
  background: linear-gradient(90deg, #ff7a1a 0%, #ff8a4a 100%);
  box-shadow: 0 8px 22px rgba(255, 122, 26, 0.35);
}
html[data-theme="halloween"][data-page="agency"] .game-links .act-play:hover {
  box-shadow: 0 14px 32px rgba(255, 122, 26, 0.5);
}

/* @generated recolor:end */

/* --------------------------------------------------------------- atmosphere
   One fixed layer behind everything (z-index -1 paints above the canvas
   background but under all page content): blood moon, drifting fog, bats and
   two corner cobwebs. Built by halloween.js. */

.hw-atmos { display: none; }

html[data-theme="halloween"] .hw-atmos {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Blood moon. Maria are soft radial gradients so the whole thing is one element. */
.hw-moon {
  position: absolute;
  top: clamp(70px, 9vh, 120px);
  right: clamp(-40px, 6vw, 140px);
  width: clamp(150px, 19vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 22% 16% at 36% 34%, rgba(95, 8, 22, 0.32), transparent 62%),
    radial-gradient(ellipse 18% 22% at 60% 56%, rgba(95, 8, 22, 0.26), transparent 70%),
    radial-gradient(ellipse 14% 10% at 46% 72%, rgba(95, 8, 22, 0.22), transparent 70%),
    radial-gradient(ellipse 9% 9% at 70% 32%, rgba(95, 8, 22, 0.2), transparent 70%),
    radial-gradient(ellipse 6% 6% at 28% 58%, rgba(95, 8, 22, 0.18), transparent 70%),
    radial-gradient(circle at 40% 34%, #ffd2b4 0%, #f08a5d 30%, #c7243b 66%, #5a0718 100%);
  box-shadow:
    0 0 60px 8px rgba(215, 25, 58, 0.32),
    0 0 200px 70px rgba(215, 25, 58, 0.13),
    inset -22px -26px 60px rgba(30, 0, 8, 0.6),
    inset 8px 10px 30px rgba(255, 220, 190, 0.18);
  opacity: 0.82;
  animation: hw-moon-breathe 9s ease-in-out infinite;
}
@keyframes hw-moon-breathe {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.015); }
}
/* A faint ring of haze around it. */
.hw-moon::after {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 66%, rgba(255, 140, 110, 0.07) 76%, transparent 100%);
}

html[data-page="index"] .hw-moon { top: 6vh; right: 8vw; width: clamp(130px, 16vw, 240px); }
html[data-page="agency"] .hw-moon { right: 3vw; top: 11vh; width: clamp(120px, 13vw, 210px); }

/* Fog: soft radial gradients only (a filter: blur on a full-width layer would
   re-filter every frame). Three bands at different speeds give parallax. */
.hw-fog {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 46vh;
  bottom: -8vh;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(170, 150, 200, 0.10), transparent 70%),
    radial-gradient(35% 55% at 55% 80%, rgba(150, 130, 190, 0.09), transparent 70%),
    radial-gradient(30% 50% at 85% 65%, rgba(170, 150, 200, 0.08), transparent 70%);
  will-change: transform;
  animation: hw-drift 60s linear infinite alternate;
}
.hw-fog--2 { bottom: -14vh; height: 38vh; opacity: 0.8; animation-duration: 85s; animation-direction: alternate-reverse; }
.hw-fog--3 { bottom: auto; top: -10vh; height: 30vh; opacity: 0.45; animation-duration: 110s; }
@keyframes hw-drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, 0, 0); } }

/* Vignette: the corners fall off into night. */
.hw-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3, 1, 6, 0.75) 100%);
}

/* Cobwebs: drawn in SVG by halloween.js, faint, in the two top corners. */
.hw-web {
  position: absolute;
  top: 0;
  width: clamp(120px, 14vw, 220px);
  aspect-ratio: 1;
  color: rgba(242, 234, 219, 0.11);
}
.hw-web--l { left: 0; }
.hw-web--r { right: 0; transform: scaleX(-1); }
.hw-web svg { width: 100%; height: 100%; display: block; }

/* Bat flock: drawn on a canvas by halloween.js, in front of the moon and
   behind the page. */
.hw-flock { position: absolute; inset: 0; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* WebGL moon: the canvas carries its own halo and clouds, so the CSS moon's
   painted surface steps aside and only the box is kept for layout. */
.hw-moon.is-gl { background: none; box-shadow: none; animation: none; opacity: 1; }
.hw-moon.is-gl::after { display: none; }
.hw-moon__gl {
  position: absolute;
  left: -60%; top: -60%;
  width: 220%; height: 220%;
  display: block;
}

/* ------------------------------------------------------- dripping header
   A blood drip hangs from the bottom edge of the sticky navs. Pure CSS mask so
   it follows the header width at any size. */

html[data-theme="halloween"] .wrap > header,
html[data-theme="halloween"] nav.nav { position: relative; }
html[data-theme="halloween"] .wrap > header::after,
html[data-theme="halloween"] nav.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(180deg, #8e0c22, #5e0616);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cpath d='M0 0H300V3H265.2C264.4 4.5 264.6 12 264.6 13.4A2.6 2.6 0 0 1 259.4 13.4C259.4 12 259.6 4.5 258.8 3H211.2C210.4 4.5 210.6 7 210.6 8.4A2.6 2.6 0 0 1 205.4 8.4C205.4 7 205.6 4.5 204.8 3H153.2C152.4 4.5 152.6 19 152.6 20.4A2.6 2.6 0 0 1 147.4 20.4C147.4 19 147.6 4.5 146.8 3H99.2C98.4 4.5 98.6 9 98.6 10.4A2.6 2.6 0 0 1 93.4 10.4C93.4 9 93.6 4.5 92.8 3H41.2C40.4 4.5 40.6 14 40.6 15.4A2.6 2.6 0 0 1 35.4 15.4C35.4 14 35.6 4.5 34.8 3H0Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 300px 24px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cpath d='M0 0H300V3H265.2C264.4 4.5 264.6 12 264.6 13.4A2.6 2.6 0 0 1 259.4 13.4C259.4 12 259.6 4.5 258.8 3H211.2C210.4 4.5 210.6 7 210.6 8.4A2.6 2.6 0 0 1 205.4 8.4C205.4 7 205.6 4.5 204.8 3H153.2C152.4 4.5 152.6 19 152.6 20.4A2.6 2.6 0 0 1 147.4 20.4C147.4 19 147.6 4.5 146.8 3H99.2C98.4 4.5 98.6 9 98.6 10.4A2.6 2.6 0 0 1 93.4 10.4C93.4 9 93.6 4.5 92.8 3H41.2C40.4 4.5 40.6 14 40.6 15.4A2.6 2.6 0 0 1 35.4 15.4C35.4 14 35.6 4.5 34.8 3H0Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 300px 24px repeat-x;
  opacity: 0.8;
}

/* ------------------------------------------------------ candlelit surfaces
   Cards keep their layout; on hover they catch a warm, flickering light. */

@keyframes hw-flicker {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 122, 26, 0.22); }
  22% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 140, 40, 0.32); }
  41% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 110, 20, 0.18); }
  63% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 38px rgba(255, 150, 50, 0.34); }
  80% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 122, 26, 0.2); }
}

html[data-theme="halloween"] .member-card:hover,
html[data-theme="halloween"] .work-card:hover,
html[data-theme="halloween"] .link-card:hover,
html[data-theme="halloween"] .stat-card:hover,
html[data-theme="halloween"] .game-card:hover {
  animation: hw-flicker 2.2s steps(1, end) infinite;
  border-color: rgba(255, 122, 26, 0.45) !important;
}

/* Designed touches on top of the generated recolour (higher specificity on
   purpose, so they win over it). */
html[data-theme="halloween"][data-page] .glow-1 { --glow-tint: rgba(215, 25, 58, 0.22); }
html[data-theme="halloween"][data-page] .glow-2 { --glow-tint: rgba(255, 122, 26, 0.13); }
html[data-theme="halloween"][data-page] .glow-3 { --glow-tint: rgba(166, 255, 92, 0.05); }
/* The active roster filter reads as a lit candle. */
html[data-theme="halloween"] .dept-btn.active {
  background: var(--grad-brand) !important;
  color: #1a0602 !important;
  border-color: transparent !important;
  box-shadow: 0 0 22px rgba(255, 122, 26, 0.3);
}
/* Portfolio's own ember canvas is drawn in pink; rotate it into flame. */
html[data-theme="halloween"] #embers { filter: hue-rotate(68deg) saturate(1.2); }

/* -------------------------------------------------------------- the cursor
   Shadow's motion cursor becomes a candle flame: the dot is the flame, the
   ring its halo. */

html[data-theme="halloween"] .mx-cursor__dot {
  width: 9px; height: 13px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #fff6d8 0 22%, var(--hw-candle) 40%, var(--hw-pumpkin) 75%, rgba(215, 25, 58, 0.8));
  box-shadow: 0 0 10px rgba(255, 160, 60, 0.9), 0 0 26px rgba(255, 122, 26, 0.45);
  animation: hw-flame 0.9s ease-in-out infinite alternate;
}
@keyframes hw-flame {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.25); }
  100% { filter: brightness(0.92); }
}
html[data-theme="halloween"] .mx-cursor__ring {
  border-color: rgba(255, 170, 90, 0.4) !important;
  box-shadow: 0 0 22px rgba(255, 122, 26, 0.15);
}

/* ----------------------------------------------------------------- the dock
   Bottom-left: theme toggle and ambience toggle. Built by halloween.js inside
   the season, so it never appears outside it. */

.hw-dock {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9000;
  display: flex;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
}
.hw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 5, 14, 0.72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #e9e1d4;
  font: 700 0.72rem/1 'Outfit', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
}
.hw-btn:hover { transform: translateY(-1px); border-color: rgba(255, 122, 26, 0.55); color: #fff; }
.hw-btn:focus-visible { outline: 2px solid var(--hw-pumpkin, #ff7a1a); outline-offset: 3px; }
.hw-btn svg { width: 22px; height: 22px; flex: none; }
.hw-btn[aria-pressed="true"] {
  border-color: rgba(255, 122, 26, 0.6);
  background: rgba(255, 122, 26, 0.12);
  color: #ffd7a8;
  box-shadow: 0 0 18px rgba(255, 122, 26, 0.2);
}
.hw-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; width: 22px; justify-content: center; }
.hw-bars i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.hw-bars i:nth-child(2) { height: 11px; }
.hw-bars i:nth-child(3) { height: 7px; }
.hw-bars i:nth-child(4) { height: 13px; }
.hw-btn[aria-pressed="true"] .hw-bars i { animation: hw-bar 1.1s ease-in-out infinite alternate; opacity: 1; }
.hw-btn[aria-pressed="true"] .hw-bars i:nth-child(2) { animation-delay: 0.25s; }
.hw-btn[aria-pressed="true"] .hw-bars i:nth-child(3) { animation-delay: 0.5s; }
.hw-btn[aria-pressed="true"] .hw-bars i:nth-child(4) { animation-delay: 0.15s; }
@keyframes hw-bar { from { height: 4px; } to { height: 16px; } }

/* Outside the theme (visitor switched it off) the dock goes quiet and only the
   pumpkin stays, so the theme can be switched back on. */
html:not([data-theme="halloween"]) .hw-btn--amb { display: none; }

/* Icon-only at rest so the dock never sits on top of content; the label
   slides out on hover or keyboard focus. */
.hw-btn { padding: 0 11px; gap: 0; }
.hw-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s, margin 0.4s;
}
.hw-btn:hover .hw-label,
.hw-btn:focus-visible .hw-label { max-width: 120px; opacity: 1; margin-left: 8px; }
@media (hover: none) { .hw-btn:hover .hw-label { max-width: 0; opacity: 0; margin-left: 0; } }

/* ------------------------------------------------------------------- "boo"
   Typed b-o-o (or the pumpkin tapped three times quickly). A swarm of bats
   bursts across and a ghost rises, then everything leaves. No flashes. */

.hw-boo {
  position: fixed;
  inset: 0;
  z-index: 99000;
  pointer-events: none;
  overflow: hidden;
}
.hw-boo__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 55%, rgba(4, 1, 8, 0.25), rgba(4, 1, 8, 0.82));
  opacity: 0;
  animation: hw-shade 2.8s ease forwards;
}
@keyframes hw-shade { 0% { opacity: 0; } 18% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.hw-boo__ghost {
  position: absolute;
  left: 50%; top: 50%;
  width: min(42vw, 260px);
  color: #efe9f7;
  filter: drop-shadow(0 0 30px rgba(220, 210, 255, 0.45));
  transform: translate(-50%, 30%) scale(0.6);
  opacity: 0;
  animation: hw-ghost 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hw-boo__ghost svg { width: 100%; display: block; animation: hw-sway 1.6s ease-in-out infinite alternate; transform-origin: 50% 20%; }
@keyframes hw-sway { from { transform: rotate(-3deg) skewX(2deg); } to { transform: rotate(3deg) skewX(-2deg); } }
@keyframes hw-ghost {
  0% { transform: translate(-50%, 30%) scale(0.6); opacity: 0; }
  22% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.95; }
  34% { transform: translate(-50%, -50%) scale(1); }
  70% { transform: translate(-50%, -54%) scale(1); opacity: 0.95; }
  100% { transform: translate(-50%, -140%) scale(0.9); opacity: 0; }
}
.hw-boo__bat {
  position: absolute;
  width: var(--s);
  color: #030105;
  top: var(--y);
  left: -12vw;
  animation: hw-swarm var(--d) cubic-bezier(0.4, 0, 0.2, 1) var(--delay) forwards;
}
.hw-boo__bat svg { width: 100%; display: block; animation: hw-flap 0.18s ease-in-out infinite alternate; }
@keyframes hw-swarm {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(126vw, var(--dy), 0); }
}

/* Bats sweeping across page transitions (and the boo). */
.hw-swarm {
  position: fixed;
  inset: 0;
  z-index: 99001;
  pointer-events: none;
  overflow: hidden;
}

/* Shadow's page curtain: slats of dark blood instead of the bright brand
   gradient, so the bats crossing it read as silhouettes. */
html[data-theme="halloween"] .mx-curtain__slats i {
  background: linear-gradient(180deg, #5c0817 0%, #2a040c 55%, #120208 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 90, 60, 0.18) !important;
}

/* -------------------------------------------------------- brand touches */

/* The logo's crescent becomes a blood moon on a night-black tile. */
html[data-theme="halloween"] .mx-logo__mark {
  background: radial-gradient(circle at 35% 30%, #2b0c16, #0a0408 75%) !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.35), 0 0 18px rgba(215, 25, 58, 0.45) !important;
}
html[data-theme="halloween"] .mx-logo__mark svg {
  color: #ff5a36;
  filter: drop-shadow(0 0 4px rgba(255, 80, 40, 0.85));
}

/* Accent words glow faintly, like they were lit from below by a candle. */
html[data-theme="halloween"] .accent-word {
  filter: drop-shadow(0 0 14px rgba(255, 122, 26, 0.28)) drop-shadow(0 2px 0 rgba(90, 8, 20, 0.6));
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hw-moon, .hw-moon::after, .hw-fog,
  html[data-theme="halloween"] .mx-cursor__dot { animation: none !important; }
  .hw-boo__bat { display: none; }
  html[data-theme="halloween"] .member-card:hover,
  html[data-theme="halloween"] .work-card:hover,
  html[data-theme="halloween"] .link-card:hover,
  html[data-theme="halloween"] .stat-card:hover,
  html[data-theme="halloween"] .game-card:hover { animation: none; }
  .hw-boo__ghost { animation: hw-ghost-calm 2.6s ease forwards; transform: translate(-50%, -50%); }
  @keyframes hw-ghost-calm { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 0.9; } }
}