/* WeWorkDone unified Support Hub + animated logo squirrel + AI search */
#wwd-season-chip,
#wwd-shimeji-root,
#wwd-squirrel-layer,
#wwd-crew-squirrel,
#wwd-standards,
#wwd-chat {
  display: none !important;
}

/* Hero trade chip that read as a bottom-right "CONSTRUCTION" popup */
.video-hero__trade-tag {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep brand logo ONLY in the top nav — hide auth/hero duplicates */
main .brand-logo,
.video-hero .brand-logo,
.home-v2 .brand-logo,
.auth-shell .brand-logo,
.auth-layout .brand-logo,
.auth-hero .brand-logo,
[class*="auth-"] .brand-logo:not(.upwork-nav .brand-logo) {
  display: none !important;
}

/* ---- Website logo (nav): motion layers use same squirrel PNGs ---- */
.wwd-logo-stage { display: none !important; }

/* Default: keep SPA mark visible until motion attaches */
.upwork-nav .brand-logo__mark,
.upwork-nav .brand-logo__stage > img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Once motion is attached, SPA mark/spark are hidden; motion imgs are the logo */
.brand-logo__stage[data-wwd-motion] {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  perspective: 520px;
  z-index: 2;
}
.brand-logo__stage[data-wwd-motion] > img.brand-logo__mark,
.brand-logo__stage[data-wwd-motion] > .brand-logo__spark {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* Brand lockup: squirrel mark + wordmark reads as the site logo */
.upwork-nav .brand-logo.wwd-brand-logo--motion,
.upwork-nav .brand-logo {
  align-items: center !important;
  gap: 0.55rem !important;
}
.upwork-nav .brand-logo.wwd-brand-logo--motion .brand-logo__text {
  font-size: 1.45rem !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.wwd-sq-stage {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-style: preserve-3d;
  animation: wwd-sq-breathe 3.2s ease-in-out infinite;
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: translate;
  z-index: 3;
}
.brand-logo:hover .wwd-sq-stage { scale: 1.07; }
.wwd-sq-cell {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  scale: 0.92;
  filter: blur(2.5px) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.28));
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1),
              scale 520ms cubic-bezier(0.34, 1.2, 0.4, 1),
              filter 480ms ease;
  will-change: opacity, scale, filter;
}
.wwd-sq-cell.is-in {
  opacity: 1 !important;
  scale: 1;
  filter: blur(0) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.wwd-sq-cell.is-out {
  opacity: 0;
  scale: 1.05;
  filter: blur(2.5px) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}
/* If both classes ever collide, stay visible */
.wwd-sq-cell.is-in.is-out {
  opacity: 1 !important;
  scale: 1;
  filter: blur(0) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.wwd-sq-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
  transform-origin: 50% 88%;
  backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes wwd-sq-breathe {
  0%, 100% { translate: 0 0; rotate: -0.5deg; }
  50%      { translate: 0 -2.5px; rotate: 0.5deg; }
}

/* Per-pose work motion. Transform drives the tool, the individual
   translate/filter properties layer a second beat without conflicting. */
.wwd-sq-img { animation: wwd-fx-idle 4s ease-in-out infinite; }
@keyframes wwd-fx-idle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(0.9deg) scale(1.012); }
}

/* hammer / carpentry: vertical tap */
.wwd-fx-hammer { animation: wwd-fx-hammer 0.95s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
@keyframes wwd-fx-hammer {
  0%, 44%  { transform: translateY(0) rotate(0deg); }
  56%      { transform: translateY(-7%) rotate(-5deg); }
  66%      { transform: translateY(1.5%) rotate(4.5deg); }
  74%      { transform: translateY(0) rotate(-1.5deg); }
  84%, 100% { transform: translateY(0) rotate(0deg); }
}

/* drill: high-frequency buzz plus a slow push into the work */
.wwd-fx-drill {
  animation: wwd-fx-buzz 0.085s linear infinite,
             wwd-fx-push 1.7s ease-in-out infinite;
}
@keyframes wwd-fx-buzz {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(0.7px, -0.5px, 0) rotate(0.5deg); }
  50%      { transform: translate3d(-0.6px, 0.4px, 0) rotate(-0.45deg); }
  75%      { transform: translate3d(0.5px, 0.6px, 0) rotate(0.3deg); }
}
@keyframes wwd-fx-push {
  0%, 100% { translate: 0 0; }
  55%      { translate: 1.5px 1px; }
}

