/*
  Halloween theme — loaded only on /halloween, after the main stylesheet.
  Every rule is scoped under body.halloween so nothing here can leak onto
  any other page. Colours lean on the site's existing brand tokens
  (primary blue, secondary green, accent amber) with a small set of
  purple "night sky" tones added just for this page.
*/

/* A single display face for the footer's "Happy Halloween" greeting -
   only fetched when this stylesheet loads, i.e. only on this page. */
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");

body.halloween {
  --hw-night-1: var(--color-primary-950);
  --hw-night-2: var(--color-primary-900);
  --hw-night-3: var(--color-primary-700);
  --hw-ground-1: var(--color-secondary-950);
  --hw-ground-2: var(--color-secondary-900);
  --hw-glow: var(--color-accent-400);
  --hw-glow-strong: var(--color-accent-500);
  --hw-ink: var(--color-primary-950);
  --hw-header-h: 72px;
}

/* ===================================================================
   Sticky site nav — transparent + light over the hero, solid on scroll
   =================================================================== */

body.halloween header.sticky {
  background-color: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

body.halloween header.sticky > div .text-neutral-900,
body.halloween header.sticky > div .text-neutral-700,
body.halloween header.sticky > div .text-neutral-600 {
  color: var(--color-primary-50) !important;
}

body.halloween header.sticky > div .text-neutral-500,
body.halloween header.sticky > div .text-neutral-400 {
  color: var(--color-primary-200) !important;
}

body.halloween header.sticky > div .text-primary-700 {
  color: var(--hw-glow) !important;
}

body.halloween header.sticky > div .border-neutral-200 {
  border-color: rgba(243, 236, 255, 0.3) !important;
}

body.halloween header.sticky > div .bg-white,
body.halloween header.sticky > div .bg-neutral-50 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Every hoverable control in the bar (nav links, search button, language
   pills, mobile icon buttons) switches to a light/white background on
   :hover via its own native Tailwind hover classes - but the light text
   colour above would then be invisible against that light background.
   Force dark text back in on hover so it stays readable. */
body.halloween header.sticky > div :is(
  .text-neutral-900,
  .text-neutral-700,
  .text-neutral-600,
  .text-neutral-500,
  .text-neutral-400
):hover {
  color: var(--color-neutral-900) !important;
}

/* The desktop nav dropdown (City Rules / Services) is a popover, not
   part of the see-through bar - it must stay fully opaque and normally
   coloured at all times, even while the rest of the nav is transparent,
   or its items become unreadable against the hero showing through. */
body.halloween header.sticky > div .absolute.top-full {
  background-color: #fff !important;
  border-color: var(--color-neutral-200) !important;
}
body.halloween header.sticky > div .absolute.top-full .text-neutral-700 {
  color: var(--color-neutral-700) !important;
}

/* Once the hero has scrolled out of view, restore the normal brand look */
body.halloween.halloween-scrolled header.sticky {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(221, 225, 229, 0.7) !important;
  backdrop-filter: blur(8px) !important;
}

body.halloween.halloween-scrolled header.sticky > div .text-neutral-900 {
  color: var(--color-neutral-900) !important;
}
body.halloween.halloween-scrolled header.sticky > div .text-neutral-700 {
  color: var(--color-neutral-700) !important;
}
body.halloween.halloween-scrolled header.sticky > div .text-neutral-600 {
  color: var(--color-neutral-600) !important;
}
body.halloween.halloween-scrolled header.sticky > div .text-neutral-500 {
  color: var(--color-neutral-500) !important;
}
body.halloween.halloween-scrolled header.sticky > div .text-neutral-400 {
  color: var(--color-neutral-400) !important;
}
body.halloween.halloween-scrolled header.sticky > div .text-primary-700 {
  color: var(--color-primary-700) !important;
}
body.halloween.halloween-scrolled header.sticky > div .border-neutral-200 {
  border-color: var(--color-neutral-200) !important;
}
body.halloween.halloween-scrolled header.sticky > div .bg-white {
  background-color: #fff !important;
}
body.halloween.halloween-scrolled header.sticky > div .bg-neutral-50 {
  background-color: var(--color-neutral-50) !important;
}

/* ===================================================================
   Hero — "the main show"
   =================================================================== */

.hw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--hw-header-h));
  padding: calc(var(--hw-header-h) + 2.25rem) 1.25rem 6.5rem;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--hw-night-1) 0%, var(--hw-night-2) 42%, var(--hw-night-3) 72%, var(--hw-ground-2) 100%);
}

