/* Easter egg: Jake (Adventure Time pack, static/js/eggs/jake.js). Pure CSS Jake from afonsopacifer's CodePen
   qZOoxp, classes namespaced .cjake-*; the wrapper fills the screen with Jake's yellow and scales him to fit. */
.cjake-wrap { position: fixed; inset: 0; z-index: 9000; background: #f5bf3f; display: flex; justify-content: center;
  align-items: center; overflow: hidden; cursor: pointer; animation: cjake-in .35s cubic-bezier(.2, .8, .3, 1) both; }
.cjake-wrap.is-out { animation: cjake-out .45s ease-in forwards; }
.cjake { transform: scale(var(--cjake-scale, 1)); transform-origin: center; animation: cjake-giggle .16s infinite ease-in-out alternate; }
.cjake-wrap .cjake { width: 400px; padding-top: 50px; }

.cjake-face { background: #f5bf3f; width: 400px; display: flex; justify-content: space-between; position: relative; }
.cjake-eye { background: #000; width: 150px; height: 150px; border-radius: 50%; position: relative; }
.cjake-eye::after { background: #fff; width: 90px; height: 90px; border-radius: 50%; position: absolute; top: 10px; right: 13px;
  content: ""; animation: cjake-shake .1s infinite ease-in-out alternate; }
.cjake-eye::before { background: #fff; width: 50px; height: 50px; border-radius: 50%; position: absolute; bottom: 10px; left: 25px;
  content: ""; animation: cjake-shake .1s infinite ease-in-out alternate; }
.cjake-cheek-left, .cjake-cheek-right { border-top: 4px solid #000; background: #f5bf3f; width: 150px; height: 60px; border-radius: 50%;
  position: absolute; bottom: -45px; right: 0; }
.cjake-cheek-right { text-align: right; }
.cjake-cheek-left::before, .cjake-cheek-right::before { border-bottom: 4px solid #000; background: #f5bf3f; width: 60px; height: 5px;
  border-radius: 50%; position: relative; margin-top: 20px; display: inline-block; content: ""; }
.cjake-cheek-left::before { margin-left: 30px; }
.cjake-cheek-right::before { margin-right: 30px; }
.cjake-mustache { border: 4px solid #000; border-bottom: 0; width: 200px; height: 200px; border-radius: 50% 50% 0 0; position: absolute;
  top: 65px; left: 95px; background: linear-gradient(to bottom, #f5bf3f 50%, rgba(0, 0, 0, 0) 50%); }
/* the pen had rgba(0,0,0,0,) here (invalid); transparent is what it meant */
.cjake-mustache-cut { background: transparent; width: 200px; height: 100px; position: absolute; bottom: -10px; left: -6px; z-index: 1;
  border-left: 6px solid #f5bf3f; border-right: 6px solid #f5bf3f; }
.cjake-mustache::before, .cjake-mustache::after { border: 4px solid #000; border-top: 0; background: #f5bf3f; width: 60px; height: 50px;
  border-radius: 0 0 50% 50%; position: absolute; bottom: 50px; z-index: 2; content: ""; }
.cjake-mustache::before { left: -4px; }
.cjake-mustache::after { right: -4px; }
.cjake-nose { background: #000; width: 95px; height: 55px; border-radius: 45%; position: absolute; top: 52px; left: 52px; z-index: 3; }
.cjake-mouth { border: 4px solid #000; background: #862328; width: 100px; height: 100px; border-radius: 50%; position: absolute;
  bottom: 62px; left: 45px; z-index: -1; overflow: hidden; }
.cjake-tooth-left, .cjake-tooth-center, .cjake-tooth-right { border: 4px solid #000; background: #fff; width: 20px; height: 20px;
  border-radius: 45%; position: absolute; z-index: 1; }
.cjake-tooth-left { bottom: 15px; left: 11px; }
.cjake-tooth-center { bottom: 12px; right: 35px; }
.cjake-tooth-right { bottom: 15px; right: 11px; }
.cjake-tongue { background: #ea6e74; width: 40px; height: 40px; border-radius: 45%; position: absolute; bottom: -30px; right: 20px; z-index: 1; }
.cjake-arms { width: 400px; height: 300px; display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 2; }
.cjake-arm { width: 95px; height: 200px; border-left: 4px solid #000; border-right: 4px solid #000; display: flex;
  animation: cjake-hands-up 1s infinite ease-in-out alternate; }
.cjake-arm:nth-child(2) { animation-delay: -.5s; } /* hands take turns: a giggly flap */
/* Full screen: the arms run on past the bottom edge (the pen's page ended under them). Same top as the pen
   (300px row, 200px arms aligned to its bottom = 100px down), just much longer. */
.cjake-wrap .cjake-arms { align-items: flex-start; padding-top: 100px; }
.cjake-wrap .cjake-arm { height: 900px; }
.cjake-finger-left, .cjake-finger-center, .cjake-finger-right { width: 30px; height: 30px; border: 4px solid #000; border-bottom: 0;
  border-radius: 50% 50% 0 0; margin-top: -30px; margin-left: -4px; }
.cjake-finger-right { margin-right: -4px; }

@keyframes cjake-shake { from { transform: translateX(-1px); } to { transform: translateX(1px); } }
@keyframes cjake-hands-up { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }
@keyframes cjake-giggle { from { transform: scale(var(--cjake-scale, 1)) rotate(-1.2deg) translateY(2px); } to { transform: scale(var(--cjake-scale, 1)) rotate(1.2deg) translateY(-2px); } }
/* In and out from a random side (--cjake-from, set in jake.js); no overshoot, so no gap opens at any edge. */
@keyframes cjake-in { from { transform: var(--cjake-from, translateY(100%)); } to { transform: none; } }
@keyframes cjake-out { to { transform: var(--cjake-from, translateY(100%)); } }
@media (prefers-reduced-motion: reduce) {
  .cjake, .cjake-arm, .cjake-eye::before, .cjake-eye::after, .cjake-wrap, .cjake-wrap.is-out { animation: none; }
}