/* Player wallpaper motion: CSS-only layers over the existing event/Signature artwork.
   Artwork, titles and logos stay pixel-identical (no AI regeneration).
   Hosts: Player Profile .player-head and Compare .compare-player-head.
   Tiers (data-motion set in players/app.js and compare/app.js):
   signature = zoom + sweep + sparks · box = zoom + sweep · base = zoom only. */
:is(.player-head,.compare-player-head) .profile-motion,
:is(.player-head,.compare-player-head) .profile-motion-zoom,
:is(.player-head,.compare-player-head) .profile-motion .pm-sweep,
:is(.player-head,.compare-player-head) .profile-motion .pm-sparks{display:none;}

/* 1) Slow zoom (every wallpaper): a direct child inheriting the host's full background stack, 1 → 1.10 → 1 every 10s. */
.player-head[data-event-set] .profile-motion-zoom,
.player-head[data-event-wallpaper] .profile-motion-zoom,
.compare-player-head[data-profile-wallpaper] .profile-motion-zoom{
  display:block;
  pointer-events:none;
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:inherit;
  transform-origin:50% 40%;
  will-change:transform;
  animation:pm-zoom 5s ease-in-out infinite alternate;
}

/* Overlay host for sweep/sparks (Signature and Box only). */
:is(.player-head,.compare-player-head):is([data-motion="signature"],[data-motion="box"]) .profile-motion{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
/* Compare heads keep name/OVR text in normal flow, so the overlay sits behind it (above the zoom layer). */
.compare-player-head .profile-motion{z-index:-1!important;}

/* 2) Light sweep in the event accent colour, idle most of the cycle. */
:is(.player-head,.compare-player-head):is([data-motion="signature"],[data-motion="box"]) .profile-motion .pm-sweep{
  display:block;
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:0;
  width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(var(--profile-accent-rgb,140,219,104),.10) 38%,rgba(255,255,255,.16) 50%,rgba(var(--profile-accent-rgb,140,219,104),.10) 62%,transparent 100%);
  mix-blend-mode:screen;
  transform:translateX(-140%) skewX(-14deg);
  will-change:transform;
  animation:pm-sweep 8s cubic-bezier(.45,.05,.35,1) infinite;
}
:is(.player-head,.compare-player-head)[data-motion="signature"] .profile-motion .pm-sweep{animation-duration:9.5s;}

/* 3) Floating sparks (Signature only): two tiled particle layers drifting upward at different speeds. */
:is(.player-head,.compare-player-head)[data-motion="signature"] .profile-motion .pm-sparks{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:calc(100% + 240px);
  background:
    radial-gradient(circle at 22px 40px,rgba(255,255,255,.9) 0 1px,rgba(var(--profile-accent-rgb,140,219,104),.55) 1.5px,transparent 3.5px),
    radial-gradient(circle at 131px 96px,rgba(255,255,255,.85) 0 1px,rgba(var(--profile-accent-rgb,140,219,104),.5) 1.5px,transparent 3px),
    radial-gradient(circle at 74px 182px,rgba(var(--profile-accent-rgb,140,219,104),.75) 0 1.2px,transparent 3px),
    radial-gradient(circle at 196px 150px,rgba(255,255,255,.7) 0 .8px,rgba(var(--profile-accent-rgb,140,219,104),.45) 1.4px,transparent 2.8px);
  background-size:240px 240px;
  mix-blend-mode:screen;
  opacity:.6;
  will-change:transform,opacity;
  animation:pm-rise 16s linear infinite,pm-twinkle 4.5s ease-in-out infinite;
}
:is(.player-head,.compare-player-head)[data-motion="signature"] .profile-motion .pm-sparks.pm-sparks-far{
  background-size:170px 170px;
  background-position:60px 30px;
  opacity:.45;
  filter:blur(.4px);
  animation:pm-rise-far 26s linear infinite,pm-twinkle 6.5s ease-in-out -2s infinite;
}

@keyframes pm-zoom{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.1) translate3d(-1.2%,-.8%,0);}
}
@keyframes pm-sweep{
  0%,8%{transform:translateX(-140%) skewX(-14deg);}
  46%,100%{transform:translateX(360%) skewX(-14deg);}
}
@keyframes pm-rise{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-240px,0);}}
@keyframes pm-rise-far{from{transform:translate3d(0,0,0);}to{transform:translate3d(-20px,-170px,0);}}
@keyframes pm-twinkle{0%,100%{opacity:.45;}50%{opacity:.85;}}

@media(max-width:700px){
  :is(.player-head,.compare-player-head)[data-motion="signature"] .profile-motion .pm-sparks.pm-sparks-far{display:none;}
}
@media(prefers-reduced-motion:reduce){
  :is(.player-head,.compare-player-head) .profile-motion-zoom,
  :is(.player-head,.compare-player-head) .profile-motion .pm-sparks{animation:none!important;}
  :is(.player-head,.compare-player-head) .profile-motion .pm-sweep{display:none!important;}
}