:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --hero-shift: 0px;
}

.landing-hero-art {
  transform: translate3d(0, var(--hero-shift), 0) scale(1.06);
  will-change: transform;
}

.motion-ready .beta-badge,
.motion-ready .hero-wordmark,
.motion-ready .landing-hero h1,
.motion-ready .landing-hero p,
.motion-ready .hero-actions,
.motion-ready .hero-scroll {
  opacity: 0;
  animation: hero-enter .9s var(--motion-ease) forwards;
}

.motion-ready .beta-badge { animation-delay: .08s; }
.motion-ready .hero-wordmark { animation-delay: .16s; }
.motion-ready .landing-hero h1 { animation-delay: .27s; }
.motion-ready .landing-hero p { animation-delay: .36s; }
.motion-ready .hero-actions { animation-delay: .45s; }
.motion-ready .hero-scroll { animation-delay: .55s; }
.motion-ready .hero-wordmark { --hero-rest: skew(-7deg); }

.reveal {
  opacity: 0;
  filter: blur(11px);
  transform: translate3d(0, 72px, 0) scale(.985);
  transition:
    opacity 1.05s var(--motion-ease),
    filter 1.05s var(--motion-ease),
    transform 1.05s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}

.reveal.reveal-left {
  transform: translate3d(-64px, 24px, 0);
}

.reveal.reveal-scale {
  transform: translate3d(0, 52px, 0) scale(.94);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, var(--scroll-drift, 0px), 0) scale(1);
}

.stat-grid article,
.match-console,
.table-card,
.result-card {
  transition:
    opacity .8s var(--motion-ease),
    filter .8s var(--motion-ease),
    transform .8s var(--motion-ease),
    border-color .2s ease,
    box-shadow .2s ease;
}

.stat-grid article:hover,
.table-card:hover,
.result-card:hover {
  border-color: rgba(96, 165, 250, .34);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

@keyframes hero-enter {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 24px, 0) var(--hero-rest, scale(1));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: var(--hero-rest, translate3d(0, 0, 0));
  }
}

@media (max-width: 720px) {
  .reveal {
    transform: translate3d(0, 48px, 0) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-art {
    transform: scale(1.02);
  }

  .motion-ready .beta-badge,
  .motion-ready .hero-wordmark,
  .motion-ready .landing-hero h1,
  .motion-ready .landing-hero p,
  .motion-ready .hero-actions,
  .motion-ready .hero-scroll,
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
  }
}