.card {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Speech bubble styles */
.speech-bubble {
  position: relative;
  background: #ffffff;
  border-radius: 0.4em;
  padding: 0.5em;
}

.speech-bubble-left:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.588em solid transparent;
  border-right-color: #ffffff;
  border-left: 0;
  border-bottom: 0;
  margin-top: -0.294em;
  margin-left: -0.588em;
}

.speech-bubble-right:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 0.588em solid transparent;
  border-left-color: #ffffff;
  border-right: 0;
  border-bottom: 0;
  margin-top: -0.294em;
  margin-right: -0.588em;
}

/* Custom fragment animations for walking characters */
/* Override reveal.js default fragment behavior */
.custom-fragment-walk-left.fragment {
  transform: translateX(-180px) rotate(-12deg);
  opacity: 1;
  transition: none !important;
}

.custom-fragment-walk-left.fragment.visible {
  animation: walk-in-left 1.2s ease-out forwards;
}

.custom-fragment-walk-right.fragment {
  transform: translateX(180px) rotate(12deg);
  opacity: 1;
  transition: none !important;
}

.custom-fragment-walk-right.fragment.visible {
  animation: walk-in-right 1.2s ease-out forwards;
}

@keyframes walk-in-left {
  0% {
    transform: translateX(-180px) rotate(-12deg);
  }
  25% {
    transform: translateX(-100px) rotate(8deg);
  }
  50% {
    transform: translateX(-30px) rotate(-6deg);
  }
  75% {
    transform: translateX(40px) rotate(5deg);
  }
  100% {
    transform: translateX(80px) rotate(0deg);
  }
}

@keyframes walk-in-right {
  0% {
    transform: translateX(180px) rotate(12deg);
  }
  25% {
    transform: translateX(100px) rotate(-8deg);
  }
  50% {
    transform: translateX(30px) rotate(6deg);
  }
  75% {
    transform: translateX(-40px) rotate(-5deg);
  }
  100% {
    transform: translateX(-80px) rotate(0deg);
  }
}