@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.44;
  }
  50% {
    opacity: 0.82;
  }
}

@keyframes glowSweep {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(1.06);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1.02);
  }
}

@keyframes heroCopyIn {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.market-sidebar,
.overview-topbar,
.hero-section,
.game-row,
.market-rail {
  animation: fadeInUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-section {
  animation-delay: 0.05s;
}

.game-row {
  animation-delay: 0.1s;
}

.market-rail {
  animation-delay: 0.14s;
}

.game-tile,
.collection-card {
  animation: fadeInUp 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease,
    background 150ms ease;
}

.delay-1 { animation-delay: 0.045s; }
.delay-2 { animation-delay: 0.09s; }
.delay-3 { animation-delay: 0.135s; }
.delay-4 { animation-delay: 0.18s; }
.delay-5 { animation-delay: 0.225s; }
.delay-6 { animation-delay: 0.27s; }
.delay-7 { animation-delay: 0.315s; }

.game-tile:hover,
.collection-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.tile-art img,
.hero-bg img {
  transition: transform 600ms ease, filter 200ms ease;
}

.game-tile:hover .tile-art img {
  transform: scale(1.06);
}

.favorite-btn,
.play-now-btn,
.browse-all-btn,
.category-strip button,
.side-nav button,
.rail-game a,
.chat-tab,
.ghost-btn,
.notification-btn,
.profile-pill,
.shell-pill {
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    filter 150ms ease;
}

.favorite-btn:hover,
.play-now-btn:hover,
.browse-all-btn:hover,
.category-strip button:hover,
.rail-game a:hover,
.notification-btn:hover,
.profile-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.play-now-btn,
.premium-card button,
.tile-play {
  position: relative;
  overflow: hidden;
}

.play-now-btn::after,
.premium-card button::after,
.tile-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  transform: translateX(-120%);
}

.play-now-btn:hover::after,
.premium-card button:hover::after,
.tile-play:hover::after {
  animation: glowSweep 0.75s ease;
}

.chat-dock {
  transition: opacity 170ms ease, transform 170ms ease;
}

.skeleton-tile {
  animation: pulse 1.35s ease-in-out infinite;
  opacity: 0.44;
}

.rail-card,
.premium-card {
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.rail-card:hover,
.premium-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}