/* Halloween theme. Everything is scoped to html.halloween, which the inline
   script in each page head sets during October only (or with ?halloween for a
   preview). On 1 November the class stops being set and the site is back to
   normal with no deploy needed. Decoration only, no copy changes. */

/* promo band: pumpkin and black instead of blue */
.halloween .diag-stripes {
  background-image: repeating-linear-gradient(-45deg, #c2410c 0, #c2410c 14px, #1c1917 14px, #1c1917 28px);
}

/* ticker: pumpkins replace the separator dots */
.halloween .ticker span.text-rust-500 { font-size: 0; }
.halloween .ticker span.text-rust-500::before { content: "\1F383"; font-size: 13px; }

/* hero: a cobweb in the top left corner, a few bats top right */
.halloween body > header { position: relative; overflow: hidden; }
.halloween body > header::before,
.halloween body > header::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
}
.halloween body > header::before {
  top: 0; left: 0; width: clamp(80px, 11vw, 140px); aspect-ratio: 1;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" fill="none" stroke="%230a0a0a" stroke-opacity=".38" stroke-width="1.1" stroke-linecap="round"%3E%3Cpath d="M0 0L170.0 0.0"/%3E%3Cpath d="M0 0L164.2 44.0"/%3E%3Cpath d="M0 0L147.2 85.0"/%3E%3Cpath d="M0 0L120.2 120.2"/%3E%3Cpath d="M0 0L85.0 147.2"/%3E%3Cpath d="M0 0L44.0 164.2"/%3E%3Cpath d="M0 0L0.0 170.0"/%3E%3Cpath d="M34.0 0.0Q29.0 3.8 32.8 8.8Q27.0 11.2 29.4 17.0Q23.2 17.8 24.0 24.0Q17.8 23.2 17.0 29.4Q11.2 27.0 8.8 32.8Q3.8 29.0 0.0 34.0"/%3E%3Cpath d="M66.0 0.0Q56.3 7.4 63.8 17.1Q52.4 21.7 57.2 33.0Q45.0 34.6 46.7 46.7Q34.6 45.0 33.0 57.2Q21.7 52.4 17.1 63.8Q7.4 56.3 0.0 66.0"/%3E%3Cpath d="M100.0 0.0Q85.3 11.2 96.6 25.9Q79.5 32.9 86.6 50.0Q68.2 52.4 70.7 70.7Q52.4 68.2 50.0 86.6Q32.9 79.5 25.9 96.6Q11.2 85.3 0.0 100.0"/%3E%3Cpath d="M136.0 0.0Q116.0 15.3 131.4 35.2Q108.1 44.8 117.8 68.0Q92.8 71.2 96.2 96.2Q71.2 92.8 68.0 117.8Q44.8 108.1 35.2 131.4Q15.3 116.0 0.0 136.0"/%3E%3C/svg%3E');
}
.halloween body > header::after {
  top: 10px; right: 2%; width: clamp(110px, 16vw, 210px); aspect-ratio: 5 / 3; opacity: .8;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120" fill="%230a0a0a"%3E%3Cpath transform="translate%28120 14%29 scale%282.2%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3Cpath transform="translate%2840 52%29 scale%281.5%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3Cpath transform="translate%28150 78%29 scale%281.1%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3C/svg%3E');
  animation: hw-flutter 6s ease-in-out infinite;
}
@keyframes hw-flutter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .halloween body > header::after { animation: none; }
}

/* ---- round two: more Halloween ---- */

