/* Bug squash. */

.celebration[data-mode="bug"] { --c1: #1a2e05; --c2: #65a30d; --c3: #d9f99d; --glow: rgb(163 230 53 / .6); }

.cel-bug-scene { position: absolute; inset: 0; }

.cel-bug-counter {
  position: absolute; right: 4vw; top: 4vh; display: flex; align-items: center; gap: 1.2vh;
  padding: 1vh 2.4vh; border-radius: 999px; background: rgb(0 0 0 / .55); border: .3vh solid #a3e635;
  box-shadow: 0 0 3vh rgb(163 230 53 / .45);
}
.cel-bug-counter-icon { font-size: 4vh; }
.cel-bug-counter-value { font-size: 5vh; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cel-bug-counter-label { font-size: 2vh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d9f99d; }

.cel-bug { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cel-bug > * { position: absolute; }
.cel-bug-body {
  left: -6vh; top: -8vh; width: 12vh; height: 16vh; border-radius: 50% 50% 46% 46%;
  background:
    linear-gradient(90deg, transparent calc(50% - .25vh), #1c1917 calc(50% - .25vh) calc(50% + .25vh), transparent calc(50% + .25vh)),
    radial-gradient(circle at 35% 30%, #fca5a5, #dc2626 45%, #7f1d1d);
  box-shadow: 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-bug-spot { position: absolute; width: 2.6vh; height: 2.6vh; border-radius: 50%; background: #1c1917; }
.cel-bug-spot:nth-child(1) { left: 2vh; top: 4vh; }
.cel-bug-spot:nth-child(2) { right: 2vh; top: 6vh; }
.cel-bug-spot:nth-child(3) { left: 3vh; top: 10vh; }
.cel-bug-head { left: -3.5vh; top: -12vh; width: 7vh; height: 5vh; border-radius: 50% 50% 30% 30%; background: #1c1917; }
.cel-bug-head i {
  position: absolute; top: -3.5vh; width: .5vh; height: 4vh; background: #1c1917; border-radius: 999px; transform-origin: 50% 100%;
  animation: cel-antenna .3s ease-in-out infinite alternate;
}
.cel-bug-head i:first-child { left: 1.5vh; rotate: -25deg; }
.cel-bug-head i:last-child { right: 1.5vh; rotate: 25deg; animation-delay: .15s; }
@keyframes cel-antenna { to { translate: 0 -.4vh; } }
.cel-bug-legs { left: 0; top: 0; }
.cel-bug-legs i {
  position: absolute; width: 7vh; height: .8vh; border-radius: 999px; background: #1c1917; transform-origin: 0 50%;
  animation: cel-leg .12s ease-in-out infinite alternate;
}
.cel-bug-legs i:nth-child(odd) { rotate: 180deg; }
.cel-bug-legs i:nth-child(1), .cel-bug-legs i:nth-child(2) { top: -4vh; }
.cel-bug-legs i:nth-child(3), .cel-bug-legs i:nth-child(4) { top: 0; }
.cel-bug-legs i:nth-child(5), .cel-bug-legs i:nth-child(6) { top: 4vh; }
.cel-bug-legs i:nth-child(even) { animation-delay: .06s; }
@keyframes cel-leg { to { transform: rotate(18deg); } }
.cel-bug-tag {
  left: 7vh; top: -2vh; padding: .4vh 1.2vh; border-radius: .6vh; white-space: nowrap; rotate: -95deg; transform-origin: 0 50%;
  font-size: 1.8vh; font-weight: 700; color: #1c1917; background: #fef08a;
}
.cel-bug.is-squashed .cel-bug-legs i { animation: none; }
.cel-bug.is-squashed > * { scale: 1.4 .25; opacity: .85; }

.cel-splat {
  position: absolute; left: 0; top: 0; width: 34vh; height: 34vh; margin: -17vh 0 0 -17vh; opacity: 0; scale: .2;
  background:
    radial-gradient(circle at 50% 50%, #84cc16 0 28%, transparent 29%),
    radial-gradient(circle at 20% 35%, #a3e635 0 9%, transparent 10%),
    radial-gradient(circle at 80% 30%, #84cc16 0 11%, transparent 12%),
    radial-gradient(circle at 75% 78%, #a3e635 0 8%, transparent 9%),
    radial-gradient(circle at 28% 75%, #65a30d 0 10%, transparent 11%),
    radial-gradient(circle at 50% 12%, #bef264 0 6%, transparent 7%),
    radial-gradient(circle at 90% 55%, #a3e635 0 5%, transparent 6%),
    radial-gradient(circle at 10% 58%, #84cc16 0 5%, transparent 6%);
  filter: drop-shadow(0 0 1vh rgb(0 0 0 / .4));
  transition: scale .15s cubic-bezier(.3, 1.6, .5, 1), opacity .1s;
}
.cel-splat.is-on { opacity: .92; scale: 1; }

.cel-slipper { position: absolute; left: 0; top: 0; width: 0; height: 0; filter: drop-shadow(0 2vh 2vh rgb(0 0 0 / .5)); }
.cel-slipper-sole {
  position: absolute; left: -11vh; top: -24vh; width: 22vh; height: 48vh; border-radius: 45% 45% 40% 40% / 30% 30% 25% 25%;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .08) 0 .6vh, transparent .6vh 2.4vh),
    linear-gradient(90deg, #c2410c, #ff7800 30%, #fb923c 50%, #ff7800 70%, #c2410c);
  box-shadow: inset 0 0 0 .8vh #7c2d12;
}
.cel-slipper-strap {
  position: absolute; left: -12vh; top: -16vh; width: 24vh; height: 9vh; border-radius: 4vh;
  background: linear-gradient(180deg, #1e3a8a, #1d4ed8); box-shadow: inset 0 -.8vh 0 rgb(0 0 0 / .3);
}

.cel-bug-pow {
  position: absolute; left: 50%; top: 28vh; opacity: 0;
  font-family: var(--font-brand); font-size: 13vh; line-height: 1; color: #fef08a;
  -webkit-text-stroke: .35vh #1a2e05; text-shadow: 0 .8vh 0 #365314, 0 0 4vh rgb(163 230 53 / .9);
}

.cel-bug-caption { position: absolute; left: 50%; bottom: 8vh; max-width: 80vw; translate: none; text-align: center; opacity: 0; }
.cel-bug-caption-title { font-size: 3.6vh; font-weight: 700; }
.cel-bug-caption-meta { margin-top: .6vh; font-size: 2.2vh; color: #d9f99d; }