/* Motion reveal utilities */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation styles */
.nav-tab {
  color: #9CA3AF;
  border-bottom: 2px solid transparent;
}

.nav-tab:hover {
  color: #FFFFFF;
}

.nav-tab.active {
  color: #00D4FF;
  border-bottom-color: #00D4FF;
}

.mobile-tab.active {
  background-color: #161920;
  color: #00D4FF;
  border: none;
}

/* Tab content */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Marquee animation */
.marquee-container {
  overflow: hidden;
}

.marquee-content {
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  display: inline-block;
  padding-left: 100%;
}

@keyframes marquee {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Table hover effects */
.player-row {
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.player-row:hover {
  background-color: #1A1A2E;
  transform: scale(1.01);
}

/* Tier-specific styling */
.tier-gold {
  border-left: 4px solid #FFD700;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

.tier-cyan {
  border-left: 4px solid #00FFFF;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
}

.tier-orange {
  border-left: 4px solid #FF4500;
  background: linear-gradient(90deg, rgba(255, 69, 0, 0.1) 0%, transparent 100%);
}

.tier-purple {
  border-left: 4px solid #9400D3;
  background: linear-gradient(90deg, rgba(148, 0, 211, 0.1) 0%, transparent 100%);
}

.tier-green {
  border-left: 4px solid #00FF00;
  background: linear-gradient(90deg, rgba(0, 255, 0, 0.1) 0%, transparent 100%);
}

.tier-platinum {
  border-left: 4px solid #A0AEC0;
  background: linear-gradient(90deg, rgba(160, 174, 192, 0.1) 0%, transparent 100%);
}

/* Focus rings for accessibility */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #00D4FF;
  outline-offset: 2px;
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .marquee-content {
    animation: none !important;
    transform: none !important;
  }
  
  .animate-pulse, .animate-spin {
    animation: none !important;
  }
}