/* wrench work: plumbing torque and mechanic torque */
.wwd-fx-plumb { animation: wwd-fx-twist 1.5s ease-in-out infinite; }
.wwd-fx-mechanic { animation: wwd-fx-torque 1.25s cubic-bezier(0.35, 0, 0.2, 1) infinite; }
@keyframes wwd-fx-twist {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40%      { transform: rotate(-5deg) translateY(-1.5%); }
  70%      { transform: rotate(2.5deg) translateY(0.5%); }
}
@keyframes wwd-fx-torque {
  0%, 30%  { transform: rotate(0deg) scale(1); }
  42%      { transform: rotate(-7deg) scale(1.015); }
  55%      { transform: rotate(1.5deg) scale(1); }
  70%, 100% { transform: rotate(0deg) scale(1); }
}

/* sweeping strokes: paint, scrub, mow */
.wwd-fx-paint { animation: wwd-fx-sweep 1.8s ease-in-out infinite; }
.wwd-fx-clean { animation: wwd-fx-scrub 0.72s ease-in-out infinite; }
.wwd-fx-landscape { animation: wwd-fx-mow 2.3s ease-in-out infinite; }
@keyframes wwd-fx-sweep {
  0%, 100% { transform: translateX(-3.5%) rotate(-2.4deg); }
  50%      { transform: translateX(3.5%) rotate(2.4deg); }
}
@keyframes wwd-fx-scrub {
  0%, 100% { transform: translateX(-2.6%) rotate(-1.2deg); }
  50%      { transform: translateX(2.6%) rotate(1.2deg); }
}
@keyframes wwd-fx-mow {
  0%, 100% { transform: translateX(-4.5%) translateY(0) rotate(-1deg); }
  50%      { transform: translateX(4.5%) translateY(-1.5%) rotate(1deg); }
}

/* sparks and flames: weld, electric, fire */
.wwd-fx-weld {
  animation: wwd-fx-buzz 0.12s linear infinite,
             wwd-fx-arc 1.15s steps(1, end) infinite;
}
@keyframes wwd-fx-arc {
  0%, 55%  { filter: none; }
  58%      { filter: brightness(1.55) saturate(1.3); }
  61%      { filter: brightness(1) saturate(1); }
  64%      { filter: brightness(1.4) contrast(1.1); }
  68%, 100% { filter: none; }
}
.wwd-fx-electric {
  animation: wwd-fx-buzz 0.14s linear infinite,
             wwd-fx-zap 1.9s steps(1, end) infinite;
}
@keyframes wwd-fx-zap {
  0%, 70%  { filter: none; }
  73%      { filter: brightness(1.35) saturate(1.25); }
  76%      { filter: none; }
  79%      { filter: brightness(1.5) saturate(1.3); }
  83%, 100% { filter: none; }
}
.wwd-fx-fire {
  animation: wwd-fx-brace 1.5s ease-in-out infinite,
             wwd-fx-heat 2.2s ease-in-out infinite;
}
@keyframes wwd-fx-brace {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-2%); }
}
@keyframes wwd-fx-heat {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.12) saturate(1.15); }
}

/* cook: stirring loop */
.wwd-fx-cook { animation: wwd-fx-stir 1.6s linear infinite; }
@keyframes wwd-fx-stir {
  0%   { transform: translate(-1.6%, 0) rotate(-1.6deg); }
  25%  { transform: translate(0, -1.4%) rotate(0deg); }
  50%  { transform: translate(1.6%, 0) rotate(1.6deg); }
  75%  { transform: translate(0, 1.2%) rotate(0deg); }
  100% { transform: translate(-1.6%, 0) rotate(-1.6deg); }
}

