@font-face {
  font-family: "Rocket Brush";
  src: url("rocket.brush.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Frantically";
  src: url("frantically.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Frantically", "Trebuchet MS", Arial, sans-serif;
  background: #050705;
  --orange: #ff7200;
  --green: #b5ed19;
}

@property --tile-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }

html, body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body { background: #050705; overflow-x: hidden; }

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.campaign {
  display: grid;
  grid-template-rows: minmax(380px, 1fr) auto auto;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #050705 url("halloween-hero-background.png") center top / cover no-repeat;
  color: #fff;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  --mouse-x: 50%;
  --mouse-y: 46%;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -24px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 68%, rgba(255,103,0,.12), transparent 33%);
  transform: translate(var(--parallax-x), var(--parallax-y)) scale(1.035);
  transition: transform .25s ease-out;
  mix-blend-mode: screen;
}

.hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.48) 0 22%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.04) 78%),
    linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.38));
}

.hero__pointer-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .65;
  background: radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgba(193,255,74,.16), rgba(255,111,0,.055) 38%, transparent 72%);
  mix-blend-mode: screen;
}

.hero__lightning {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 72% 0%, rgba(210,229,255,.52), rgba(124,173,255,.12) 32%, transparent 63%);
  mix-blend-mode: screen;
  animation: sky-flash 13s infinite;
}

.hero__particles { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.hero__particles i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #ffb12b;
  box-shadow: 0 0 5px #ff7b00, 0 0 12px rgba(255,83,0,.75);
  animation: ember-rise var(--d) var(--delay) linear infinite;
}
.hero__particles i:nth-child(3n) { background: #c8ff53; box-shadow: 0 0 6px #8ded24, 0 0 14px rgba(112,222,24,.65); }

.hero__bats { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hero__bats span {
  position: absolute;
  left: 4%;
  top: 18%;
  width: 8px;
  height: 10px;
  opacity: 0;
  border-radius: 55% 55% 45% 45%;
  background: #070807;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.9));
  transform-origin: center;
  animation: bat-flight 11s linear infinite;
}

.hero__bats span::before,
.hero__bats span::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 18px;
  height: 12px;
  background: #050605;
  transform-origin: 100% 45%;
  clip-path: polygon(100% 38%, 72% 5%, 58% 43%, 27% 18%, 38% 62%, 0 54%, 32% 100%, 72% 76%);
  animation: bat-wing-left .34s ease-in-out infinite alternate;
}

.hero__bats span::before { right: 5px; }
.hero__bats span::after {
  left: 5px;
  transform-origin: 0 45%;
  clip-path: polygon(0 38%, 28% 5%, 42% 43%, 73% 18%, 62% 62%, 100% 54%, 68% 100%, 28% 76%);
  animation-name: bat-wing-right;
}

.hero__bats span:nth-child(2) { left: 9%; top: 25%; animation-name: bat-flight-low; animation-delay: -4s; animation-duration: 13s; scale: .58; }
.hero__bats span:nth-child(3) { left: 58%; top: 7%; animation-name: bat-flight-high; animation-delay: -8s; animation-duration: 15s; scale: .78; }
.hero__bats span:nth-child(4) { left: 14%; top: 14%; animation-name: bat-flight; animation-delay: -12s; animation-duration: 12s; scale: .48; }
.hero__bats span:nth-child(5) { left: 63%; top: 13%; animation-name: bat-flight-high; animation-delay: -15s; animation-duration: 16s; scale: .62; }

.hero__bats span:nth-child(2n)::before,
.hero__bats span:nth-child(2n)::after { animation-duration: .27s; animation-delay: -.11s; }
.hero__bats span:nth-child(3n)::before,
.hero__bats span:nth-child(3n)::after { animation-duration: .42s; animation-delay: -.19s; }

.hero__clouds {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: screen;
}
.hero__clouds span {
  position: absolute;
  top: -8%;
  left: -35%;
  width: 72%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91,122,139,.3), transparent 66%);
  filter: blur(22px);
  animation: cloud-drift 29s linear infinite;
}
.hero__clouds span:nth-child(2) {
  top: 5%;
  left: 18%;
  width: 58%;
  opacity: .6;
  animation-duration: 41s;
  animation-delay: -24s;
  animation-direction: reverse;
}

