/* Move artwork, never the card/button hitbox. Existing covers and labels stay intact. */
.chv-motion-card { --chv-motion-light:#ffe5a2; --chv-motion-glow:#edbc71; --chv-motion-phase:0s; }
.chv-motion-card.is-chv-cover-moving > img.chv-poster,
.chv-motion-card.is-chv-cover-moving > .chv-animated > img,
.chv-motion-card.is-chv-cover-moving .card__media > img.card__poster,
.chv-motion-card.is-chv-cover-moving .card__media > img.card__motion {
  animation:chv-cover-breathe var(--chv-motion-period,4.8s) ease-in-out var(--chv-motion-phase) infinite;
  transform-origin:50% 75%; will-change:transform;
}
.chv-motion-card:not(.is-chv-cover-moving) > .chv-animated,
.chv-motion-card:not(.is-chv-cover-moving) .card__media > img.card__motion { visibility:hidden!important; }
.chv-motion-card > .chv-cover-motion-fx, .chv-motion-card .card__media > .chv-cover-motion-fx {
  position:absolute; inset:0; display:block; overflow:hidden; border-radius:inherit; z-index:2;
  pointer-events:none!important; user-select:none; opacity:0;
}
.chv-motion-card.is-chv-cover-moving .chv-cover-motion-fx { opacity:1; }
.chv-cover-motion-fx::before, .chv-cover-motion-fx::after {
  content:""; position:absolute; pointer-events:none!important; opacity:0;
}
.is-chv-cover-moving .chv-cover-motion-fx::before {
  inset:-40% -70%; background:linear-gradient(112deg,transparent 45%,#fff5 49%,var(--chv-motion-light) 50%,#fff2 51%,transparent 55%);
  mix-blend-mode:screen; animation:chv-cover-glint 6.8s ease-in-out var(--chv-motion-phase) infinite;
}
.is-chv-cover-moving .chv-cover-motion-fx::after {
  inset:12% 8% 8%;
  background:radial-gradient(circle at 14% 67%,var(--chv-motion-light) 0 1px,transparent 2px),
    radial-gradient(circle at 81% 45%,var(--chv-motion-glow) 0 1.5px,transparent 3px),
    radial-gradient(circle at 68% 86%,var(--chv-motion-light) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 51%,var(--chv-motion-light) 0 .8px,transparent 2px);
  animation:chv-cover-dust 5.6s ease-in-out var(--chv-motion-phase) infinite;
}
@keyframes chv-cover-breathe {
  0%,100% { transform:translate3d(0,0,0) scale(1.025) rotate(-.35deg); }
  25% { transform:translate3d(-1.05%,-.65%,0) scale(1.06) rotate(.45deg); }
  50% { transform:translate3d(.35%,-1.35%,0) scale(1.07) rotate(.15deg); }
  75% { transform:translate3d(1.05%,-.5%,0) scale(1.06) rotate(-.45deg); }
}
@keyframes chv-cover-glint {
  0%,15%{transform:translateX(-42%);opacity:0} 31%{opacity:.3} 48%{transform:translateX(42%);opacity:0} 100%{transform:translateX(42%);opacity:0}
}
@keyframes chv-cover-dust { 0%,100%{transform:translate3d(-5px,13px,0);opacity:.2} 50%{transform:translate3d(9px,-20px,0);opacity:.78} }
.chv-cover-motion-heading { flex-wrap:wrap!important; }
.chv-cover-motion-toggle {
  appearance:none; flex:0 0 auto; min-height:36px; padding:6px 10px; border:1px solid #e6cb8b66;
  border-radius:999px; background:#181322e6; color:#f6e7c9; font:600 11px/1.25 system-ui,sans-serif;
  cursor:pointer; white-space:nowrap; letter-spacing:0; text-transform:none;
}
.chv-cover-motion-toggle:hover { background:#2d2339; border-color:#e6cb8b; }
.chv-cover-motion-toggle:focus-visible { outline:3px solid #ffe8a7; outline-offset:2px; }
.chv-cover-motion-toggle:disabled { opacity:.7; cursor:default; }
@media(prefers-reduced-motion:reduce) {
  .chv-motion-card > img.chv-poster,.chv-motion-card > .chv-animated > img,
  .chv-motion-card .card__media > img { animation:none!important; transform:none!important; }
  .chv-motion-card .chv-cover-motion-fx { display:none!important; }
}

/* V2: noticeable diagonal drift, changing perspective and larger travelling highlights.
   The button/hitbox, original artwork and reduced-motion policy remain unchanged. */
.is-chv-cover-moving .chv-cover-motion-fx::before { animation-duration:4.9s; }
.is-chv-cover-moving .chv-cover-motion-fx::after {
  background:radial-gradient(circle at 14% 67%,var(--chv-motion-light) 0 1.6px,transparent 3px),
    radial-gradient(circle at 81% 45%,var(--chv-motion-glow) 0 2px,transparent 4px),
    radial-gradient(circle at 68% 86%,var(--chv-motion-light) 0 1.4px,transparent 3px),
    radial-gradient(circle at 34% 51%,var(--chv-motion-light) 0 1.2px,transparent 3px),
    radial-gradient(circle at 42% 23%,var(--chv-motion-light) 0 1.6px,transparent 3px),
    radial-gradient(circle at 89% 74%,var(--chv-motion-glow) 0 2px,transparent 4px);
  filter:drop-shadow(0 0 4px var(--chv-motion-glow));
}
