/* VanKpa Halloween 2026 — premium seasonal layer.
   The official red-and-gold identity and all page structures remain intact. */
:root {
  --halloween-ink: #08060c;
  --halloween-night: #130c1d;
  --halloween-plum: #2a1038;
  --halloween-violet: #6b2f91;
  --halloween-orange: #ff761a;
  --halloween-amber: #ffc857;
  --halloween-cream: #fff2de;
  --halloween-line: rgba(255, 153, 55, .32);
  --halloween-glow: 0 0 42px rgba(255, 103, 22, .18);
}

html.halloween-theme {
  color-scheme: dark;
  accent-color: var(--halloween-orange);
}

html.halloween-theme body {
  background-color: var(--halloween-ink);
  background-image:
    radial-gradient(circle at 9% 8%, rgba(124, 48, 157, .22), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(255, 108, 20, .14), transparent 29rem),
    linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25% 75%, rgba(255,255,255,.018) 75%);
  background-size: auto, auto, 44px 44px;
}

html.halloween-theme body::selection {
  color: #160918;
  background: var(--halloween-amber);
}

/* Core VanKpa navigation and expanded menu */
html.halloween-theme .site-header-v3,
html.halloween-theme .site-header,
html.halloween-theme body > header {
  background: color-mix(in srgb, var(--halloween-ink) 91%, transparent) !important;
  border-color: var(--halloween-line) !important;
  box-shadow: 0 1px 0 rgba(255, 200, 87, .18), 0 18px 45px rgba(0,0,0,.3);
  backdrop-filter: blur(18px) saturate(125%);
}

html.halloween-theme .site-header-v3::before,
html.halloween-theme .site-header::before {
  background: linear-gradient(90deg, #b20e21 0 34%, var(--halloween-orange) 34% 68%, var(--halloween-amber) 68% 100%) !important;
}

html.halloween-theme .brand-v2 img,
html.halloween-theme .brand img,
html.halloween-theme [class*="logo" i] img {
  filter: drop-shadow(0 0 11px rgba(255, 128, 28, .28));
}

html.halloween-theme .nav-pill-v3,
html.halloween-theme .menu-trigger-v3,
html.halloween-theme .header-contact-v3 {
  border-color: rgba(255, 200, 87, .48) !important;
  background-color: rgba(31, 13, 38, .72) !important;
}

html.halloween-theme .nav-pill-v3 a:hover,
html.halloween-theme .nav-pill-v3 a:focus-visible,
html.halloween-theme .nav-pill-v3 a.active,
html.halloween-theme .site-menu-details a:hover,
html.halloween-theme .site-menu-details a:focus-visible {
  color: var(--halloween-amber) !important;
}

html.halloween-theme .menu-trigger-v3 b,
html.halloween-theme .creativeoButton--accent,
html.halloween-theme .button-v2.gold,
html.halloween-theme .header-contact-v3:hover,
html.halloween-theme .header-contact-v3:focus-visible {
  color: #140917 !important;
  background: linear-gradient(135deg, var(--halloween-amber), var(--halloween-orange)) !important;
  border-color: var(--halloween-amber) !important;
  box-shadow: 0 10px 28px rgba(255, 104, 22, .24) !important;
}

html.halloween-theme .menu-v3 {
  color: var(--halloween-cream) !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 113, 24, .18), transparent 25rem),
    radial-gradient(circle at 18% 82%, rgba(112, 43, 145, .28), transparent 31rem),
    linear-gradient(145deg, #08060c, #180b20 62%, #0b080f) !important;
}

html.halloween-theme .menu-v3-nav > a,
html.halloween-theme .menu-v3-footer,
html.halloween-theme .menu-v3-aside {
  border-color: rgba(255, 159, 62, .22) !important;
}

html.halloween-theme .menu-v3-nav > a.current {
  color: #130817 !important;
  background: linear-gradient(90deg, var(--halloween-orange), var(--halloween-amber)) !important;
}