.hero__spiderweb {
  position: absolute;
  z-index: 0;
  top: -2.5%;
  left: -1.5%;
  width: min(47vw, 720px);
  height: auto;
  opacity: .22;
  pointer-events: none;
  transform-origin: 2% 1%;
  filter: brightness(.62) sepia(.12) hue-rotate(42deg) saturate(.65);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 0 0, #000 0 34%, rgba(0,0,0,.82) 52%, transparent 76%);
  mask-image: radial-gradient(ellipse 88% 82% at 0 0, #000 0 34%, rgba(0,0,0,.82) 52%, transparent 76%);
  animation: spiderweb-wind 5.2s ease-in-out infinite alternate;
}

.hero__spiderweb--center {
  top: -4%;
  left: 23%;
  width: min(40vw, 620px);
  opacity: .18;
  transform-origin: 9% 0;
  animation-name: spiderweb-wind-center;
  animation-duration: 6.4s;
  animation-delay: -2.7s;
}

.hero__ground-fog { position: absolute; z-index: -1; inset: auto 0 0; height: 28%; overflow: hidden; pointer-events: none; opacity: .19; }
.hero__ground-fog span {
  position: absolute;
  left: -25%;
  bottom: -32%;
  width: 88%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(189,219,179,.45), transparent 68%);
  filter: blur(25px);
  animation: ground-fog 24s ease-in-out infinite alternate;
}
.hero__ground-fog span:nth-child(2) { left: 35%; bottom: -20%; opacity: .6; animation-delay: -12s; animation-direction: alternate-reverse; }


.hero__effects {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.campaign.effects-ready .hero__effects { opacity: 1; }

.hero__effects svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__smoke-field {
  will-change: transform;
}

/* SVG und Hintergrund nutzen dasselbe 1800x900-Koordinatensystem. */
.hero__house-light {
  fill: #ffd47d;
  opacity: .78;
  mix-blend-mode: screen;
}

.hero__window {
  opacity: .17;
  animation: house-light-flicker 9.4s ease-in-out infinite;
}

.hero__window:nth-child(2) { animation-duration: 10.3s; animation-delay: -4.1s; }
.hero__window:nth-child(3) { animation-duration: 7.6s; animation-delay: -2.7s; }
.hero__window:nth-child(4) { animation-duration: 9.4s; animation-delay: -5.2s; }
.hero__window:nth-child(5) { animation-duration: 11.2s; animation-delay: -3.4s; }

.hero__house-ambient {
  fill: #ff8a18;
  opacity: .055;
  mix-blend-mode: screen;
  animation: house-ambient-flicker 9.6s ease-in-out infinite;
}

@keyframes house-light-flicker {
  0%, 100% { opacity: .14; }
  14% { opacity: .26; }
  21% { opacity: .17; }
  48% { opacity: .31; }
  58% { opacity: .19; }
  79% { opacity: .28; }
}

.hero__pumpkin-peeker {
  opacity: 0;
  pointer-events: none;
  transform-box: view-box;
  transform-origin: center;
  animation: pumpkin-peek 10s ease-in-out infinite;
  filter: drop-shadow(-8px 8px 9px rgba(0,0,0,.72));
}

.hero__pumpkin-lights {
  fill: #ff9a24;
  mix-blend-mode: screen;
}

.hero__pumpkin-light {
  opacity: .25;
  animation: pumpkin-candle 5.4s ease-in-out infinite;
}

.hero__pumpkin-light:nth-child(2) { animation-duration: 6.1s; animation-delay: -3.1s; }
.hero__pumpkin-light:nth-child(3) { animation-duration: 4.4s; animation-delay: -1.7s; }

.hero__smoke {
  fill: #a9ee2d;
  opacity: .34;
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: green-smoke-drift 10s ease-in-out infinite alternate,
             green-smoke-pulse 6.5s ease-in-out infinite;
}

.hero__smoke--secondary {
  fill: #78c91c;
  opacity: .2;
  animation-duration: 13s, 8s;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}

@keyframes house-ambient-flicker {
  0%, 100% { opacity: .035; }
  18% { opacity: .07; }
  27% { opacity: .047; }
  51% { opacity: .085; }
  63% { opacity: .052; }
  82% { opacity: .074; }
}

@keyframes pumpkin-peek {
  0%, 45%, 100% { opacity: 0; transform: translateX(44px) rotate(1deg); }
  48% { opacity: .55; }
  52% { opacity: .94; transform: translateX(6px) rotate(-1.5deg); }
  63% { opacity: .94; transform: translateX(0) rotate(-2.5deg); }
  68% { opacity: .72; transform: translateX(5px) rotate(-1.6deg); }
  72% { opacity: .38; transform: translateX(17px) rotate(-.6deg); }
  76% { opacity: 0; transform: translateX(44px) rotate(1deg); }
}

@keyframes pumpkin-candle {
  0%, 100% { opacity: .17; }
  18% { opacity: .34; }
  25% { opacity: .21; }
  47% { opacity: .4; }
  54% { opacity: .24; }
  73% { opacity: .36; }
  81% { opacity: .22; }
  91% { opacity: .32; }
}

@keyframes green-smoke-drift {
  0%   { transform: translate(-8px, 15px) rotate(-3deg) scale(.96, 1.01); }
  45%  { transform: translate(8px, -7px) rotate(3deg) scale(1.04, .98); }
  100% { transform: translate(16px, -25px) rotate(-2deg) scale(.99, 1.08); }
}

@keyframes green-smoke-pulse {
  0%, 100% { opacity: .27; }
  45% { opacity: .4; }
  70% { opacity: .32; }
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(760px, 62vw);
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 8px #000;
}

.hero__eyebrow {
  margin: 0 0 -.3em;
  font-size: clamp(2rem, 4.8vw, 5rem);
  letter-spacing: .035em;
  transform: rotate(-2deg);
  filter: url("#rough-text") drop-shadow(3px 4px 2px #000);
  font-family: "Rocket Brush", Impact, Haettenschweiler, sans-serif;
}

h1 {
  margin: 0;
  font-size: clamp(4rem, 9vw, 9.5rem);
  line-height: .68;
  letter-spacing: .01em;
  text-wrap: balance;
  transform: rotate(-1deg) skewX(-2deg);
  filter: url("#rough-text") drop-shadow(3px 3px 0 #000) drop-shadow(-2px 1px 0 #000);
  -webkit-text-stroke: clamp(1px, .12vw, 2px) rgba(255,255,255,.32);
  font-family: "Rocket Brush", Impact, Haettenschweiler, sans-serif;
  animation: title-breathe 5.8s ease-in-out infinite;
}

.hero__subtitle {
  margin: 1.2rem 0 .65rem;
  font-family: "Frantically", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 900;
}

.hero__highlight {
  position: relative;
  display: block;
  margin: 0 auto;
  width: min(100%, 700px);
  min-width: 0;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.72));
  transition: transform .18s ease, filter .18s ease;
  animation: button-pulse 3.4s ease-in-out infinite;
}

.button-spider {
  position: absolute;
  z-index: 4;
  top: -155px;
  right: 7%;
  width: clamp(58px, 8vw, 94px);
  color: #090a08;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-120px) scale(.42) rotate(-8deg);
  transform-origin: 50% 0;
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.75));
}

