/* Halloween 2026 on the homepage (halloween_home.go): loaded only while the banner shows, so the whole look switches
   off with it. Orange and black over the site's night palette; texts keep the site's light colours for readability.
   Motion = one transform per layer, none with prefers-reduced-motion. Art: static/halloween (pumpkin, bat, and the cash shop's
   Halloween cosmetics bundle, tools/web/build_halloween_bundle.py). */

.is-halloween {
  --hw-orange: #ff8a2b;
  --hw-orange-hi: #ffb35e;
  --hw-orange-line: rgba(255, 138, 43, 0.5);
  --hw-orange-bg: rgba(255, 138, 43, 0.12);
  --hw-black: #0b0709;
}

/* the header's bottom line turns teal -> orange -> violet */
.is-halloween .site-header::after { background: linear-gradient(90deg, rgba(255, 138, 43, 0), rgba(255, 138, 43, 0.6) 30%, rgba(201, 155, 255, 0.55) 70%, rgba(201, 155, 255, 0)); }

/* ---- the hero: an ember glow from below and a few bats ---- */
.is-halloween .home-hero-shade::before,
.is-halloween .home-hero-shade::after { content: ""; position: absolute; pointer-events: none; }
.is-halloween .home-hero-shade::before { inset: 0; background: radial-gradient(70% 45% at 30% 100%, rgba(255, 112, 24, 0.2), rgba(255, 112, 24, 0) 70%), radial-gradient(30% 30% at 88% 8%, rgba(255, 160, 70, 0.1), rgba(255, 160, 70, 0) 70%); }
.is-halloween .home-hero-shade::after {
  top: 6%;
  right: 4%;
  width: min(420px, 40%);
  height: 34%;
  background:
    url("/static/halloween/bat.svg") no-repeat 12% 64% / 54px auto,
    url("/static/halloween/bat.svg") no-repeat 58% 18% / 34px auto,
    url("/static/halloween/bat.svg") no-repeat 92% 52% / 24px auto;
  opacity: 0.9;
  animation: hw-bats 7s ease-in-out infinite alternate;
}
@keyframes hw-bats { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18px, 10px, 0); } }

/* the event pill above the logo (the 3.7 "out now" pill steps aside while it shows) */
.is-halloween .home-hero-badge:not(.home-halloween-badge) { display: none; }
.home-halloween-badge { border-color: var(--hw-orange-line); background: rgba(70, 30, 8, 0.62); color: #ffe6cc; box-shadow: 0 0 22px rgba(255, 120, 30, 0.28); }
.home-halloween-badge:hover { background: rgba(110, 46, 10, 0.78); color: #fff; }
.home-halloween-badge [data-lang] { display: none; }
html[lang="fr"] .home-halloween-badge [data-lang="fr"], html[lang="en"] .home-halloween-badge [data-lang="en"], html[lang="es"] .home-halloween-badge [data-lang="es"] { display: inline; }
.home-halloween-pumpkin { display: inline-block; flex: 0 0 auto; width: 1.25em; height: 1.25em; background: url("/static/halloween/pumpkin.svg") no-repeat center / contain; vertical-align: -0.2em; }

/* ---- the banner under the hero ---- */
.home-halloween {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hw-orange-line);
  border-bottom: 1px solid rgba(255, 138, 43, 0.22);
  background:
    radial-gradient(38% 120% at 8% 40%, rgba(255, 122, 30, 0.22), rgba(255, 122, 30, 0) 70%),
    radial-gradient(45% 130% at 95% 60%, rgba(120, 50, 160, 0.24), rgba(120, 50, 160, 0) 70%),
    linear-gradient(180deg, #120b0e, #0d0a12);
}
.home-halloween-bats { position: absolute; inset: 0; pointer-events: none; }
.home-halloween-bats > i { position: absolute; width: 40px; aspect-ratio: 5 / 2; background: url("/static/halloween/bat.svg") no-repeat center / contain; opacity: 0.55; animation: hw-bat 5s ease-in-out infinite alternate; }
.home-halloween-bats > i:nth-child(1) { top: 14%; right: 9%; }
.home-halloween-bats > i:nth-child(2) { top: 30%; right: 20%; width: 26px; animation-delay: -2s; }
.home-halloween-bats > i:nth-child(3) { bottom: 16%; right: 5%; width: 20px; animation-delay: -3.5s; }
@keyframes hw-bat { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(-10px, -8px, 0) rotate(4deg); } }

.home-halloween-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; width: min(1100px, calc(100% - 48px)); margin: auto; padding: 40px 0 42px; }
.home-halloween-art { position: relative; display: grid; place-items: center; width: 340px; }
.home-halloween-art::before { content: ""; position: absolute; inset: 4% -4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 128, 32, 0.32), rgba(255, 128, 32, 0)); }
.home-halloween-art picture { position: relative; display: block; width: 100%; }
.home-halloween-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5)); }

