/* ==========================================================================
   Smooshy the puppet (js/fun-rig.js) on any page: lottie-web draws her, these
   switch her face (eyes, mouth, brows, blinking, where she looks) and her
   clothes, and place the little effects around her (js/fun-fx.js).
   The classes and the --look / --face variables go on any element around her
   (SmooshyFace in js/fun-rig.js sets them).
   ========================================================================== */

/* Her layers carry lottie's own transform, so only `translate` (which adds to it) goes on them;
   turning and sizing go on the groups inside, which have none. */
.fun-rig {
  overflow: visible;
}

/* lottie clips to her 220 box; hops, hats and balloons go past it */
.fun-rig > g {
  clip-path: none;
}

.lottie-scratch,
.fun-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.lottie-scratch {
  visibility: hidden;
}

.lf-fluff {
  filter: url(#fun-fluff);
}

/* Where she looks: her pupils follow, and her whole face shifts a little that way */
.s-pupil {
  translate: var(--look-x, 0px) var(--look-y, 0px);
  transform-box: fill-box;
  transform-origin: center;
  transition: translate 0.14s ease-out, scale 0.15s ease;
}

.lf-face {
  translate: var(--face-x, 0px) var(--face-y, 0px);
  transition: translate 0.3s ease-out;
}

/* One look at a time for eyes and mouth; her plain open eyes and smile show unless another is picked */
.s-eyes-closed, .s-eyes-squint, .s-eyes-dizzy, .s-lid-half, .s-lid-full, .s-pupil-heart, .s-pupil-star,
.s-mouth-open, .s-mouth-grin, .s-mouth-o, .s-mouth-tongue, .s-mouth-wavy, .s-mouth-yawn, .s-mouth-flat {
  display: none;
}

.eyes-happy .s-eyes-open, .eyes-squint .s-eyes-open, .eyes-dizzy .s-eyes-open { display: none; }
.eyes-happy .s-eyes-closed, .eyes-squint .s-eyes-squint, .eyes-dizzy .s-eyes-dizzy { display: inline; }
.eyes-sleepy .s-lid-half, .blink-half .s-lid-half { display: inline; }
.eyes-closed .s-lid-full, .blink .s-lid-full, .eyes-wink .s-eye-r .s-lid-full { display: inline; }
.eyes-hearts .s-pupil-round, .eyes-stars .s-pupil-round { display: none; }
.eyes-hearts .s-pupil-heart, .eyes-stars .s-pupil-star { display: inline; }

.s-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 0.15s ease;
}

.eyes-wide .s-eye { scale: 1.12; }
.eyes-wide .s-pupil { scale: 0.8; }
.eyes-hearts .s-pupil, .eyes-stars .s-pupil { animation: pupilThrob 0.6s ease-in-out infinite; }

@keyframes pupilThrob {
  50% { scale: 1.15; }
}

.mouth-open .s-mouth-smile, .mouth-grin .s-mouth-smile, .mouth-o .s-mouth-smile, .mouth-tongue .s-mouth-smile,
.mouth-wavy .s-mouth-smile, .mouth-yawn .s-mouth-smile, .mouth-flat .s-mouth-smile { display: none; }
.mouth-open .s-mouth-open, .mouth-grin .s-mouth-grin, .mouth-o .s-mouth-o, .mouth-tongue .s-mouth-tongue,
.mouth-wavy .s-mouth-wavy, .mouth-yawn .s-mouth-yawn, .mouth-flat .s-mouth-flat { display: inline; }

.s-brow {
  transform-box: fill-box;
  transform-origin: center;
  transition: translate 0.2s ease, rotate 0.2s ease;
}

.brows-up .s-brow { translate: 0 -5px; }
.brows-down .s-brow { translate: 0 3px; }
.brows-worried .s-brow-l { rotate: -13deg; translate: 0 -2px; }
.brows-worried .s-brow-r { rotate: 13deg; translate: 0 -2px; }

.s-cheek { transition: opacity 0.3s ease; }
.blush .s-cheek { opacity: 1; }

/* Clothes show while she has them on, and pop into place when they go on */
.lw { visibility: hidden; }
.w-tophat .lw-tophat, .w-crown .lw-crown, .w-cap .lw-cap, .w-bow .lw-bow,
.w-shades .lw-shades, .w-glasses .lw-glasses, .w-scarf .lw-scarf, .w-necklace .lw-necklace,
.w-dress .lw-dress, .w-shirt .lw-shirt, .w-sneakers .lw-sneakers, .w-boots .lw-boots,
.w-balloon .lw-balloon, .w-wand .lw-wand, .w-partyhat .lw-partyhat, .w-bunny .lw-bunny,
.w-headphones .lw-headphones, .w-heartglasses .lw-heartglasses, .w-clownnose .lw-clownnose,
.w-mustache .lw-mustache, .w-bowtie .lw-bowtie, .w-cape .lw-cape, .w-skates .lw-skates,
.w-icecream .lw-icecream, .w-teddy .lw-teddy { visibility: visible; }

.lw-art {
  transform-box: fill-box;
  transform-origin: center;
  cursor: grab;
}

.lw-art.is-popping {
  animation: wearPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wearPop {
  0% { scale: 0.3; opacity: 0; }
  60% { opacity: 1; }
}

.w-twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 1.4s ease-in-out infinite;
}

.w-twinkle-2 { animation-delay: -0.5s; }
.w-twinkle-3 { animation-delay: -0.9s; }

@keyframes twinkle {
  0%, 100% { scale: 0.35; opacity: 0.3; }
  50% { scale: 1.1; opacity: 1; }
}

/* Lottie effects around her (js/fun-fx.js) */
.fun-fx {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .w-twinkle,
  .eyes-hearts .s-pupil,
  .eyes-stars .s-pupil {
    animation: none;
  }
}