/* ============================================================================
   HALLOWEEN THEME — shared by every TV page, but each page gets its own look:
     hw-dash     main dashboard     midnight sky, countdown, a ghost that peeks in
     hw-workout  workout board      pumpkin patch, numbers inside pumpkins
     hw-strength strength station   mad-scientist lab, slime dripping off each box
     hw-ads      product ads        trick-or-treat, a spider on a thread
   halloween.js adds "halloween" plus one of those classes to <html> during
   October only. ?halloween=1 or ?halloween=0 on the address forces it.
   ============================================================================ */

/* ---------- shared base: night instead of cream ---------- */
html.halloween {
  --cream:   #140b1d;
  --panel:   #23142f;
  --ink:     #f7efe4;
  --ink-mid: #c4b2d2;
  --line:    rgba(255,255,255,0.13);

  --berry:      #ff7a1a;
  --berry-lit:  #ff9b45;
  --berry-deep: #ffb366;
  --berry-ink:  #1b0b06;
  --berry-soft: rgba(255,122,26,0.18);
  --berry-mist: rgba(255,255,255,0.05);

  --gold:      #ffd23f;
  --gold-warm: #ffb020;
  --gold-deep: #5a3a00;

  --green:      #8ae234;
  --green-soft: rgba(138,226,52,0.16);

  --lift-1: 0 0.3vh 1.2vh rgba(0,0,0,0.35);
  --lift-2: 0 0.8vh 2.6vh rgba(0,0,0,0.45);
  --lift-3: 0 1vw 3vw rgba(0,0,0,0.5);
}
html.halloween, html.halloween body { background: var(--cream); }
html.halloween img.logo { background: #fff; border-radius: 50%; }
html.halloween .box-head { position: relative; }
html.halloween .box-title { padding-right: 3.9vw; }   /* keeps a long title out from under the corner art */

/* ============================================================================
   1. MAIN DASHBOARD — midnight
   ============================================================================ */
html.hw-dash .backdrop .wash {
  background:
    radial-gradient(26% 36% at 96% 2%,  rgba(255,236,170,0.22) 0%, transparent 70%),
    radial-gradient(50% 60% at 4% -8%,  rgba(124,45,240,0.26) 0%, transparent 68%),
    radial-gradient(56% 50% at 30% 112%, rgba(255,122,26,0.16) 0%, transparent 72%);
}
/* panels that carry white type keep a deep purple fill, never orange */
html.hw-dash .stat.now,
html.hw-dash .dance-card.tonight,
html.hw-dash .card.milestone,
html.hw-dash .facts-panel,
html.hw-dash .promo-panel,
html.hw-dash .shoutout-panel { background: linear-gradient(150deg, #8a3df5 0%, #4f179c 45%, #170628 100%); }
html.hw-dash .avatar { background: linear-gradient(145deg, rgba(255,122,26,0.3), rgba(124,45,240,0.35)); color: #fff; }
html.hw-dash .goal-strip.goal-hit .goal-text b { color: var(--gold); }
html.hw-dash .goal-hit-badge { color: #1b0b06; }
html.hw-dash .open-state.shut .beacon { background: #7d6a8c; }
html.hw-dash .status.open { background: rgba(138,226,52,0.16); }

.hw-web {
  position: fixed; top: 0; left: 0; z-index: 4;
  width: 13vw; height: 13vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100.0 0.0M0 0L92.4 38.3M0 0L70.7 70.7M0 0L38.3 92.4M0 0L0.0 100.0M28.0 0.0Q23.7 4.7 25.9 10.7Q20.1 13.4 19.8 19.8Q13.4 20.1 10.7 25.9Q4.7 23.7 0.0 28.0M52.0 0.0Q44.0 8.8 48.0 19.9Q37.3 24.9 36.8 36.8Q24.9 37.3 19.9 48.0Q8.8 44.0 0.0 52.0M76.0 0.0Q64.3 12.8 70.2 29.1Q54.5 36.4 53.7 53.7Q36.4 54.5 29.1 70.2Q12.8 64.3 0.0 76.0M100.0 0.0Q84.7 16.8 92.4 38.3Q71.8 48.0 70.7 70.7Q48.0 71.8 38.3 92.4Q16.8 84.7 0.0 100.0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top left; background-size: contain;
  opacity: 0.22; pointer-events: none;
}
.hw-web.hw-right { left: auto; right: 0; transform: scaleX(-1); }

/* a bat crosses the top of the screen now and then */
.hw-bat {
  position: fixed; top: 1.2vh; left: -8vw; z-index: 6;
  width: 4.2vw; height: 2.1vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 8L35 3L36.5 8Q39 8 41 10Q50 3 62 4Q56 8 56 15Q52 11 48 16Q45 12 41 17Q38 22 32 28Q26 22 23 17Q19 12 16 16Q12 11 8 15Q8 8 2 4Q14 3 23 10Q25 8 27.5 8L29 3Z' fill='%23d9c8f5'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
  opacity: 0.85; pointer-events: none;
  animation: hwBatFly 46s linear infinite;
}
@keyframes hwBatFly {
  0%   { transform: translate(0, 0); }
  6%   { transform: translate(28vw, 2.2vh); }
  12%  { transform: translate(56vw, -0.6vh); }
  18%  { transform: translate(84vw, 2vh); }
  24%  { transform: translate(116vw, 0); }
  100% { transform: translate(116vw, 0); }
}

/* days-to-Halloween countdown in the header */
.hw-countdown {
  display: flex; align-items: center;
  margin-right: 1.4vw;
  padding: 0.55vw 1.1vw 0.55vw 0.7vw;
  border-radius: 999px;
  background: rgba(255,122,26,0.14);
  border: 1px solid rgba(255,122,26,0.45);
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 0.95vw; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffb366; white-space: nowrap;
}
.hw-countdown::before {
  content: '';
  width: 2vw; height: 2vw; margin-right: 0.6vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 15c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%235b8c1a'/%3E%3Cellipse cx='32' cy='39' rx='27' ry='20' fill='%23e8590c'/%3E%3Cellipse cx='32' cy='39' rx='17' ry='20' fill='%23f97316'/%3E%3Cellipse cx='32' cy='39' rx='7' ry='20' fill='%23fb923c'/%3E%3Cpath d='M15 35l9-7 2 9zM49 35l-9-7-2 9zM32 36l3 6h-6z' fill='%23ffe27a'/%3E%3Cpath d='M15 44c5 3 9 2 12-1l5 4 5-4c3 3 7 4 12 1-3 8-9 11-17 11s-14-3-17-11z' fill='%23ffe27a'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
}
.hw-countdown b { color: #fff; font-weight: 900; font-size: 1.25vw; margin-right: 0.4vw; }

/* a ghost leans in from the right edge, looks around, and slips back out */
.hw-ghost {
  position: fixed; right: -5.4vw; top: 52vh; z-index: 6;
  width: 5.2vw; height: 6.1vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 56'%3E%3Cpath d='M24 3C13 3 6 11 6 23v29l6-5 6 5 6-5 6 5 6-5 6 5V23C42 11 35 3 24 3z' fill='%23f4eefb'/%3E%3Cellipse cx='18' cy='22' rx='3.4' ry='4.6' fill='%231b0b24'/%3E%3Cellipse cx='30' cy='22' rx='3.4' ry='4.6' fill='%231b0b24'/%3E%3Cellipse cx='24' cy='33' rx='3' ry='4' fill='%231b0b24'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
  pointer-events: none;
  transform: rotate(-14deg);
  animation: hwGhostPeek 38s ease-in-out infinite;
}
@keyframes hwGhostPeek {
  0%, 62%   { transform: translateX(0) rotate(-14deg); }
  68%       { transform: translateX(-3.9vw) rotate(-14deg); }
  74%       { transform: translateX(-3.9vw) rotate(-4deg); }
  80%       { transform: translateX(-3.9vw) rotate(-16deg); }
  88%       { transform: translateX(-3.9vw) rotate(-14deg); }
  94%, 100% { transform: translateX(0) rotate(-14deg); }
}

/* ============================================================================
   2. WORKOUT BOARD — pumpkin patch
   ============================================================================ */
html.hw-workout {
  --cream:   #150b03;
  --panel:   #25140a;
  --ink:     #fff3e0;
  --ink-mid: #d9bf9c;
  --line:    rgba(255,200,120,0.16);
  --berry:      #ff8a1f;
  --berry-lit:  #ffa64d;
  --berry-deep: #ffb866;
  --berry-soft: rgba(255,138,31,0.16);
  --green:      #a8dd3c;
  --green-soft: rgba(168,221,60,0.16);
}
html.hw-workout .backdrop .wash {
  background:
    radial-gradient(44% 50% at 50% 50%, rgba(255,138,31,0.16) 0%, transparent 72%),
    radial-gradient(40% 46% at 0% 100%, rgba(168,221,60,0.10) 0%, transparent 70%);
}
html.hw-workout .box.tone-green::before { background: linear-gradient(90deg, #6fae1c, var(--green)); }

/* every exercise number sits inside a pumpkin; the green boxes get green gourds */
html.hw-workout .ex-num {
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 14c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%235b8c1a'/%3E%3Cellipse cx='32' cy='38' rx='28' ry='21' fill='%23e8590c'/%3E%3Cellipse cx='32' cy='38' rx='18' ry='21' fill='%23f97316'/%3E%3Cellipse cx='32' cy='38' rx='8' ry='21' fill='%23fb923c'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  color: #2a1203 !important;
  padding-top: 0.42vw;
  font-size: 1.45vw;
}
html.hw-workout .box.tone-green .ex-num {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 14c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%238a5a1c'/%3E%3Cellipse cx='32' cy='38' rx='28' ry='21' fill='%236fae1c'/%3E%3Cellipse cx='32' cy='38' rx='18' ry='21' fill='%238fcf2f'/%3E%3Cellipse cx='32' cy='38' rx='8' ry='21' fill='%23b4e65a'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  color: #16250a !important;
}
/* so does today's order */
html.hw-workout .order-center { background: linear-gradient(150deg, #3b1d0b 0%, #25140a 100%); box-shadow: 0 0 0 1px rgba(255,138,31,0.45), var(--lift-2); }
html.hw-workout .order-pip {
  border-radius: 0; width: 5vh; height: 5vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 14c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%235b8c1a'/%3E%3Cellipse cx='32' cy='38' rx='28' ry='21' fill='%23e8590c'/%3E%3Cellipse cx='32' cy='38' rx='18' ry='21' fill='%23f97316'/%3E%3Cellipse cx='32' cy='38' rx='8' ry='21' fill='%23fb923c'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
  color: #2a1203; padding-top: 0.6vh; font-size: 2.3vh;
}
html.hw-workout .order-arrow { color: rgba(255,200,120,0.75); }
html.hw-workout .challenge-badge { background: #c2410c; }

/* a lit jack-o'-lantern in the corner of each box, candle flickering */
html.hw-workout .box-head::after {
  content: '';
  position: absolute; right: 0; top: -0.3vw;
  width: 3.5vw; height: 3.5vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 15c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%235b8c1a'/%3E%3Cellipse cx='32' cy='39' rx='27' ry='20' fill='%23e8590c'/%3E%3Cellipse cx='32' cy='39' rx='17' ry='20' fill='%23f97316'/%3E%3Cellipse cx='32' cy='39' rx='7' ry='20' fill='%23fb923c'/%3E%3Cpath d='M15 35l9-7 2 9zM49 35l-9-7-2 9zM32 36l3 6h-6z' fill='%23ffe27a'/%3E%3Cpath d='M15 44c5 3 9 2 12-1l5 4 5-4c3 3 7 4 12 1-3 8-9 11-17 11s-14-3-17-11z' fill='%23ffe27a'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
  animation: hwFlicker 3.1s linear infinite;
}
html.hw-workout .box.hw-2 .box-head::after { animation-duration: 3.9s; animation-delay: -1.3s; }
html.hw-workout .box.hw-3 .box-head::after { animation-duration: 2.7s; animation-delay: -0.6s; }
html.hw-workout .box.hw-4 .box-head::after { animation-duration: 4.3s; animation-delay: -2.2s; }
@keyframes hwFlicker {
  0%, 100% { filter: drop-shadow(0 0 0.9vw rgba(255,170,50,0.95)); }
  9%       { filter: drop-shadow(0 0 0.4vw rgba(255,170,50,0.55)); }
  14%      { filter: drop-shadow(0 0 1vw rgba(255,170,50,1)); }
  43%      { filter: drop-shadow(0 0 0.7vw rgba(255,170,50,0.8)); }
  47%      { filter: drop-shadow(0 0 0.3vw rgba(255,170,50,0.45)); }
  53%      { filter: drop-shadow(0 0 1.1vw rgba(255,170,50,1)); }
  78%      { filter: drop-shadow(0 0 0.6vw rgba(255,170,50,0.7)); }
}

/* ============================================================================
   3. STRENGTH STATION — the lab
   ============================================================================ */
html.hw-strength {
  --cream:   #050f08;
  --panel:   #0c1d12;
  --ink:     #ecfbe8;
  --ink-mid: #9fc7a3;
  --line:    rgba(125,255,58,0.16);
  --berry:      #7dff3a;                 /* top row: slime green */
  --berry-lit:  #a8ff78;
  --berry-deep: #a8ff78;
  --berry-soft: rgba(125,255,58,0.15);
  --green:      #c9a2ff;                 /* bottom row: purple ooze */
  --green-soft: rgba(201,162,255,0.17);
}
html.hw-strength .backdrop .wash {
  background:
    radial-gradient(50% 50% at 50% 0%,   rgba(125,255,58,0.12) 0%, transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(201,162,255,0.12) 0%, transparent 70%);
}
html.hw-strength .box { border-color: rgba(125,255,58,0.22); }
html.hw-strength .box.tone-green { border-color: rgba(201,162,255,0.26); }

/* slime runs along the top of every box and hangs in drips on the right */
html.hw-strength .box::before {
  height: 5.2vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V7L385 7C379.5 7 379.5 25 374 25C368.5 25 368.5 7 363 7L351 7C344.5 7 344.5 38 338 38C331.5 38 331.5 7 325 7L310 7C305.0 7 305.0 10 300 10C295.0 10 295.0 7 290 7L250 7C245.0 7 245.0 9.5 240 9.5C235.0 9.5 235.0 7 230 7L185 7C180.5 7 180.5 8.5 176 8.5C171.5 8.5 171.5 7 167 7L118 7C113.0 7 113.0 9.5 108 9.5C103.0 9.5 103.0 7 98 7L49 7C44.5 7 44.5 9 40 9C35.5 9 35.5 7 31 7L0 7Z' fill='%237dff3a'/%3E%3C/svg%3E") no-repeat top left !important;
  background-size: 100% 100% !important;
  opacity: 0.95;
}
html.hw-strength .box.tone-green::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V7L385 7C379.5 7 379.5 25 374 25C368.5 25 368.5 7 363 7L351 7C344.5 7 344.5 38 338 38C331.5 38 331.5 7 325 7L310 7C305.0 7 305.0 10 300 10C295.0 10 295.0 7 290 7L250 7C245.0 7 245.0 9.5 240 9.5C235.0 9.5 235.0 7 230 7L185 7C180.5 7 180.5 8.5 176 8.5C171.5 8.5 171.5 7 167 7L118 7C113.0 7 113.0 9.5 108 9.5C103.0 9.5 103.0 7 98 7L49 7C44.5 7 44.5 9 40 9C35.5 9 35.5 7 31 7L0 7Z' fill='%23c9a2ff'/%3E%3C/svg%3E") no-repeat top left !important;
  background-size: 100% 100% !important;
}
html.hw-strength .box-head { z-index: 1; }
html.hw-strength .box-title { padding-right: 5.2vw; }   /* titles stop short of the long drips */
/* one drop lets go of the longest drip, falls a short way, and is gone */
html.hw-strength .box-head::after {
  content: '';
  position: absolute; top: 3.5vh; left: calc(84.5% + 0.65vw);
  width: 0.9vw; height: 1.15vw; border-radius: 50% 50% 55% 55% / 40% 40% 60% 60%;
  background: #7dff3a; opacity: 0;
  animation: hwDrop 5.6s ease-in infinite;
}
html.hw-strength .box.tone-green .box-head::after { background: #c9a2ff; }
html.hw-strength .box.hw-2 .box-head::after { animation-delay: -1.9s; }
html.hw-strength .box.hw-3 .box-head::after { animation-delay: -3.7s; }
html.hw-strength .box.hw-4 .box-head::after { animation-delay: -0.8s; }
html.hw-strength .box.hw-5 .box-head::after { animation-delay: -2.8s; }
html.hw-strength .box.hw-6 .box-head::after { animation-delay: -4.6s; }
@keyframes hwDrop {
  0%, 62% { transform: translateY(0) scaleY(0.6); opacity: 0; }
  70%     { transform: translateY(0) scaleY(1);   opacity: 1; }
  96%     { transform: translateY(4.2vh) scaleY(1.15); opacity: 1; }
  100%    { transform: translateY(4.6vh) scaleY(0.4); opacity: 0; }
}
/* reps glow like something in a beaker */
html.hw-strength .ex-reps { text-shadow: 0 0 1.1vw rgba(125,255,58,0.55); }
html.hw-strength .box.tone-green .ex-reps { text-shadow: 0 0 1.1vw rgba(201,162,255,0.6); }
html.hw-strength .ex-num { border: 1px solid rgba(125,255,58,0.5); }
html.hw-strength .box.tone-green .ex-num { border-color: rgba(201,162,255,0.55); }

/* ============================================================================
   4. ADS — trick or treat   (the timer on the same page is left alone)
   ============================================================================ */
html.hw-ads .topbar .brand { color: #f7efe4; }
html.hw-ads .topbar .brand span { color: #c4b2d2; }
html.hw-ads .topbar .dots i { background: rgba(255,255,255,0.2); }
html.hw-ads .topbar .dots i.on { background: #ff7a1a; }
html.hw-ads .to-timer { color: #ffb366; background: rgba(255,122,26,0.12); border-color: rgba(255,122,26,0.4); }
html.hw-ads .s-hydration { background: linear-gradient(120deg, #2a0a4a 0%, #6d28d9 42%, #c2410c 78%, #ff7a1a 100%); }
html.hw-ads .s-shock     { background: linear-gradient(120deg, #0d0614 0%, #33105c 50%, #6d28d9 100%); }
html.hw-ads .s-whey      { background: linear-gradient(120deg, #170806 0%, #9a3412 52%, #f97316 100%); }
html.hw-ads .slide { box-shadow: 0 1.2vh 4vh rgba(0,0,0,0.5); }
html.hw-ads .slide .headline::after {
  content: '';
  display: inline-block; vertical-align: -0.12em;
  width: 0.95em; height: 0.95em; margin-left: 0.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 15c0-6 3-9 8-10l2 4c-3 1-5 3-5 7z' fill='%235b8c1a'/%3E%3Cellipse cx='32' cy='39' rx='27' ry='20' fill='%23e8590c'/%3E%3Cellipse cx='32' cy='39' rx='17' ry='20' fill='%23f97316'/%3E%3Cellipse cx='32' cy='39' rx='7' ry='20' fill='%23fb923c'/%3E%3Cpath d='M15 35l9-7 2 9zM49 35l-9-7-2 9zM32 36l3 6h-6z' fill='%23ffe27a'/%3E%3Cpath d='M15 44c5 3 9 2 12-1l5 4 5-4c3 3 7 4 12 1-3 8-9 11-17 11s-14-3-17-11z' fill='%23ffe27a'/%3E%3C/svg%3E") no-repeat center; background-size: contain;
}
/* a line of candy-corn copy tucked under the benefits */
html.hw-ads .slide::after {
  content: 'No tricks. Just treats.';
  position: absolute; left: 3.6vw; bottom: 3.4vh; z-index: 2;
  padding: 1vh 1.3vw 1vh 3.1vw;
  border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 2C26 14 34 30 37 42c1 3-1 5-4 5H7c-3 0-5-2-4-5C6 30 14 14 20 2z' fill='%23ffd23f'/%3E%3Cpath d='M20 2c3 6 6 12 9 18H11c3-6 6-12 9-18z' fill='%23ffffff'/%3E%3Cpath d='M7 34h26c2 3 3 6 4 8 1 3-1 5-4 5H7c-3 0-5-2-4-5 1-2 2-5 4-8z' fill='%23ff7a1a'/%3E%3C/svg%3E") no-repeat 1vw center / 1.5vw auto, #ffd23f;
  color: #2a1203;
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 1.35vw; letter-spacing: 0.06em; text-transform: uppercase;
}
/* a spider lowers itself on a thread beside the product, waits, climbs back up */
/* the window it drops through starts at the slide's top edge, so the thread never crosses the top bar */
.hw-spider-clip {
  position: fixed; top: 10.6vh; left: 91.2vw; z-index: 5;
  width: 3.6vw; height: 14vh;
  overflow: hidden; pointer-events: none;
}
.hw-spider {
  position: absolute; top: 0; left: 0;
  width: 3.6vw; height: 14vh;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%23f4eefb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M17 17L7 11M16 22L5 22M17 27L8 34M19 30L13 39M31 17L41 11M32 22L43 22M31 27L40 34M29 30L35 39'/%3E%3C/g%3E%3Cellipse cx='24' cy='24' rx='9' ry='10' fill='%23f4eefb'/%3E%3Ccircle cx='24' cy='13' r='5.5' fill='%23f4eefb'/%3E%3Ccircle cx='22' cy='12' r='1.3' fill='%23ff7a1a'/%3E%3Ccircle cx='26' cy='12' r='1.3' fill='%23ff7a1a'/%3E%3C/svg%3E") no-repeat center bottom / 3.6vw auto,
    linear-gradient(#e9defa, #e9defa) no-repeat center top / 2px calc(100% - 2.4vw);
  transform: translateY(-101%);
  animation: hwSpider 26s ease-in-out infinite;
}
@keyframes hwSpider {
  0%, 8%    { transform: translateY(-101%); }
  22%       { transform: translateY(0); }
  26%       { transform: translateY(-2.5vh); }
  30%, 58%  { transform: translateY(0); }
  72%, 100% { transform: translateY(-101%); }
}
html.halloween body.show-timer .hw-spider-clip { display: none; }