/* athlete-carousel.css */

/* =========================================================================
   THEME-AWARE CSS VARIABLES
   Automatically adapt to light/dark system preference
   ========================================================================= */

/* Light mode (default) */
:root {
  /* Core theme colors */
  --carousel-bg: transparent;
  
  /* Gradient edge colors - THE KEY FIX */
  --gradient-start: rgb(255, 255, 255); /* White in light mode */
  --gradient-mid: rgba(255, 255, 255, 0.8);
  
  /* UI Backgrounds */
  --controls-bg: rgb(243, 244, 246); /* Light gray */
  --controls-bg-hover: rgb(229, 231, 235); /* Slightly darker gray */
  
  /* Text colors */
  --text-primary: rgb(17, 24, 39); /* Dark gray for headings */
  --text-secondary: rgba(17, 24, 39, 0.5); /* Semi-transparent for empty states */
  --text-controls: rgb(17, 24, 39);
  
  /* Border & Separator colors */
  --border-primary: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.2);
  --border-highlight: rgba(0, 0, 0, 0.05); /* Subtle card highlight in light mode */
  
  /* Shadow colors */
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Brand accent colors */
  --accent-primary: #E07856; /* Orange for men's */
  --accent-womens: #E879B3; /* Pink for women's */
  
  /* Filter badge colors */
  --filter-badge-bg: rgba(224, 120, 86, 0.1);
  --filter-badge-border: rgba(224, 120, 86, 0.3);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    /* Core theme colors */
    --carousel-bg: transparent;
    
    /* Gradient edge colors - THE KEY FIX */
    --gradient-start: rgb(24, 24, 27); /* Near-black in dark mode */
    --gradient-mid: rgba(24, 24, 27, 0.8);
    
    /* UI Backgrounds */
    --controls-bg: rgb(39, 39, 42);
    --controls-bg-hover: rgb(63, 63, 70);
    
    /* Text colors */
    --text-primary: rgb(255, 255, 255);
    --text-secondary: rgba(255, 255, 255, 0.5);
    --text-controls: rgb(255, 255, 255);
    
    /* Border & Separator colors */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --border-highlight: rgba(255, 255, 255, 0.1); /* Subtle card highlight in dark mode */
    
    /* Shadow colors */
    --shadow-color: rgba(0, 0, 0, 0.4);
  }
}

/* =========================================================================
   CAROUSEL STYLES
   ========================================================================= */

/* Main carousel wrapper with theme support */
.athlete-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 30px 0;
  background: var(--carousel-bg);
}

/* Fade gradients on edges - NOW THEME-AWARE */
.athlete-carousel-wrapper::before,
.athlete-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.athlete-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--gradient-start) 0%,
    var(--gradient-mid) 50%,
    transparent 100%
  );
}

.athlete-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--gradient-start) 0%,
    var(--gradient-mid) 50%,
    transparent 100%
  );
}

/* Track animation */
.athlete-carousel-track {
  display: flex;
  width: max-content;
  animation: infiniteScroll linear infinite;
  will-change: transform;
}

.athlete-carousel-track.paused {
  animation-play-state: paused;
}

/* Individual athlete card wrapper */
.carousel-athlete-item {
  flex: 0 0 auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Smooth scrolling animation */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

/* Enhanced hover effects for carousel items */
.carousel-athlete-item:hover .athlete-card {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 30px 60px -12px var(--shadow-color),
    0 18px 40px -8px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--border-highlight);
}

/* Responsive breakpoints */
@media (max-width: 1536px) {
  .athlete-carousel-wrapper::before,
  .athlete-carousel-wrapper::after {
    width: 100px;
  }
}

@media (max-width: 1280px) {
  .carousel-athlete-item {
    width: 320px !important;
  }
}

@media (max-width: 1024px) {
  .athlete-carousel-wrapper::before,
  .athlete-carousel-wrapper::after {
    width: 60px;
  }
  
  .carousel-athlete-item {
    width: 300px !important;
  }
}

@media (max-width: 768px) {
  .athlete-carousel-wrapper {
    padding: 20px 0;
  }
  
  .athlete-carousel-wrapper::before,
  .athlete-carousel-wrapper::after {
    width: 40px;
  }
  
  .carousel-athlete-item {
    width: 280px !important;
  }
}

/* Performance optimizations */
.athlete-carousel-track,
.carousel-athlete-item,
.athlete-card {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Section styling */
.carousel-section {
  margin-bottom: 4rem;
}

.carousel-section h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

/* Control buttons */
.carousel-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carousel-controls select,
.carousel-controls button {
  padding: 0.375rem 0.75rem;
  background-color: var(--controls-bg);
  color: var(--text-controls);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.carousel-controls button:hover,
.carousel-controls select:hover {
  background-color: var(--controls-bg-hover);
  border-color: var(--border-hover);
}

.carousel-controls button:active {
  transform: scale(0.98);
}

/* Loading state */
.athlete-carousel-wrapper.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-primary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 20;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Empty state */
.carousel-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

.carousel-empty-state svg {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.3;
}

/* Filter badges */
.carousel-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--filter-badge-bg);
  border: 1px solid var(--filter-badge-border);
  border-radius: 9999px;
  color: var(--accent-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.carousel-filter-badge button {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.carousel-filter-badge button:hover {
  opacity: 1;
}

/* Accent colors for women's - keep gender-specific styling */
[data-gender="womens"] .carousel-filter-badge,
[data-gender="w"] .carousel-filter-badge,
[data-gender="f"] .carousel-filter-badge {
  background: rgba(232, 121, 179, 0.1);
  border-color: rgba(232, 121, 179, 0.3);
  color: var(--accent-womens);
}

[data-gender="womens"] .athlete-carousel-wrapper.loading::after,
[data-gender="w"] .athlete-carousel-wrapper.loading::after,
[data-gender="f"] .athlete-carousel-wrapper.loading::after {
  border-top-color: var(--accent-womens);
}