/* ============================================================
   ESK — floating mascot CTA. Opens the Book a Meeting popup.

   Ported from the Claude Design "Esketchers Mascot Widget" comp:
   a Lottie mascot that drifts on its own, leans toward the cursor,
   grows slightly on hover, and speaks a bubble that is timed to the
   animation rather than pinned open.

   Layering, outermost in: bubble + button > bob (drift) > par
   (parallax) > scale (hover) > artwork. Each transform lives on its
   own element so they compose instead of overwriting each other.
   ============================================================ */

.eskbot {
  --eskbot-accent: #E76F51;
  --eskbot-ink: #022450;
  --eskbot-offset: 90px;
  --eskbot-w: 104px;
  --ex: 0;    /* cursor offset, -1 … 1 */
  --ey: 0;
  --h: 0;     /* hover, 0 or 1 */

  position: fixed;
  right: 24px;
  z-index: 9998;              /* under the popup (100000), over page content */
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* Rests just off the edge it lives on and glides in — on a scroll reveal
     that reads as the mascot arriving, where a plain fade reads as a glitch.
     The same transition plays in reverse when it leaves. */
  opacity: 0;
  transform: translateX(34px) scale(.9);
  transition: opacity .42s ease, transform .58s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
  pointer-events: none;
}
.eskbot[hidden] { display: none !important; }
.eskbot.is-in { opacity: 1; transform: none; pointer-events: auto; }
.eskbot.is-out { opacity: 0; transform: translateX(34px) scale(.9); pointer-events: none; }
.eskbot--bottom-left { transform: translateX(-34px) scale(.9); }
.eskbot--bottom-left.is-out { transform: translateX(-34px) scale(.9); }

.eskbot--top-right    { top: var(--eskbot-offset); right: var(--eskbot-side, 24px); }
.eskbot--bottom-right { bottom: var(--eskbot-offset); right: var(--eskbot-side, 24px); }
.eskbot--bottom-left  { bottom: var(--eskbot-offset); left: var(--eskbot-side, 24px); right: auto; flex-direction: row-reverse; }

/* ---------- the character ---------- */

.eskbot .eskbot__btn {
  position: relative;
  display: block;
  width: var(--eskbot-w);
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.eskbot .eskbot__btn:focus-visible {
  outline: 3px solid var(--eskbot-accent);
  outline-offset: 8px;
  border-radius: 16px !important;
}

/* idle drift — a slow sway so the mascot never sits perfectly still */
.eskbot__bob {
  display: block;
  animation: eskbot-drift 11s ease-in-out .6s infinite;
}

/* leans toward the pointer; the value is eased in JS, the transition here
   only smooths the last hop */
.eskbot__par {
  display: block;
  transform: translate(calc(var(--ex) * 7px), calc(var(--ey) * 5px));
  transition: transform .22s ease-out;
}

/* grows a little under the cursor */
.eskbot__scale {
  display: block;
  transform: scale(calc(1 + var(--h) * .05));
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.eskbot__art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(2, 36, 80, .24));
}

/* A Lottie brings its own motion and its own canvas padding. */
.eskbot__lottie {
  aspect-ratio: 212 / 250;
  filter: drop-shadow(0 14px 26px rgba(2, 36, 80, .18));
}
.eskbot__lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
}

@keyframes eskbot-drift {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

/* ---------- speech bubble ---------- */

.eskbot__bubble {
  position: relative;
  z-index: 6;
  align-self: flex-start;
  margin-top: 10px;
  display: block;
  padding: 15px 19px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(2, 36, 80, .28);
  opacity: 0;
  transform: translateY(22px) scale(.9);
  transform-origin: 88% 100%;
  transition: opacity .34s cubic-bezier(.2, .7, .2, 1),
              transform .44s cubic-bezier(.28, 1.2, .4, 1);
  pointer-events: none;
}
.eskbot__bubble.is-on { opacity: 1; transform: none; }

/* Niveau Grotesk only ships a single Regular face, so asking for 700 made the
   browser synthesise a bold — which is what read as heavy and slightly smeared.
   Roboto has real weights, so a genuine 500 gives a cleaner, lighter line. */
.eskbot__bubble-txt {
  display: block;
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--eskbot-ink);
  white-space: nowrap;
  text-transform: capitalize !important;
  -webkit-font-smoothing: antialiased;
}

.eskbot__tail {
  position: absolute;
  right: 16px;
  bottom: -11px;
  transform: rotate(54deg);
}
/* mirrored when the widget sits on the left */
.eskbot--bottom-left .eskbot__bubble { transform-origin: 12% 100%; }
.eskbot--bottom-left .eskbot__tail { right: auto; left: 16px; transform: rotate(126deg) scaleY(-1); }

/* ---------- dismiss ---------- */

.eskbot .eskbot__close {
  position: absolute;
  top: -2px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0 !important;
  background: #fff !important;
  color: var(--eskbot-ink) !important;
  border: 1px solid rgba(2, 36, 80, .12) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px -3px rgba(2, 36, 80, .3) !important;
  cursor: pointer;
  /* always visible — a dismiss control that only appears on hover is
     undiscoverable on touch and easy to miss on desktop */
  opacity: 1;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
  z-index: 8;
}
.eskbot .eskbot__close:hover { background: var(--eskbot-accent) !important; color: #fff !important; transform: scale(1.08); }
.eskbot .eskbot__close:focus-visible { outline: 2px solid var(--eskbot-accent); outline-offset: 2px; }

/* ---------- phones ---------- */

@media (max-width: 782px) {
  .eskbot { gap: 10px; --eskbot-w: 82px; }
  .eskbot__bubble { padding: 10px 13px 11px; border-radius: 14px; }
  .eskbot__bubble-txt { font-size: 14px; }
  .eskbot--top-right, .eskbot--bottom-right { right: min(var(--eskbot-side, 14px), 14px); }
  .eskbot--bottom-left { left: min(var(--eskbot-side, 14px), 14px); }
  /* the chat and WhatsApp buttons own the bottom-right corner on phones */
  .eskbot--bottom-right { bottom: calc(var(--eskbot-offset) + 62px); }
  /* no cursor to follow on touch */
  .eskbot__par { transform: none; }
}

/* very narrow screens: the mascot alone, no bubble */
@media (max-width: 420px) {
  .eskbot__bubble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eskbot__bob { animation: none; }
  .eskbot__par, .eskbot__scale { transform: none !important; transition: none; }
  .eskbot__bubble { transition: opacity .2s linear; }
}