/* ======================================================================
   MUSIC FM Classic | Motion refinement • 2026-11-13
   Consistent, restrained feedback. The original design system, editorial
   markers, component geometry and existing JS actions remain authoritative.
   ====================================================================== */

:root {
  --mf-micro-fast: 180ms;
  --mf-micro-standard: 260ms;
  --mf-micro-gentle: 420ms;
  --mf-micro-image: 620ms;
  --mf-micro-ease: cubic-bezier(.22, .72, .24, 1);
}

/* The home-section arrow is LEFT-pointing at rest (RTL).
   Hover/focus: one half-turn, exactly 180 degrees, never a 360-degree spin.
   No translation is mixed into the rotation, so it doesn't jump or drift. */
body:not(.mf-admin) a.mf-micro-arrow-spin > svg[data-mf-icon="arrow"] {
  display: inline-block;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transform: rotate(180deg) !important;
  transition: transform 480ms cubic-bezier(.65, 0, .35, 1) !important;
}
body:not(.mf-admin) a.mf-micro-arrow-spin:focus-visible > svg[data-mf-icon="arrow"] {
  transform: rotate(0deg) !important;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.mf-admin) a.mf-micro-arrow-spin:hover > svg[data-mf-icon="arrow"] {
    transform: rotate(0deg) !important;
  }
}
body:not(.mf-admin) a.mf-micro-arrow-spin {
  transition: color var(--mf-micro-standard) ease, opacity var(--mf-micro-standard) ease !important;
}
body:not(.mf-admin) a.mf-micro-arrow-spin:is(:hover,:focus-visible) {
  color: #126fbd;
}

/* Directional links that are not the half-turn links move only the glyph. */
body:not(.mf-admin) :is(
  .news-read-link,.mf-hd-all,.mf-dd-link,.flash-all,.mf-hd-card-footer > a,
  .help-contact-actions a,.contact-hero-links a,.panel-head > a
):not(.mf-micro-arrow-spin) > svg[data-mf-icon="arrow"] {
  transition: transform var(--mf-micro-standard) var(--mf-micro-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.mf-admin) :is(
    .news-read-link,.mf-hd-all,.mf-dd-link,.flash-all,.mf-hd-card-footer > a,
    .help-contact-actions a,.contact-hero-links a,.panel-head > a
  ):not(.mf-micro-arrow-spin):hover > svg[data-mf-icon="arrow"] {
    transform: translateX(-2px) !important;
  }
}

/* Links, menus and tabs: deliberate color changes, never sliding layout. */
body:not(.mf-admin) :is(
  .site-header a,.v4-mainnav a,.mf-mega a,.mega-menu a,
  .mf-tabs a,.mf-rank-tabs a,.mf-profile-tabs a,
  .section-heading > a,.mf-section-heading > a,.panel-head > a,
  .mf-hd-all,.news-read-link,.mf-dd-link
) {
  transition-property: color, background-color, border-color, opacity;
  transition-duration: var(--mf-micro-standard);
  transition-timing-function: var(--mf-micro-ease);
}

/* Stable editorial cards. Artwork is handled by calm-image-hover / media-hover
   and gently enlarges there. Do not lift cards or create competing transforms. */
body:not(.mf-admin) #mainContent :is(
  .mf-mini-card,.mf-hot-grid > a,.mf-home-album-card,.mf-hd-card,
  .news-directory-card,.album-card,.artist-feature,.artist-card,
  .help-category-card,.playlist-grid > a,.mf-community-post,.concert-card,
  .mf-home-concerts__row,.mf-section-side > article
) {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: var(--mf-micro-standard);
  transition-timing-function: var(--mf-micro-ease);
}

/* Gentle actions: color/border feedback; no enlarged button surfaces that
   compete with the existing press-feedback and JS animation system. */
