/* Scroll animations are enabled only after JavaScript adds .motion-ready. */
.motion-ready .reveal-heading,
.motion-ready .reveal-up,
.motion-ready .reveal-left,
.motion-ready .reveal-right,
.motion-ready .reveal-scale {
  opacity: 0;
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    transform .82s cubic-bezier(.2,.75,.2,1),
    filter .72s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-heading,
.motion-ready .reveal-up {
  transform: translate3d(0, 34px, 0);
}

.motion-ready .reveal-heading { filter: blur(5px); }
.motion-ready .reveal-left { transform: translate3d(-46px, 0, 0); }
.motion-ready .reveal-right { transform: translate3d(46px, 0, 0); }
.motion-ready .reveal-scale { transform: scale(.94); }

.motion-ready .is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal-heading h2 {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}

.reveal-heading h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 62px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #a65cff, #d7ff63);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .65s cubic-bezier(.2,.75,.2,1) .34s;
}

.reveal-heading.is-visible h2::after { transform: scaleX(1); }

.motion-ready .hero-copy > *,
.motion-ready .bonus-card {
  opacity: 0;
  animation: heroEnter .78s cubic-bezier(.2,.75,.2,1) forwards;
}
.motion-ready .hero-copy > :nth-child(1) { animation-delay: .08s; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: .17s; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: .27s; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: .37s; }
.motion-ready .bonus-card { animation-delay: .25s; }

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(28px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.motion-ready .game-card.is-visible .game-art span {
  animation: objectFloat 4.8s ease-in-out .8s infinite;
}

@keyframes objectFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-.7deg); }
}

.motion-ready .game-card.is-visible:hover {
  transform: translateY(-7px);
}
.motion-ready .game-card.is-visible:hover .game-art span {
  animation: none;
  transform: translateY(-5px) scale(1.055) rotate(-1deg);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-heading,
  .motion-ready .reveal-up,
  .motion-ready .reveal-left,
  .motion-ready .reveal-right,
  .motion-ready .reveal-scale,
  .motion-ready .hero-copy > *,
  .motion-ready .bonus-card,
  .motion-ready .game-card.is-visible .game-art span {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
  .reveal-heading h2::after { transform: scaleX(1); transition: none; }
}