/* The homepage example reveals its four clues at two-second intervals. */
.example-clues .example-flip-card {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 900px;
}
.example-flip-card.color-lime { --example-card-color: var(--lime); }
.example-flip-card.color-lilac { --example-card-color: var(--lilac); }
.example-flip-card.color-blue { --example-card-color: var(--blue); }
.example-flip-card.color-peach { --example-card-color: var(--peach); }
.example-flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transform: rotateX(-180deg);
}
.example-flip-face {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid #25223512;
  border-radius: 10px;
  background: var(--example-card-color);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.example-flip-cover { transform: rotateX(0deg); }
.example-flip-reveal { transform: rotateX(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .example-flip-inner {
    animation: example-clue-flip 650ms cubic-bezier(.45, 0, .25, 1) var(--flip-delay) both;
  }
}
@keyframes example-clue-flip {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(-180deg); }
}