.hw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 42% at 50% 102%, rgba(242, 184, 75, 0.3), transparent 70%);
  pointer-events: none;
}

.hw-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 44rem;
  text-align: center;
  padding-bottom: 1rem;
}

.hw-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-200);
}

.hw-hero__title {
  margin: 0;
  font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  color: var(--color-primary-50);
  text-wrap: balance;
}

.hw-hero__glow-word {
  font-family: "Creepster", var(--font-display), cursive;
  font-weight: 400;
  font-size: 1.25em;
  letter-spacing: 0.02em;
  color: var(--hw-glow);
  animation: hw-flicker 5s ease-in-out infinite;
}

@keyframes hw-flicker {
  0%, 2%, 6%, 94%, 100% { text-shadow: 0 0 10px var(--hw-glow), 0 0 22px var(--hw-glow-strong); opacity: 1; }
  3% { text-shadow: 0 0 3px var(--hw-glow); opacity: 0.75; }
  4% { text-shadow: 0 0 14px var(--hw-glow), 0 0 26px var(--hw-glow-strong); opacity: 1; }
  70% { text-shadow: 0 0 10px var(--hw-glow), 0 0 22px var(--hw-glow-strong); opacity: 1; }
  71% { text-shadow: 0 0 2px var(--hw-glow); opacity: 0.7; }
  72.5% { text-shadow: 0 0 14px var(--hw-glow), 0 0 26px var(--hw-glow-strong); opacity: 1; }
}

.hw-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- stars ---- */
.hw-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  animation: hw-twinkle 3s ease-in-out infinite;
}

@keyframes hw-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* ---- moon ---- */
.hw-moon {
  position: absolute;
  top: 9%;
  right: 12%;
  width: clamp(70px, 10vw, 112px);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(242, 184, 75, 0.55));
}

/* ---- bats ---- */
.hw-bat {
  position: absolute;
  left: -8%;
  width: clamp(22px, 3vw, 36px);
  height: auto;
  opacity: 0.92;
  animation: hw-fly linear infinite;
}

.hw-bat__wings {
  transform-box: fill-box;
  transform-origin: center;
  animation: hw-flap 0.42s ease-in-out infinite;
}

@keyframes hw-fly {
  from { transform: translate(0, 0); }
  to { transform: translate(126vw, var(--hw-bat-drift, -24px)); }
}

@keyframes hw-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.45); }
}

.hw-bat--1 { top: 18%; width: clamp(26px, 3.4vw, 40px); animation-duration: 13s; animation-delay: 0s; --hw-bat-drift: -30px; }
.hw-bat--2 { top: 30%; width: clamp(18px, 2.4vw, 28px); animation-duration: 17s; animation-delay: 3s; --hw-bat-drift: 20px; opacity: 0.8; }
.hw-bat--3 { top: 42%; width: clamp(24px, 3vw, 34px); animation-duration: 20s; animation-delay: 7s; --hw-bat-drift: -16px; }
.hw-bat--4 { top: 24%; width: clamp(15px, 2vw, 22px); animation-duration: 15s; animation-delay: 10.5s; --hw-bat-drift: 26px; opacity: 0.7; }

