/* Actual user-supplied video with a per-frame background mask. */
.mascot-lane{--cat-size:165px;--run-distance:0px;position:relative;height:185px;overflow:hidden;pointer-events:none;isolation:isolate;contain:layout paint;margin-top:24px}
.mascot-traveller{position:absolute;left:0;bottom:0;width:var(--cat-size);height:var(--cat-size);transform:translateX(calc(var(--run-distance) * .5))}
.mascot-film{display:block;width:100%;height:100%;background:transparent}
.mascot-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mascot-hero{--cat-size:clamp(300px,32vw,480px);height:auto;aspect-ratio:1;margin-top:0;min-height:480px}
.mascot-hero .mascot-traveller{bottom:8%}
.mascot-lane.run-lane .mascot-traveller{transform:translateX(0);animation:none}
.mascot-lane.run-lane.is-visible.is-ready .mascot-traveller{animation:real-cat-run var(--run-seconds,5s) linear infinite}
.mascot-lane.peek-lane .mascot-traveller{left:auto;right:0;transform:none}
.mascot-lane.peek-lane:before{content:"";position:absolute;right:calc(var(--cat-size) * .71);bottom:0;width:6px;height:92%;border-radius:8px;background:linear-gradient(#ff64cd,#1635ff);box-shadow:0 0 16px #ff64cd30;z-index:2}
.mascot-cinema{position:absolute;bottom:12px;left:5%;width:35%;height:145px;--cat-size:135px;opacity:.95;margin:0}
.footer .mascot-lane{height:150px;--cat-size:140px;margin:0 0 18px}
.closing{flex-wrap:wrap}.closing>.mascot-lane{flex:0 0 100%;height:160px;margin-top:8px;--cat-size:155px}
@keyframes real-cat-run{from{transform:translateX(0)}to{transform:translateX(var(--run-end,100vw))}}
.effects-off .mascot-traveller{animation:none!important;opacity:1!important}
@media(max-width:900px){.mascot-cinema{top:260px;bottom:auto;left:55%;width:42%;height:125px;--cat-size:115px}}
@media(max-width:760px){.mascot-lane{--cat-size:145px;height:165px;margin-top:18px}.mascot-hero{--cat-size:300px;min-height:330px;height:auto;aspect-ratio:1.1;margin-block:12px 0}.mascot-hero .mascot-traveller{bottom:0}.mascot-cinema{margin:0;top:260px;height:120px;--cat-size:110px}.footer .mascot-lane{--cat-size:130px;height:140px}.closing>.mascot-lane{--cat-size:140px;height:150px}}
@media(max-width:370px){.mascot-hero{--cat-size:260px;min-height:290px}.mascot-cinema{top:245px;left:52%;width:45%}}
/* On phones use a full-width track below the story, never a tiny right-hand
   strip. The actor starts at its left edge after video data is available. */
@media(max-width:900px){.mascot-cinema{left:0;top:auto;bottom:0;width:100%;height:135px;--cat-size:125px}}
@media(max-width:760px){.mascot-hero{--cat-size:min(300px,100%);min-height:300px}.mascot-cinema{top:auto;bottom:0;left:0;width:100%;height:130px;--cat-size:120px}.mascot-lane.run-lane{height:170px;--cat-size:155px}.mascot-cinema.run-lane{height:130px;--cat-size:120px}.footer .mascot-lane{height:150px;--cat-size:140px}}
@media(prefers-reduced-motion:reduce){.mascot-traveller{animation:none!important;opacity:1!important}}