@charset "UTF-8";
/* Characters use real image and panel edges as their ground/occlusion plane. */
.panda-moment {
    display: block;
    position: absolute;
    color: #34493b;
    fill: currentColor;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}
.moment-paper, .moment-eye { fill: #fffdf5; }
.moment-outline { stroke: #8c9a88; stroke-width: 1.2; }
.moment-smile { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
[data-panda-moment] { position: relative; }
.panda-moment--ears { width: 156px; height: 82px; }
.profile-photo-wrap > .panda-moment--ears { right: 24px; top: -82px; z-index: 0; }
.profile-photo-wrap > img { position: relative; z-index: 1; }
.profile-photo-wrap > p { z-index: 2; }
.info-table-wrap { margin-top: 74px; }
.info-table-wrap > .panda-moment--ears { right: 28px; top: -82px; z-index: 0; }
.info-table-wrap > .info-grid { position: relative; z-index: 1; }
.moment-peek { transform: translateY(63px); }
.moment-ear { transform-box: view-box; }
.moment-ear--left { transform-origin: 55px 38px; }
.moment-ear--right { transform-origin: 105px 38px; }
.panda-moment.is-playing .moment-peek { animation: photo-panda-peek 5.8s ease-in-out both; }
.panda-moment.is-playing .moment-ear--left { animation: photo-panda-ear-left 5.8s ease-in-out both; }
.panda-moment.is-playing .moment-ear--right { animation: photo-panda-ear-right 5.8s ease-in-out both; }
/* At the highest point, even the eye patches remain below the 84px clip. */
@keyframes photo-panda-peek {
    0%,10%,100% { transform: translateY(63px); }
    28%,78% { transform: translateY(40px); }
    94% { transform: translateY(63px); }
}
@keyframes photo-panda-ear-left {
    0%,32%,52%,72%,100% { transform: rotate(0) scaleY(1); }
    39% { transform: rotate(-9deg) scaleY(.9); }
    45% { transform: rotate(5deg) scaleY(.97); }
    61% { transform: rotate(-6deg) scaleY(.94); }
}
@keyframes photo-panda-ear-right {
    0%,40%,60%,78%,100% { transform: rotate(0) scaleY(1); }
    47% { transform: rotate(9deg) scaleY(.9); }
    53% { transform: rotate(-5deg) scaleY(.97); }
    69% { transform: rotate(6deg) scaleY(.94); }
}
.panda-moment.is-static * { animation: none !important; }
@media (max-width: 767px) {
    .profile-photo-wrap > .panda-moment--ears { width:122px;height:64px;top:-64px;left:14px;right:auto; }
    .info-table-wrap > .panda-moment--ears { width:122px;height:64px;top:-64px;right:18px; }
    .info-table-wrap { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .panda-moment * { animation:none !important; }
    .moment-peek { transform:translateY(63px); }
}