/* Color Vibe 5K — shared base + interactive states.
   Layout/visuals are authored inline on each element (design is final).
   This file carries only: resets, keyframes, and hover/focus states that
   must override inline styles (hence the targeted !important). */

html{--header-h:72px}
html,body{margin:0;background:#0d0d0d;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#FFC43B;text-decoration:none}
a:hover{color:#FF4C99}
[hidden]{display:none !important}
::selection{background:#FF4C99;color:#fff}
input::placeholder{color:#8a8a8a}
:focus-visible{outline:2px solid #FFC43B;outline-offset:2px}
html{scroll-behavior:smooth}

@keyframes cvMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cvFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(3deg)}}

/* --- Interactive states (override inline base styles) --- */
.nav-link:hover{color:#FF4C99 !important}
.nav-link-yellow:hover{color:#FFC43B !important}
.nav-link-blue:hover{color:#00A9FF !important}
.btn-yellow:hover{background:#FF4C99 !important;color:#fff !important}
.btn-yellow-white:hover{background:#fff !important;color:#0d0d0d !important}
.btn-pink:hover{background:#FFC43B !important;color:#0d0d0d !important}
.city-card:hover{border-color:#FFC43B !important}
.email-input:focus{border-color:#FFC43B !important}
.footer-link:hover{color:#fff !important}
.event-link:hover{color:#FF4C99 !important}
.stepper-minus:hover{background:#FEFEDF !important}
.stepper-plus:hover{background:#FF4C99 !important;border-color:#FF4C99 !important}
.cta-pink-hover:hover{background:#FF4C99 !important;color:#fff !important}
.js-dec:disabled{opacity:.35;cursor:default}
.js-checkout-btn:disabled{background:#e6e6d0 !important;color:#0d0d0d !important;cursor:not-allowed}

/* Marquee pause on hover */
.cv-marquee-track{animation-play-state:running}
.cv-marquee-wrap:hover .cv-marquee-track{animation-play-state:paused}

/* Ticket rail — wide (>=1180px) vs narrow layout, matches the dc.html railPos/railInset/railPE/railBg logic */
.cv-rail{order:2;background:#0d0d0d;padding:0 clamp(16px,4vw,48px)}
.cv-rail-inner{max-width:1320px;height:100%;margin:0 auto;padding:0 0 clamp(56px,8vw,112px);display:flex;justify-content:flex-start}
.cv-ticketbox{position:relative;align-self:flex-start;pointer-events:auto;width:100%;max-width:520px}
#buy{order:1}
.cv-section-3{order:3}
.cv-railpad{padding-right:0}

@media (min-width:1180px){
  .cv-rail{position:absolute;inset:0;order:2;z-index:5;pointer-events:none;background:transparent;padding:0 clamp(16px,4vw,48px)}
  .cv-rail-inner{padding:clamp(56px,8vw,112px) 0 56px;justify-content:flex-end}
  .cv-ticketbox{position:sticky;top:calc(var(--header-h) + 24px);pointer-events:auto;max-width:440px;max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto}
  #buy{order:1}
  .cv-section-3{order:3}
  .cv-railpad{padding-right:480px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cv-marquee-track{animation:none !important}
}