.button-spider svg { display: block; width: 100%; height: auto; }

.button-spider__thread {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 5px);
  width: 2px;
  height: 180px;
  background: linear-gradient(to top, rgba(210,214,201,.8), rgba(210,214,201,.08));
  transform: translateX(-50%);
}

.hero__highlight:hover .button-spider,
.hero__highlight:focus-visible .button-spider {
  animation: spider-scare 1.35s cubic-bezier(.2,.8,.25,1) both;
}

@keyframes spider-scare {
  0% { opacity: 0; transform: translateY(-120px) scale(.42) rotate(-8deg); }
  12% { opacity: 1; }
  52% { opacity: 1; transform: translateY(122px) scale(1.28) rotate(7deg); }
  66% { transform: translateY(103px) scale(1.08) rotate(-5deg); }
  82% { opacity: 1; transform: translateY(112px) scale(1.14) rotate(3deg); }
  100% { opacity: 0; transform: translateY(45px) scale(.72) rotate(0); }
}

.hero__highlight img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.hero__highlight:hover,
.hero__highlight:focus-visible {
  transform: scale(1.02);
  filter: brightness(1.06) drop-shadow(0 7px 10px rgba(0,0,0,.78));
}

.hero__highlight:focus-visible {
  outline: 2px dashed rgba(255,255,255,.85);
  outline-offset: 3px;
}

.benefits {
  display: grid;
  min-width: 0;
  grid-template-columns: .88fr 1.18fr .96fr;
  gap: clamp(.6rem, 1.2vw, 1.25rem);
  padding: clamp(.7rem, 1.15vw, 1.2rem) clamp(1rem, 8.7vw, 9rem);
  background: transparent;
  box-shadow: inset 0 18px 24px rgba(0,0,0,.72), inset 0 -10px 18px rgba(0,0,0,.38);
}

