[data-cue="fadeIn"], [data-cues="fadeIn"] > * {
  opacity: 0;
  transition: opacity 0.6s ease;
}

[data-cue="slideInLeft"], [data-cues="slideInLeft"] > * {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="slideInRight"], [data-cues="slideInRight"] > * {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="slideInDown"], [data-cues="slideInDown"] > * {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="slideInUp"], [data-cues="slideInUp"] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="zoomIn"], [data-cues="zoomIn"] > * {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="zoomOut"], [data-cues="zoomOut"] > * {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="rotateIn"], [data-cues="rotateIn"] > * {
  opacity: 0;
  transform: rotateZ(-15deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-cue="bounceIn"], [data-cues="bounceIn"] > * {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Show states */
[data-cue].cue-show, [data-cues].cue-show > * {
  opacity: 1;
}

[data-cue="fadeIn"].cue-show, [data-cues="fadeIn"].cue-show > * {
  opacity: 1;
}

[data-cue="slideInLeft"].cue-show, [data-cues="slideInLeft"].cue-show > * {
  opacity: 1;
  transform: translateX(0);
}

[data-cue="slideInRight"].cue-show, [data-cues="slideInRight"].cue-show > * {
  opacity: 1;
  transform: translateX(0);
}

[data-cue="slideInDown"].cue-show, [data-cues="slideInDown"].cue-show > * {
  opacity: 1;
  transform: translateY(0);
}

[data-cue="slideInUp"].cue-show, [data-cues="slideInUp"].cue-show > * {
  opacity: 1;
  transform: translateY(0);
}

[data-cue="zoomIn"].cue-show, [data-cues="zoomIn"].cue-show > * {
  opacity: 1;
  transform: scale(1);
}

[data-cue="zoomOut"].cue-show, [data-cues="zoomOut"].cue-show > * {
  opacity: 1;
  transform: scale(1);
}

[data-cue="rotateIn"].cue-show, [data-cues="rotateIn"].cue-show > * {
  opacity: 1;
  transform: rotateZ(0deg);
}

[data-cue="bounceIn"].cue-show, [data-cues="bounceIn"].cue-show > * {
  opacity: 1;
  transform: scale(1);
}