/* Halloween 2026 theme for the homepage. Seasonal and reversible: every themed rule hangs off html.halloween,
   which /halloween.js adds only until 9 November 2026. After that (or with ?halloween=off) the page is exactly
   the normal homepage again, and the Costume Contest card hides itself. Decorations are CSS and inline SVG only. */

/* ---- Costume Contest card: shown only while the theme is on ---- */
.contest-card { display: none; }
.contest-card [hidden] { display: none !important; } /* .btn sets display, which would otherwise beat [hidden] */

html.halloween .contest-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 32px);
  margin-top: 18px; padding: clamp(20px, 4vw, 34px) clamp(18px, 4vw, 40px);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255, 140, 40, .45);
  /* Always dark, like the hero, so the copy stays light in both themes. */
  background:
    radial-gradient(420px 260px at 0% 100%, rgba(255, 122, 24, .35), transparent 70%),
    radial-gradient(500px 300px at 100% 0%, rgba(155, 92, 255, .35), transparent 70%),
    linear-gradient(135deg, #1d0d33, #2a1046 60%, #170a28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  color: #fff7ec;
}
.contest-card .contest-art { width: clamp(96px, 16vw, 168px); }
.contest-card .contest-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(255, 122, 24, .45)); }
html.halloween .contest-card .eyebrow { margin: 0 0 8px; color: #ffb44d; }
.contest-card h2 {
  margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 900;
}
.contest-card .pitch { margin: 10px 0 0; max-width: 560px; font-size: clamp(1rem, 2.2vw, 1.15rem); color: #eadcff; }
.contest-card .contest-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.contest-card .btn.primary { background: linear-gradient(135deg, #ffb13d, #ff6a1a); box-shadow: 0 10px 30px rgba(255, 106, 26, .4); }
.contest-card .contest-meta { margin: 16px 0 0; font-size: .95rem; color: #d9c8f5; }
.contest-card .contest-meta strong { color: #ffcf8a; }
.contest-card .contest-meta a { color: #ffcf8a; font-weight: 800; text-underline-offset: 3px; }
.contest-card .contest-meta a:hover { color: #fff; }
.contest-card .contest-meta a:focus-visible { outline: 3px solid #ffb13d; outline-offset: 2px; border-radius: 4px; }
/* A little cobweb in the card's top-right corner */
html.halloween .contest-card::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: clamp(80px, 14vw, 140px); aspect-ratio: 1;
  background: var(--hw-web) no-repeat top right / contain; opacity: .55; pointer-events: none;
}
@media (max-width: 560px) {
  html.halloween .contest-card { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .contest-card .contest-art { width: 84px; position: absolute; top: 14px; right: 14px; opacity: .95; }
  .contest-card .eyebrow, .contest-card h2 { padding-right: 88px; }
  .contest-card .contest-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Shared decoration images (inline SVG, no downloads) ---- */
html.halloween {
  --hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23b48cff' d='M32 9c1.5-2.5 2.5-4.5 2.5-6.5L37 7c4-1 8 1 10 4 3-2 8-3 13-1-3 2-4 6-4 10-3-2-7-2-10 0-1-3-4-4-7-3-2 2-4 5-7 8-3-3-5-6-7-8-3-1-6 0-7 3-3-2-7-2-10 0 0-4-1-8-4-10 5-2 10-1 13 1 2-3 6-5 10-4l2.5-4.5c0 2 1 4 2.5 6.5z'/%3E%3C/svg%3E");
  --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f3e8ff' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M100 0L0 0M100 0L8 40M100 0L30 78M100 0L62 98M100 0L100 100'/%3E%3Cpath d='M70 0Q73 8 72.4 12Q77 17 79 23.4Q84 27 88.6 29.4Q95 29 100 30M45 0Q50 13 49.4 22Q57 31 61.5 42.9Q70 49 79.1 53.9Q90 54 100 55M20 0Q27 18 26.4 32Q37 46 44 62.4Q56 72 69.6 78.4Q85 79 100 80'/%3E%3C/svg%3E");
}

/* ---- Palette: dark purples and pumpkin orange ---- */
html.halloween:not([data-theme="light"]) {
  --bg: #0d0718;
  --bg-2: #1a0d2c;
  --card: rgba(30, 16, 50, .88);
  --text: #fbf5ff;
  --muted: #d0c0e6;
  --line: rgba(214, 180, 255, .18);
  --gold: #ffb13d;
  --pink: #ff7a1a;
  --blue: #c4a2ff;
  --green: #9dff7a;
  --dz-nav-bg: rgba(28, 14, 46, .82);
  --dz-nav-text: #fbf5ff;
  --dz-nav-muted: #d0c0e6;
  --dz-nav-line: rgba(214, 180, 255, .2);
  --dz-nav-accent: #ffa64d;
}
/* Light mode: pumpkin-cream and lavender, same dark contest card. */
html.halloween[data-theme="light"] {
  --bg: #fff6ec;
  --bg-2: #f3eaff;
  --card: rgba(255, 255, 255, .92);
  --line: rgba(70, 30, 110, .14);
  --dz-nav-accent: #c4560a;
}
html.halloween body {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(255, 122, 24, .18), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(155, 92, 255, .22), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
html.halloween .shell { position: relative; z-index: 1; }

/* ---- Night sky: moon and bats behind the page (added by halloween.js) ---- */
.hw-sky { display: none; }
html.halloween .hw-sky {
  display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.hw-moon {
  position: absolute; top: 110px; right: calc(50% - 720px); width: clamp(70px, 11vw, 130px); aspect-ratio: 1; /* in the right-hand margin */
  border-radius: 50%; opacity: .55;
  background: radial-gradient(circle at 36% 34%, #fff8e1, #ffe2a8 45%, #f2b25a 100%);
  box-shadow: 0 0 60px 18px rgba(255, 196, 110, .22);
}
.hw-moon::after { /* a couple of craters */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 58%, rgba(196, 130, 60, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(196, 130, 60, .25) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 32%, rgba(196, 130, 60, .25) 0 5%, transparent 6%);
}
html.halloween[data-theme="light"] .hw-moon { opacity: .35; }
.hw-bat {
  position: absolute; width: 46px; aspect-ratio: 2; background: var(--hw-bat) no-repeat center / contain; opacity: .55;
  animation: hw-flutter 7s ease-in-out infinite;
}
.hw-bat.b1 { top: 120px; right: max(70px, calc(50% - 560px)); }
.hw-bat.b2 { top: 210px; right: max(150px, calc(50% - 470px)); width: 30px; animation-duration: 9s; animation-delay: -3s; }
.hw-bat.b3 { top: 46%; left: max(4px, calc(50% - 640px)); width: 36px; animation-duration: 11s; animation-delay: -6s; opacity: .35; }
html.halloween[data-theme="light"] .hw-bat { filter: brightness(.55); opacity: .45; }
@keyframes hw-flutter {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(-10px, -8px) scaleY(.7); }
  50% { transform: translate(-18px, 2px) scaleY(1); }
  75% { transform: translate(-8px, 8px) scaleY(.75); }
}
@media (max-width: 700px) {
  .hw-moon { display: none; } /* no free sky beside the cards on phones */
  .hw-bat.b3 { display: none; }
}

/* ---- Touches on the existing sections ---- */
/* Cobweb in the hero's top-right corner (over the art, away from the headline). */
html.halloween .hero::before {
  content: ""; position: absolute; top: 0; right: 0; z-index: 0; width: clamp(110px, 18vw, 200px); aspect-ratio: 1;
  background: var(--hw-web) no-repeat top right / contain; opacity: .5; pointer-events: none;
}
html.halloween .hero h1 span,
html.halloween[data-theme="light"] .hero h1 span { background-image: linear-gradient(90deg, #c4a2ff, #ffb13d 55%, #ff7a1a); }
html.halloween .hero .eyebrow::before { content: "🎃 "; }
html.halloween .honk-meter {
  background: linear-gradient(120deg, rgba(155, 92, 255, .26), rgba(255, 122, 24, .16)), var(--card);
  border-color: color-mix(in srgb, #ff9a3d 40%, var(--line));
}
html.halloween .honk-button,
html.halloween .btn.primary { background: linear-gradient(135deg, #ffb13d, #ff6a1a); }
html.halloween .section-title::before { content: "🦇"; font-size: 1rem; letter-spacing: 0; }
/* A small row of pumpkins in the footer */
html.halloween .footer::before {
  content: "🎃 👻 🎃"; flex-basis: 100%; text-align: center; letter-spacing: .4em; font-size: 1.1rem; opacity: .8;
}

/* ---- Motion: gentle, and none at all for people who ask for less ---- */
@media (prefers-reduced-motion: reduce) {
  .hw-bat { animation: none; }
}