@keyframes casinoceskyTopCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes casinoceskyTopPickGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(234,88,12,.1);
  }

  50% {
    box-shadow: 0 8px 30px rgba(234,88,12,.2);
  }
}

@keyframes casinoceskyTopCtaPulse {
  0%,
  100% {
    box-shadow: 0 3px 10px rgba(67,56,202,.2);
  }

  50% {
    box-shadow: 0 7px 18px rgba(67,56,202,.34);
  }
}

.casino-list .cc {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.casino-list .cc.is-visible {
  animation: casinoceskyTopCardIn .45s ease both;
}

.casino-list .cc.is-visible:nth-child(1) { animation-delay: .02s; }
.casino-list .cc.is-visible:nth-child(2) { animation-delay: .06s; }
.casino-list .cc.is-visible:nth-child(3) { animation-delay: .1s; }
.casino-list .cc.is-visible:nth-child(4) { animation-delay: .14s; }
.casino-list .cc.is-visible:nth-child(5) { animation-delay: .18s; }
.casino-list .cc.is-visible:nth-child(n+6) { animation-delay: .22s; }

.casino-list .cc.top.is-visible {
  animation-name: casinoceskyTopCardIn, casinoceskyTopPickGlow;
  animation-duration: .45s, 3s;
  animation-timing-function: ease, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}

.casino-list .cc__logo img,
.casino-list .cc__logo {
  transition: transform .25s ease;
}

.casino-list .cc:hover .cc__logo,
.casino-list .cc:hover .cc__logo img {
  transform: scale(1.04);
}

.casino-list .cc__btn {
  animation: casinoceskyTopCtaPulse 3.2s ease-in-out infinite;
}

.casino-list .cc.top .cc__btn {
  animation-duration: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
  .casino-list .cc,
  .casino-list .cc.top,
  .casino-list .cc__btn {
    animation: none !important;
  }

  .casino-list .cc {
    opacity: 1;
    transform: none;
  }

  .casino-list .cc__logo,
  .casino-list .cc__logo img {
    transition: none !important;
  }
}