/* Gameplay loops on cards and heroes (public/card-loop.js). The card image stays underneath as the poster; the video
   fades in only once it is actually playing, and fades back out to the image when it pauses. */
[data-loop]{position:relative;isolation:isolate}
.card-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none;background:transparent;border-radius:inherit}
[data-loop].is-looping>.card-loop{opacity:1}
/* Heroes that gain a loop wrap their image in a figure with the same shape the bare image had. */
.occasion-hero>.occasion-shot-loop{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:1.5;background:#f3eee6}
.occasion-shot-loop>img{display:block;width:100%;height:100%;object-fit:cover}
.party-hub-top>.party-hub-hero{margin-top:0}
.party-hub-loop{margin:0 0 22px}
.party-hub-loop>div{border-radius:24px;overflow:hidden;aspect-ratio:3/2;background:#1d2350;box-shadow:0 24px 50px -30px rgba(32,27,56,.5)}
.party-hub-loop img{display:block;width:100%;height:100%;object-fit:cover}
.party-hub-loop figcaption{font-size:.9rem;line-height:1.5;color:#514d66;margin-top:10px}
.party-hub-loop figcaption a{font-weight:700}
@media(max-width:800px){.party-hub-loop{display:none}}
@media(prefers-reduced-motion:reduce){.card-loop{display:none}}