/* ==========================================================================
   CRAWLLOWEEN halloween layer, 2026-10-06

   Loaded after page.css on every public page. Four things, each owner asks:

   1. A Halloween background behind everything: moon glow, violet haze, ember
      glow, a sparse bat field, cobweb corners and slow fog. Pure CSS and inline
      SVG, no generated image and no lettering. One fixed layer, so it costs one
      composite and never scrolls with content.
   2. A pumpkin cursor on mouse devices. Touch devices never see it.
   3. The neighborhood marquee runs faster and never shows its end.
   4. The empty band between the crawl picker and the stats strip is closed.
   ========================================================================== */

/* ------------------------------------------------------------ 1. background */

body {
  background-color: var(--bg);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Glows, moon and bats. The bat tile is 420px with three silhouettes at
   different sizes so the repeat does not read as a grid. */
body::before {
  background:
    /* cobweb, top left */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M0 0 260 60M0 0 220 150M0 0 150 220M0 0 60 260'/%3E%3Cpath d='M52 12q-2 16 -20 30q-10 8 -20 14'/%3E%3Cpath d='M104 24q-8 34 -40 58q-22 18 -44 30q-10 6 -20 8'/%3E%3Cpath d='M156 36q-12 52 -60 88q-34 26 -66 44q-16 10 -30 14'/%3E%3Cpath d='M208 48q-18 70 -82 118q-46 34 -88 58q-20 12 -38 18'/%3E%3C/svg%3E") left top / 260px 260px no-repeat,
    /* cobweb, top right, mirrored */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 260 260' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cg transform='translate(260 0) scale(-1 1)'%3E%3Cpath d='M0 0 260 60M0 0 220 150M0 0 150 220M0 0 60 260'/%3E%3Cpath d='M52 12q-2 16 -20 30q-10 8 -20 14'/%3E%3Cpath d='M104 24q-8 34 -40 58q-22 18 -44 30q-10 6 -20 8'/%3E%3Cpath d='M156 36q-12 52 -60 88q-34 26 -66 44q-16 10 -30 14'/%3E%3C/g%3E%3C/svg%3E") right top / 220px 220px no-repeat,
    /* moon */
    radial-gradient(circle at 86% 14%, rgba(255, 238, 205, 0.16) 0 46px, rgba(255, 238, 205, 0.07) 47px, rgba(255, 238, 205, 0) 190px),
    /* violet haze */
    radial-gradient(ellipse 70% 55% at 90% 0%, rgba(124, 58, 237, 0.20), transparent 70%),
    /* ember glow from below */
    radial-gradient(ellipse 80% 45% at 10% 100%, rgba(255, 122, 24, 0.13), transparent 70%),
    /* toxic glow, low right */
    radial-gradient(ellipse 50% 35% at 100% 85%, rgba(141, 219, 44, 0.06), transparent 70%),
    /* bat field */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='%23ffffff'%3E%3Cg fill-opacity='.07'%3E%3Cpath transform='translate(60 70) scale(1.5)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2zM17.6 15.4 15.4 10.6l3.1 1.3L20 9.4l1.5 2.5 3.1-1.3-2.2 4.8z'/%3E%3Cpath transform='translate(290 40) rotate(-14) scale(.9)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2z'/%3E%3Cpath transform='translate(220 290) rotate(10) scale(1.15)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2z'/%3E%3C/g%3E%3Cg fill-opacity='.22'%3E%3Ccircle cx='30' cy='220' r='1'/%3E%3Ccircle cx='170' cy='120' r='.8'/%3E%3Ccircle cx='380' cy='200' r='1.1'/%3E%3Ccircle cx='120' cy='370' r='.8'/%3E%3Ccircle cx='340' cy='380' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px repeat,
    /* bat field, second scale */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='%23ffffff'%3E%3Cg fill-opacity='.05'%3E%3Cpath transform='translate(60 70) scale(1.5)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2zM17.6 15.4 15.4 10.6l3.1 1.3L20 9.4l1.5 2.5 3.1-1.3-2.2 4.8z'/%3E%3Cpath transform='translate(290 40) rotate(-14) scale(.9)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2z'/%3E%3Cpath transform='translate(220 290) rotate(10) scale(1.15)' d='M17.2 19.4 5.4 12.6l1.9 6.4-4.1 1.2 6.6 4.1 7.4-1.6zM22.8 19.4 34.6 12.6l-1.9 6.4 4.1 1.2-6.6 4.1-7.4-1.6zM20 17.3c1.7 0 3.1 2.3 3.1 5.2s-1.4 5.2-3.1 5.2-3.1-2.3-3.1-5.2 1.4-5.2 3.1-5.2z'/%3E%3C/g%3E%3Cg fill-opacity='.22'%3E%3Ccircle cx='30' cy='220' r='1'/%3E%3Ccircle cx='170' cy='120' r='.8'/%3E%3Ccircle cx='380' cy='200' r='1.1'/%3E%3Ccircle cx='120' cy='370' r='.8'/%3E%3Ccircle cx='340' cy='380' r='.9'/%3E%3C/g%3E%3C/svg%3E") 210px 160px / 640px 640px repeat;
}

/* Fog. Two soft banks drifting sideways, slow enough to read as weather. */
body::after {
  background:
    radial-gradient(ellipse 45% 18% at 25% 92%, rgba(200, 190, 220, 0.07), transparent 70%),
    radial-gradient(ellipse 40% 16% at 75% 96%, rgba(200, 190, 220, 0.06), transparent 70%);
  background-size: 140% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: cw-fog 48s ease-in-out infinite alternate; }
}

