/* R8 — Max on the edges. Only matches the layer ux/r8.js creates (inert in Before).
   Origin of .ux-r8 = the point under his feet (centre of the edge he stands on). */
/* phone: z 9 < .rail (10) -> an edge scrolling under the sticky header takes Max under it, nav stays tappable */
.ux-r8{position:absolute;left:0;top:0;width:0;height:0;z-index:20;--ux-sink:0;will-change:transform}
.ux-r8-box{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.ux-r8 .max-companion,.ux-r8 .max-companion.is-docked{position:absolute;left:0;top:auto;bottom:0;width:auto;display:block;transform:translateX(-50%)}
.ux-r8 .max-sprite,.ux-r8 .max-companion.is-docked .max-sprite{width:120px}
@media(max-width:850px){.ux-r8{z-index:9}}
@media(max-width:760px){.ux-r8 .max-sprite,.ux-r8 .max-companion.is-docked .max-sprite{width:88px}}
.ux-r8-clip{position:relative;display:block;transform-origin:50% 100%}
.ux-r8-clip .max-sprite{transform:translateY(calc(var(--ux-sink) * 100%));transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ux-r8.peek .ux-r8-clip{clip-path:inset(-80% -80% 0 -80%)}
.ux-r8.air .ux-r8-clip .max-sprite,.ux-r8.snap .ux-r8-clip .max-sprite{transition:none}
/* iteration 8: ducking (a fixed control is coming) sinks in 120 ms, rising stays 280 ms */
.ux-r8.duck .ux-r8-clip .max-sprite{transition-duration:.12s}
.ux-r8-hit{position:absolute;left:0;right:0;top:auto;bottom:0;z-index:1;width:100%;height:calc((1 - var(--ux-sink)) * 100%);padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ux-r8-hit:focus-visible{outline:3px solid var(--accent,#f86c39);outline-offset:2px}
/* no Voice button on Max any more: his sound obeys the one site switch (ux/sound.js, in the rail) */
.ux-r8 .max-companion .max-voice{display:none!important}
.ux-r8:not(.at-home) .seasonal-pumpkin,.ux-r8:not(.at-home) .seasonal-caption{visibility:hidden}
/* service spot in the rail (no free edge on screen): fixed, above the rail; phone = peeks over the nav row */
.ux-r8.svc{position:fixed;z-index:11}
.ux-r8.gone{visibility:hidden}
.ux-r8.gone .ux-r8-hit,.ux-r8.duck .ux-r8-hit{pointer-events:none}
.ux-r8.svc .max-bubble,.ux-r8.svc .ux-r8-say{visibility:hidden}
/* his project lines (companion-humor) above his head, kept on screen */
/* page-wide wrapper, clips sideways only (overflow-x:clip keeps y visible; no stacking context) */
.ux-r8-wrap{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible}
@supports (overflow:clip){.ux-r8-wrap{overflow-x:clip}}
/* his notes are placed by r8.js in a free box (never over text); nowhere free -> invisible, text stays for SR */
.ux-r8 .max-companion .max-bubble,.ux-r8 .max-companion.is-docked .max-bubble{right:0;left:auto;bottom:calc(100% + 12px)}
.ux-r8 .max-companion .max-bubble:after{left:var(--ux-tail,20px);right:auto}
.ux-r8 .max-companion .max-bubble.ux-r8-side:after{display:none}
.ux-r8 .max-companion .max-bubble:not(.ux-ok){opacity:0!important;visibility:hidden!important}
/* in the air his notes would ride over the text he crosses: they show again once he lands (re-placed) */
.ux-r8.air .max-bubble,.ux-r8.air .ux-r8-say{opacity:0!important}
.ux-r8-say{position:absolute;left:0;top:0;margin:0;padding:8px 11px;transform:translateY(6px);background:var(--paper,#f4f1e8);border:3px solid var(--accent,#f86c39);box-shadow:4px 4px 0 var(--ink,#20221f);color:var(--ink,#20221f);font:400 13px/1.3 var(--mono,monospace);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ux-r8-say.on{opacity:1;transform:none}
.ux-r8-say.mute{opacity:0}
.ux-r8-spark{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--accent,#f86c39);pointer-events:none}
/* the rail note never yields to a docked Max: he no longer docks in the rail */
html.ux-r8-on body .rail-note{visibility:visible!important}
@media(prefers-reduced-motion:reduce){.ux-r8-clip .max-sprite{transition:none}}