/* ==================================================================
   card.css, la carte : cadre, hologramme par rareté, retournement

   Toutes les dimensions internes sont exprimées en `em`, et la carte
   fixe sa propre base typographique à partir de sa largeur. Une carte
   de 196 px et une de 330 px sont donc rigoureusement la même carte,
   à l'échelle près, aucun réglage à refaire par contexte.
   ================================================================== */

.card {
  --w: 300px;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --r-color: #8b95ad;
  --r-glow: #8b95ad;
  --pop-scale: 1;

  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 94;
  font-size: calc(var(--w) / 30);   /* 10px pour une carte de 300px */
  perspective: 110em;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.card.is-compact { --w: 196px; }

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--spin, 0deg))) scale(var(--pop-scale));
  transition: transform .5s var(--ease-out);
}
.card.is-facedown .card-inner { transform: rotateY(180deg); }
.card.is-flipping .card-inner { transition: transform .62s cubic-bezier(.55,.05,.25,1); }

.card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 6px; border-radius: 2em; }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 1.6em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ------------------------------ le dos ------------------------------ */

.card-back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #2b2456, #14122a 55%, #0a0a16);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 6em rgba(139,92,246,.22), 0 2em 4.6em -2.2em #000;
}
.back-art { position: relative; width: 64%; aspect-ratio: 1; display: grid; place-items: center; }
.back-disc {
  position: absolute; inset: 24%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #22d3ee, #ec4899, #8b5cf6);
  filter: blur(1px);
  opacity: .55;
  animation: back-spin 9s linear infinite;
}
.back-ring { position: absolute; inset: 6%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.back-ring.r2 { inset: 18%; border-color: rgba(255,255,255,.1); }
.back-ring.r3 { inset: 30%; border-style: dashed; border-color: rgba(255,255,255,.14); }
.back-logo {
  position: relative;
  width: 46%;
  filter: drop-shadow(0 0 1.4em rgba(139,92,246,.85));
  user-select: none;
  pointer-events: none;
}
.back-word {
  position: absolute;
  bottom: 10%;
  font-size: 1.1em;
  letter-spacing: .42em;
  color: rgba(255,255,255,.45);
  font-weight: 700;
}
@keyframes back-spin { to { transform: rotate(360deg); } }

/* ---------------------------- la face ---------------------------- */

.card-front {
  background: linear-gradient(170deg, #1a1a26, #0c0c14 60%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2.2em 5em -2.4em #000, inset 0 1px 0 rgba(255,255,255,.1);
  padding: .3em;
}

/* halo coloré derrière la carte, dosé par rareté */
.card::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 2.8em;
  background: radial-gradient(60% 60% at 50% 50%, var(--r-glow), transparent 70%);
  opacity: 0;
  filter: blur(2.6em);
  z-index: -1;
  transition: opacity .45s;
  pointer-events: none;
}
.card.r-rare::after      { opacity: .22; }
.card.r-epic::after      { opacity: .34; }
.card.r-legendary::after { opacity: .48; }
.card.r-mythic::after    { opacity: .62; }
.card.is-facedown::after { opacity: 0 !important; }
/* pareil pour le halo flouté : invisible à petite taille, coûteux en masse */
.card.is-compact::after { display: none; }

/* fond : la pochette floutée, en ambiance derrière tout le cadre */
.card-bg { position: absolute; inset: 0; border-radius: 1.3em; overflow: hidden; z-index: 0; }
/* Un flou d'image coûte cher, et une collection en compte des centaines.
   En vignette il n'apporte rien : on le coupe. */
.card.is-compact .card-bg { display: none; }
.card-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.35);
  filter: blur(2.6em) saturate(1.5) brightness(.5);
  opacity: .55;
}

.card-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding: .8em;
  border-radius: 1.3em;
  border: 1px solid color-mix(in srgb, var(--r-color) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--r-color) 16%, transparent),
    rgba(10,10,18,.55) 30%,
    rgba(8,8,14,.88) 62%,
    rgba(6,6,11,.96));
  overflow: hidden;
}

/* --------------------------- l'illustration --------------------------- */

/* la pochette reste carrée et entière : on la cadre, on ne la rogne pas */
.card-art {
  position: relative;
  width: 69%;
  margin: 0 auto;
  border-radius: .8em;
  overflow: hidden;
  aspect-ratio: 1;
  flex: 0 0 auto;
  background: #0a0a12;
  box-shadow: 0 1em 2.4em -1em #000, inset 0 0 0 1px rgba(255,255,255,.12);
}
.card-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.card:hover .card-art img { transform: scale(1.045); }

.art-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(6,6,12,.6));
  pointer-events: none;
}

