/* RELEASE 173 — left panel fill mask
   Scope: the four left HUD panels in the artist hero only. */

body[data-route="artist"] .r159Brand,
body[data-route="artist"] .r159Music,
body[data-route="artist"] .r159Travel,
body[data-route="artist"] .r159Creative,
body[data-route="artist"] button.r159Music:hover,
body[data-route="artist"] button.r159Travel:hover,
body[data-route="artist"] button.r159Creative:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* The former full-panel sweep followed the rectangular HTML box instead of
   the inset face of the baked HUD frame. */
body[data-route="artist"] .r159Brand::after,
body[data-route="artist"] .r159Music::after,
body[data-route="artist"] .r159Travel::after,
body[data-route="artist"] .r159Creative::after {
  display: none !important;
  background: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Identity panel: the fill now occupies only the inner display surface. */
body[data-route="artist"] .r159Brand::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 5.5% !important;
  right: 2.8% !important;
  bottom: 6.5% !important;
  left: 2.8% !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  clip-path: polygon(3.2% 0, 96.5% 0, 100% 12%, 100% 88%, 96.5% 100%, 3.2% 100%, 0 88%, 0 12%) !important;
  background:
    linear-gradient(90deg, transparent, rgba(90, 225, 248, .34), rgba(184, 89, 240, .18), transparent) 7% 7% / 86% 1px no-repeat,
    radial-gradient(ellipse at 17% 4%, rgba(51, 144, 205, .09), transparent 61%),
    linear-gradient(118deg, rgba(2, 10, 22, .30), rgba(3, 9, 22, .17) 58%, rgba(11, 5, 25, .16)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(96, 205, 248, .052),
    inset 0 0 1cqw rgba(39, 114, 189, .04) !important;
  pointer-events: none !important;
}

/* Feature panels need a larger right inset because their outer frames have
   deep illuminated connector corners. */
body[data-route="artist"] .r159Music::before,
body[data-route="artist"] .r159Travel::before,
body[data-route="artist"] .r159Creative::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 5% !important;
  right: 4.2% !important;
  bottom: 6% !important;
  left: 2.4% !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  clip-path: polygon(3% 0, 96.5% 0, 100% 12%, 100% 88%, 96.5% 100%, 3% 100%, 0 88%, 0 12%) !important;
  background:
    linear-gradient(90deg, transparent, rgba(90, 225, 248, .29), rgba(184, 89, 240, .14), transparent) 7% 7% / 86% 1px no-repeat,
    radial-gradient(ellipse at 16% 5%, rgba(51, 144, 205, .085), transparent 61%),
    linear-gradient(118deg, rgba(2, 10, 22, .28), rgba(3, 9, 22, .16) 58%, rgba(11, 5, 25, .15)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(96, 205, 248, .048),
    inset 0 0 1cqw rgba(39, 114, 189, .038) !important;
  pointer-events: none !important;
}

body[data-route="artist"] .r161BrandMark,
body[data-route="artist"] .r159IconRing {
  z-index: 1 !important;
}