.home-halloween [data-lang] { display: none; }
html[lang="fr"] .home-halloween-text[data-lang="fr"], html[lang="en"] .home-halloween-text[data-lang="en"], html[lang="es"] .home-halloween-text[data-lang="es"] { display: block; }
.home-halloween-text { min-width: 0; }
.home-halloween-kicker { display: block; color: var(--hw-orange-hi); font-size: 11.5px; font-weight: 800; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; }
.home-halloween-text h2 { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; color: #fff3e6; font-size: 34px; line-height: 1.15; text-shadow: 0 0 24px rgba(255, 120, 30, 0.45); }
.home-halloween-text h2 .home-halloween-pumpkin { width: 34px; height: 34px; }
.home-halloween-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px 6px 12px; border: 1px solid rgba(255, 179, 94, 0.6); border-radius: 999px; background: linear-gradient(180deg, #ffa24a, #f07a1c); color: #1f0c02; font-size: 13.5px; font-weight: 800; line-height: 1.3; box-shadow: 0 0 20px rgba(255, 122, 30, 0.3); }
.home-halloween-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1f0c02; }
.home-halloween.is-running .home-halloween-status::before { background: #3a1402; box-shadow: 0 0 0 3px rgba(58, 20, 2, 0.25); animation: hw-pulse 1.6s ease-in-out infinite; }
@keyframes hw-pulse { 50% { opacity: 0.35; } }
.home-halloween-lead { max-width: 70ch; margin: 0 0 14px; color: var(--wx-text); font-size: 16px; line-height: 1.6; }
.home-halloween-points { display: grid; gap: 8px; max-width: 76ch; margin: 0 0 20px; padding: 0; list-style: none; }
.home-halloween-points li { position: relative; padding-left: 28px; color: var(--wx-text-2); font-size: 14.5px; line-height: 1.6; }
.home-halloween-points li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; background: url("/static/halloween/pumpkin.svg") no-repeat center / contain; }
.home-halloween-dates { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.home-halloween-dates li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px 6px 6px; border: 1px solid rgba(255, 138, 43, 0.32); border-radius: 12px; background: rgba(20, 10, 8, 0.6); }
.home-halloween-dates strong { padding: 5px 9px; border-radius: 8px; background: var(--hw-orange-bg); color: var(--hw-orange-hi); font: 700 15px/1.2 var(--wx-display); letter-spacing: 0.04em; }
.home-halloween-dates span { color: var(--wx-text-2); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.home-halloween-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.home-halloween-closing { margin: 0; color: var(--hw-orange-hi); font: 700 18px/1.35 var(--wx-display); letter-spacing: 0.03em; text-shadow: 0 0 18px rgba(255, 120, 30, 0.35); }
.home-halloween-cta { border-color: #ffc489; background: linear-gradient(180deg, #ffad5c, #f27f22); color: #1f0c02; white-space: nowrap; }
.home-halloween-cta:hover { color: #140700; filter: brightness(1.07); }

/* ---- smaller screens ---- */
@media (max-width: 900px) {
  .home-halloween-inner { gap: 28px; }
  .home-halloween-art { width: 260px; }
  .home-halloween-text h2 { font-size: 30px; }
}
@media (max-width: 650px) {
  .home-halloween-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; width: calc(100% - 32px); padding: 30px 0 32px; }
  .home-halloween-art { width: min(250px, 72%); }
  .home-halloween-text { text-align: center; }
  .home-halloween-text h2 { justify-content: center; font-size: 26px; }
  .home-halloween-text h2 .home-halloween-pumpkin { width: 26px; height: 26px; }
  .home-halloween-lead { font-size: 15px; }
  .home-halloween-points { text-align: left; }
  .home-halloween-points li { font-size: 14px; }
  .home-halloween-dates { flex-direction: column; align-items: stretch; text-align: left; }
  .home-halloween-foot { flex-direction: column; }
  .home-halloween-closing { font-size: 17px; }
  .home-halloween-cta { width: min(320px, 100%); }
  .is-halloween .home-hero-shade::after { top: 2%; right: 0; width: 70%; height: 22%; }
  .home-halloween-bats > i:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-halloween .home-hero-shade::after,
  .home-halloween-bats > i,
  .home-halloween.is-running .home-halloween-status::before { animation: none; }
}