/* Robot Marley's player (js/marley.js; her parts and kit in assets/marley/). Her stage is 600 x 738 of her 1376 x 768
   template (from 400, 30): her parts sit in it at 440, 40 (560 x 728), her moves fill all of it, drawn with their own
   masks so whatever is behind her shows. Every change eases, per the motion rule; reduced motion stills her. */
.mly{position:relative;margin:0 auto;max-width:420px}
.mly-st{position:relative;width:100%;aspect-ratio:600/738;overflow:hidden;border-radius:16px;
  background:radial-gradient(ellipse at 50% 95%,rgba(0,0,0,.2),transparent 42%),linear-gradient(#cfe3d0,#ece5d4)}
.mly-st img,.mly-st i,.mly-st .mly-g,.mly-st canvas{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;max-width:none;border:0;border-radius:0;box-shadow:none}
/* a Note's scene behind her (js/marley.js data-bd): blurred, a touch less saturated and dimmed, as GlazyArray's is
   (css/narrator.css .nb-bd); oversized so the blur's soft edge stays outside her stage */
.mly-st .mly-bd{inset:-16px;width:auto;height:auto;background:center/cover no-repeat;filter:blur(5px) saturate(.95) brightness(.7)}
.mly-parts{position:absolute;left:6.6667%;top:1.355%;width:93.3333%;height:98.645%;transition:opacity .6s ease-in-out}
/* her seat (Christian, Oct 12: so she isn't floating over a backdrop): an old tree stump, his picture cut from its
   white ground (assets/marley/seat-stump.webp, 1249 x 510), running off the bottom and sides of her stage. She and her
   moves are scaled down together from the top centre of the stage (the parts' origin is that same point in their own
   box) so her paws land on its top, a soft shadow where she sits */
.mly-st .mly-seat{position:absolute;z-index:0;left:-10.5%;top:72%;width:120.6%;height:40%;pointer-events:none;
  background:url(/assets/marley/seat-stump.webp) 0 0/100% 100% no-repeat}
.mly-seat::after{content:"";position:absolute;left:30%;width:38%;top:16%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.4),rgba(0,0,0,.15) 65%,transparent)}
.mly-st .mly-parts,.mly-st .mly-mv-c{transform:scale(.86)}
.mly-st .mly-parts{transform-origin:46.4286% -1.3736%}
.mly-st .mly-mv-c{transform-origin:50% 0}
.mly-st.moving .mly-parts{opacity:0}
/* her stand-in while her parts load: a small still of her seated pose (parts/web/still.webp, 6 KB), so the stage is
   never empty; it fades out once every part is in, so it never shows behind an ear or her tail as they move */
.mly-parts::before{content:"";position:absolute;inset:0;background:url(/assets/marley/parts/web/still.webp?v=2) 0 0/100% 100% no-repeat;transition:opacity .6s ease-in-out}
.mly-parts.ready::before{opacity:0}
.mly-mv{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mly-mv-c{opacity:0;transition:opacity .6s ease-in-out}
.mly-mv-c.on{opacity:1}
.mly-tail{transform-origin:72.5% 82.4%;animation:mly-wag 1.8s ease-in-out infinite alternate}
.mly.excited .mly-tail{animation-duration:.9s}
@keyframes mly-wag{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.mly-body{transform-origin:50% 100%;animation:mly-breathe 4.2s ease-in-out infinite}
@keyframes mly-breathe{50%{transform:scaleY(1.006)}}
.mly-head{transform-origin:45.5% 33.6%;transition:transform .9s ease-in-out}
.mly-ear{transition:transform .7s ease-in-out,opacity .6s ease-in-out}
.mly-earL{transform-origin:30.7% 7.1%} .mly-earR{transform-origin:59.3% 7.1%}
.mly-up{opacity:0} .mly.alert .mly-up{opacity:1} .mly.alert .mly-down{opacity:0}
.mly-mouth img{opacity:0;transition:opacity 90ms ease-in-out} .mly-mouth img.on{opacity:1}
.mly-lids{opacity:0;transition:opacity 90ms ease-in-out} .mly.blink .mly-lids{opacity:1}
.mly-glow{-webkit-mask:url(/assets/marley/parts/web/iris-mask.webp?v=2) 0 0/100% 100% no-repeat;mask:url(/assets/marley/parts/web/iris-mask.webp?v=2) 0 0/100% 100% no-repeat;
  transition:background-color .9s ease-in-out,opacity .9s ease-in-out}
/* her lenses' own amber; a mood fades a tint in (js/marley.js EYES): a warm gold when she's happy, red when she's upset */
.mly-glow-g{mix-blend-mode:overlay;opacity:0;background:#ffb000}
.mly-glow-c{mix-blend-mode:color;opacity:0;background:#e0261a}
.mly-glow-s{mix-blend-mode:screen;opacity:0;background:#ff3b2b}
.mly-charm{transform-origin:45.9% 42%}
.mly-charm.sw{animation:mly-swing 2.4s ease-in-out}
@keyframes mly-swing{25%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
.mly-own,.mly-dyed{transition:opacity .9s ease-in-out}
.mly-dye{mix-blend-mode:multiply;transition:background-color .9s ease-in-out,opacity .9s ease-in-out}
.mly-dc{-webkit-mask:url(/assets/marley/parts/web/collar-mask.webp?v=2) 0 0/100% 100%;mask:url(/assets/marley/parts/web/collar-mask.webp?v=2) 0 0/100% 100%;opacity:0;mix-blend-mode:color}
.mly-dc2{mix-blend-mode:screen}
.mly.pal .mly-dc{opacity:.95} .mly.pal .mly-dc2{opacity:.32}
/* her buttons, where a page asks for them (data-controls) */
.mly-ctl{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mly-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mly-row>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;min-width:64px}
.mly-chip{font:inherit;font-size:13px;line-height:1.2;color:inherit;background:transparent;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);
  border-radius:999px;padding:6px 11px;cursor:pointer;transition:transform .5s ease-in-out,border-color .6s ease-in-out,background-color .6s ease-in-out}
.mly-chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,currentColor 70%,transparent)}
.mly-chip.on{border-color:#c98a2b;background:color-mix(in srgb,#c98a2b 20%,transparent)}
.mly-chip[disabled]{opacity:.45;cursor:default;transform:none}
@media (prefers-reduced-motion: reduce){
  .mly-tail,.mly-body,.mly-charm.sw{animation:none}
  .mly-head,.mly-ear,.mly-mouth img,.mly-lids,.mly-glow,.mly-own,.mly-dyed,.mly-dye,.mly-parts,.mly-parts::before,.mly-mv-c,.mly-chip{transition:none}
}
/* in a Listen bar (a Note she narrates): her stage above the episode's player */
section.listen.mly-bar{display:block}
section.listen.mly-bar .marley{max-width:300px;margin:10px auto}
section.listen.mly-bar audio{display:block;width:100%}