/* ---- ghosts ---- */
.hw-ghost {
  position: absolute;
  width: clamp(44px, 6vw, 68px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  animation: hw-bob 3.6s ease-in-out infinite;
}

@keyframes hw-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hw-ghost--1 { top: 46%; left: 10%; animation-duration: 4s; }
.hw-ghost--2 { top: 62%; left: 76%; animation-duration: 4.8s; animation-delay: 1.1s; width: clamp(34px, 4.6vw, 52px); }

/* ---- cobweb (hero corner) ---- */
.hw-cobweb {
  position: absolute;
  top: -4px;
  left: -4px;
  width: clamp(64px, 8vw, 100px);
  height: auto;
  opacity: 0.4;
}

/* ---- spider dangling in front of the moon ---- */
.hw-hero__spider {
  position: absolute;
  top: -260px;
  right: 15%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hw-swing 5.5s ease-in-out infinite;
  transform-origin: top center;
}

.hw-hero__spider-thread {
  width: 1.5px;
  height: 390px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.55) 100%);
}

.hw-hero__spider-body {
  width: 22px;
  height: auto;
  margin-top: -2px;
}

@keyframes hw-swing {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(6px); }
}

/* ---- jack-o'-lanterns ---- */
.hw-pumpkin {
  position: absolute;
  bottom: 3%;
  width: clamp(56px, 7vw, 86px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(242, 184, 75, 0.55));
}

.hw-pumpkin--1 { left: 3%; }
.hw-pumpkin--2 { left: 88%; width: clamp(42px, 5.5vw, 64px); }

.hw-pumpkin__eye {
  animation: hw-pulse 2.6s ease-in-out infinite;
}

.hw-pumpkin--2 .hw-pumpkin__eye {
  animation-delay: 0.9s;
}

@keyframes hw-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---- fog ---- */
.hw-fog {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}

.hw-fog__layer {
  position: absolute;
  bottom: 0;
  width: 140%;
  height: 100%;
  background:
    radial-gradient(closest-side, rgba(238, 242, 244, 0.5), transparent) 10% 70% / 26% 100% no-repeat,
    radial-gradient(closest-side, rgba(238, 242, 244, 0.45), transparent) 35% 55% / 30% 100% no-repeat,
    radial-gradient(closest-side, rgba(238, 242, 244, 0.5), transparent) 62% 65% / 28% 100% no-repeat,
    radial-gradient(closest-side, rgba(238, 242, 244, 0.4), transparent) 85% 50% / 26% 100% no-repeat;
  filter: blur(6px);
  animation: hw-drift 22s ease-in-out infinite;
}

.hw-fog__layer--2 {
  opacity: 0.6;
  animation-duration: 28s;
  animation-direction: reverse;
}

@keyframes hw-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3%); }
}

/* ===================================================================
   Rest of the page — subtle per-section touches (pure CSS, no markup
   changes to shared components)
   =================================================================== */

body.halloween section {
  position: relative;
}

body.halloween section h2 {
  position: relative;
}

body.halloween section h2::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -2px;
  width: 30px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-22 -14 44 24'%3E%3Cpath d='M0 0 Q-10 -9 -20 -2 Q-12 -1 -9 2 Q-4 -2 0 4 Q4 -2 9 2 Q12 -1 20 -2 Q10 -9 0 0 Z' fill='%231e3e4f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  animation: hw-bob-small 3.2s ease-in-out infinite;
}

@keyframes hw-bob-small {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

body.halloween section:nth-of-type(1),
body.halloween section:nth-of-type(3) {
  overflow: visible;
}

body.halloween section:nth-of-type(1)::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b9c0c7' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 20 Q20 20 20 0'/%3E%3Cpath d='M0 40 Q40 40 40 0'/%3E%3Cpath d='M0 60 Q60 60 60 0'/%3E%3Cpath d='M0 80 Q80 80 80 0'/%3E%3Cpath d='M0 0 L20 20'/%3E%3Cpath d='M0 0 L40 40'/%3E%3Cpath d='M0 0 L60 60'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;
}

body.halloween section:nth-of-type(3)::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b9c0c7' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 20 Q20 20 20 0'/%3E%3Cpath d='M0 40 Q40 40 40 0'/%3E%3Cpath d='M0 60 Q60 60 60 0'/%3E%3Cpath d='M0 80 Q80 80 80 0'/%3E%3Cpath d='M0 0 L20 20'/%3E%3Cpath d='M0 0 L40 40'/%3E%3Cpath d='M0 0 L60 60'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;
  transform: scaleX(-1);
}

