/* ═══════════════════════════════════════════════════════════════════════════════════
   HALLOWEEN — October only, across the home and rideshare pages.

   Three things, each in a place that already existed rather than a place made for it:

     1. The headline's full stop becomes a carved pumpkin. A substitution, so nothing
        is added to the layout and nothing moves.
     2. Leaves fall INSIDE the hero background, down the left and right edges only.
        Never across the headline or the booking card — a leaf drifting over the words
        is the thing that makes this look cheap.
     3. Bats cross the hero, also inside the background, so they travel with the page.

   Everything lives in the hero's own background layer, which is why it scrolls with the
   scene. An earlier version pinned it to the viewport and it read as stickers stuck to
   the glass: the page moved and the decoration did not.

   js/halloween.js only runs in October. Outside the season this stylesheet matches
   nothing and the markup never exists. Delete both files and the <link>/<script> lines
   on index.html and rideshare.html to remove it entirely.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── The pumpkin ───────────────────────────────────────────────────────────────── */
.pk{display:inline-block;width:.92em;height:.92em;margin-left:.15em;
  position:relative;top:.06em;vertical-align:baseline;}
.pk svg{display:block;width:100%;height:100%;overflow:visible;}

/* Sits behind the pumpkin and bleeds past its edge, which is what sells it as lit. */
.pk .glow{filter:blur(7px);opacity:.58;animation:pkFlicker 4.6s ease-in-out infinite;}
@keyframes pkFlicker{
  0%,100%{opacity:.58;}
  42%    {opacity:.40;}
  48%    {opacity:.70;}
  70%    {opacity:.46;}
}

/* A smaller, flatter mark for section headings — no glow, sitting with the type rather
   than floating beside it. */
/* Sits on the baseline and lifts slightly, so its middle lines up with the middle of
   the capitals rather than hanging below them. -.1em was dropping it off the line. */
.pk-sm{display:inline-block;width:.78em;height:.78em;margin-left:.3em;
  vertical-align:baseline;position:relative;top:.09em;opacity:.92;}
.pk-sm svg{display:block;width:100%;height:100%;}
/* The rideshare eyebrow is 12px type, so a mark scaled to it disappears. Sized against
   the line instead, and the bat is wider than tall so it gets its own ratio. */
.hv-eyebrow .pk-sm{width:2.6em;height:1.1em;margin-left:.55em;vertical-align:-.2em;}

/* ── Leaves and bats ───────────────────────────────────────────────────────────────
   Absolute inside the hero's background layer so they sit under the headline and the
   card, and travel with the hero as the page scrolls. The scrim the hero already
   paints falls over them too, tucking them into the footage. */
.hw-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}

.hw-leaf{position:absolute;top:-24px;display:block;opacity:0;
  animation:hwFall linear infinite;will-change:transform,opacity;}
.hw-leaf svg{display:block;width:100%;height:100%;}
/* The ones set furthest back are smaller, slower and slightly soft, so the fall has
   depth instead of being one flat sheet of shapes. */
.hw-leaf.far{filter:blur(1.4px);}

@keyframes hwFall{
  0%  {transform:translate3d(0,-24px,0) rotate(0deg);opacity:0;}
  9%  {opacity:var(--o);}
  88% {opacity:var(--o);}
  100%{transform:translate3d(var(--dx),var(--h),0) rotate(var(--rot));opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  .hw-layer{display:none;}
  .pk .glow{animation:none;}
}