body:not(.mf-admin) :is(
  a.btn,a.button,a.mf-button,a.mf-btn,.mf-hero-cta,.mf-primary-btn,
  .btn-primary,.btn-outline,.help-contact-actions a,.contact-submit,
  button[type="submit"]
) {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: var(--mf-micro-standard);
  transition-timing-function: var(--mf-micro-ease);
}

/* Form feedback uses color rather than geometry-changing effects. */
body:not(.mf-admin) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  transition-property: border-color, background-color, color, box-shadow;
  transition-duration: var(--mf-micro-standard);
  transition-timing-function: var(--mf-micro-ease);
}

/* The site's established image-only zoom is intentionally subtle. Only
   previously uncovered home artwork needs the same tempo, without changing
   cropping, card dimensions or independent image effects. */
html body:not(.mf-admin) #mainContent :is(
  .mf-home-album-cover > img,.mf-home-concerts__photo > img
) {
  transition: scale var(--mf-micro-image) var(--mf-micro-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body:not(.mf-admin) #mainContent :is(
    .mf-home-album-cover:hover > img,.mf-home-concerts__photo:hover > img
  ) {
    scale: 1.012 !important;
  }
}

/* Keyboard use: the half-turn also responds to focus without depending on
   pointer hover. Other focus-ring styles remain owned by the site. */
body:not(.mf-admin) a.mf-micro-arrow-spin:focus-visible {
  outline: 2px solid #1d77bb;
  outline-offset: 4px;
}
body:not(.mf-admin) :is(main a,main button):focus-visible {
  outline-offset: 3px;
}

/* Do not add interaction feedback to disabled controls. */
body:not(.mf-admin) :is(button:disabled,[aria-disabled="true"]) {
  transition: none !important;
}

/* Motion accessibility: reduced-motion mode keeps the original arrow facing
   left and removes only these new effects. Other UX accessibility layers are
   deliberately left in place. */
@media (prefers-reduced-motion: reduce) {
  body:not(.mf-admin) a.mf-micro-arrow-spin > svg[data-mf-icon="arrow"],
  body:not(.mf-admin) a.mf-micro-arrow-spin:is(:hover,:focus-visible) > svg[data-mf-icon="arrow"] {
    transform: rotate(180deg) !important;
  }
  body:not(.mf-admin) a.mf-micro-arrow-spin,
  body:not(.mf-admin) a.mf-micro-arrow-spin > svg[data-mf-icon="arrow"],
  body:not(.mf-admin) #mainContent :is(.mf-home-album-cover > img,.mf-home-concerts__photo > img) {
    transition: none !important;
    scale: 1 !important;
  }
}
html[data-mf-a11y-reduced-motion="on"] body:not(.mf-admin) a.mf-micro-arrow-spin > svg[data-mf-icon="arrow"],
html[data-mf-a11y-reduced-motion="on"] body:not(.mf-admin) a.mf-micro-arrow-spin:is(:hover,:focus-visible) > svg[data-mf-icon="arrow"] {
  transform: rotate(180deg) !important;
}
html[data-mf-a11y-reduced-motion="on"] body:not(.mf-admin) :is(
  a.mf-micro-arrow-spin,a.mf-micro-arrow-spin > svg[data-mf-icon="arrow"],
  #mainContent .mf-home-album-cover > img,#mainContent .mf-home-concerts__photo > img
) {
  transition: none !important;
  scale: 1 !important;
}


/* Canonical MUSIC FM title-marker preservation.
   The editorial brush is *still* generated only by assets/js/title-markers.js
   and styled by classic-refinement / the editorial bundle. This rule adds no
   replacement gradient, rectangle or pseudo-element and does not affect
   reduced-motion preferences or the existing 180-degree arrow animation. */
@media screen and (forced-colors: none) {
  html:not([data-mf-a11y-contrast="high"]) body [data-mf-marker-heading][data-mf-marker-ready] {
    position: relative;
    isolation: isolate;
  }
  html:not([data-mf-a11y-contrast="high"]) body [data-mf-marker-heading][data-mf-marker-ready] > [data-mf-marker-layer] {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
  }
}