/* Focal entrance: the headline clears and the sport tiles in the hero deal in. */

@keyframes bc-title {
  from { filter: blur(8px); transform: translateY(14px); }
  to { filter: none; transform: none; }
}
@keyframes bc-deal {
  from { opacity: 0.01; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.hero-title {
  animation: bc-title 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-events .ev-row {
  animation: bc-deal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-events .ev-row:nth-child(1) { animation-delay: 60ms; }
.hero-events .ev-row:nth-child(2) { animation-delay: 120ms; }
.hero-events .ev-row:nth-child(3) { animation-delay: 180ms; }
.hero-events .ev-row:nth-child(4) { animation-delay: 240ms; }
.hero-events .ev-row:nth-child(n+5) { animation-delay: 300ms; }

.sport-card,
.casino-card,
.pool-card,
.btn {
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), border-color 150ms cubic-bezier(0.16, 1, 0.3, 1), background 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sport-card:hover,
.casino-card:hover,
.pool-card:hover { transform: translateY(-3px); }
.btn:hover { transform: translateY(-1px); }

.casino-card-img {
  position: relative;
  overflow: hidden;
}
.casino-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(0, 167, 160, 0.45) 50%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}
.casino-card:hover .casino-card-img::after,
.casino-card:focus-visible .casino-card-img::after {
  transform: translateX(130%);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-events .sport-card { animation: none; }
  .sport-card:hover,
  .casino-card:hover,
  .pool-card:hover,
  .btn:hover { transform: none; }
  .casino-card-img::after { display: none; }
}