/* Halloween skin for the home page -- on until Oct 31, 11:59 pm ET.
 *
 * /spooky.js adds html.spooky in <head> before first paint (the same switch the
 * /find-your-drip/ page uses). Without that class nothing below applies and every
 * .spk decoration stays display:none. All of it is aria-hidden, catches no clicks
 * and stops moving under Reduced Motion. After Nov 1: delete this file, its <link>
 * in index.html and the .spk markup (Justin, 2026-10-25). */

.spk { display: none; }
html.spooky .spk { display: block; }

/* Pumpkin takes lavender's accent job, so every button, eyebrow and hover turns
   orange; gold prices, the head-spa violet and hydration teal keep their meaning. */
html.spooky { --lav: #FF8A2B; }
html.spooky .btn-drip { box-shadow: 0 8px 30px rgba(255, 138, 43, .28); }
html.spooky .hero-title .eyebrow::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c-.6-2.2.2-3.8 2-4.6' stroke='%237BBF5E' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='7.6' cy='14.6' rx='5.6' ry='7' fill='%23D9661A'/%3E%3Cellipse cx='16.4' cy='14.6' rx='5.6' ry='7' fill='%23D9661A'/%3E%3Cellipse cx='12' cy='14.6' rx='5.2' ry='7.6' fill='%23FF8A2B'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hero 1's IV bag brews pumpkin and purple instead of cyan and pink. It is the
   same CSS grade styles.css already puts on this clip, turned further: the
   footage was shot gold + emerald, and 220deg sends emerald to red-orange and gold
   to violet (240 went yellow-green, 230 sat between). Outranks both of
   styles.css's .hero canvas rules, phones included. */
html.spooky .hero canvas,
html.spooky .hero .poster { filter: hue-rotate(220deg) saturate(1.15); }

/* ---------- Hero: web, spider, bats, embers and fog over the scrub ----------
   Sits after .stage-shade and before the copy in the stage, so it paints over the
   film and under every word. */
.spk-hero { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spk-web { position: absolute; top: 0; right: 0; width: 230px; height: 230px;
  fill: none; stroke: rgba(242, 236, 242, .22); stroke-width: .9; stroke-linecap: round; }
.spk-spider { --silk: 250px; position: absolute; top: 0; right: 70px; width: 26px;
  height: calc(var(--silk) + 26px); transform-origin: 50% 0; animation: spk-sway 7s ease-in-out infinite; }
.spk-spider::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--silk) + 6px);
  background: linear-gradient(rgba(242, 236, 242, .08), rgba(242, 236, 242, .55)); }
.spk-spider svg { position: absolute; left: 0; bottom: 0; width: 26px; height: 26px; overflow: visible;
  animation: spk-bob 3.5s ease-in-out infinite; }
