/* ==========================================
   PARTNERSHIP BANNER - FIXED VERSION
========================================== */

:root {
  --banner-speed: 180s;
  --banner-mobile-speed: 180s; /* Slower on mobile */
  --primary-gold: #d4af37;
  --light-gold: #f4c430;
  --bg-dark: #000;
  
  /* Spacing variables */
  --message-spacing: 4rem;
  --set-spacing: 8rem;
}

.partnership-banner {
  width: 100%;
  background: linear-gradient(135deg, #8B7355, var(--primary-gold));
  color: var(--bg-dark);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-family: 'Outfit', sans-serif;
}

/* Hover overlay effect */
.partnership-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-gold), var(--light-gold));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.partnership-banner:hover::before {
  opacity: 1;
}

/* Scrolling text container */
.partnership-banner-scroll {
  display: inline-block;
  animation: scroll-right-to-left var(--banner-speed) linear infinite;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Pause animation on hover */
.partnership-banner:hover .partnership-banner-scroll {
  animation-play-state: paused;
}

/* Individual text elements */
.partnership-banner-text {
  margin-right: var(--message-spacing);
  transition: transform 0.3s ease;
}

.partnership-banner:hover .partnership-banner-text {
  transform: scale(1.05);
}

/* Set separator - spacing between repetition groups */
.partnership-banner-text.set-separator {
  margin-right: var(--set-spacing);
  width: 0;
  overflow: hidden;
}

/* Desktop animation */
@keyframes scroll-right-to-left {
  0% { transform: translateX(9%); }
  100% { transform: translateX(-100%); }
}

/* Mobile animation - define OUTSIDE media query */
@keyframes scroll-right-to-left-mobile {
  0% { transform: translateX(4%); }
  100% { transform: translateX(-100%); }
}

/* Apply mobile animation inside media query */
@media (max-width: 768px) {
  .partnership-banner-scroll {
    animation-name: scroll-right-to-left-mobile;
    /* Duration, timing, and infinite are already inherited */
  }
}
/* ==========================================
   SPACING VARIANTS
========================================== */

/* Tight spacing */
.partnership-banner.spacing-tight {
  --message-spacing: 2rem;
  --set-spacing: 4rem;
}

/* Normal spacing (default) */
.partnership-banner.spacing-normal {
  --message-spacing: 4rem;
  --set-spacing: 8rem;
}

/* Wide spacing */
.partnership-banner.spacing-wide {
  --message-spacing: 6rem;
  --set-spacing: 12rem;
}

/* Extra wide spacing */
.partnership-banner.spacing-extra-wide {
  --message-spacing: 8rem;
  --set-spacing: 16rem;
}

/* ==========================================
   RESPONSIVE BEHAVIOR
========================================== */
@media (max-width: 768px) {
  .partnership-banner-scroll {
    animation-duration: var(--banner-mobile-speed); /* Use slower mobile speed */
    font-size: 1rem;
  }
  
  .partnership-banner {
    padding: 10px 0;
  }
  
  /* Reduce spacing on mobile */
  .partnership-banner.spacing-tight {
    --message-spacing: 1.5rem;
    --set-spacing: 3rem;
  }
  
  .partnership-banner.spacing-normal {
    --message-spacing: 2.5rem;
    --set-spacing: 5rem;
  }
  
  .partnership-banner.spacing-wide {
    --message-spacing: 3.5rem;
    --set-spacing: 7rem;
  }
  
  .partnership-banner.spacing-extra-wide {
    --message-spacing: 4.5rem;
    --set-spacing: 9rem;
  }
}

@media (max-width: 480px) {
  .partnership-banner {
    padding: 8px 0;
  }
  
  .partnership-banner-scroll {
    font-size: 0.9rem;
  }
  
  /* Further reduce spacing on small mobile */
  .partnership-banner.spacing-tight {
    --message-spacing: 1rem;
    --set-spacing: 2rem;
  }
  
  .partnership-banner.spacing-normal {
    --message-spacing: 2rem;
    --set-spacing: 3.5rem;
  }
  
  .partnership-banner.spacing-wide {
    --message-spacing: 2.5rem;
    --set-spacing: 5rem;
  }
  
  .partnership-banner.spacing-extra-wide {
    --message-spacing: 3rem;
    --set-spacing: 6rem;
  }
}

/* ==========================================
   ACCESSIBILITY & VARIANTS
========================================== */
@media (prefers-reduced-motion: reduce) {
  .partnership-banner-scroll {
    animation: none !important;
  }
  
  .partnership-banner-text {
    margin-right: 2rem;
  }
}

@media (prefers-contrast: high) {
  .partnership-banner {
    border-top: 2px solid var(--bg-dark);
    border-bottom: 2px solid var(--bg-dark);
  }
}

.partnership-banner:focus {
  outline: 2px solid var(--bg-dark);
  outline-offset: 2px;
}

/* Speed variants */
.partnership-banner.slow { 
  --banner-speed: 200s; 
  --banner-mobile-speed: 250s;
}

.partnership-banner.fast { 
  --banner-speed: 80s; 
  --banner-mobile-speed: 120s;
}

.partnership-banner.ultra-slow { 
  --banner-speed: 300s;
  --banner-mobile-speed: 400s;
}

/* Compact variant */
.partnership-banner.compact {
  padding: 6px 0;
}

.partnership-banner.compact .partnership-banner-scroll {
  font-size: 1rem;
}

/* Dark theme */
.partnership-banner.dark {
  background: linear-gradient(135deg, #1a1a1a, #333);
  color: var(--primary-gold);
}

.partnership-banner.dark::before {
  background: linear-gradient(135deg, #333, #1a1a1a);
}