@keyframes cw-fog {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* Let the background breathe through the tinted section bands. They keep
   their rhythm, just not as solid slabs. */
.section--soft { background: rgba(18, 12, 15, 0.72); }
.section--sunk { background: rgba(7, 4, 5, 0.70); }

/* --------------------------------------------------------- 2. pumpkin cursor */

@media (hover: hover) and (pointer: fine) {
  html,
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40'%3E%3Cpath d='M19 6.6h2.6l1.4-3.2 1.6.8-1.6 3.6v3.8H19z' fill='%233f6b1f'/%3E%3Cpath d='M20 10.8c-8 0-13.4 4.8-13.4 11.3S12 33.6 20 33.6s13.4-5 13.4-11.5S28 10.8 20 10.8z' fill='%23ff7a18' stroke='%23180a04' stroke-width='1.6'/%3E%3Cpath d='M15.6 11.6c-2.6 3-2.6 18.4 0 21.4M24.4 11.6c2.6 3 2.6 18.4 0 21.4' fill='none' stroke='%23c25505' stroke-width='1.1'/%3E%3Cpath d='M12.8 20.6l4.6-2.6 1 4.8zM27.2 20.6l-4.6-2.6-1 4.8zM12.4 25.6h15.2l-2.4 3.6-2.2-1.8-2.2 1.8-2.2-1.8-2.2 1.8z' fill='%23180a04'/%3E%3C/svg%3E") 16 16, auto;
  }

  /* Lit when it is over something clickable. */
  /* :is() takes its most specific argument (label[for], 0-1-1), which is what
     lets this beat the existing .btn { cursor: pointer } in components.css. */
  :is(a, button, summary, select, label[for], [role="tab"], .btn, .map-stop, .night-tab, .nav-toggle) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40'%3E%3Cpath d='M19 6.6h2.6l1.4-3.2 1.6.8-1.6 3.6v3.8H19z' fill='%233f6b1f'/%3E%3Cpath d='M20 10.8c-8 0-13.4 4.8-13.4 11.3S12 33.6 20 33.6s13.4-5 13.4-11.5S28 10.8 20 10.8z' fill='%23ff8c2e' stroke='%23180a04' stroke-width='1.6'/%3E%3Cpath d='M15.6 11.6c-2.6 3-2.6 18.4 0 21.4M24.4 11.6c2.6 3 2.6 18.4 0 21.4' fill='none' stroke='%23c25505' stroke-width='1.1'/%3E%3Cpath d='M12.8 20.6l4.6-2.6 1 4.8zM27.2 20.6l-4.6-2.6-1 4.8zM12.4 25.6h15.2l-2.4 3.6-2.2-1.8-2.2 1.8-2.2-1.8-2.2 1.8z' fill='%23ffe04a'/%3E%3C/svg%3E") 16 16, pointer;
  }

  /* Typing still gets a text caret. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  textarea {
    cursor: text;
  }
}

/* --------------------------------------------------------------- 3. marquee */

/* Each set now carries every name three times (about 3,300px), wider than
   any desktop screen, so the strip never runs out before the seam. Faster
   too: about 80px a second instead of about 33. */
.marquee-band { --dur-marquee: 40s; }

/* ----------------------------------------------------------- 4. home spacing */

/* The picker ends on a one-line footnote, then 120px of its own padding, then
   120px of the stats strip's. Close that to one comfortable gap. */
.picker { padding-bottom: var(--sp-7); }
.picker + #proof,
#proof { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }

/* ------------------------------------------------------- 5. iPhone buy bar */

/* On a phone the bar is the buy button, so it has to read as one at a glance.
   Neighborhood pages show the night you are buying on the left (tap it to
   change night) and one wide accent button on the right that follows that night.
   The bar stays tucked while the hero's own buttons are on screen. */
@media (max-width: 860px) {
  :root { --cta-bar-h: 84px; }

  .mobile-cta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 7, 9, 0.94);
    box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.55);
  }

  .mobile-cta .btn { flex: none; min-height: 56px; }

  .mobile-cta .btn--primary {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    box-shadow: 0 0 28px -4px var(--accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }

  .mobile-cta__night {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: var(--fw-black);
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-cta__night small {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.12em;
    color: var(--accent);
  }
}