.groove-hero{overflow:clip}
.groove-logo-track{position:relative;width:min(420px,100%);margin:0 auto 18px}
.groove-logo-track.has-groove-motion::after{content:"";display:block;height:clamp(170px,30svh,300px)}
.groove-logo-motion{
  position:relative;width:100%;aspect-ratio:510/356;margin:0;
  pointer-events:none;background:#000;
}
.has-groove-motion .groove-logo-motion{position:sticky;top:var(--header-height)}
.groove-logo-motion img,.groove-logo-motion canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.groove-logo-motion canvas{opacity:0}
.groove-logo-motion.is-ready canvas{opacity:1}
.groove-logo-motion.is-ready img{opacity:0}
@media(max-width:700px){.groove-logo-track{width:min(350px,100%);margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){
  .groove-logo-motion.is-ready canvas{opacity:0}
  .groove-logo-motion.is-ready img{opacity:1}
  .groove-logo-track.has-groove-motion::after{display:none}
  .has-groove-motion .groove-logo-motion{position:relative;top:auto}
}

.motion-opt-in{display:block;margin:10px auto 24px;padding:10px 18px;border:1px solid currentColor;border-radius:99px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.motion-opt-in[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.groove-logo-motion.motion-forced.is-ready canvas{opacity:1}.groove-logo-motion.motion-forced.is-ready img{opacity:0}.groove-logo-track:has(.motion-forced)::after{display:block}.has-groove-motion .motion-forced{position:sticky;top:var(--header-height)}}