/* MUSIC FM Classic — media and card hover, shared across the site.
   Keep all editorial rectangles stationary and shadow-free. Animate artwork
   very gently without modifying the existing layout, colors or borders. */

/* The site still contains older high-priority hover shadow declarations.
   Keep this sheet LAST in both shared heads. */
html body:not(.mf-admin) #mainContent :is(
  .mf-calm-image-surface,
  .mf-mini-card,.mf-hd-card,.mf-hot-grid>a,.mf-section-lead>a,.mf-lead-image,
  .news-top-card,.news-row,.news-directory-card,.mf-article-related-card,
  .mf-latest-song,.mf-music-row,.artist-profile-card,.editorial-artist,
  .album-card,.profile-feature-card,.profile-library-card,
  article:has(img),a:has(img),li:has(>a img),
  [class*="-card"]:has(img),[class*="__card"]:has(img),
  [class*="-tile"]:has(img),[class*="__tile"]:has(img),
  [class*="-story"]:has(img),[class*="__story"]:has(img),
  [class*="-feature"]:has(img),[class*="__feature"]:has(img),
  [class*="-row"]:has(img),[class*="__row"]:has(img)
){
  box-shadow:none!important;
  transition-property:background-color,border-color,color,opacity!important;
  transition-duration:260ms!important;
  transition-timing-function:cubic-bezier(.22,.7,.25,1)!important;
}

@media (hover:hover) and (pointer:fine){
  html body:not(.mf-admin) #mainContent :is(
    .mf-calm-image-surface,.mf-mini-card,.mf-hd-card,.mf-hot-grid>a,
    .mf-section-lead>a,.mf-lead-image,.news-top-card,.news-row,
    .news-directory-card,.mf-article-related-card,.mf-latest-song,
    .mf-music-row,.artist-profile-card,.editorial-artist,.album-card,
    .profile-feature-card,.profile-library-card,article:has(img),
    a:has(img),li:has(>a img),[class*="-card"]:has(img),
    [class*="__card"]:has(img),[class*="-tile"]:has(img),
    [class*="__tile"]:has(img),[class*="-story"]:has(img),
    [class*="__story"]:has(img),[class*="-feature"]:has(img),
    [class*="__feature"]:has(img),[class*="-row"]:has(img),
    [class*="__row"]:has(img)
  ):hover{
    box-shadow:none!important;
    transform:none!important;
    translate:none!important;
    rotate:none!important;
    scale:1!important;
  }
  /* Remove shadows from decorative layers of media tiles as well. */
  html body:not(.mf-admin) #mainContent :is(
    .mf-mini-card,.mf-calm-image-surface,.news-top-card,
    .news-row,.news-directory-card,.album-card,.artist-profile-card
  ):hover::before,
  html body:not(.mf-admin) #mainContent :is(
    .mf-mini-card,.mf-calm-image-surface,.news-top-card,
    .news-row,.news-directory-card,.album-card,.artist-profile-card
  ):hover::after{
    box-shadow:none!important;
  }
}

/* The image (not the whole card) receives a tiny, clipped, slow zoom. */
html body:not(.mf-admin) #mainContent :is(
  .mf-calm-image-media,.mini-media img,.mf-lead-image>img,
  .mf-hot-grid>a img,.mf-section-lead>a img,
  .news-top-card img,.news-row img,.news-directory-card img,
  .mf-article-related-card img,.mf-latest-song img,.mf-music-row img,
  .artist-profile-card img,.editorial-artist img,.album-card img
){
  box-shadow:none!important;
  transform:none!important;
  scale:1!important;
  transition:scale 560ms cubic-bezier(.22,.72,.24,1)!important;
}
@media (hover:hover) and (pointer:fine){
  html body:not(.mf-admin) #mainContent :is(
    .mf-calm-image-surface:hover .mf-calm-image-media,
    .mf-mini-card:hover .mini-media img,
    .mf-lead-image:hover>img,.mf-hot-grid>a:hover img,
    .mf-section-lead>a:hover img,.news-top-card:hover img,
    .news-row:hover img,.news-directory-card:hover img,
    .mf-article-related-card:hover img,.mf-latest-song:hover img,
    .mf-music-row:hover img,.artist-profile-card:hover img,
    .editorial-artist:hover img,.album-card:hover img
  ){
    box-shadow:none!important;
    transform:none!important;
    scale:1.012!important;
  }
}

/* The admin uses a separate layout shell; keep media cards quiet there too,
   without suppressing focus rings, dropdown shadows or dialog elevation. */
html body.mf-admin :is(#admin-main,.adm-main,main) :is(
  article:has(img),a:has(img),li:has(>a img),
  [class*="-card"]:has(img),[class*="__card"]:has(img),
  [class*="-tile"]:has(img),[class*="__tile"]:has(img)
){
  box-shadow:none!important;
  transition-property:background-color,border-color,color,opacity!important;
  transition-duration:260ms!important;
}
@media (hover:hover) and (pointer:fine){
  html body.mf-admin :is(#admin-main,.adm-main,main) :is(
    article:has(img),a:has(img),li:has(>a img),
    [class*="-card"]:has(img),[class*="__card"]:has(img),
    [class*="-tile"]:has(img),[class*="__tile"]:has(img)
  ):hover{
    box-shadow:none!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }
}

/* No artificial hover movement for touch or accessibility reduced motion. */
@media (prefers-reduced-motion:reduce){
  html body:not(.mf-admin) #mainContent .mf-calm-image-media,
  html body:not(.mf-admin) #mainContent .mini-media img{
    transition:none!important;
    scale:1!important;
  }
}
html[data-mf-a11y-reduced-motion="on"] body:not(.mf-admin) #mainContent :is(.mf-calm-image-media,.mini-media img){
  transition:none!important;
  scale:1!important;
}
@media (prefers-reduced-motion:reduce){
  html body:not(.mf-admin) #mainContent :is(
    .mf-mini-card:hover .mini-media img,.mf-calm-image-surface:hover .mf-calm-image-media,
    .mf-lead-image:hover>img,.mf-hot-grid>a:hover img
  ){scale:1!important}
}
html[data-mf-a11y-reduced-motion="on"] body:not(.mf-admin) #mainContent :is(
  .mf-mini-card:hover .mini-media img,.mf-calm-image-surface:hover .mf-calm-image-media,
  .mf-lead-image:hover>img,.mf-hot-grid>a:hover img
){scale:1!important}