/* A.L.T.A.'s player (js/alta.js): her Listen bar is her tank. Her whole scene runs the bar's width, 16:9: the tank
   with her at the ledge (her painted head erased), her tail looping under the ledge, her head in layers on her
   collar (irises in a lens, lids, mouth shapes), and a gesture now and then over her torso. The play controls sit
   on the water at the bottom. Positions are shares of her 1376 x 768 frame (assets/alta/parts/layout.json).
   Every change eases; with reduced motion she holds still and only her mouth moves. */
section.listen.alta{display:block;padding:0;overflow:hidden;border-radius:16px;background:#0a1a1c;color:#e8f1ef;position:relative}
section.listen.alta>div:first-child{position:absolute;z-index:3;left:0;right:0;top:0;padding:12px 16px 26px;
  background:linear-gradient(180deg,rgba(6,16,18,.72),rgba(6,16,18,0));display:flex;flex-direction:column;gap:2px;pointer-events:none}
section.listen.alta .listen-label{color:#9fe6da}
section.listen.alta b{color:#fff}
.alta .al-by{font-size:12px;color:#bfe3dd;letter-spacing:.04em}
/* inside a Note in Play (css/play-inline.css sizes every picture and video in a story: full width, auto height,
   rounded, on black) her layers keep their own places and sizes: every rule here leads with .alta to outweigh those */
section.listen.alta .al-stage img,section.listen.alta .al-stage video{max-width:none;max-height:none;min-height:0;margin:0;border-radius:0;background:none;box-shadow:none;filter:none}
section.listen.alta audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.alta .al-stage{position:relative;width:100%;aspect-ratio:1376/768;background:#0a1a1c url(/assets/alta/parts/rest.webp?v=1) center/100% 100% no-repeat}
.alta .al-stage>*{position:absolute}
.alta .al-tail{left:0;top:45.833%;width:100%;height:54.167%;object-fit:fill;-webkit-mask:linear-gradient(#0000 0,#000 4%);mask:linear-gradient(#0000 0,#000 4%);
  opacity:0;transition:opacity .8s ease-in-out}
.alta .al-tail.on{opacity:1}
.alta .al-palms{left:31.977%;top:0;width:37.209%;height:47.917%;opacity:0;transition:opacity .5s ease-in-out}
.alta .al-palms.on{opacity:1}
.alta .al-head{left:41.43%;top:5.947%;width:17.529%;height:30.534%;transform-origin:50% 92%;transition:transform .7s ease-in-out}
.alta .al-head img,.alta .al-head i{position:absolute;display:block}
.alta .al-head{opacity:1;transition:transform .7s ease-in-out,opacity .45s ease-in-out}
.alta .al-head.gone{opacity:0}   /* her idle dive: her own video head shows while she's down */
.alta .al-dive{left:0;top:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .4s ease-in-out;z-index:2;pointer-events:none}
.alta .al-dive.on{opacity:1}
/* a backdrop behind her tank (data-bd; js/alta.js): the scene fills the stage, her still without the hall (rest-cut)
   lies over it, and her gesture, dive and rise play through canvases that use their masks (the videos themselves
   play unseen). Underwater clips just hide everything above the ledge (37.8% down), where nothing of her is. */
.alta .al-stage.al-has-bd{background:#0a1a1c var(--al-bd) center/cover no-repeat}
/* until her still (rest-cut) is in, a small copy of it (rest-cut-lq.webp, 9 KB) stands in over the backdrop, so the tank is never empty */
.alta .al-stage.al-has-bd:not(.al-rc-in){background:url(/assets/alta/parts/rest-cut-lq.webp?v=1) 0 0/100% 100% no-repeat,#0a1a1c var(--al-bd) center/cover no-repeat}
.alta .al-restcut{left:0;top:0;width:100%;height:100%;opacity:1;transition:opacity .4s ease-in-out}
.alta .al-under .al-restcut{opacity:0}
.alta .al-src{opacity:0!important}
.alta .al-palms-c{left:31.977%;top:0;width:37.209%;height:47.917%;opacity:0;transition:opacity .5s ease-in-out;pointer-events:none}
.alta .al-palms.on+.al-palms-c{opacity:1}
/* a gesture whose hand reaches over the front of the ledge (TALL in js/alta.js): the box runs further down, only her hand shows below the ledge */
.alta .al-tall{left:31.977%;top:0;width:37.209%;height:65.104%}
.alta .al-tall-c{left:31.977%;top:0;width:37.209%;height:65.104%;opacity:0;transition:opacity .5s ease-in-out;pointer-events:none}
.alta .al-tall.on+.al-tall-c{opacity:1}
.alta .al-dive-c{left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease-in-out;z-index:2;pointer-events:none}
.alta .al-dive.on+.al-dive-c{opacity:1}
.alta .al-has-bd .al-dive[data-k=hover],.alta .al-has-bd .al-dive[data-k=glide],.alta .al-has-bd .al-dive[data-k=glow]{-webkit-mask:linear-gradient(#0000 0,#0000 37.6%,#000 37.9%);mask:linear-gradient(#0000 0,#0000 37.6%,#000 37.9%)}
.alta .al-base{inset:0;width:100%;height:100%}
.alta .al-pearl{inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease-in-out}
.alta .al-tint{inset:0;mix-blend-mode:multiply;opacity:0;transition:opacity .9s ease-in-out}
.alta .al-tint-a{background:var(--al1,transparent);-webkit-mask:url(/assets/alta/parts/head-flair-a.webp?v=3) 0 0/100% 100% no-repeat;mask:url(/assets/alta/parts/head-flair-a.webp?v=3) 0 0/100% 100% no-repeat}
.alta .al-tint-b{background:var(--al2,transparent);-webkit-mask:url(/assets/alta/parts/head-flair-b.webp?v=3) 0 0/100% 100% no-repeat;mask:url(/assets/alta/parts/head-flair-b.webp?v=3) 0 0/100% 100% no-repeat}
.alta.has-pal .al-pearl,.alta.has-pal .al-tint{opacity:1}   /* a Note's colours on her crown and hair; without them she wears her own */
.alta .al-eyes{left:29.167%;top:47.143%;width:41.667%;height:17.143%;-webkit-mask:url(/assets/alta/parts/head-lens.png?v=2) 0 0/100% 100% no-repeat;
  mask:url(/assets/alta/parts/head-lens.png?v=2) 0 0/100% 100% no-repeat}
.alta .al-eyes img{inset:0;width:100%;height:100%;transform:translate(var(--gx,0%),var(--gy,0%)) scale(var(--dil,1.06));transition:transform .8s ease-in-out,filter .9s ease-in-out}
.alta .al-glow{inset:0;mix-blend-mode:color;opacity:0;transition:opacity .9s ease-in-out,background-color .9s ease-in-out}
.alta .al-lids{left:27.778%;top:45.714%;width:44.444%;height:20%;opacity:0;transition:opacity 70ms ease-in-out}
.alta.blink .al-lids{opacity:1}
.alta .al-rest{inset:0;width:100%;height:100%;z-index:1;opacity:1;transition:opacity .8s ease-in-out}   /* her resting face, over her eyes and mouth (its eye openings let her irises glance through); it eases away while she talks */
.alta.talking .al-rest{opacity:0}
.alta .al-lids{z-index:2}
.alta .al-mouth{left:35.278%;top:67.286%;width:29.583%;height:19%}
.alta .al-mouth img{inset:0;width:100%;height:100%;opacity:0;transition:opacity 80ms ease-in-out}
.alta .al-mouth img.on{opacity:1}
/* the controls, on the water */
.alta .al-ctl{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:22px 14px 12px;
  background:linear-gradient(0deg,rgba(6,16,18,.8),rgba(6,16,18,0))}
.alta .al-ctl button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(159,230,218,.5);background:rgba(10,40,42,.75);color:#e8fffb;cursor:pointer;
  display:grid;place-items:center;transition:transform .5s ease-in-out,background-color .6s ease-in-out,box-shadow .7s ease-in-out}
.alta .al-ctl button:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(63,208,192,.45)}
.alta .al-ctl button svg{width:18px;height:18px;fill:currentColor}
.alta .al-ctl .al-sm{width:36px;height:36px}
/* Play pressed while she's underwater: the button breathes softly until she's back at the ledge and starts */
.alta .al-ctl button.al-wait{animation:al-wait 1.8s ease-in-out infinite}
@keyframes al-wait{50%{box-shadow:0 0 16px rgba(63,208,192,.6);background:rgba(20,70,70,.85)}}
.alta .al-seek{flex:1;min-width:60px;accent-color:#3fd0c0}
.alta .al-t{font:12px/1 ui-monospace,Menlo,monospace;color:#bfe3dd;white-space:nowrap}
.alta .al-soon{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:14px;color:#cfeee8;background:linear-gradient(0deg,rgba(6,16,18,.8),rgba(6,16,18,0))}
/* on a phone her scene runs wider than the bar and the tank's sides fall away: the middle 64% shows, with her (and
   her gestures, 32% to 69% across) in it, a third bigger. The controls stay inside what shows. */
@media (max-width:640px){
  .alta .al-stage{width:156.25%;margin-left:-28.125%}
  .alta .al-ctl,.alta .al-soon{left:18%;right:18%}
  section.listen.alta>div:first-child{position:static;padding:10px 14px 8px;background:#0a1a1c}   /* the title above her, off her crown */
}
@media (max-width:560px){.alta .al-ctl{gap:6px;padding:16px 8px 8px}.alta .al-ctl .al-sm{display:none}section.listen.alta>div:first-child{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.alta .al-ctl button.al-wait{animation:none}.alta .al-restcut,.alta .al-palms-c,.alta .al-tall-c,.alta .al-dive-c{transition:none}.alta .al-rest{transition:none}.alta .al-dive,.alta .al-pearl,.alta .al-tint,.alta .al-tail,.alta .al-palms,.alta .al-head,.alta .al-eyes img,.alta .al-glow,.alta .al-lids,.alta .al-mouth img,.alta .al-ctl button{transition:none}}