/* loads: crane lift and heavy hauling steps */
.wwd-fx-crane { animation: wwd-fx-lift 3.2s ease-in-out infinite; }
@keyframes wwd-fx-lift {
  0%, 100% { transform: translateY(2%) rotate(-0.8deg); }
  50%      { transform: translateY(-4%) rotate(0.8deg); }
}
.wwd-fx-haul { animation: wwd-fx-step 0.9s ease-in-out infinite; }
@keyframes wwd-fx-step {
  0%, 100% { transform: translateY(0) rotate(-1.4deg) scaleY(1); }
  35%      { transform: translateY(-3%) rotate(0deg) scaleY(1.01); }
  70%      { transform: translateY(1%) rotate(1.4deg) scaleY(0.99); }
}

/* steady hands: medical, security, measuring */
.wwd-fx-medical { animation: wwd-fx-calm 3s ease-in-out infinite; }
@keyframes wwd-fx-calm {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.022) translateY(-1%); }
}
.wwd-fx-security { animation: wwd-fx-scan 3.6s ease-in-out infinite; }
@keyframes wwd-fx-scan {
  0%, 100% { transform: rotateY(-9deg) translateX(-1.5%); }
  50%      { transform: rotateY(9deg) translateX(1.5%); }
}
.wwd-fx-measure { animation: wwd-fx-tilt 2.4s ease-in-out infinite; }
@keyframes wwd-fx-tilt {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  50%      { transform: rotate(2.2deg) translateY(-1.2%); }
}

/* walk / run cycles */
.wwd-fx-walk { animation: wwd-fx-walk 0.55s ease-in-out infinite; }
@keyframes wwd-fx-walk {
  0%, 100% { transform: translateY(0) rotate(-2deg) scaleY(1); }
  50%      { transform: translateY(-4%) rotate(2deg) scaleY(1.02); }
}
.wwd-fx-run { animation: wwd-fx-run 0.38s ease-in-out infinite; }
@keyframes wwd-fx-run {
  0%, 100% { transform: translateY(0) rotate(-3deg) translateX(-1%); }
  50%      { transform: translateY(-5.5%) rotate(3deg) translateX(1%); }
}

/* climb / dig / jump / fall */
.wwd-fx-climb { animation: wwd-fx-climb 1.1s ease-in-out infinite; }
@keyframes wwd-fx-climb {
  0%, 100% { transform: translateY(3%) rotate(-1deg); }
  50%      { transform: translateY(-5%) rotate(1.5deg); }
}
.wwd-fx-dig { animation: wwd-fx-dig 0.85s cubic-bezier(0.35, 0, 0.2, 1) infinite; }
@keyframes wwd-fx-dig {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-4%) rotate(-4deg); }
  55%      { transform: translateY(3%) rotate(3deg); }
  70%      { transform: translateY(0) rotate(-1deg); }
}
.wwd-fx-jump { animation: wwd-fx-jump 1.35s cubic-bezier(0.25, 0.8, 0.3, 1) infinite; }
@keyframes wwd-fx-jump {
  0%, 55%, 100% { transform: translateY(0) scaleY(1) rotate(0deg); }
  62%           { transform: translateY(2%) scaleY(0.94) rotate(-1deg); }
  78%           { transform: translateY(-12%) scaleY(1.04) rotate(2deg); }
  90%           { transform: translateY(-2%) scaleY(0.98) rotate(0deg); }
}
.wwd-fx-fall { animation: wwd-fx-fall 1.6s ease-in infinite; }
@keyframes wwd-fx-fall {
  0%   { transform: translateY(-8%) rotate(-8deg); }
  70%  { transform: translateY(4%) rotate(6deg); }
  85%  { transform: translateY(1%) rotate(-2deg); }
  100% { transform: translateY(-8%) rotate(-8deg); }
}

/* heavy machines */
.wwd-fx-excavator { animation: wwd-fx-excavator 2.4s ease-in-out infinite; }
@keyframes wwd-fx-excavator {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  35%      { transform: rotate(4deg) translateY(-2%); }
  55%      { transform: rotate(-1deg) translateY(1%); }
  75%      { transform: rotate(2deg) translateY(-1%); }
}
.wwd-fx-bulldozer { animation: wwd-fx-bulldozer 1.8s ease-in-out infinite; }
@keyframes wwd-fx-bulldozer {
  0%, 100% { transform: translateX(-3%) rotate(-1deg); }
  50%      { transform: translateX(3%) rotate(1deg); }
}