/* dangling spider — section 2. Thread anchor sits well above this
   section's own box, clipped by overflow:hidden, so its top end never
   scrolls into view while it sways. */
body.halloween section:nth-of-type(2) {
  overflow: hidden;
  padding-top: 4px;
}

body.halloween section:nth-of-type(2)::after {
  content: "";
  position: absolute;
  top: -120px;
  right: 8%;
  width: 2px;
  height: 150px;
  background: linear-gradient(180deg, transparent 0%, #c3c9d0 45%, #c3c9d0 100%);
  opacity: 0.5;
  pointer-events: none;
  animation: hw-swing-small 4.5s ease-in-out infinite;
  transform-origin: top center;
}

body.halloween section:nth-of-type(2)::before {
  /* overrides the shared heading-bat rule above with a spider instead */
  content: "";
  position: absolute;
  top: 24px;
  right: calc(8% - 11px);
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23122735' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 20 L6 10'/%3E%3Cpath d='M20 20 L4 18'/%3E%3Cpath d='M20 20 L6 28'/%3E%3Cpath d='M20 20 L10 34'/%3E%3Cpath d='M20 20 L34 10'/%3E%3Cpath d='M20 20 L36 18'/%3E%3Cpath d='M20 20 L34 28'/%3E%3Cpath d='M20 20 L30 34'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='7' ry='8' fill='%23122735'/%3E%3Ccircle cx='20' cy='13' r='4' fill='%23122735'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
  pointer-events: none;
  animation: hw-swing-small 4.5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes hw-swing-small {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* friendly ghost peeking beside section 3 */
body.halloween section:nth-of-type(3) {
  overflow: visible;
}

body.halloween section:nth-of-type(3)::before {
  content: "";
  position: absolute;
  top: 36%;
  right: -22px;
  width: 42px;
  height: 49px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'%3E%3Cpath d='M30 4 C14 4 4 16 4 32 L4 58 Q4 64 10 60 Q16 55 22 61 Q28 67 30 61 Q32 67 38 61 Q44 55 50 60 Q56 64 56 58 L56 32 C56 16 46 4 30 4 Z' fill='%23ffffff' stroke='%23c3c9d0' stroke-width='1.5'/%3E%3Ccircle cx='21' cy='30' r='3.2' fill='%23363d44'/%3E%3Ccircle cx='39' cy='30' r='3.2' fill='%23363d44'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
  animation: hw-bob-small 4s ease-in-out infinite;
}

/* jack-o'-lantern sitting on the edge of the trick-or-treating contact card */
body.halloween section:nth-of-type(4) [class*="border-primary-100"] {
  position: relative;
  overflow: visible;
}

body.halloween section:nth-of-type(4) [class*="border-primary-100"]::after {
  content: "";
  position: absolute;
  top: -16px;
  right: 10px;
  width: 46px;
  height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56'%3E%3Cpath d='M28 9 Q26 4 30 3 Q33 5 31 10Z' fill='%231e653e'/%3E%3Cellipse cx='30' cy='32' rx='25' ry='20' fill='%23e6a02c'/%3E%3Cg stroke='%23c98118' stroke-width='1.4' fill='none' opacity='.5'%3E%3Cpath d='M17 14 Q11 32 17 50'/%3E%3Cpath d='M43 14 Q49 32 43 50'/%3E%3C/g%3E%3Cpath d='M18 29 L25 29 L21.5 21 Z' fill='%23122735'/%3E%3Cpath d='M42 29 L35 29 L38.5 21 Z' fill='%23122735'/%3E%3Cpath d='M33.3 33 L26.7 33 L30 27 Z' fill='%23122735'/%3E%3Cpath d='M19 39 Q30 48 41 39' stroke='%23122735' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ===================================================================
   Footer — pumpkin row + greeting
   =================================================================== */

body.halloween footer {
  position: relative;
  padding-top: 6.5rem;
}

body.halloween footer::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M22.5 7 Q21 3.5 24 2.5 Q26.5 4 25 8Z' fill='%231e653e'/%3E%3Cellipse cx='24' cy='24' rx='15' ry='13' fill='%23e6a02c'/%3E%3Cg stroke='%23c98118' stroke-width='1.3' fill='none' opacity='.45'%3E%3Cpath d='M16 12 Q13 24 16 36'/%3E%3Cpath d='M32 12 Q35 24 32 36'/%3E%3C/g%3E%3Cpath d='M15.5 22 L20 22 L17.5 16.5 Z' fill='%23122735'/%3E%3Cpath d='M32.5 22 L28 22 L30.5 16.5 Z' fill='%23122735'/%3E%3Cpath d='M26 24.5 L22 24.5 L24 20.5 Z' fill='%23122735'/%3E%3Cpath d='M15.5 29 Q24 35.5 32.5 29' stroke='%23122735' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 62px 36px;
  background-position: left top;
  opacity: 0.95;
  pointer-events: none;
}

body.halloween footer::after {
  position: absolute;
  top: 54px;
  left: 1rem;
  right: 1rem;
  text-align: center;
  font-family: "Creepster", var(--font-display), cursive;
  font-size: clamp(1.15rem, 0.75rem + 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.015em;
  color: var(--color-accent-600);
  text-shadow: 0 0 12px rgba(230, 160, 44, 0.35);
  pointer-events: none;
}

html:lang(fr) body.halloween footer::after {
  content: "Joyeux Halloween, Vaudreuil-Dorion !";
}

html:lang(en) body.halloween footer::after {
  content: "Happy Halloween, Vaudreuil-Dorion!";
}

/* ===================================================================
   Responsive — phones get fewer, smaller decorations
   =================================================================== */

@media (max-width: 639px) {
  .hw-hero {
    min-height: 420px;
    padding: calc(var(--hw-header-h) + 1.25rem) 1rem 2rem;
  }
  .hw-bat--4,
  .hw-ghost--2,
  .hw-cobweb {
    display: none;
  }
  .hw-pumpkin--2 {
    display: none;
  }
  .hw-moon {
    width: 64px;
    top: 6%;
  }
  /* keep clear of both the nav row above and the centered headline below */
  .hw-ghost--1 {
    top: 30%;
    left: 8%;
    width: 36px;
  }

  body.halloween section:nth-of-type(1)::after,
  body.halloween section:nth-of-type(3)::after,
  body.halloween section:nth-of-type(3)::before {
    display: none;
  }
  body.halloween section:nth-of-type(4) [class*="border-primary-100"]::after {
    width: 34px;
    height: 28px;
    top: -10px;
    right: 6px;
  }
  body.halloween footer::before {
    background-size: 48px 28px;
    height: 28px;
  }
  body.halloween footer::after {
    top: 42px;
  }
}

/* ===================================================================
   Medium laptop widths — guard against any overlap with text/images
   =================================================================== */

@media (min-width: 1000px) and (max-width: 1280px) {
  body.halloween section:nth-of-type(3)::before {
    right: -14px;
    width: 34px;
    height: 40px;
  }
}

/* ===================================================================
   Reduced motion — explicit, friendly resting frames
   (the site-wide rule in globals.css already crushes every animation's
   duration to ~0, this just picks a nicer frame to land on)
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.halloween .hw-bat {
    animation: none;
    transform: translate(45vw, 0);
  }
  body.halloween .hw-bat__wings,
  body.halloween .hw-ghost,
  body.halloween .hw-hero__spider,
  body.halloween .hw-fog__layer,
  body.halloween .hw-hero__glow-word,
  body.halloween section h2::before,
  body.halloween section:nth-of-type(2)::after,
  body.halloween section:nth-of-type(2)::before,
  body.halloween section:nth-of-type(3)::before,
  body.halloween .hw-pumpkin__eye,
  body.halloween .hw-star {
    animation: none;
  }
  body.halloween .hw-hero__glow-word {
    text-shadow: 0 0 10px var(--hw-glow);
  }
  body.halloween .hw-pumpkin__eye {
    opacity: 0.7;
  }
  body.halloween .hw-star {
    opacity: 0.6;
  }
}