.benefit {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(.45rem, .9vw, .9rem);
  min-height: 142px;
  padding: clamp(.55rem, .9vw, .9rem);
  border: 2px solid #f07212;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,103,0,.16), transparent 29%),
    linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.22)),
    url("assets/tile-background.png") 0 0 / 200px 10px repeat,
    #020302;
  box-shadow: inset 0 0 32px rgba(255,114,0,.13), inset 0 0 0 1px rgba(255,153,55,.22), 0 0 10px #000;
  clip-path: polygon(.5% 1%, 99% 0, 100% 97%, 1% 100%, 0 5%);
  transform: rotate(-.25deg);
}

.benefit:nth-child(2) { transform: rotate(.2deg); }
.benefit:nth-child(3) { transform: rotate(-.15deg); }

.benefit::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  opacity: .28;
  background: repeating-linear-gradient(173deg, transparent 0 13px, rgba(255,255,255,.08) 14px, transparent 15px 31px);
  mix-blend-mode: screen;
}

.benefit--green {
  border-color: #78a514;
  box-shadow: inset 0 0 34px rgba(153,218,21,.1), inset 0 0 0 1px rgba(185,238,41,.17), 0 0 10px #000;
  background:
    radial-gradient(circle at 15% 50%, rgba(154,218,20,.17), transparent 31%),
    linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.2)),
    url("assets/tile-background.png") 0 0 / 200px 10px repeat,
    #020302;
}

.benefit__icon {
  display: block;
  width: clamp(5rem, 7.7vw, 7.9rem);
  height: clamp(5rem, 7.5vw, 7.7rem);
  object-fit: cover;
  filter: drop-shadow(0 0 4px var(--orange)) drop-shadow(0 0 9px rgba(255,105,0,.55));
  -webkit-mask-image: radial-gradient(ellipse 67% 70% at center, #000 48%, rgba(0,0,0,.96) 67%, transparent 100%);
  mask-image: radial-gradient(ellipse 67% 70% at center, #000 48%, rgba(0,0,0,.96) 67%, transparent 100%);
}

.benefit--green .benefit__icon {
  filter: drop-shadow(0 0 4px var(--green)) drop-shadow(0 0 10px rgba(181,237,25,.58));
}

.benefit__icon--pig { width: clamp(5.2rem, 8.2vw, 8.4rem); }

.benefit h2 {
  margin: 0;
  font-size: clamp(1.1rem, 1.72vw, 1.85rem);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .012em;
  text-shadow: 2px 2px 0 #000, -1px 0 0 rgba(255,255,255,.25);
  transform: scaleY(1.15);
  transform-origin: left center;
  font-family: "Frantically", "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
}

.benefit strong {
  display: inline;
  color: var(--orange);
  font-weight: 900;
  -webkit-text-stroke: .45px currentColor;
  text-shadow: 1px 1px 0 #000, 0 0 7px rgba(255,114,0,.32);
}
.benefit--green strong { display: block; color: var(--green); }
.benefit small { display: block; margin-top: .32em; font-size: .69em; line-height: 1.08; }
.benefit__number {
  display: block !important;
  font-size: 2.05em;
  line-height: .82;
  -webkit-text-stroke-width: 1px;
}

/* Die drei Aktionskacheln werden als Originalausschnitte dargestellt. */
.benefit--image {
  display: block;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  transform: none;
  cursor: default;
}

.benefit--image:nth-child(2),
.benefit--image:nth-child(3) {
  transform: none;
}

.benefit--image::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 2px solid rgba(255, 116, 16, .42);
  box-shadow:
    inset 0 0 10px rgba(255, 105, 8, .12),
    0 0 7px rgba(255, 105, 8, .16);
  opacity: .45;
  animation: tile-edge-glow 4.8s ease-in-out infinite;
}

.benefit--image::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--tile-edge-angle),
    transparent 0 19%,
    rgba(255, 119, 18, .18) 25%,
    rgba(255, 192, 80, .95) 31%,
    rgba(255, 105, 8, .32) 37%,
    transparent 44% 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255, 111, 12, .65));
  animation: tile-edge-orbit 4.2s linear infinite;
}

.benefit--image:nth-child(1)::before {
  background: conic-gradient(
    from var(--tile-edge-angle),
    transparent 0 19%,
    rgba(148, 214, 25, .16) 25%,
    rgba(211, 255, 90, .9) 31%,
    rgba(135, 207, 20, .3) 37%,
    transparent 44% 100%
  );
  filter: drop-shadow(0 0 4px rgba(158, 226, 30, .58));
  animation-delay: -1.4s;
}