/* reflet qui suit le pointeur */
.art-shine {
  position: absolute; inset: 0;
  background: radial-gradient(18em 18em at var(--mx) var(--my), rgba(255,255,255,.34), transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card:hover .art-shine { opacity: 1; }

/* hologramme : la trame arc-en-ciel, dosée par rareté */
.art-holo {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255,0,110,.5) 0%, rgba(255,190,0,.5) 8%, rgba(0,255,163,.5) 16%,
    rgba(0,170,255,.5) 24%, rgba(190,0,255,.5) 32%, rgba(255,0,110,.5) 40%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.card.r-rare      { --holo: .10; }
.card.r-epic      { --holo: .17; }
.card.r-legendary { --holo: .24; }
.card.r-mythic    { --holo: .34; }
.art-holo { opacity: var(--holo, 0); }
.card.r-mythic .art-holo { animation: holo-drift 6s linear infinite; }
.card:hover .art-holo { opacity: calc(var(--holo, 0) + .08); }

@keyframes holo-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* pastilles sur l'illustration */
.chip-explicit,
.chip-score {
  position: absolute;
  top: .7em;
  /* pas de backdrop-filter ici : la pastille est minuscule et il y en a
     deux par carte, donc des centaines dans une collection */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: 2.1em;
  padding: 0 .7em;
  border-radius: 999px;
  font-size: 1.1em;
  font-weight: 700;
  background: rgba(8,8,14,.82);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.chip-explicit { left: .7em; padding: 0 .6em; color: #ffb3c1; }
.chip-score { right: .7em; font-variant-numeric: tabular-nums; }
.score-dot {
  width: .6em; height: .6em; border-radius: 50%;
  background: var(--r-color);
  box-shadow: 0 0 .8em var(--r-color);
}

/* ----------------------------- le bandeau ----------------------------- */

.card-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8em;
  padding: .3em .8em;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--r-color) 44%, transparent),
    color-mix(in srgb, var(--r-color) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--r-color) 50%, transparent);
  flex: 0 0 auto;
}
.band-name {
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px .6em color-mix(in srgb, var(--r-color) 80%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band-stars { display: inline-flex; gap: .1em; flex: 0 0 auto; }
.star { width: 1.1em; height: 1.1em; fill: var(--r-glow); filter: drop-shadow(0 0 .4em var(--r-glow)); }

/* ---------------------------- titre + stats ---------------------------- */

.card-id { flex: 0 0 auto; }
.card-title {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-artist {
  margin-top: .15em;
  font-size: 1.2em;
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.card-stats {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .2em .8em;
  align-content: start;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .5em;
}
.stat { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.stat.is-wide  { grid-column: span 6; }
.stat.is-third { grid-column: span 2; }
.stat-k {
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8em;
  font-weight: 700;
}
.stat-v {
  color: var(--ink);
  font-size: 1.1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* jauge d'écoutes : le lien visible entre popularité et rareté */
.card-meter {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6em;
  font-size: .8em;
  padding-top: .5em;
}
.meter-k { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-3); }
.meter-track {
  height: .5em;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.meter-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--r-color) 45%, transparent), var(--r-glow));
  box-shadow: 0 0 1em var(--r-glow);
}
.meter-v {
  font-size: 1.2em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--r-glow);
  text-shadow: 0 0 1em color-mix(in srgb, var(--r-glow) 55%, transparent);
}

.card-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: .8em;
  font-size: .85em;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: .45em;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* --------------------------- actions au clic --------------------------- */

.card-actions {
  position: absolute;
  left: .9em; right: .9em; bottom: .9em;
  display: flex;
  gap: .6em;
  transform: translateY(calc(100% + 1.4em));
  opacity: 0;
  transition: transform .42s var(--ease-back), opacity .3s;
  z-index: 3;
}
.card.is-active .card-actions,
.card.is-sounding .card-actions { transform: none; opacity: 1; }

.act {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  height: 3.4em;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .9em;
  background: rgba(10,10,18,.88);
  backdrop-filter: blur(10px);
  color: #fff;
  font: inherit;
  font-size: 1.15em;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, transform .15s, border-color .2s;
}
.act:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.act .ico { width: 1.3em; height: 1.3em; fill: currentColor; flex: 0 0 auto; }
.act-label { overflow: hidden; text-overflow: ellipsis; }
/* Le bouton de lecture garde son libelle ; les quatre services se reduisent
   a leur logo, sinon la rangee deborde de la carte. */
.act-play { flex: 1 1 auto; }
.act-deezer, .act-spotify, .act-qobuz, .act-tidal {
  flex: 0 0 auto;
  width: 3.4em;
  padding: 0;
  gap: 0;
}
.act-deezer  { color: #a238ff; border-color: rgba(162,56,255,.45); background: rgba(24,12,34,.9); }
.act-deezer:hover  { background: rgba(162,56,255,.26); }
.act-spotify { color: #1ed760; border-color: rgba(30,215,96,.45); background: rgba(12,32,20,.9); }
.act-spotify:hover { background: rgba(30,215,96,.24); }
.act-qobuz   { color: #7fb2ff; border-color: rgba(127,178,255,.45); background: rgba(12,18,34,.9); }
.act-qobuz:hover   { background: rgba(127,178,255,.24); }
.act-tidal   { color: #e6e6e6; border-color: rgba(230,230,230,.4); background: rgba(16,16,20,.9); }
.act-tidal:hover   { background: rgba(230,230,230,.2); }

@media (max-width: 480px) {
  .act-play .act-label { display: none; }
  .act-play { flex: 0 0 auto; width: 3.4em; gap: 0; }
}
.card.is-sounding .act-play .ico { animation: pulse-ico 1s ease-in-out infinite; }
@keyframes pulse-ico { 50% { opacity: .35; transform: scale(.86); } }

/* voile sombre quand les actions sont ouvertes, pour la lisibilité */
.card.is-active .card-frame::after,
.card.is-sounding .card-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,5,10,.88) 5em, transparent 12em);
  pointer-events: none;
}

/* reflet balayant sur la carte entière */
.card-glare {
  position: absolute; inset: 0;
  border-radius: 1.3em;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.05) 52%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.card:hover .card-glare { animation: glare-sweep 1.1s var(--ease-out); }
@keyframes glare-sweep { to { transform: translateX(120%); } }

/* ------------------------ cadres par rareté ------------------------ */

.card.r-legendary .card-front,
.card.r-mythic .card-front { padding: .2em; }

/* Le liseré conique en rotation est une grande surface repeinte en
   continu : magnifique sur la carte qu'on révèle, ruineux multiplié par
   une collection entière. En vignette on le remplace par un cadre fixe. */
.card.is-compact.r-legendary .card-front::before,
.card.is-compact.r-mythic .card-front::before { display: none; }
.card.is-compact.r-legendary .card-front { box-shadow: 0 2.2em 5em -2.4em #000, 0 0 0 1px var(--r-glow); }
.card.is-compact.r-mythic .card-front    { box-shadow: 0 2.2em 5em -2.4em #000, 0 0 0 1px var(--r-color); }

.card.is-compact.r-legendary .card-frame::before,
.card.is-compact.r-mythic .card-frame::before { display: none; }
.card.is-compact .art-holo { animation: none !important; }

.card.r-legendary .card-front::before,
.card.r-mythic .card-front::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--r-glow) 40deg, #fff 60deg, var(--r-color) 90deg, transparent 150deg,
    transparent 210deg, var(--r-glow) 250deg, #fff 270deg, transparent 330deg);
  animation: frame-spin 4.5s linear infinite;
  opacity: .75;
}
.card.r-mythic .card-front::before {
  background: conic-gradient(from 0deg, #ff3d71, #ffb020, #2ee08a, #3fa9ff, #a855f7, #ff3d71);
  animation-duration: 3.2s;
  opacity: .9;
}
@keyframes frame-spin { to { transform: rotate(360deg); } }

.card.r-epic .card-front      { box-shadow: 0 2.2em 5em -2.4em #000, 0 0 0 1px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.card.r-legendary .card-front { box-shadow: 0 2.6em 6em -2.4em #000, 0 0 4.4em -1.4em rgba(255,176,32,.85); }
.card.r-mythic .card-front    { box-shadow: 0 3em 7em -2.4em #000, 0 0 5.6em -1.2em rgba(255,61,113,.9); }

/* scintillement permanent sur les très hauts paliers */
.card.r-legendary .card-frame::before,
.card.r-mythic .card-frame::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 18% 24%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 72% 16%, #fff, transparent),
    radial-gradient(2px 2px at 84% 62%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 30% 78%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 58% 44%, #fff, transparent);
  opacity: 0;
  animation: twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes twinkle {
  0%,100% { opacity: .10; transform: scale(1); }
  50%     { opacity: .55; transform: scale(1.03); }
}

/* --------------------------- badges --------------------------- */

.card-count,
.card-new {
  position: absolute;
  z-index: 4;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .3em .8em;
  border-radius: 999px;
  pointer-events: none;
}
.card-count {
  top: -.7em; right: -.7em;
  background: #1a1a26;
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.card-new {
  top: -.7em; left: -.7em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 .6em 1.8em -.8em rgba(139,92,246,1);
  animation: new-pop .5s var(--ease-back) both;
}
@keyframes new-pop { from { transform: scale(.4); opacity: 0; } }

/* ---------------------- états de la révélation ---------------------- */

.card.is-reveal {
  --w: var(--cw, min(330px, 74vw, 46vh));
  opacity: 0;
  transform: translateY(46px) scale(.9);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-back);
}
.card.is-reveal.is-in { opacity: 1; transform: none; }

/* le dos encaisse les coups avant de céder */
.card.is-instant .card-inner { transition: none !important; }

.card.is-cracking { animation: card-crack .26s ease-out; }
@keyframes card-crack {
  0%, 100% { transform: none; }
  30%  { transform: translate(-5px, 3px) rotate(-1.1deg); }
  60%  { transform: translate(6px, -4px) rotate(1.3deg); }
}
/* Le dos chauffe de l'intérieur avant de céder. Des traits blancs tracés
   en travers de la carte faisaient « dessin au crayon » : on laisse la
   lumière monter du centre à la place. */
.card.is-cracking .card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 40% at 50% 45%,
    rgba(255,255,255,.55), rgba(255,180,220,.22) 45%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.card.is-popped .card-inner { animation: card-pop .75s cubic-bezier(.2,.7,.3,1); }
/* un reflet balaie la carte au moment où elle se révèle */
.card.is-popped.r-rare .card-glare,
.card.is-popped.r-epic .card-glare,
.card.is-popped.r-legendary .card-glare,
.card.is-popped.r-mythic .card-glare,
.card.is-popped.r-secret .card-glare { animation: glare-sweep 1.1s var(--ease-out) .12s; }
/* écrasement et étirement : la carte s'aplatit sous le choc, rebondit
   en s'allongeant, puis oscille jusqu'au repos */
@keyframes card-pop {
  0%   { transform: scale(1); }
  16%  { transform: scale(calc(var(--pop-scale) * 1.12), calc(var(--pop-scale) * .84)); }
  34%  { transform: scale(.92, 1.12) translateY(-16px); }
  52%  { transform: scale(1.06, .95) translateY(0); }
  70%  { transform: scale(.98, 1.03); }
  86%  { transform: scale(1.01, .99); }
  100% { transform: scale(1); }
}

/* équaliseur quand la carte joue */
.card.is-sounding .card-art::after {
  content: "";
  position: absolute;
  left: .8em; bottom: .8em;
  width: 2.2em; height: 1.4em;
  background:
    linear-gradient(#fff, #fff) 0 100% / .3em 40% no-repeat,
    linear-gradient(#fff, #fff) .6em 100% / .3em 90% no-repeat,
    linear-gradient(#fff, #fff) 1.2em 100% / .3em 60% no-repeat,
    linear-gradient(#fff, #fff) 1.8em 100% / .3em 100% no-repeat;
  animation: eq 900ms steps(1) infinite;
  filter: drop-shadow(0 0 .5em var(--r-glow));
}
@keyframes eq {
  0%   { background-size: .3em 40%, .3em 90%, .3em 60%, .3em 100%; }
  25%  { background-size: .3em 90%, .3em 40%, .3em 100%, .3em 55%; }
  50%  { background-size: .3em 60%, .3em 100%, .3em 45%, .3em 80%; }
  75%  { background-size: .3em 100%, .3em 55%, .3em 85%, .3em 35%; }
}

@media (max-width: 560px) {
  .card { --w: 260px; }
  .card.is-compact { --w: 158px; }
}

/* ---------------- la bascule, sans dependre du navigateur ----------------

   `backface-visibility` suffit en theorie : la face arriere d'un element
   retourne ne doit pas se voir. En pratique Firefox aplatit le contexte 3D
   des qu'un ancetre porte un `filter` ou un `overflow`, et la face avant
   apparait alors EN MIROIR par-dessus le dos, titre lisible a l'envers,
   avant meme que l'animation commence. C'est exactement ce qu'on voyait.

   On double donc la protection par une bascule d'opacite instantanee,
   declenchee a mi-parcours du retournement. Elle ne depend d'aucun rendu
   3D, donc elle marche partout, et elle rend en prime la revelation plus
   nette : la face n'apparait qu'une fois la carte de profil. */
.card-front { opacity: 1; transition: opacity 0s linear .31s; }
.card-back  { opacity: 0; transition: opacity 0s linear .31s; }

.card.is-facedown .card-front { opacity: 0; transition-delay: 0s; }
.card.is-facedown .card-back  { opacity: 1; transition-delay: 0s; }

/* Hors animation, la bascule est immediate : rien a attendre. */
.card:not(.is-flipping) .card-front,
.card:not(.is-flipping) .card-back { transition-delay: 0s; }

/* l'avancement de l'extrait, juste au-dessus des boutons */
.card-prog {
  position: absolute;
  left: .9em; right: .9em;
  bottom: calc(.9em + 3.4em * 1.15 + .55em);
  height: .32em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .3s, transform .3s;
  z-index: 3;
  pointer-events: none;
}
.card-prog i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b660ff, #ff7ad9);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.card.is-sounding .card-prog { opacity: 1; transform: none; }
.card.is-compact .card-prog { display: none; }