/* Cookieverse crew stickers — work / gather / follow (even busier amp) */

.crew {
  position: fixed;
  inset: 0;
  z-index: 120; /* above topbar (80), below modal (200) & egg-toast (150) — keep below modal */
  pointer-events: none;
  overflow: visible;
}

/* egg-toast is 150; crew clickable stickers at 120 so topbar/lang stay usable
   and WeChat modal (200) stays above. */
.crew__member {
  position: fixed;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  z-index: 1;
}

/* Slightly larger while working so motion reads clearer */
/* Body-size scale: Schnauzer base, Chihuahua 80%, sugar gliders 50% */
.crew__member:nth-child(1) { width: 46px; height: 46px; } /* chi 58*0.8 */
.crew__member:nth-child(2) { width: 58px; height: 58px; } /* sch */
.crew__member:nth-child(3),
.crew__member:nth-child(4) { width: 29px; height: 29px; } /* gliders 58*0.5 */

.crew.is-work .crew__member {
  width: 64px;
  height: 64px;
}
.crew.is-work .crew__member:nth-child(1) { width: 51px; height: 51px; } /* 64*0.8 */
.crew.is-work .crew__member:nth-child(2) { width: 64px; height: 64px; }
.crew.is-work .crew__member:nth-child(3),
.crew.is-work .crew__member:nth-child(4) { width: 32px; height: 32px; } /* 64*0.5 */

.crew__member:focus-visible {
  outline: 2px solid #FF8FB8;
  outline-offset: 3px;
  border-radius: 50%;
}

.crew__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(74, 63, 53, 0.22));
  transform-origin: 50% 70%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Busy candy sparkles near each sticker while working (3 per member) */
.crew__spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.75), 0 0 10px rgba(255, 200, 140, 0.35);
}

.crew__spark--a {
  top: 2%;
  right: 4%;
  background: #FF8FB8; /* pink */
}

.crew__spark--b {
  bottom: 10%;
  left: 6%;
  background: #7EE0C3; /* mint */
}

