/* ==========================================================================
   Pal's Landing Blocks — standalone critter overlays
   Drops a pest + gloved sprayer onto ANY existing section (an Elementor
   header, a hero you built yourself, anything). Fully transparent, never
   intercepts a click, and sits inside the section you point it at rather
   than replacing anything.

   Two modes:
     hang   a spider pays out a thread from the top, then drops when sprayed
     crawl  a mouse / roach / ant walks in along the floor, then is sprayed

   Every position is measured in JS at runtime — the nozzle, the spray cone
   and the critter's resting point are derived from the real rendered sizes,
   not from guessed percentages.
   ========================================================================== */

@property --sx-p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sx-d { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sx-h { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sx-s { syntax: '<number>'; inherits: true; initial-value: 0; }

.pals-solo {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* every click passes straight through */
  overflow: hidden;
  z-index: 5;
  --sx-glove: #C7F268;
  --sx-glove-line: #07080A;
  --sx-can: #1B1E22;
  --sx-thread: rgba(255, 255, 255, .55);
  --sx-mist: rgba(199, 242, 104, .55);
}
/* Light sections need a darker thread and mist to stay visible. */
.pals-solo[data-on="light"] {
  --sx-thread: rgba(7, 8, 10, .38);
  --sx-mist: rgba(80, 123, 40, .45);
}
.pals-solo * { box-sizing: border-box; }

.pals-solo__critter img {
  display: block;
  width: var(--size, 126px);
  height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
}
.pals-solo[data-on="light"] .pals-solo__critter img {
  filter: drop-shadow(0 4px 9px rgba(7, 8, 10, .35));
}

/* ---------- HANG: spider on a thread ---------- */
.pals-solo--hang .pals-solo__critter {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(0,
    calc(var(--sx-p, 0) * var(--drop, 220px) - var(--drop, 220px)
         + var(--sx-d, 0) * var(--fall, 460px)), 0);
}
.pals-solo--hang.pals-solo--left  .pals-solo__critter { left: var(--x, 7%); }
.pals-solo--hang.pals-solo--right .pals-solo__critter { right: var(--x, 7%); }

.pals-solo__thread {
  width: 1px;
  height: var(--drop, 220px);
  background: linear-gradient(to bottom, transparent, var(--sx-thread));
  opacity: calc(1 - var(--sx-d, 0) * 5);   /* snaps early */
}
.pals-solo--hang .pals-solo__critter img {
  margin-top: -2px;
  transform: rotate(calc(var(--sx-d, 0) * 210deg));
  opacity: calc(1 - var(--sx-d, 0) * 1.35);
}

/* ---------- CRAWL: mouse / roach / ant along the floor ----------
   --sx-p walks it in, --sx-d flips it over (insects) or bolts it away
   (rodents). Art faces right; --dir flips it for the other direction.    */
.pals-solo--crawl .pals-solo__critter {
  position: absolute;
  left: 0;
  bottom: var(--floor, 16px);
  transform:
    translate3d(calc(var(--start, 0px) + var(--sx-p, 0) * var(--travel, 300px)
                     + var(--sx-d, 0) * var(--flee, 0px)),
                calc(var(--sx-d, 0) * 8px), 0)
    scaleX(var(--dir, 1))
    rotate(calc(var(--sx-d, 0) * var(--flip, 0deg)));
  opacity: calc(1 - var(--sx-d, 0) * var(--fade, .7));
}
/* A photo has no separable legs, so the whole body bobs while it walks. */
.pals-solo--crawl.is-playing .pals-solo__critter img {
  animation: pals-solo-bob 260ms ease-in-out infinite alternate;
  transform-origin: 50% 82%;
}
@keyframes pals-solo-bob {
  from { transform: translateY(0) rotate(-1.1deg) }
  to   { transform: translateY(1.6px) rotate(1.1deg) }
}

/* ---------- The gloved sprayer ----------
   Art faces LEFT (nozzle at the left end). --hdir mirrors it, --spin turns
   it a quarter turn when it comes up from below. JS positions it so the
   nozzle lands exactly where the critter comes to rest.                   */
.pals-solo__hand {
  position: absolute;
  width: var(--handw, 190px);
  transform:
    translate3d(var(--enterx, 0), var(--entery, 0), 0)
    rotate(var(--spin, 0deg))
    scaleX(var(--hdir, 1))
    rotate(calc(var(--sx-s, 0) * -4deg));
}
.pals-solo__hand svg { display: block; width: 100%; height: auto; }
.pals-solo__hand .glove { fill: var(--sx-glove); stroke: var(--sx-glove-line); stroke-width: 3; stroke-linejoin: round; }
.pals-solo__hand .cuff  { fill: var(--sx-glove-line); }
.pals-solo__hand .can   { fill: var(--sx-can); }
.pals-solo__hand .can-hi{ fill: var(--sx-glove); }
.pals-solo__hand .line  { fill: none; stroke: var(--sx-glove-line); stroke-width: 2.4; stroke-linecap: round; }
.pals-solo__hand .badge-ring { fill: none; stroke: var(--sx-glove-line); stroke-width: 2.6; }
.pals-solo__hand .trigger { transform: translateX(calc(var(--sx-s, 0) * 2.5px)); transform-box: fill-box; }

/* ---------- The spray fan ----------
   One element, anchored at the nozzle by JS. --ang points it the way the
   nozzle points; the cone is always drawn fanning to the LEFT of its own
   box and then rotated into place, so the geometry only exists once.      */
.pals-solo__spray {
  position: absolute;
  width: var(--sw, 260px);
  height: var(--sh, 200px);
  background: linear-gradient(to left,
              var(--sx-mist) 0%, var(--sx-mist) 16%, transparent 86%);
  clip-path: polygon(100% 45%, 100% 55%, 0 96%, 0 4%);
  transform-origin: 100% 50%;
  transform:
    rotate(var(--ang, 0deg))
    scale(calc(.34 + min(var(--sx-s, 0) * 2.4, 1) * .78));
  opacity: calc(min(var(--sx-s, 0) * 5, 1) * (1 - var(--sx-s, 0)) * 1.05);
  filter: blur(14px);
}

/* ---------- The loop ----------
   One 7.6s cycle by default: ~3.6s of action, then stillness. The gap is
   deliberate — a header that never stops moving fights your headline. */
@keyframes pals-solo-critter {
  0%     { --sx-p: 0; --sx-d: 0; animation-timing-function: linear }
  4%     { --sx-p: 0; --sx-d: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  18%    { --sx-p: 1; --sx-d: 0; animation-timing-function: linear }
  30%    { --sx-p: 1; --sx-d: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35) }
  43%    { --sx-p: 1; --sx-d: 1; animation-timing-function: linear }
  46.9%  { --sx-p: 1; --sx-d: 1 }
  47%    { --sx-p: 0; --sx-d: 1 }   /* reset while invisible */
  50%    { --sx-p: 0; --sx-d: 0 }
  100%   { --sx-p: 0; --sx-d: 0 }
}
@keyframes pals-solo-hand {
  0%    { --sx-h: 0; --sx-s: 0; animation-timing-function: linear }
  17%   { --sx-h: 0; --sx-s: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  26%   { --sx-h: 1; --sx-s: 0; animation-timing-function: ease-out }
  36%   { --sx-h: 1; --sx-s: 1; animation-timing-function: linear }
  43%   { --sx-h: 1; --sx-s: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35) }
  52%   { --sx-h: 0; --sx-s: 1 }
  52.1% { --sx-h: 0; --sx-s: 0 }
  100%  { --sx-h: 0; --sx-s: 0 }
}

.pals-solo.is-playing .pals-solo__critter {
  animation: pals-solo-critter var(--cycle, 7600ms) var(--iter, infinite) both;
}
.pals-solo.is-playing .pals-solo__hand,
.pals-solo.is-playing .pals-solo__spray {
  animation: pals-solo-hand var(--cycle, 7600ms) var(--iter, infinite) both;
}
/* Nothing runs while the section is scrolled out of view. */
.pals-solo.is-playing:not(.is-visible) .pals-solo__critter,
.pals-solo.is-playing:not(.is-visible) .pals-solo__critter img,
.pals-solo.is-playing:not(.is-visible) .pals-solo__hand,
.pals-solo.is-playing:not(.is-visible) .pals-solo__spray { animation-play-state: paused; }

/* ---------- Fallbacks and preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .pals-solo.is-playing .pals-solo__critter,
  .pals-solo.is-playing .pals-solo__critter img,
  .pals-solo.is-playing .pals-solo__hand,
  .pals-solo.is-playing .pals-solo__spray { animation: none; }
  .pals-solo__critter { --sx-p: 1; --sx-d: 0; }
  .pals-solo__hand, .pals-solo__spray { display: none; }
}
/* No @property support: show the pest, drop the spray. */
.pals-solo.is-static .pals-solo__critter { --sx-p: 1; --sx-d: 0; }
.pals-solo.is-static .pals-solo__hand,
.pals-solo.is-static .pals-solo__spray { display: none; }

/* ---------- Phones ----------
   No clear column beside a phone headline, so the sprayer sits it out and
   the pest shrinks. mobile="no" removes the whole thing instead. */
@media (max-width: 700px) {
  .pals-solo__hand, .pals-solo__spray { display: none; }
  .pals-solo__critter img { width: calc(var(--size, 126px) * .55); }
  .pals-solo--hang .pals-solo__thread { height: calc(var(--drop, 220px) * .5); }
  .pals-solo--hang .pals-solo__critter {
    transform: translate3d(0,
      calc(var(--sx-p, 0) * var(--drop, 220px) * .5 - var(--drop, 220px) * .5
           + var(--sx-d, 0) * var(--fall, 460px)), 0);
  }
  .pals-solo--desktop { display: none; }
}