/* One transparent plush atlas; parts are clipped in CSS without resampling it.
   The containing composer is the ledge. This layer never takes input or space. */
.composer { position: relative; }
.xen-mascot {
    display: none;
    position: absolute;
    width: 190px;
    height: 214px;
    right: 42px;
    bottom: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    visibility: hidden;
    contain: layout paint;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .xen-mascot { display: block; }
}
.xen-mascot.is-playing { visibility: visible; }
.xen-mascot.has-webgl { width: 210px; height: 228px; right: 26px; }
.xen-webgl-host { position: absolute; inset: 0; display: none; }
.has-webgl .xen-webgl-host { display: block; }
.xen-webgl-host canvas { display: block; width: 100%; height: 100%; }
.has-webgl .xen-stage { display: none; }
.xen-stage { position: absolute; inset: auto 0 0; height: 190px; }
.xen-mascot.is-leaving .xen-stage {
    transform: translateY(205px);
    transition: transform 260ms ease-in;
}
.xen-core { position: absolute; inset: 0; transform: translateY(205px); }
.xen-head, .xen-body, .xen-arm {
    position: absolute;
    background-image: url('../images/xen/puppet-atlas.png');
    background-repeat: no-repeat;
}
.xen-body {
    width: 112px;
    height: 110px;
    top: 112px;
    left: 39px;
    background-size: 250.8px 250.8px;
    background-position: -134px -36px;
}
.xen-head {
    width: 138.6px;
    height: 151.8px;
    top: 0;
    left: 25.7px;
    background-size: 275.88px 275.88px;
    background-position: 0 -13.2px;
    transform-origin: 50% 87%;
}
.xen-arm {
    width: 35px;
    height: 62px;
    top: 171px;
    background-size: 175.56px 175.56px;
    transform-origin: 50% 83%;
    transform: translateY(90px);
}
.xen-arm-left { left: 27px; background-position: -29.4px -105px; }
.xen-arm-right { right: 27px; background-position: -109.2px -105px; }
.is-playing .xen-core { animation: xen-pull-up 6.4s both; }
.is-playing .xen-head { animation: xen-look-around 6.4s both; }
.is-playing .xen-arm-left { animation: xen-grip 6.4s both; }
.is-playing .xen-arm-right { animation: xen-wave 6.4s both; }
@keyframes xen-pull-up {
    0%, 9% { transform: translateY(205px); }
    19% { transform: translateY(-5px); }
    24%, 79% { transform: translateY(0); }
    84% { transform: translateY(-5px); }
    96%, 100% { transform: translateY(205px); }
}
@keyframes xen-look-around {
    0%, 23% { transform: perspective(350px) rotateY(0) rotate(0); }
    31%, 37% { transform: perspective(350px) translateX(-7px) rotateY(-24deg) rotate(-7deg); }
    45%, 51% { transform: perspective(350px) translateX(7px) rotateY(24deg) rotate(7deg); }
    58%, 62% { transform: perspective(350px) rotateY(0) rotate(-3deg); }
    68%, 76% { transform: perspective(350px) rotateY(0) rotate(3deg); }
    83%, 100% { transform: perspective(350px) rotateY(0) rotate(0); }
}
@keyframes xen-grip {
    0%, 3% { transform: translateY(90px) rotate(-8deg); }
    9%, 15% { transform: translateY(0) rotate(-8deg); }
    20% { transform: translateY(-4px) rotate(-12deg); }
    25%, 86% { transform: translateY(0) rotate(-8deg); }
    97%, 100% { transform: translateY(90px) rotate(0); }
}
@keyframes xen-wave {
    0%, 5% { transform: translateY(90px) rotate(8deg); }
    11%, 15% { transform: translateY(0) rotate(8deg); }
    20% { transform: translateY(-4px) rotate(12deg); }
    25%, 56% { transform: translateY(0) rotate(8deg); }
    62% { transform: translate(2px, -43px) rotate(24deg); }
    66% { transform: translate(2px, -43px) rotate(-17deg); }
    70% { transform: translate(2px, -43px) rotate(24deg); }
    74% { transform: translate(2px, -43px) rotate(-17deg); }
    78% { transform: translate(2px, -43px) rotate(18deg); }
    84%, 87% { transform: translateY(0) rotate(8deg); }
    99%, 100% { transform: translateY(90px) rotate(0); }
}