.crew__spark--c {
  top: 18%;
  left: 2%;
  width: 8px;
  height: 8px;
  background: #FFE066; /* yellow */
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.crew__member:nth-child(3) .crew__spark--a,
.crew__member:nth-child(4) .crew__spark--b {
  background: #FFE066; /* yellow accent */
  border-radius: 0;
  width: 8px;
  height: 8px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.crew__member:nth-child(2) .crew__spark--c {
  background: #FF8FB8;
  border-radius: 50%;
  clip-path: none;
}

.crew__member:nth-child(4) .crew__spark--c {
  background: #7EE0C3;
  border-radius: 50%;
  clip-path: none;
}

/* Faster, brighter spark pulses with brief outward burst */
.crew.is-work .crew__member:nth-child(1) .crew__spark--a {
  animation: crew-spark 1.11s ease-in-out 0.05s infinite;
}
.crew.is-work .crew__member:nth-child(1) .crew__spark--b {
  animation: crew-spark 1.24s ease-in-out 0.4s infinite;
}
.crew.is-work .crew__member:nth-child(1) .crew__spark--c {
  animation: crew-spark-burst 1.37s ease-out 0.2s infinite;
}
.crew.is-work .crew__member:nth-child(2) .crew__spark--a {
  animation: crew-spark 1.17s ease-in-out 0.15s infinite;
}
.crew.is-work .crew__member:nth-child(2) .crew__spark--b {
  animation: crew-spark 1.3s ease-in-out 0.55s infinite;
}
.crew.is-work .crew__member:nth-child(2) .crew__spark--c {
  animation: crew-spark-burst 1.43s ease-out 0.35s infinite;
}
.crew.is-work .crew__member:nth-child(3) .crew__spark--a {
  animation: crew-spark 1.04s ease-in-out 0.1s infinite;
}
.crew.is-work .crew__member:nth-child(3) .crew__spark--b {
  animation: crew-spark 1.2s ease-in-out 0.48s infinite;
}
.crew.is-work .crew__member:nth-child(3) .crew__spark--c {
  animation: crew-spark-burst 1.27s ease-out 0.25s infinite;
}
.crew.is-work .crew__member:nth-child(4) .crew__spark--a {
  animation: crew-spark 1.14s ease-in-out 0.22s infinite;
}
.crew.is-work .crew__member:nth-child(4) .crew__spark--b {
  animation: crew-spark 1.33s ease-in-out 0.6s infinite;
}
.crew.is-work .crew__member:nth-child(4) .crew__spark--c {
  animation: crew-spark-burst 1.4s ease-out 0.4s infinite;
}

@keyframes crew-spark {
  0%, 55%, 100% {
    opacity: 0;
    transform: scale(0.35) translate(0, 0);
  }
  68% {
    opacity: 1;
    transform: scale(1.35) translate(2px, -4px);
  }
  82% {
    opacity: 0.75;
    transform: scale(1) translate(4px, -8px);
  }
}

@keyframes crew-spark-burst {
  0%, 50%, 100% {
    opacity: 0;
    transform: scale(0.3) translate(0, 0);
  }
  62% {
    opacity: 1;
    transform: scale(1.45) translate(-5px, -6px);
  }
  78% {
    opacity: 0.65;
    transform: scale(0.85) translate(-9px, -12px);
  }
}

/* Work-mode bob + tool swing + pound pulse — faster / larger amp */
.crew.is-work .crew__member:nth-child(1) .crew__img {
  /* hammer-pound: quick rotate down + snappy bob */
  animation:
    crew-bob 0.78s ease-in-out infinite,
    crew-swing-hammer 0.72s cubic-bezier(0.2, 0.85, 0.25, 1) infinite,
    crew-pound 0.78s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
.crew.is-work .crew__member:nth-child(2) .crew__img {
  /* wrench twist */
  animation:
    crew-bob 0.94s ease-in-out 0.08s infinite,
    crew-swing-wrench 0.91s cubic-bezier(0.25, 0.8, 0.3, 1) 0.05s infinite,
    crew-pound 0.94s cubic-bezier(0.34, 1.4, 0.64, 1) 0.08s infinite;
}
.crew.is-work .crew__member:nth-child(3) .crew__img {
  /* brush wipe: horizontal nudge + swing */
  animation:
    crew-bob-wipe 0.85s ease-in-out 0.12s infinite,
    crew-swing 0.81s cubic-bezier(0.2, 0.85, 0.25, 1) 0.04s infinite,
    crew-pound 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) 0.12s infinite;
}
.crew.is-work .crew__member:nth-child(4) .crew__img {
  /* tape stretch */
  animation:
    crew-bob 1.04s ease-in-out 0.05s infinite,
    crew-swing-rev 0.88s cubic-bezier(0.25, 0.8, 0.3, 1) 0.1s infinite,
    crew-pound-stretch 1.04s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s infinite;
}

@keyframes crew-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -17px; }
}

@keyframes crew-bob-wipe {
  0%, 100% { translate: 0 0; }
  25% { translate: 6px -12px; }
  50% { translate: -5px -17px; }
  75% { translate: 4px -10px; }
}

@keyframes crew-swing {
  0%, 100% { rotate: -21deg; }
  40% { rotate: 24deg; }
  70% { rotate: -12deg; }
}

@keyframes crew-swing-rev {
  0%, 100% { rotate: 23deg; }
  45% { rotate: -21deg; }
  75% { rotate: 12deg; }
}

/* nth-child(1) hammer: quick rotate down (strike) */
@keyframes crew-swing-hammer {
  0%, 100% { rotate: -17deg; }
  30% { rotate: -17deg; }
  45% { rotate: 26deg; }
  58% { rotate: 21deg; }
  78% { rotate: -10deg; }
}

/* nth-child(2) wrench twist */
@keyframes crew-swing-wrench {
  0%, 100% { rotate: -16deg; }
  28% { rotate: 23deg; }
  52% { rotate: -24deg; }
  78% { rotate: 12deg; }
}

@keyframes crew-pound {
  0%, 100% { scale: 1; }
  32% { scale: 1.15; }
  52% { scale: 0.94; }
  72% { scale: 1.06; }
}

/* tape stretch flavor: pound + slight scaleX */
@keyframes crew-pound-stretch {
  0%, 100% { scale: 1 1; }
  28% { scale: 1.16 1.08; }
  48% { scale: 0.9 1.04; }
  68% { scale: 1.1 0.96; }
}

/* Rare full 360 spin (JS toggles .crew-spin-once) */
.crew__member.crew-spin-once .crew__img {
  animation: crew-spin-once 0.72s cubic-bezier(0.25, 0.85, 0.3, 1) both !important;
}

@keyframes crew-spin-once {
  0% { rotate: 0deg; scale: 1; }
  40% { rotate: 200deg; scale: 1.12; }
  100% { rotate: 360deg; scale: 1; }
}