html.halloween-theme .menu-v3-group-label,
html.halloween-theme .creativeoEyebrow,
html.halloween-theme .eyebrow-v2,
html.halloween-theme .eyebrow {
  color: var(--halloween-orange) !important;
}

/* Hero atmosphere — all primary and demo pages */
html.halloween-theme .creativeoHero,
html.halloween-theme .creativeoDetailHero,
html.halloween-theme .hero-v2,
html.halloween-theme .page-hero-v2,
html.halloween-theme .page-hero-v3,
html.halloween-theme .contact-hero-v2,
html.halloween-theme .case-hero-v2,
html.halloween-theme main > section:first-child,
html.halloween-theme main > article:first-child {
  border-color: var(--halloween-line) !important;
  box-shadow: inset 0 -1px rgba(255, 200, 87, .14), var(--halloween-glow);
}

html.halloween-theme .creativeoHero,
html.halloween-theme .creativeoDetailHero,
html.halloween-theme .hero-v2 {
  background-image:
    radial-gradient(circle at 16% 10%, rgba(110, 42, 145, .22), transparent 28rem),
    radial-gradient(circle at 88% 38%, rgba(255, 112, 25, .15), transparent 32rem) !important;
}

html.halloween-theme .site-hero-title em,
html.halloween-theme .creativeoHero h1 em,
html.halloween-theme .creativeoDetailHero h1 em,
html.halloween-theme main > section:first-child h1 em {
  color: var(--halloween-orange) !important;
  text-shadow: 0 0 30px rgba(255, 111, 20, .2);
}

html.halloween-theme .creativeoGhostWord {
  color: rgba(255, 127, 29, .07) !important;
  -webkit-text-stroke-color: rgba(255, 200, 87, .12) !important;
}

/* Sections, editorial cards, forms, and interactive surfaces */
html.halloween-theme .creativeoPage > section:nth-of-type(even),
html.halloween-theme .section-v2:nth-of-type(even),
html.halloween-theme .strategyDemoLab,
html.halloween-theme .creativeoHomeFeatures {
  background-color: rgba(28, 11, 36, .48) !important;
}

html.halloween-theme article,
html.halloween-theme [class*="Card"],
html.halloween-theme [class*="card"],
html.halloween-theme fieldset,
html.halloween-theme dialog {
  border-color: rgba(255, 150, 51, .28) !important;
}

