/* Keep the question/answer exchange visibly alive while it is being read. */
.choice-question.is-in-view .big-question-mark,.choice-question.is-in-view .question-answer>i{animation:none}
.choice-question.question-animated .big-question-mark{animation:ask-mark 6s cubic-bezier(.2,.7,.3,1) infinite;will-change:transform}
.choice-question.question-animated h2{animation:ask-title 6s cubic-bezier(.2,.7,.3,1) infinite;transform-origin:left center}
.choice-question.question-animated .question-answer{animation:answer-arrives 6s cubic-bezier(.18,.8,.25,1) infinite;transform-origin:50% 65%;will-change:transform}
.choice-question.question-animated .question-answer>i{animation:answer-down 1.2s linear infinite}
.choice-question.question-animated h2>strong{animation:ask-underline 6s linear infinite;background:linear-gradient(#f9efc2,#f9efc2) left bottom/100% 25% no-repeat}
@keyframes ask-mark{0%{scale:.65;rotate:-17deg;translate:-12px 12px}8%{scale:1.16;rotate:6deg;translate:0 -6px}14%,80%{scale:1;rotate:0deg;translate:0 0}88%{scale:1.05;rotate:-4deg;translate:0 -6px}96%,100%{scale:1;rotate:0deg;translate:0 0}}
@keyframes ask-title{0%{opacity:.3;translate:-35px 8px;scale:.96}12%{opacity:1;translate:0 0;scale:1.025}18%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes ask-underline{0%,7%{background-size:0 25%}20%,100%{background-size:100% 25%}}
@keyframes answer-arrives{0%,16%{opacity:.18;translate:45px 20px;scale:.72;rotate:7deg}25%{opacity:1;translate:-8px -9px;scale:1.13;rotate:-5deg}33%{opacity:1;translate:0 0;scale:1;rotate:0deg}47%{opacity:1;translate:0 -9px;scale:1.035;rotate:2deg}61%{opacity:1;translate:0 0;scale:1;rotate:0deg}76%{opacity:1;translate:0 -7px;scale:1.025;rotate:1deg}88%,100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes answer-down{0%,100%{translate:0 0}50%{translate:0 5px}}
/* Page selection follows scroll; performance inside that page continues. */
.oem-animated .is-current .oem-art{animation:comic-panel-enter .55s ease-out both}
.oem-animated .is-current .oem-art>svg{animation:comic-camera 5s ease-in-out infinite;transform-origin:center}
.oem-animated .is-current .oem-bubble{animation:comic-speech 4s ease-in-out infinite}
.oem-animated .is-current .oem-host,.oem-animated .is-current .oem-understood{animation-delay:-2s}
.oem-animated .is-current .oem-chime{animation:door-ringing 3s ease-in-out infinite;transform-origin:center}
.oem-animated .is-current .oem-rings{animation:door-ripples 1.5s ease-out infinite}
.oem-animated .is-current .oem-its-him{animation:door-reaction 3s ease-in-out infinite}
.oem-animated .is-current .oem-arriving-worker{animation:worker-alive 3.6s ease-in-out infinite;transform-origin:center bottom}
.oem-animated .is-current .oem-arriving-worker img{animation:oem-arrive .6s cubic-bezier(.15,.8,.3,1) both}
.oem-animated .is-current .oem-pop{animation:reunion-surprise 3.2s ease-in-out infinite}
.oem-animated .is-current .oem-answer-speaker{animation:worker-alive 3.6s ease-in-out infinite}
.oem-animated .is-current .oem-thought{animation:thought-alive 4.5s ease-in-out infinite}
@keyframes comic-panel-enter{from{opacity:.6;translate:35px 6px}to{opacity:1;translate:0 0}}
@keyframes comic-camera{0%,100%{scale:1;translate:0 0}50%{scale:1.025;translate:-4px 2px}}
@keyframes comic-speech{0%,100%{translate:0 0;scale:1}25%{translate:0 -7px;scale:1.025}50%,80%{translate:0 0;scale:1}}
@keyframes door-ringing{0%{scale:.88;rotate:-8deg;translate:0 3px}12%{scale:1.2;rotate:5deg;translate:0 -9px}23%{scale:1.03;rotate:-5deg;translate:0 -3px}35%{scale:1.14;rotate:3deg;translate:0 -7px}50%,100%{scale:1;rotate:0deg;translate:0 0}}
@keyframes door-ripples{0%{opacity:0;scale:.35}18%{opacity:.85}100%{opacity:0;scale:2.8}}
@keyframes door-reaction{0%,45%,100%{translate:0 0;scale:1}20%{translate:0 -8px;scale:1.05}32%{translate:0 0;scale:1}}
@keyframes worker-alive{0%,100%{translate:0 0;rotate:0deg}50%{translate:-3px -7px;rotate:-.7deg}}
@keyframes reunion-surprise{0%,100%{scale:1;rotate:0deg}18%{scale:1.18;rotate:-5deg}34%{scale:1;rotate:3deg}48%,80%{scale:1;rotate:0deg}}
@keyframes thought-alive{0%,100%{translate:0 0;rotate:0deg}45%{translate:0 -5px;rotate:1deg}}
@media(max-width:650px){
 @keyframes answer-arrives{0%,16%{opacity:.18;translate:0 22px;scale:.72;rotate:7deg}25%{opacity:1;translate:0 -8px;scale:1.09;rotate:-4deg}33%{opacity:1;translate:0 0;scale:1;rotate:0deg}47%{opacity:1;translate:0 -8px;scale:1.025;rotate:1deg}61%{opacity:1;translate:0 0;scale:1;rotate:0deg}76%{opacity:1;translate:0 -6px;scale:1.02;rotate:1deg}88%,100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
 .choice-question.question-animated h2{transform-origin:left center}
}
.comic-paused .choice-question *,.comic-paused .oem-reader *{animation:none!important}
@media(prefers-reduced-motion:reduce){.choice-question *,.oem-reader *{animation:none!important;transition:none!important}}