/* orange accents: button shadows, blue marker strokes, ticker text */
.halloween .btn-shadow { box-shadow: 4px 4px 0 0 #ea580c; }
.halloween .btn-shadow:hover { box-shadow: 6px 6px 0 0 #ea580c; }
.halloween .btn-shadow:active { box-shadow: 1px 1px 0 0 #ea580c; }
.halloween .marker-underline {
  background-image: linear-gradient(transparent 65%, rgba(234,88,12,0.38) 65%, rgba(234,88,12,0.38) 92%, transparent 92%);
}
.halloween .ticker { color: #fdba74; }

/* a spider on its thread, bobbing under the cobweb */
.halloween body > header > div:first-child::before {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  top: 0; left: 54%; width: 22px; height: 70px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 400"%3E%3Cpath d="M20 0V374" stroke="%230a0a0a" stroke-opacity=".45" stroke-width="1"/%3E%3Cg stroke="%230a0a0a" stroke-width="2" fill="none" stroke-linecap="round"%3E%3Cpath d="M14 380L4 372M14 384L2 384M14 388L4 396M15 391L8 400M26 380L36 372M26 384L38 384M26 388L36 396M25 391L32 400"/%3E%3C/g%3E%3Cellipse cx="20" cy="386" rx="8" ry="10" fill="%230a0a0a"/%3E%3Ccircle cx="20" cy="375" r="5" fill="%230a0a0a"/%3E%3Ccircle cx="18" cy="374" r="1.3" fill="%23f97316"/%3E%3Ccircle cx="22" cy="374" r="1.3" fill="%23f97316"/%3E%3C/svg%3E') no-repeat center bottom / 22px auto;
  animation: hw-drop 4.5s ease-in-out infinite;
}
@keyframes hw-drop {
  0%, 100% { height: 70px; }
  50% { height: 130px; }
}

/* little cobwebs in the corner of each photo */
.halloween .photo-frame:not(.absolute) { position: relative; }
.halloween .photo-frame::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  top: 0; right: 0; width: 46px; height: 46px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="none" stroke="%230a0a0a" stroke-opacity=".5" stroke-width="1"%3E%3Cpath d="M60 0L0 60M60 0L20 60M60 0L0 20M60 0L60 60M60 0L0 0"/%3E%3Cpath d="M44 0Q46 8 60 16M28 0Q34 18 60 32M12 0Q22 30 60 48"/%3E%3C/svg%3E') no-repeat top right / contain;
}

/* the big blue call to action becomes a night sky with a full moon */
.halloween section.bg-txblue-500 {
  background-color: #2e1065;
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Cdefs%3E%3CradialGradient id="g"%3E%3Cstop offset="0" stop-color="%23fed7aa"/%3E%3Cstop offset=".7" stop-color="%23fdba74"/%3E%3Cstop offset="1" stop-color="%23fdba74" stop-opacity="0"/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx="100" cy="100" r="100" fill="url%28%23g%29" opacity=".35"/%3E%3Ccircle cx="100" cy="100" r="62" fill="%23fde68a"/%3E%3Ccircle cx="80" cy="86" r="10" fill="%23f5c451"/%3E%3Ccircle cx="118" cy="118" r="14" fill="%23f5c451"/%3E%3Ccircle cx="120" cy="78" r="6" fill="%23f5c451"/%3E%3C/svg%3E'),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120" fill="%230c0a09"%3E%3Cpath transform="translate%2830 20%29 scale%282%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3Cpath transform="translate%28150 50%29 scale%281.6%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3Cpath transform="translate%2890 85%29 scale%281.1%29" d="M0 7C3 2 7 2 9 6C10 4 11 4 12 5L13 2L14 5C15 4 16 4 17 6C19 2 23 2 26 7C23 6 21 7 20 9C18 7 16 8 13 10C10 8 8 7 6 9C5 7 3 6 0 7Z"/%3E%3C/svg%3E'),
    radial-gradient(circle at 50% 120%, #7c2d12 0, transparent 55%);
  background-repeat: no-repeat;
  background-size: clamp(140px, 18vw, 240px), clamp(150px, 22vw, 260px), auto;
  background-position: right 6% top 18%, right 22% top 12%, center;
}

/* jack o' lanterns and a ghost along the top of the footer */
.halloween body > footer { position: relative; }
.halloween body > footer::before {
  content: ""; position: absolute; pointer-events: none;
  left: 5%; top: -34px; width: 150px; height: 44px;
  background:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50"%3E%3Cpath d="M30 10c2-6 6-8 9-8" stroke="%234d7c0f" stroke-width="4" fill="none" stroke-linecap="round"/%3E%3Cellipse cx="18" cy="30" rx="14" ry="17" fill="%23ea580c"/%3E%3Cellipse cx="42" cy="30" rx="14" ry="17" fill="%23ea580c"/%3E%3Cellipse cx="30" cy="30" rx="15" ry="19" fill="%23f97316"/%3E%3Cpath d="M17 24l6-7 6 7zM31 24l6-7 6 7z" fill="%231c1917"/%3E%3Cpath d="M14 34q16 12 32 0l-4 2-3-3-3 4-4-4-4 4-3-4-3 3z" fill="%231c1917"/%3E%3C/svg%3E') no-repeat left bottom / 54px 44px,
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50"%3E%3Cpath d="M30 10c2-6 6-8 9-8" stroke="%234d7c0f" stroke-width="4" fill="none" stroke-linecap="round"/%3E%3Cellipse cx="18" cy="30" rx="14" ry="17" fill="%23ea580c"/%3E%3Cellipse cx="42" cy="30" rx="14" ry="17" fill="%23ea580c"/%3E%3Cellipse cx="30" cy="30" rx="15" ry="19" fill="%23f97316"/%3E%3Cpath d="M17 24l6-7 6 7zM31 24l6-7 6 7z" fill="%231c1917"/%3E%3Cpath d="M14 34q16 12 32 0l-4 2-3-3-3 4-4-4-4 4-3-4-3 3z" fill="%231c1917"/%3E%3C/svg%3E') no-repeat 62px bottom / 40px 33px,
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 70"%3E%3Cpath d="M8 66V30C8 14 18 4 30 4s22 10 22 26v36l-7-6-7 6-8-6-8 6-7-6z" fill="%23fbf7ec" stroke="%230a0a0a" stroke-width="2.5"/%3E%3Cellipse cx="22" cy="28" rx="4" ry="6" fill="%230a0a0a"/%3E%3Cellipse cx="38" cy="28" rx="4" ry="6" fill="%230a0a0a"/%3E%3Cellipse cx="30" cy="42" rx="4" ry="5" fill="%230a0a0a"/%3E%3C/svg%3E') no-repeat right bottom / 36px 42px;
}

@media (prefers-reduced-motion: reduce) {
  .halloween body > header > div:first-child::before { animation: none; }
}
@media (max-width: 1023px) {
  .halloween body > header > div:first-child::before { display: none; }
}