/* sit / rest */
.wwd-fx-sit { animation: wwd-fx-sit 3.4s ease-in-out infinite; }
@keyframes wwd-fx-sit {
  0%, 100% { transform: scale(1) translateY(1%); }
  50%      { transform: scale(1.018) translateY(-0.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .wwd-sq-stage,
  .wwd-sq-img { animation: none !important; }
  .wwd-sq-cell {
    transition: opacity 140ms linear !important;
    scale: 1 !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.32)) !important;
  }
}

/* ---- Support Hub (single widget) ---- */
.wwd-hub {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147482500;
  font: 650 14px/1.4 Nunito, system-ui, sans-serif;
}
.wwd-hub-toggle {
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  background: #0f766e;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
}
.wwd-hub-panel {
  width: min(390px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 90px));
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid rgba(31, 41, 51, 0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(31, 41, 51, 0.18);
}
.wwd-hub-panel[hidden] { display: none !important; }
.wwd-hub-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #102a43;
  color: #f0f4f8;
}
.wwd-hub-head strong { display: block; font-size: 15px; }
.wwd-hub-head span { display: block; margin-top: 2px; font-size: 12px; opacity: 0.85; }
.wwd-hub-close {
  border: 0; background: transparent; color: inherit; font-size: 22px; cursor: pointer;
}
.wwd-hub-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  background: #f7f3ea;
  border-bottom: 1px solid rgba(31, 41, 51, 0.08);
}
.wwd-hub-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 8px 4px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #486581;
  cursor: pointer;
}
.wwd-hub-tabs button[aria-selected="true"] {
  background: #fff;
  color: #102a43;
  box-shadow: 0 1px 0 rgba(31,41,51,.08);
}
.wwd-hub-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: #fffdf8;
}
.wwd-hub-pane[hidden] { display: none !important; }
.wwd-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 10px;
}
.wwd-chat-msg {
  max-width: 90%;
  padding: 8px 10px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.wwd-chat-msg.bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(31, 41, 51, 0.1);
}
.wwd-chat-msg.user {
  align-self: flex-end;
  background: #0f766e;
  color: #fff;
}
.wwd-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.wwd-row input, .wwd-row select, .wwd-hub-body input, .wwd-hub-body textarea, .wwd-hub-body select {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(31, 41, 51, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
}
.wwd-hub-body textarea { min-height: 72px; resize: vertical; }
.wwd-hub-body button, .wwd-row button {
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: #102a43;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.wwd-hub-body h4 { margin: 0 0 8px; font-size: 14px; }
.wwd-hub-body p, .wwd-hub-body li { color: #486581; font-size: 13px; }
.wwd-faq-item {
  border: 1px solid rgba(31, 41, 51, 0.1);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
}
.wwd-faq-item strong { display: block; margin-bottom: 4px; color: #102a43; }
.wwd-pill {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e3fcec;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}
.wwd-ai-suggest {
  position: absolute;
  z-index: 2147481000;
  background: #fffdf8;
  border: 1px solid rgba(31,41,51,.16);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(16,42,67,.16);
  max-height: 280px;
  overflow: auto;
  min-width: 260px;
}
.wwd-ai-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid rgba(31,41,51,.06);
}
.wwd-ai-suggest button:hover { background: #f0fdf4; }
.wwd-ai-suggest small { display: block; color: #627d98; font-size: 12px; }

@media (max-width: 640px) {
  .wwd-hub { right: 10px; bottom: 10px; }
  .wwd-hub-tabs { grid-template-columns: repeat(2, 1fr); }
}

/* Prefer explicit: anything outside nav left gets killed by JS; trade tag already hidden */
button[style*="z-index: 9999"][style*="border-radius: 50%"][style*="bottom: 24px"] {
  display: none !important;
  pointer-events: none !important;
}
