/* KYMA media polish: HOME carousel + Music Dock surface design only. */

/* Carousel: preserve every 3D/geometry value and refine only the card surface. */
.cardFace{
  border-radius:12px;
}
.cardFront{
  border-color:rgba(255,255,255,.68);
  background:#efe3f2;
  box-shadow:
    0 8px 20px rgba(57,38,64,.14),
    0 24px 50px rgba(96,65,108,.12),
    inset 0 0 0 1px rgba(213,168,227,.10);
  transition:border-color var(--kyma-motion-base) var(--kyma-ease-ui),box-shadow var(--kyma-motion-base) var(--kyma-ease-ui);
}
.cardFront::after{
  background:linear-gradient(180deg,transparent 0%,rgba(70,43,77,.08) 24%,rgba(45,26,51,.74) 100%);
}
.cardFront img{
  transition:transform var(--kyma-motion-slow) var(--kyma-ease-emphasis),filter var(--kyma-motion-slow) var(--kyma-ease-ui);
}
.youtubeCardCopy strong{
  color:#fff;
  font-weight:600;
  text-shadow:0 1px 5px rgba(36,21,41,.30);
}
.youtubeCardCopy small{
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 4px rgba(36,21,41,.22);
}
.cardBack{
  border-color:rgba(229,202,234,.42);
  background:rgba(231,211,239,.50);
  box-shadow:
    0 8px 20px rgba(78,49,87,.08),
    0 18px 42px rgba(96,65,108,.08);
  opacity:.62;
}
.cardBack img{
  opacity:.30;
  filter:blur(3px) saturate(.88);
}
.cardBack::after{
  background:linear-gradient(135deg,rgba(249,240,251,.72),rgba(197,139,207,.30));
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.cardBackMark{
  color:rgba(255,255,255,.86);
  font-weight:600;
  letter-spacing:.28em;
  opacity:.58;
  text-shadow:0 1px 6px rgba(72,45,80,.18);
}
.emptyMessage{
  border-color:rgba(197,139,207,.42);
  background:rgba(255,255,255,.90);
  box-shadow:var(--kyma-shadow-soft);
  color:#76577d;
}

@media(hover:hover){
  .youtubeCard:hover .cardFront{
    border-color:rgba(244,225,248,.92);
    box-shadow:
      0 10px 24px rgba(57,38,64,.16),
      0 28px 56px rgba(96,65,108,.15),
      inset 0 0 0 1px rgba(213,168,227,.16);
  }
  .youtubeCard:hover .cardFront img{
    transform:scale(1.03);
    filter:saturate(1.04);
  }
}

/* Music Dock: one calm media-card surface; geometry and player structure remain untouched. */
.musicDock{
  border-color:rgba(183,145,193,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(250,245,251,.91));
  box-shadow:
    0 10px 28px rgba(62,39,69,.08),
    0 24px 58px rgba(96,65,108,.08),
    inset 0 1px 0 rgba(255,255,255,.94);
}
.playerMount{
  border-color:rgba(222,191,228,.62);
  background:#171219;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 22px rgba(54,34,60,.12),
    0 0 0 1px rgba(197,139,207,.06);
}
.compactTrack span,
.trackCopy .eyebrow{
  color:#a579ad;
  font-weight:400;
  opacity:.82;
}
.compactTrack strong,
.trackCopy strong{
  color:#4f3a55;
  font-weight:400;
}
.trackCopy small{
  color:#907b94;
  opacity:.82;
}
.musicDrawerToggle{
  border-color:rgba(203,167,211,.48);
  background:rgba(250,244,251,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 2px 7px rgba(96,65,108,.055);
  color:#816589;
}
.musicDockDrawer{
  background:linear-gradient(180deg,rgba(247,236,250,.20),transparent 28%);
  box-shadow:inset 0 1px 0 rgba(210,181,217,.34);
}
.musicControls button:not(.playBtn){
  color:#806b85;
  background:transparent;
  box-shadow:none;
}
.musicControls .playBtn{
  background:linear-gradient(145deg,#d7a9e0,#b979c6);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 5px 13px rgba(111,67,122,.18);
}
.progressWrap{
  color:#958399;
}
.progressWrap input[type=range]{
  accent-color:#b878c5;
}
.volumeWrap button{
  color:#9a869e;
  opacity:.84;
}
.volumeWrap input[type=range]{
  accent-color:#c498cd;
}
.playlistPanel{
  border-top-color:rgba(200,169,207,.38);
}
.playlistPanel header span{
  color:#a77caf;
  opacity:.82;
}
.playlistPanel header strong{
  color:#66506b;
}
.playlistItem{
  background:rgba(255,255,255,.58);
}
.playlistItem.active{
  border-color:rgba(197,139,207,.72);
  background:linear-gradient(90deg,rgba(247,236,250,.92),rgba(255,255,255,.80));
  box-shadow:inset 3px 0 0 rgba(185,120,198,.74),var(--kyma-shadow-soft);
}
.playlistItem.active strong{
  color:#4d3653;
}
.playlistItem.active small,
.playlistItem.active .playlistNow{
  color:#8d5d98;
}

@media(hover:hover){
  .musicDrawerToggle:hover{
    border-color:rgba(197,139,207,.68);
    background:rgba(247,236,250,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 5px 12px rgba(96,65,108,.09);
  }
  .musicControls button:not(.playBtn):hover{
    background:rgba(244,231,246,.66);
    box-shadow:none;
  }
  .musicControls .playBtn:hover{
    background:linear-gradient(145deg,#ddb2e5,#b56fc2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 7px 16px rgba(111,67,122,.22);
  }
  .playlistItem:hover{
    box-shadow:0 6px 16px rgba(96,65,108,.08);
  }
}