/* ===== BOO26 banner — everything from here down is what goes on the site ===== */
.wa-boo {
  --boo-night: #1a0f24; --boo-orange: #ff8a1f;
  position: relative; overflow: hidden; isolation: isolate; border-radius: 22px;
  width: 100%; aspect-ratio: 2.6 / 1; min-height: 300px; max-height: 460px;
  background: var(--boo-night); color: #fff; font-family: 'Encode Sans', sans-serif;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 4% 0 5%; box-sizing: border-box;
}
.wa-boo * { box-sizing: border-box; }
.wa-boo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; }
/* soft dark shade behind the text so it stays readable over the sky */
.wa-boo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 8, 30, .78) 0%, rgba(20, 8, 30, .55) 38%, rgba(20, 8, 30, 0) 62%); }

.wa-boo-text { position: relative; z-index: 2; max-width: 50%; }
.wa-boo-title { font-family: 'Flavors', cursive; font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05;
  margin: 0 0 10px; color: var(--boo-orange); text-shadow: 0 3px 0 #5a1f00, 0 0 22px rgba(255, 138, 31, .5); }
.wa-boo-sub { font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; line-height: 1.45; margin: 0 0 18px; color: #f3e9ff; }
.wa-boo-sub b { color: #fff; }
.wa-boo-code { display: inline-block; font-family: 'Flavors', cursive; font-weight: 400; font-size: 1.15em; line-height: 1.1;
  color: var(--boo-night); background: var(--boo-orange); padding: 2px 10px 0; border-radius: 8px; letter-spacing: 1px; }
.wa-boo-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 16px;
  background: #fff; color: var(--boo-night); padding: 12px 22px; border-radius: 8px; transition: transform .15s ease, background .15s ease; }
.wa-boo-cta:hover, .wa-boo-cta:focus-visible { background: var(--boo-orange); transform: translateY(-2px); }
.wa-boo-short { display: none; }

/* the pumpkin: a script bounces it across the sky, growing each jump, uncovering the text behind it, then it bursts (no script = text simply shows) */
.wa-boo-pumpkin { position: absolute; z-index: 3; left: 0; top: 0; width: 96px; height: auto; transform: translate(-200px, 0);
  transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255, 150, 40, .55)); will-change: transform; }
.wa-boo.is-ready .wa-boo-reveal { clip-path: inset(-30px 100% -30px -30px); }
.wa-boo-burst { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; }
.wa-boo-burst::before { content: ""; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 130, .95) 0%, rgba(255, 138, 31, .6) 35%, rgba(150, 70, 200, .25) 60%, transparent 72%); }
.wa-boo-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ffb347;
  box-shadow: 0 0 10px #ff8a1f; }
.wa-boo-burst.is-on { opacity: 1; animation: wa-boo-burst-fade .9s ease-out forwards; }
.wa-boo-burst.is-on::before { animation: wa-boo-burst-glow .9s ease-out forwards; }
.wa-boo-burst.is-on i { animation: wa-boo-spark .9s ease-out forwards; }
.wa-boo-burst i:nth-child(1) { --dx: 90px;  --dy: -10px; } .wa-boo-burst i:nth-child(2) { --dx: 60px;  --dy: -70px; }
.wa-boo-burst i:nth-child(3) { --dx: 0px;   --dy: -95px; } .wa-boo-burst i:nth-child(4) { --dx: -60px; --dy: -70px; }
.wa-boo-burst i:nth-child(5) { --dx: -90px; --dy: -5px; }  .wa-boo-burst i:nth-child(6) { --dx: -55px; --dy: 55px; }
.wa-boo-burst i:nth-child(7) { --dx: 5px;   --dy: 80px; }  .wa-boo-burst i:nth-child(8) { --dx: 60px;  --dy: 55px; }
@keyframes wa-boo-spark { from { transform: translate(0, 0) scale(1.2); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes wa-boo-burst-glow { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes wa-boo-burst-fade { 90% { opacity: 1; } to { opacity: 0; } }

/* tablet */
@media (max-width: 1119px) {
  .wa-boo { aspect-ratio: 2.1 / 1; }
  .wa-boo-text { max-width: 56%; }
}
/* phone: portrait video, text on the sky at the top, couple below */
@media (max-width: 600px) {
  .wa-boo { aspect-ratio: 10 / 16; max-height: none; min-height: 0; border-radius: 16px;
    justify-content: flex-start; align-items: center; text-align: center; padding: 26px 18px 0; }
  .wa-boo-bg { object-position: 50% 100%; }
  .wa-boo::before { background: linear-gradient(180deg, rgba(20, 8, 30, .8) 0%, rgba(20, 8, 30, .45) 42%, rgba(20, 8, 30, 0) 60%); }
  .wa-boo-text { max-width: 100%; }
  .wa-boo-long { display: none; }
  .wa-boo-short { display: inline; }
  .wa-boo-sub { margin-bottom: 14px; }
  .wa-boo-pumpkin { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-boo-pumpkin, .wa-boo-burst { display: none; }
}

/* ===== home-page popup ===== */
.wa-boo-modal { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(14, 6, 22, .8); }
.wa-boo-modal.is-open { display: flex; animation: wa-boo-fade .35s ease both; }
@keyframes wa-boo-fade { from { opacity: 0; } to { opacity: 1; } }
.wa-boo-modal-box { position: relative; width: min(940px, 100%); }
.wa-boo-modal .wa-boo { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.wa-boo-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, .92); color: #1a0f24; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.wa-boo-close:hover, .wa-boo-close:focus-visible { background: #ff8a1f; color: #1a0f24; }
@media (max-width: 600px) {
  .wa-boo-modal-box { width: min(380px, 100%); }
  .wa-boo-modal .wa-boo { max-height: 86vh; padding-top: 58px; }
}