html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; background: #000; -webkit-font-smoothing: antialiased; }
a { color: #fff; }
a:hover { color: #C9B6FF; }
img, svg { display: block; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #7C3AED; color: #fff; font-weight: 700; }
.skip:focus { left: 8px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #B9A2FF;
  outline-offset: 3px;
}
input:focus, textarea:focus { border-color: #7C3AED !important; outline: none; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* release filter pills */
.pill { background: #2A2A2D; color: #fff; transition: background .2s ease; }
.pill[aria-pressed="true"] { background: #7C3AED; }
.pill:hover { background: #3A3A3E; }
.pill[aria-pressed="true"]:hover { background: #6D28D9; }

/* featured list */
.feat-btn { color: #7A7A82; transition: color .2s ease; }
.feat-btn[aria-pressed="true"], .feat-btn:hover { color: #fff; }

/* carousel arrows */
.round { transition: background .2s ease, border-color .2s ease; }
.round:hover { background: #7C3AED !important; border-color: #7C3AED !important; }

#car-track { transition: transform .35s ease; }

/* gentle lift on cards */
#car-track > a, #rel-grid > a { transition: transform .25s ease; }
#car-track > a:hover, #rel-grid > a:hover { transform: translateY(-4px); }

button[type="submit"][disabled] { opacity: .6; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* small screens: let the header scroll away so it doesn't eat the screen */
@media (max-width: 640px) {
  header { position: static !important; }
}

/* ticker */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none !important; } }

/* FAQ */
summary::-webkit-details-marker { display: none; }
details > summary > span { transition: transform .2s ease; }
details[open] > summary > span { transform: rotate(45deg); }
details > summary:hover { color: #C9B6FF; }

/* download / email cards */
a[download], a[href^="mailto:"][style*="border-radius: 22px"] { transition: border-color .2s ease, transform .2s ease; }
a[download]:hover, a[href^="mailto:"][style*="border-radius: 22px"]:hover { border-color: #7C3AED !important; transform: translateY(-3px); }

/* compact header on phones: hide the Contact pill (Contact is in the footer + Listen stays) */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}

/* ───────── Motion ───────── */

/* 1. Smooth cross-page transitions (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px) scale(.985); filter: blur(4px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); } }

/* 2. Hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(32px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
#content h1 { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
#content h1 + p { animation: rise .9s .12s cubic-bezier(.2,.7,.2,1) both; }
#content h1 + p + div { animation: rise .9s .22s cubic-bezier(.2,.7,.2,1) both; }

/* 3. Glow breathing behind headings */
@keyframes breathe { 0%,100% { background-size: 100% 100%; } 50% { background-size: 112% 118%; } }
#content main > section:first-child { animation: breathe 9s ease-in-out infinite; background-position: 50% 0; }

/* 4. Scroll reveal (JS adds .reveal, then .in when visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* 5. Hover polish */
#content a img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
#content a:hover img { transform: scale(1.045); filter: saturate(1.15); }
#content a[style*="border-radius: 999px"], #content button { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
#content a[style*="border-radius: 999px"]:hover, #content button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(124,58,237,.6); }
.dsp-logo { transition: color .25s ease, transform .25s ease; }
.dsp-logo:hover { color: #B9A2FF !important; transform: translateY(-3px) scale(1.06); }
#content [style*="border-radius: 24px"], #content [style*="border-radius: 22px"] { transition: border-color .25s ease, transform .25s ease; }
#content div[style*="border-radius: 24px"]:hover { border-color: #3B1A70 !important; }

/* 6. Page progress bar */
#scroll-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #7C3AED, #B9A2FF); z-index: 50; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  #content h1, #content h1 + p, #content h1 + p + div, #content main > section:first-child { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  #scroll-progress { display: none; }
}