/* Fight Red is the single ECF accent. */
:root, :root[data-accent="red"] {
  --accent: #fc3446;
  --accent-text: #ff5969;
  --accent-hover: #ff5969;
  --accent-on-light: #b6192d;
  --accent-rgb: 252 52 70;
  --on-accent: #08090c;
  --cta-gradient: linear-gradient(115deg, #e92f42 0%, #ff6471 46%, #ed3447 100%);
  --red: var(--accent);
}
.light .red, .light .text-link:hover {color: var(--accent-on-light)}
.rally, .rally p, .kinetic-band {color: var(--on-accent)}
.marquee-track i {color: var(--on-accent); opacity: .6}
.path:hover .path-arrow, .media-card:hover .play, ::selection {color: var(--on-accent)}

/* A softly shaded metal finish and an occasional sweep of light. */
.btn:not(.secondary):not(.white):not(.dark) {
  color: var(--on-accent);
  background: var(--cta-gradient);
  background-size: 140% 100%;
  background-position: 50% 50%;
  border-color: rgb(var(--accent-rgb) / .55);
  box-shadow: inset 0 1px 0 #ffffff3d, 0 5px 24px rgb(var(--accent-rgb) / .19);
  transition: background-position .45s, transform .3s, box-shadow .3s, border-color .3s;
}
.btn:not(.secondary):not(.white):not(.dark):hover {
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 #ffffff5c, 0 8px 30px rgb(var(--accent-rgb) / .3);
}
.btn.white, .btn.white:hover {
  background: linear-gradient(115deg, #dfe4eb, #fff 50%, #edf0f4);
  color: #101318;
}
.btn:not(.secondary):not(.white):not(.dark)::after {
  content: '';
  position: absolute;
  left: -65%; top: -50%;
  width: 45%; height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff14 25%, #ffffff70 50%, #ffffff14 75%, transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: cta-glisten 7s ease-in-out infinite;
}
.hero-bottom .btn::after {animation-delay: 1s}
.mobile-bottom .btn::after {animation-delay: 2s}
.showcase-copy .btn::after {animation-delay: 3s}
@keyframes cta-glisten {
  0%, 57% {transform: translateX(0) skewX(-18deg); opacity: 0}
  61% {opacity: .85}
  78%, 100% {transform: translateX(410%) skewX(-18deg); opacity: 0}
}
.motion-paused .btn::after {animation: none !important; opacity: 0}

@media(prefers-reduced-motion:reduce){.btn::after{animation:none!important;opacity:0!important}.btn{transition:none!important}}