/* Soft scale while gathering / follow — no continuous work anim */
.crew.is-gather .crew__img,
.crew.is-follow .crew__img {
  animation: none;
}

.crew.is-gather .crew__spark,
.crew.is-follow .crew__spark {
  animation: none !important;
  opacity: 0;
}

/* Click reaction */
.crew__member.is-react .crew__img {
  animation: crew-react 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) both !important;
}

@keyframes crew-react {
  0% { scale: 1; rotate: 0deg; }
  25% { scale: 1.28; rotate: -18deg; }
  50% { scale: 0.92; rotate: 14deg; }
  75% { scale: 1.12; rotate: -8deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* Hammer the UI — rattle work-target anchors */
.hero__copy.is-rattled,
.manifesto__card.is-rattled,
.badge-desk.is-rattled,
.badge.is-rattled {
  animation: crew-rattle 0.55s ease-in-out both;
  transform-origin: 50% 50%;
}

@keyframes crew-rattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-3px, 1px) rotate(-0.6deg); }
  30% { transform: translate(3px, -2px) rotate(0.7deg); }
  45% { transform: translate(-2px, -1px) rotate(-0.5deg); }
  60% { transform: translate(2px, 2px) rotate(0.45deg); }
  75% { transform: translate(-1px, 0) rotate(-0.25deg); }
}


/* Per-badge build states (channels work mode) */
.badge.is-building {
  opacity: 0.58;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.badge.is-building .badge__link {
  border-style: dashed;
  filter: saturate(0.75) brightness(1.02);
}
.badge.is-built {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.badge.is-built .badge__link {
  border-style: solid;
  filter: none;
}
.badge.is-celebrate {
  animation: badge-built-jelly 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
@keyframes badge-built-jelly {
  0% { transform: scale(0.88); }
  35% { transform: scale(1.1); }
  55% { transform: scale(0.96); }
  75% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .badge.is-building,
  .badge.is-built {
    transform: none;
  }
  .badge.is-celebrate {
    animation: none !important;
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .crew__member:nth-child(1) { width: 37px; height: 37px; } /* 46*0.8 */
  .crew__member:nth-child(2) { width: 46px; height: 46px; }
  .crew__member:nth-child(3),
  .crew__member:nth-child(4) { width: 23px; height: 23px; } /* 46*0.5 */
  .crew.is-work .crew__member:nth-child(1) { width: 40px; height: 40px; } /* 50*0.8 */
  .crew.is-work .crew__member:nth-child(2) { width: 50px; height: 50px; }
  .crew.is-work .crew__member:nth-child(3),
  .crew.is-work .crew__member:nth-child(4) { width: 25px; height: 25px; } /* 50*0.5 */
  .crew__spark {
    width: 5px;
    height: 5px;
  }
  .crew__spark--c {
    width: 6px;
    height: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew.is-work .crew__img {
    animation: none !important;
  }
  .crew.is-work .crew__spark {
    animation: none !important;
    opacity: 0;
  }
  .crew__member.crew-spin-once .crew__img {
    animation: none !important;
  }
  .hero__copy.is-rattled,
  .manifesto__card.is-rattled,
  .badge-desk.is-rattled,
  .badge.is-rattled {
    animation: none !important;
  }
  .crew__member.is-react .crew__img {
    animation: crew-react-soft 0.45s ease both !important;
  }
  @keyframes crew-react-soft {
    0%, 100% { scale: 1; }
    50% { scale: 1.12; }
  }
}

/* Night jelly — soft candy glow on stickers */
html.is-night .crew__img {
  filter:
    drop-shadow(0 3px 6px rgba(10, 14, 28, 0.45))
    drop-shadow(0 0 10px rgba(255, 158, 196, 0.45))
    drop-shadow(0 0 16px rgba(126, 224, 195, 0.28));
}

/* Language switch bow / spin */
.crew__member.crew-lang-bow .crew__img {
  animation: crew-lang-bow 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) both !important;
}
@keyframes crew-lang-bow {
  0% { rotate: 0deg; scale: 1; translate: 0 0; }
  30% { rotate: -22deg; scale: 1.08; translate: 0 6px; }
  55% { rotate: 200deg; scale: 1.12; translate: 0 -4px; }
  100% { rotate: 360deg; scale: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crew__member.crew-lang-bow .crew__img {
    animation: crew-react-soft 0.4s ease both !important;
  }
}