.benefit--image:nth-child(3)::before { animation-delay: -2.8s; }

.benefit--image:nth-child(1)::after {
  border-color: rgba(167, 225, 38, .4);
  box-shadow:
    inset 0 0 10px rgba(144, 211, 24, .11),
    0 0 7px rgba(144, 211, 24, .15);
  animation-delay: -1.7s;
}

.benefit--image:nth-child(3)::after { animation-delay: -3.2s; }

@keyframes tile-edge-glow {
  0%, 100% { opacity: .32; filter: brightness(.85); }
  38% { opacity: .72; filter: brightness(1.28); }
  52% { opacity: .46; filter: brightness(1); }
  76% { opacity: .65; filter: brightness(1.18); }
}

@keyframes tile-edge-orbit {
  to { --tile-edge-angle: 360deg; }
}

.benefit--image img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.cta {
  position: relative;
  padding: 18px 20px 12px;
  color: #ed963f;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  background: linear-gradient(to bottom, rgb(5 7 5 / 80%), #050705);
  border: 0;
}

@keyframes sky-flash { 0%, 72%, 74%, 77%, 100% { opacity: 0; } 72.5% { opacity: .75; } 73.2% { opacity: .12; } 75% { opacity: .48; } 76% { opacity: .05; } }
@keyframes ember-rise { 0% { opacity: 0; transform: translate(0,20px) scale(.5); } 12% { opacity: .85; } 75% { opacity: .35; } 100% { opacity: 0; transform: translate(var(--drift),-180px) scale(.15); } }
@keyframes bat-wing-left {
  0% { transform: rotate(18deg) scaleY(.28); }
  45% { transform: rotate(-8deg) scaleY(.8); }
  100% { transform: rotate(-24deg) scaleY(1); }
}
@keyframes cloud-drift { from { transform: translateX(0) scale(1); } 50% { transform: translateX(72vw) scale(1.08); } to { transform: translateX(145vw) scale(.96); } }
@keyframes spiderweb-wind {
  0% { transform: translate(0, 0) rotate(-1deg) skewX(-.5deg) scale(1); }
  28% { transform: translate(2px, 3px) rotate(.35deg) skewX(.65deg) scale(1.008, .992); }
  62% { transform: translate(-1px, 5px) rotate(-.25deg) skewX(-.4deg) scale(.996, 1.01); }
  100% { transform: translate(4px, 7px) rotate(1.15deg) skewX(1deg) scale(1.014, .987); }
}
@keyframes spiderweb-wind-center {
  0% { transform: translate(0, 0) rotate(.8deg) skewX(.4deg) scale(1); }
  31% { transform: translate(-3px, 4px) rotate(-.45deg) skewX(-.7deg) scale(.994, 1.008); }
  67% { transform: translate(2px, 6px) rotate(.2deg) skewX(.35deg) scale(1.008, .994); }
  100% { transform: translate(-4px, 9px) rotate(-1deg) skewX(-.9deg) scale(.988, 1.014); }
}
@keyframes ground-fog { from { transform: translateX(-9%) scaleX(1); } to { transform: translateX(34%) scaleX(1.18); } }
@keyframes bat-wing-right {
  0% { transform: rotate(-18deg) scaleY(.28) translateY(-1px); }
  45% { transform: rotate(8deg) scaleY(.8); }
  100% { transform: rotate(24deg) scaleY(1) translateY(1px); }
}
@keyframes bat-flight {
  0%, 5% { opacity: 0; transform: translate(-7vw, 18px) rotate(10deg); }
  11% { opacity: .34; }
  27% { transform: translate(12vw, -28px) rotate(-12deg); }
  43% { opacity: .3; transform: translate(31vw, 8px) rotate(9deg); }
  48% { opacity: 0; transform: translate(42vw, -15px) rotate(-7deg); }
  55% { opacity: 0; transform: translate(40vw, -38px) rotate(8deg) scaleX(-1); }
  62% { opacity: .31; }
  77% { transform: translate(19vw, 4px) rotate(-10deg) scaleX(-1); }
  91% { opacity: .28; transform: translate(2vw, -24px) rotate(11deg) scaleX(-1); }
  97%, 100% { opacity: 0; transform: translate(-8vw, 9px) rotate(-6deg) scaleX(-1); }
}
@keyframes bat-flight-low {
  0%, 6% { opacity: 0; transform: translate(-10vw, -5px) rotate(-7deg); }
  12% { opacity: .27; }
  31% { transform: translate(9vw, 22px) rotate(11deg); }
  48% { opacity: .3; transform: translate(28vw, -16px) rotate(-9deg); }
  55% { opacity: 0; transform: translate(39vw, 7px) rotate(6deg); }
  64% { opacity: 0; transform: translate(36vw, -22px) rotate(-5deg) scaleX(-1); }
  70% { opacity: .28; }
  86% { transform: translate(12vw, 17px) rotate(9deg) scaleX(-1); }
  96%, 100% { opacity: 0; transform: translate(-11vw, -8px) rotate(-7deg) scaleX(-1); }
}
@keyframes bat-flight-high {
  0%, 6% { opacity: 0; transform: translate(-5vw, 8px) rotate(9deg); }
  12% { opacity: .3; }
  29% { transform: translate(9vw, -25px) rotate(-11deg); }
  44% { opacity: .27; transform: translate(22vw, 10px) rotate(12deg); }
  51% { opacity: 0; transform: translate(28vw, -18px) rotate(-8deg); }
  60% { opacity: 0; transform: translate(27vw, 16px) rotate(7deg) scaleX(-1); }
  66% { opacity: .28; }
  82% { transform: translate(11vw, -22px) rotate(-10deg) scaleX(-1); }
  94%, 100% { opacity: 0; transform: translate(-6vw, 7px) rotate(8deg) scaleX(-1); }
}
@keyframes title-breathe { 0%,100% { filter: url("#rough-text") drop-shadow(3px 3px 0 #000) drop-shadow(-2px 1px 0 #000); } 50% { filter: url("#rough-text") drop-shadow(3px 3px 0 #000) drop-shadow(-2px 1px 0 #000) drop-shadow(0 0 10px rgba(255,255,255,.2)); } }
@keyframes button-pulse { 0%,100% { filter: drop-shadow(0 5px 7px rgba(0,0,0,.72)) drop-shadow(0 0 0 rgba(255,105,0,0)); } 50% { filter: drop-shadow(0 6px 8px rgba(0,0,0,.75)) drop-shadow(0 0 13px rgba(255,105,0,.34)); } }
@keyframes cta-glow { 0%,100% { filter: brightness(.96); } 50% { filter: brightness(1.08); } }

.hero.is-startled .hero__lightning { animation: none; opacity: .9; transition: opacity .7s ease-out; }
.hero.is-startled .hero__content { animation: startled .55s ease-out; }
@keyframes startled { 0%,100% { translate: 0; } 20% { translate: -5px 1px; } 40% { translate: 5px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; } }

.cta p {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: .02em;
  text-shadow: none;
  font-family: "Frantically", "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
}

.cta span {
  display: block;
  margin-top: .4em;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  letter-spacing: .03em;
  color: #c0b9ad;
  font-family: "Frantically", "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
}

@media (max-width: 1024px) {
  .campaign {
    background-image: url("halloween-responsive-compact.png");
  }

  .hero {
    background: transparent;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero__window,
  .hero__house-ambient,
  .hero__smoke,
  .hero__pumpkin-light,
  .benefit--image::after,
  .benefit--image::before,
  .hero__particles i,
  .hero__bats span,
  .hero__bats span::before,
  .hero__bats span::after,
  .hero__clouds span,
  .hero__spiderweb,
  .hero__ground-fog span,
  .hero__lightning,
  .hero__highlight,
  h1,
  .cta { animation: none; }
  .hero__smoke-field { transform: none; }
  .hero__pointer-light { display: none; }
  .hero::before { transform: none; transition: none; }
  .hero__pumpkin-peeker { display: none; }
  .button-spider { display: none; }
}

@media (max-width: 900px) {
  .campaign { grid-template-rows: minmax(480px, 62svh) auto auto; }
  .hero__content { width: min(94vw, 700px); }
  .benefits { grid-template-columns: 1fr; padding: .8rem; }
  .benefit { min-height: 105px; }
  .benefit--image { min-height: 0; }
}

@media (max-width: 520px) {
  .campaign { grid-template-rows: minmax(420px, 58svh) auto auto; }
  .hero__shade { background: rgba(0,0,0,.42); }
  .hero__content { padding-inline: .75rem; }
  h1 { font-size: clamp(2.7rem, 14vw, 4.7rem); }
  .hero__highlight { width: 95%; }
  .benefit { grid-template-columns: 5.4rem 1fr; }
  .benefits, .benefit, .cta { min-width: 0; }
  .cta p { line-height: 1.08; }
}