html.halloween-theme a[class*="button" i],
html.halloween-theme button:not(.vankpaCookieClose) {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

html.halloween-theme a[class*="button" i]:hover,
html.halloween-theme a[class*="button" i]:focus-visible,
html.halloween-theme button:not(.vankpaCookieClose):hover,
html.halloween-theme button:not(.vankpaCookieClose):focus-visible {
  border-color: var(--halloween-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 118, 26, .18), 0 14px 34px rgba(0,0,0,.28) !important;
}

html.halloween-theme :focus-visible {
  outline: 3px solid var(--halloween-amber) !important;
  outline-offset: 4px !important;
}

/* Footer and closing calls to action */
html.halloween-theme .footer-v7,
html.halloween-theme .site-footer,
html.halloween-theme body > footer,
html.halloween-theme .creativeoFooter,
html.halloween-theme .sblxFooter,
html.halloween-theme .rpFooter,
html.halloween-theme .alFooter,
html.halloween-theme .atFooter,
html.halloween-theme .fnFooter,
html.halloween-theme .linoxa-footer {
  color: var(--halloween-cream) !important;
  background:
    radial-gradient(circle at 12% 110%, rgba(116, 43, 147, .3), transparent 31rem),
    radial-gradient(circle at 90% -10%, rgba(255, 111, 24, .16), transparent 25rem),
    #08060c !important;
  border-color: var(--halloween-line) !important;
}

html.halloween-theme .footer-v7::before,
html.halloween-theme .site-footer::before,
html.halloween-theme body > footer::before {
  background: linear-gradient(90deg, var(--halloween-orange), var(--halloween-amber), #b20e21) !important;
}

html.halloween-theme .footer-v7 a:hover,
html.halloween-theme .footer-v7 a:focus-visible,
html.halloween-theme .site-footer a:hover,
html.halloween-theme .site-footer a:focus-visible,
html.halloween-theme body > footer a:hover,
html.halloween-theme body > footer a:focus-visible {
  color: var(--halloween-amber) !important;
}

@media (max-width: 767px) {
  html.halloween-theme body {
    background-size: auto, auto, 34px 34px;
  }
  html.halloween-theme .menu-v3 {
    isolation: isolate;
    background:
      radial-gradient(circle at 88% 7%, rgba(255, 112, 25, .16), transparent 18rem),
      linear-gradient(155deg, #08060c, #1c0b25 70%, #09060d) !important;
  }

  /* Portrait Halloween campaign art for the mobile navigation. The scene is
     deliberately darkest behind the links, while the pumpkins, ghosts,
     skeleton, and lanterns remain visible around the reading area. */
  html.halloween-theme .menu-v3::before {
    z-index: 0;
    opacity: .72;
    background-image: url("/assets/halloween/mobile-menu-haunted-scene-v1.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 76%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0 76%, transparent 100%) !important;
    pointer-events: none;
  }

  html.halloween-theme .menu-v3::after {
    content: "";
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(8, 6, 12, .72), rgba(8, 6, 12, .46) 52%, rgba(8, 6, 12, .68)),
      linear-gradient(180deg, rgba(8, 6, 12, .2), rgba(8, 6, 12, .76) 78%, #08060c 100%);
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  html.halloween-theme .menu-v3 > * {
    z-index: 2;
  }

  html.halloween-theme .menu-v3-nav > a {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .92);
  }

  html.halloween-theme .menu-v3-nav > a:not(.current) {
    background: rgba(7, 5, 10, .28);
    backdrop-filter: blur(2px);
  }

  html.halloween-theme .menu-v3-media {
    background:
      linear-gradient(180deg, rgba(8, 6, 12, .06), rgba(8, 6, 12, .74)),
      url("/assets/halloween/mobile-menu-haunted-scene-v1.png") center 76% / cover no-repeat !important;
    box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .32), 0 18px 50px rgba(0, 0, 0, .42);
  }

  html.halloween-theme .menu-v3-media > img {
    opacity: 0 !important;
  }

  html.halloween-theme .menu-v3-media span {
    text-shadow: 0 2px 15px rgba(0, 0, 0, .95);
  }
  html.halloween-theme .site-header-v3,
  html.halloween-theme .site-header,
  html.halloween-theme body > header {
    backdrop-filter: blur(14px) saturate(120%);
  }

  /* Keep the founder statement balanced without boxing each text fragment. */
  html.halloween-theme .creativeoAboutPage .creativeoHeroTitle > span,
  html.halloween-theme .creativeoAboutPage .creativeoHeroTitle > em {
    display: inline !important;
  }

  html.halloween-theme .creativeoAboutPage .creativeoHeroTitle > span::after {
    content: " ";
  }

  html.halloween-theme .creativeoAboutPage .creativeoHeroTitle {
    max-width: 100% !important;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.halloween-theme *,
  html.halloween-theme *::before,
  html.halloween-theme *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Imagineeer owns a dark blue identity. Preserve the official wordmark's
   white treatment in dark navigation and its original ink treatment on the
   light expanded-menu header instead of replacing its filter wholesale. */
html.halloween-theme #imagineeer-root .site-header .brand-logo,
html.halloween-theme #imagineeer-root .site-footer .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 11px rgba(255, 128, 28, .18)) !important;
}

html.halloween-theme #imagineeer-root .overlay-head .brand-logo {
  filter: none !important;
}