/* A real CSS perspective Cover Flow. Cover artwork remains the main content. */
.coverflow {
  --cf-cover: clamp(250px, 28vw, 346px);
  --cf-drag-x: 0px;
  --cf-ease: cubic-bezier(.22,.75,.18,1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f2f3f5;
  background:
    radial-gradient(ellipse at 50% 14%, #62687525, transparent 48%),
    radial-gradient(ellipse at 85% 85%, #ff613e0b, transparent 48%),
    linear-gradient(150deg, #17191d, #07090c 72%);
  border: 1px solid #ffffff26;
  border-top-color: #ffffff45;
  border-radius: 28px;
  box-shadow: inset 0 1px 0 #ffffff0b, 0 20px 55px #0002;
  padding: 28px 30px 26px;
  -webkit-tap-highlight-color: transparent;
}
.coverflow:focus-visible { outline: 2px solid var(--orange, #ff613e); outline-offset: 5px; }
.coverflow button { font-family: inherit; }
.cf-topline { display: flex; justify-content: space-between; gap: 20px; position: relative; z-index: 5; }
.cf-label, .cf-top-count, .cf-hint { font-size: 8px; font-weight: 550; letter-spacing: .15em; }
.cf-label { display: inline-flex; align-items: center; gap: 9px; color: #c5c8ce; }
.cf-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange, #ff613e); box-shadow: 0 0 12px #ff613e55; }
.cf-top-count { color: #a7aab2; font-variant-numeric: tabular-nums; }
.cf-viewport {
  position: relative;
  height: calc(var(--cf-cover) + 120px);
  margin: 0 -30px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.cf-cards {
  position: absolute;
  inset: 0;
  perspective: 1150px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}
.cf-floor {
  position: absolute;
  bottom: 20px;
  left: 9%;
  width: 82%;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #a7afc419, #9195a507 45%, transparent 70%);
  pointer-events: none;
}
.cf-card {
  --cf-x: 0px;
  --cf-z: -600px;
  --cf-angle: 0deg;
  --cf-brightness: 1;
  position: absolute;
  left: 50%;
  top: 44px;
  width: var(--cf-cover);
  aspect-ratio: 1;
  transform: translateX(calc(-50% + var(--cf-x) + var(--cf-drag-x))) translateZ(var(--cf-z)) rotateY(var(--cf-angle));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform .68s var(--cf-ease), opacity .55s ease, visibility .55s;
  opacity: 1;
  will-change: transform;
}
.cf-card[data-offset='0'] { --cf-z: 72px; opacity: 1; z-index: 10; }
.cf-card[data-offset='-1'] { --cf-x: calc(var(--cf-cover) * -.77); --cf-z: -90px; --cf-angle: 54deg; --cf-brightness: .76; z-index: 9; }
.cf-card[data-offset='1'] { --cf-x: calc(var(--cf-cover) * .77); --cf-z: -90px; --cf-angle: -54deg; --cf-brightness: .76; z-index: 9; }
.cf-card[data-offset='-2'] { --cf-x: calc(var(--cf-cover) * -1.26); --cf-z: -210px; --cf-angle: 61deg; --cf-brightness: .49; z-index: 8; }
.cf-card[data-offset='2'] { --cf-x: calc(var(--cf-cover) * 1.26); --cf-z: -210px; --cf-angle: -61deg; --cf-brightness: .49; z-index: 8; }
.cf-card[data-offset='-3'] { --cf-x: calc(var(--cf-cover) * -1.78); --cf-z: -330px; --cf-angle: 65deg; --cf-brightness: .29; z-index: 7; }
.cf-card[data-offset='3'] { --cf-x: calc(var(--cf-cover) * 1.78); --cf-z: -330px; --cf-angle: -65deg; --cf-brightness: .29; z-index: 7; }
.cf-card.is-far { visibility: hidden; opacity: 0; pointer-events: none; will-change: auto; }
.cf-cover-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff34;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  background: #22252c;
  color: #fff;
  box-shadow: 0 15px 35px #0006, inset 0 1px 0 #fff3;
  filter: brightness(var(--cf-brightness));
  transition: filter .55s ease;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cf-cover-button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(130deg, #ffffff17, transparent 40%, #0000000a); pointer-events: none; box-shadow: inset 0 1px 0 #ffffff24; }
.cf-cover-button:focus-visible { outline-offset: -5px; }
.cf-cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #323741, #16191d); color: #a9aeb8; font-size: 70px; font-weight: 500; letter-spacing: -.06em; }
.cf-cover-image { position: relative; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cf-reflection {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  height: 100%;
  opacity: calc(.26 * var(--cf-brightness));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #0009, transparent 52%);
  mask-image: linear-gradient(to bottom, #0009, transparent 52%);
  overflow: hidden;
  border-radius: 12px;
}
.cf-reflection img { width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1); }
.cf-cover-play {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff65;
  border-radius: 50%;
  color: #fff;
  background: #17191daa;
  box-shadow: inset 0 1px 0 #ffffff38, 0 5px 20px #0003;
  opacity: 0;
  transform: scale(.86);
  transition: opacity .3s, transform .3s var(--cf-ease), background-color .25s;
}
.cf-cover-play svg { width: 22px; height: 22px; }
.cf-card.is-selected .cf-cover-play { opacity: 1; transform: scale(1); }
.cf-card.is-selected .cf-cover-button:hover .cf-cover-play,
.cf-card.is-playing .cf-cover-play { background: var(--orange, #ff613e); border-color: #ffc0adbb; color: #111; }
.cf-card.is-playing .cf-cover-button { border-color: #ff8c7099; }
.cf-info { position: relative; z-index: 4; text-align: center; pointer-events: none; margin-top: -9px; padding: 0 15%; }
.cf-title { font-size: clamp(21px, 2.3vw, 30px); font-weight: 550; letter-spacing: -.04em; line-height: 1.2; overflow-wrap: anywhere; }
.cf-artist { color: #aaafb8; font-size: 12px; margin-top: 8px; }
.cf-bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; position: relative; z-index: 5; margin-top: 26px; }
.cf-hint { color: #8e949e; font-size: 7px; letter-spacing: .1em; }
.cf-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 8px;
  border: 1px solid #ffffff23;
  border-top-color: #ffffff45;
  border-radius: 40px;
  background: linear-gradient(150deg, #ffffff0f, #ffffff03), #1c2024ec;
  box-shadow: inset 0 1px 0 #ffffff0e, 0 10px 30px #0004;
}
.cf-control { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; background: transparent; border-radius: 50%; color: #d1d5de; transition: background .2s, transform .2s; }
.cf-control svg { width: 21px; height: 21px; }
.cf-control:hover { background: #ffffff14; color: #fff; }
.cf-control:active { transform: scale(.94); }
.cf-main-play { width: 44px; height: 44px; color: #111; background: linear-gradient(155deg, #ff947a, var(--orange, #ff613e)); border: 1px solid #ffb29d9c; box-shadow: inset 0 1px 0 #ffffff40, 0 4px 14px #0003; }
.cf-main-play:hover { color: #111; background: #ff8668; }
.cf-main-play.is-loading { animation: cf-loading 1s ease-in-out infinite alternate; }
.cf-count { padding: 0 0 0 9px; margin-left: 4px; border-left: 1px solid #ffffff20; color: #c0c5ce; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .07em; white-space: nowrap; }
.cf-project { display: inline-flex; align-items: center; gap: 12px; justify-self: end; background: none; padding: 12px 0 12px 12px; color: #d6dae0; font-size: 11px; }
.cf-project svg { width: 16px; height: 16px; }
.cf-project:hover { color: var(--orange, #ff613e); }
.cf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.coverflow.is-dragging .cf-viewport { cursor: grabbing; }
.coverflow.is-dragging .cf-card { transition: none; }
@keyframes cf-loading { to { opacity: .55; } }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cf-controls { background-color: #25292dcc; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
  .cf-cover-play { background-color: #17191d80; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
}
@media (min-width: 1500px) { .coverflow { --cf-cover: 366px; } }
@media (max-width: 900px) {
  .cf-bottom { grid-template-columns: 1fr auto; }
  .cf-hint { display: none; }
  .cf-controls { justify-self: start; }
}
@media (max-width: 760px) {
  .coverflow { --cf-cover: 210px; padding: 22px 18px 22px; border-radius: 24px; }
  .cf-topline { gap: 12px; }
  .cf-label { font-size: 7px; letter-spacing: .09em; }
  .cf-top-count { font-size: 6px; letter-spacing: .06em; }
  .cf-viewport { margin: 0 -18px; height: 310px; }
  .cf-cards { perspective: 850px; perspective-origin: 50% 40%; }
  .cf-card { top: 39px; }
  .cf-card[data-offset='0'] { --cf-z: 40px; }
  .cf-card[data-offset='-1'] { --cf-x: calc(var(--cf-cover) * -.73); --cf-z: -86px; }
  .cf-card[data-offset='1'] { --cf-x: calc(var(--cf-cover) * .73); --cf-z: -86px; }
  .cf-card[data-offset='-2'] { --cf-x: calc(var(--cf-cover) * -1.24); --cf-z: -186px; }
  .cf-card[data-offset='2'] { --cf-x: calc(var(--cf-cover) * 1.24); --cf-z: -186px; }
  .cf-card[data-offset='-3'], .cf-card[data-offset='3'] { opacity: 0; pointer-events: none; visibility: hidden; }
  .cf-cover-button, .cf-reflection { border-radius: 9px; }
  .cf-cover-play { width: 40px; height: 40px; bottom: 12px; right: 12px; }
  .cf-cover-play svg { width: 20px; height: 20px; }
  .cf-info { padding: 0 6px; margin-top: -3px; }
  .cf-title { font-size: 22px; }
  .cf-artist { font-size: 10px; margin-top: 7px; }
  .cf-bottom { margin-top: 22px; gap: 12px; }
  .cf-controls { padding: 6px 10px 6px 5px; gap: 2px; }
  .cf-control { width: 40px; height: 44px; min-width: 40px; min-height: 44px; padding: 9px; }
  .cf-main-play { width: 44px; height: 44px; min-width: 44px; }
  .cf-count { font-size: 8px; padding-left: 7px; margin-left: 3px; }
  .cf-project { gap: 6px; min-height: 44px; font-size: 9px; padding-left: 0; }
  .cf-project svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  .coverflow { --cf-cover: 190px; padding-inline: 14px; }
  .cf-viewport { height: 287px; margin-inline: -14px; }
  .cf-top-count { max-width: 112px; text-align: right; line-height: 1.6; }
  .cf-bottom { gap: 8px; }
  .cf-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-card, .cf-cover-button, .cf-cover-play, .cf-control { transition: none; }
  .cf-main-play.is-loading { animation: none; }
  .coverflow.is-dragging .cf-card { transform: translateX(calc(-50% + var(--cf-x))) translateZ(var(--cf-z)) rotateY(var(--cf-angle)); }
}
@media (prefers-reduced-transparency: reduce) {
  .cf-controls, .cf-cover-play { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #25292d; }
  .cf-reflection { display: none; }
}