.spk-spider .legs { fill: none; stroke: #0B0614; stroke-width: 1.9; stroke-linecap: round; }
.spk-spider .body { fill: #0B0614; stroke: rgba(255, 170, 90, .45); stroke-width: .8; }
.spk-bat { position: absolute; fill: #0B0614; stroke: rgba(255, 160, 80, .6); stroke-width: .8;
  animation: spk-flit 9s ease-in-out infinite; }
/* Desktop bats fly the dark gap between the headline and the bag, never over the bag. */
.spk-hero .b1 { top: 34%; right: 54%; width: 38px; }
.spk-hero .b2 { top: 46%; right: 59%; width: 24px; animation-duration: 11s; animation-delay: -3s; }
.spk-hero .b3 { top: 27%; right: 60%; width: 18px; animation-duration: 13s; animation-delay: -6s; }

.spk-embers { position: absolute; inset: 0; overflow: hidden; }
.spk-embers i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
  background: #FFC27A; box-shadow: 0 0 6px 2px rgba(255, 138, 43, .5); opacity: 0;
  animation: spk-ember var(--d) linear var(--t) infinite; }

.spk-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
/* Each layer is two copies of a 50%-wide tile, so sliding it by half loops without a seam. */
.spk-fog i { position: absolute; left: 0; bottom: -40px; width: 200%; height: 100%;
  background:
    radial-gradient(30% 50% at 25% 72%, rgba(206, 196, 236, .2), transparent 70%),
    radial-gradient(26% 42% at 55% 86%, rgba(206, 196, 236, .15), transparent 70%),
    radial-gradient(28% 55% at 78% 76%, rgba(206, 196, 236, .18), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: spk-drift 80s linear infinite; }
.spk-fog i + i { bottom: -90px; opacity: .75; animation-duration: 125s; animation-direction: reverse; }

/* ---------- Book a visit: a harvest moon rising behind the form, two bats, embers ---------- */
html.spooky .spk-book { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.spk-moon { position: absolute; top: 40px; right: max(5vw, 24px); width: 96px; height: 96px; border-radius: 50%;
  background:
    radial-gradient(circle at 63% 60%, rgba(196, 110, 40, .34) 0 8px, transparent 9px),
    radial-gradient(circle at 33% 66%, rgba(196, 110, 40, .26) 0 6px, transparent 7px),
    radial-gradient(circle at 55% 29%, rgba(196, 110, 40, .22) 0 4px, transparent 5px),
    radial-gradient(circle at 38% 35%, #FFEBC4 0, #F8C77A 48%, #E3913F 100%);
  box-shadow: 0 0 50px 14px rgba(255, 150, 60, .2), 0 0 170px 70px rgba(255, 120, 40, .09); }
.spk-book .b4 { top: 34px; right: calc(max(5vw, 24px) + 140px); width: 30px; }
.spk-book .b5 { top: 150px; right: calc(max(5vw, 24px) + 12px); width: 19px; animation-duration: 12s; animation-delay: -4s; }

/* The ghost hides behind the booking form and peeks over its top edge; spooky.js
   adds .up once the form has revealed and sits mid-screen. It shares the form's
   grid cell, so both are placed explicitly. */
html.spooky .book-form { position: relative; }
html.spooky .book-grid > .book-form { grid-column: 2; grid-row: 1; }
html.spooky .book-grid > .ghost { grid-column: 2; grid-row: 1; align-self: start; justify-self: start;
  position: relative; top: -44px; margin-left: 56px; width: 56px; height: 68px; overflow: hidden; pointer-events: none; }
.ghost svg { display: block; width: 100%; height: auto; transform: translateY(105%); transform-origin: 50% 100%;
  transition: transform .75s cubic-bezier(.3, 1.45, .5, 1); }
.ghost.up svg { transform: translateY(0) rotate(-6deg); }
.ghost .sheet { fill: rgba(240, 234, 250, .95); }
.ghost .eye { fill: #1A1028; }
.ghost.up .bob { animation: spk-haunt 3.2s ease-in-out .8s infinite; }

/* Bats scattered by spooky.js when a booking is confirmed. */
.batburst { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.batburst div { position: absolute; }
.batburst svg { display: block; width: 100%; height: auto; overflow: visible; fill: #0B0614;
  stroke: rgba(255, 160, 80, .75); stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(255, 138, 43, .5));
  animation: spk-flap .15s ease-in-out infinite alternate; }

@keyframes spk-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes spk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes spk-flit { 0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  35% { transform: translate(-10px, -6px) rotate(3deg); } 70% { transform: translate(6px, 4px) rotate(-1deg); } }
@keyframes spk-ember { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .85; }
  35% { transform: translate(16px, -38vh); } 65% { transform: translate(-10px, -70vh); opacity: .7; }
  100% { transform: translate(8px, -108vh); opacity: 0; } }
@keyframes spk-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spk-haunt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes spk-flap { to { transform: scaleY(.55); } }

/* Phones and tablets: the hero title moves to the lower third, so the web, spider
   and bats stay in the top corner over the bag, and the fog thins under the copy. */
@media (max-width: 1139px) {
  .spk-web { width: 140px; height: 140px; }
  .spk-spider { --silk: 120px; right: 36px; width: 22px; height: calc(var(--silk) + 22px); }
  .spk-spider svg { width: 22px; height: 22px; }
  .spk-hero .b1 { top: 96px; right: 40%; width: 26px; }
  .spk-hero .b2 { top: 170px; right: 9%; width: 17px; }
  .spk-hero .b3 { display: none; }
  .spk-embers i:nth-child(n+7) { display: none; }
  .spk-fog { height: 30%; opacity: .7; }
  .spk-moon { top: 18px; right: -14px; width: 60px; height: 60px; }
  .spk-book .b4 { top: 28px; right: 70px; width: 24px; }
  .spk-book .b5 { top: 96px; right: 18px; width: 16px; }
  html.spooky .book-grid > .book-form, html.spooky .book-grid > .ghost { grid-column: 1; grid-row: 2; }
  html.spooky .book-grid > .ghost { top: -32px; margin-left: 40px; width: 44px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .spk-spider, .spk-spider svg, .spk-bat, .spk-fog i, .ghost .bob { animation: none; }
  .ghost svg { transition: none; }
  .spk-embers { display: none; }
}