/* PATCH_ID: b2c_phase5e16_artist_hover_motion_stage_safe_20260522 */

/* Hot artists: remove default link underline completely. */
.b2c-home-native-cms .b2c-artists-section a,
.b2c-home-native-cms .b2c-artists-section a:visited,
.b2c-home-native-cms .b2c-artists-section a:hover,
.b2c-home-native-cms .b2c-artists-section a:active,
.b2c-home-native-cms .b2c-artists-section .chip-card,
.b2c-home-native-cms .b2c-artists-section .chip-card *,
.b2c-home-native-cms .b2c-artists-section .chip-card b{
  text-decoration:none !important;
}

/* Card base: more app-like hover state, but still close to current design. */
.b2c-home-native-cms .b2c-artists-section .chip-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:84px;
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s cubic-bezier(.2,.8,.2,1),
    border-color .26s ease,
    background .26s ease;
  will-change:transform;
}

.b2c-home-native-cms .b2c-artists-section .chip-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(circle at 15% 50%, rgba(220,180,255,.22), transparent 42%),
    linear-gradient(90deg, rgba(255,246,252,.84), rgba(255,255,255,.84));
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .26s ease, transform .26s ease;
  z-index:-1;
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover{
  transform:translateY(-4px);
  border-color:rgba(184,133,225,.34);
  box-shadow:
    0 22px 48px rgba(116,55,146,.14),
    0 0 0 1px rgba(255,255,255,.72) inset;
  background:rgba(255,255,255,.92);
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover::before{
  opacity:1;
  transform:translateX(0);
}

/* Icon expands and becomes the visual anchor. */
.b2c-home-native-cms .b2c-artists-section .chip-img{
  transform-origin:center;
  transition:
    width .26s cubic-bezier(.2,.8,.2,1),
    height .26s cubic-bezier(.2,.8,.2,1),
    flex-basis .26s cubic-bezier(.2,.8,.2,1),
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s ease,
    border-radius .26s ease;
  will-change:transform,width,height;
  z-index:2;
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover .chip-img{
  width:58px;
  height:58px;
  flex-basis:58px;
  transform:scale(1.08) rotate(-2deg);
  border-radius:19px;
  box-shadow:
    0 14px 28px rgba(130,74,170,.20),
    0 0 0 4px rgba(255,255,255,.68);
}

/* Original small text fades back, so the pushed-in label gets focus. */
.b2c-home-native-cms .b2c-artists-section .chip-card > span:not(.artist-hover-name){
  transition:opacity .20s ease, transform .24s ease, filter .24s ease;
  will-change:opacity,transform;
  z-index:1;
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover > span:not(.artist-hover-name){
  opacity:0;
  transform:translateX(-8px);
  filter:blur(2px);
}

/* New text slides from the right and locks beside the enlarged icon. */
.b2c-home-native-cms .b2c-artists-section .artist-hover-name{
  position:absolute;
  left:88px;
  right:18px;
  top:50%;
  transform:translate(34px,-50%);
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  min-width:0;
  color:#24162f;
  font-size:15px;
  font-weight:950;
  line-height:1.15;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:
    opacity .25s ease .04s,
    transform .30s cubic-bezier(.2,.8,.2,1) .02s;
  z-index:3;
}

.b2c-home-native-cms .b2c-artists-section .artist-hover-name::after{
  content:"›";
  margin-left:8px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(244,232,255,.95);
  color:#8b5cf6;
  font-size:16px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(110,60,145,.10);
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover .artist-hover-name{
  opacity:1;
  transform:translate(0,-50%);
}

/* Small shimmer line on hover: subtle, not flashy. */
.b2c-home-native-cms .b2c-artists-section .chip-card::after{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  width:36px;
  left:-44px;
  transform:skewX(-16deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  opacity:0;
  transition:left .55s ease, opacity .26s ease;
  z-index:4;
  pointer-events:none;
}

.b2c-home-native-cms .b2c-artists-section .chip-card:hover::after{
  left:calc(100% + 20px);
  opacity:.7;
}

/* Keyboard accessibility mirrors hover. */
.b2c-home-native-cms .b2c-artists-section .chip-card:focus-visible{
  outline:3px solid rgba(168,85,247,.25);
  outline-offset:3px;
  transform:translateY(-4px);
}

.b2c-home-native-cms .b2c-artists-section .chip-card:focus-visible .chip-img{
  width:58px;
  height:58px;
  flex-basis:58px;
  transform:scale(1.08);
}

.b2c-home-native-cms .b2c-artists-section .chip-card:focus-visible > span:not(.artist-hover-name){
  opacity:0;
  transform:translateX(-8px);
}

.b2c-home-native-cms .b2c-artists-section .chip-card:focus-visible .artist-hover-name{
  opacity:1;
  transform:translate(0,-50%);
}

/* Touch devices: no hover trap, keep stable layout. */
@media (hover:none){
  .b2c-home-native-cms .b2c-artists-section .chip-card:hover{
    transform:none;
  }
  .b2c-home-native-cms .b2c-artists-section .chip-card:hover .chip-img{
    width:48px;
    height:48px;
    flex-basis:48px;
    transform:none;
  }
  .b2c-home-native-cms .b2c-artists-section .chip-card:hover > span:not(.artist-hover-name){
    opacity:1;
    transform:none;
    filter:none;
  }
  .b2c-home-native-cms .b2c-artists-section .chip-card:hover .artist-hover-name{
    opacity:0;
    transform:translate(34px,-50%);
  }
}