/* BoboEdu: answer-animations.css
   The 12 correct-answer animations you can buy in the shop. */

/* Buyable correct-answer animations. Base positions are the resting pose (used for shop thumbnails); keyframes animate into it. */
#fx > .anim {
  position: absolute;
}
.anim svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.anim .say {
  position: absolute;
  padding: 6px 12px;
  border-radius: 14px;
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 4.4vw, 20px);
  opacity: 0;
  animation: sayIn 0.35s cubic-bezier(0.2, 1.4, 0.5, 1) forwards;
}
@keyframes sayIn {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
.a-cap .say,
.a-disco .say,
.a-couch .say,
.a-tug .say,
.a-ice .say,
.a-flex .say,
.a-swim .say {
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 88vw;
  white-space: normal;
  text-align: center;
}

.a-bottom {
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 130%);
  animation: babyIn 0.45s cubic-bezier(0.2, 1.3, 0.5, 1) forwards;
}
.a-bottom.out,
.a-couch.out {
  animation: babyOut 0.4s ease-in forwards;
}

/* Gage */
.a-gage {
  width: min(220px, 52vw);
}
.a-gage .say {
  right: -30px;
  top: 2px;
  animation-delay: 1.05s;
}
.a-gage .g-rod {
  animation: gRod 0.26s linear 0.5s both;
}
@keyframes gRod {
  from {
    transform: translate(-196px, 418px);
  }
  to {
    transform: none;
  }
}
.a-gage .g-wob {
  transform-origin: 100px 190px;
  animation: wobble 1s ease-in-out 0.76s;
}
.a-gage .g-pow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: popword 0.9s ease-out 0.76s both;
}

/* Disco */
.a-beams {
  inset: 0;
  overflow: hidden;
  opacity: 0;
  animation: beams 3s ease-in-out forwards;
}
.a-beams::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 70px;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 64, 200, 0.26) 0 6deg,
    transparent 6deg 30deg,
    rgba(64, 220, 255, 0.26) 30deg 36deg,
    transparent 36deg 60deg,
    rgba(255, 226, 64, 0.28) 60deg 66deg,
    transparent 66deg 90deg
  );
  animation: spin 2.4s linear infinite;
}
@keyframes beams {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.a-disco {
  left: 50%;
  top: 0;
  width: min(150px, 36vw);
  transform: translate(-50%, -130%);
  animation: dropIn 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
.a-disco.out {
  animation: dropOut 0.4s ease-in forwards;
}
@keyframes dropIn {
  to {
    transform: translate(-50%, 0);
  }
}
@keyframes dropOut {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, -130%);
  }
}
.a-disco .d-ball {
  transform-origin: 80px 40px;
  animation: sway 0.6s ease-in-out infinite alternate;
}
@keyframes sway {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
.a-disco .fac {
  animation: blink 0.5s steps(1) infinite;
}
.a-disco .d-sp {
  animation: blink 0.3s steps(1) infinite;
}
.a-disco .say {
  top: 100%;
  margin-top: 6px;
  animation-delay: 0.7s;
}

/* Couch */
.a-couch {
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  width: min(320px, 84vw);
  transform: translateX(-50%);
  animation: slideIn 0.7s cubic-bezier(0.2, 1.1, 0.4, 1) both;
}
.a-couch.out {
  animation: slideOut 0.45s ease-in forwards;
}
@keyframes slideIn {
  from {
    transform: translateX(calc(-50% - 110vw));
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes slideOut {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(calc(-50% + 110vw));
  }
}
.a-couch .say {
  bottom: 100%;
  margin-bottom: 4px;
  animation-delay: 0.8s;
}
.a-couch .ring {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: ring 1.3s ease-out 0.5s infinite;
}
.a-couch .ring.r2 {
  animation-delay: 1.15s;
}
@keyframes ring {
  0% {
    opacity: 0.9;
    transform: translate(0, 0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(14px, -46px) scale(1.6);
  }
}

/* Maslow rocket */
.a-rocket {
  left: 50%;
  bottom: -14px;
  width: min(140px, 34vw);
  transform: translateX(-50%);
  animation: launch 1.5s cubic-bezier(0.55, 0, 0.9, 0.55) 0.75s forwards;
}
@keyframes launch {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translate(-50%, -140vh);
  }
}
.a-rocket .r-ship {
  animation: shake 0.07s linear 10;
}
@keyframes shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, 1px);
  }
  75% {
    transform: translate(3px, -1px);
  }
}
.a-rocket .r-flame {
  transform-origin: 80px 200px;
  animation: flick 0.09s linear infinite alternate;
}
@keyframes flick {
  from {
    transform: scaleY(0.75);
  }
  to {
    transform: scaleY(1.2);
  }
}
.a-smoke {
  left: 50%;
  bottom: -10px;
  width: min(300px, 76vw);
  transform: translateX(-50%);
}
.a-smoke .puff {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: smoke 1.6s ease-out 0.55s forwards;
}
.a-smoke .puff.p2 {
  animation-delay: 0.7s;
}
.a-smoke .puff.p3 {
  animation-delay: 0.85s;
}
@keyframes smoke {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.8) translateY(-10px);
  }
}
.a-cap {
  left: 0;
  right: 0;
  top: 30%;
}
.a-cap .say {
  position: relative;
  display: block;
  font-size: clamp(20px, 5vw, 28px);
  animation-delay: 1s;
}

/* Thorndike's cat */
.a-cat {
  width: min(210px, 50vw);
}
.a-cat .say {
  right: -34px;
  top: 0;
  animation-delay: 1.05s;
}
.a-cat .c-shake {
  animation: shake 0.08s linear 9;
}
.a-cat .c-lid {
  transform-origin: 100px 114px;
  animation: lidFly 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) 0.72s both;
}
@keyframes lidFly {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translate(70px, -170px) rotate(130deg);
    opacity: 0;
  }
}
.a-cat .c-lid {
  opacity: 0;
}
.a-cat .c-cat {
  animation: catUp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.75s both;
}
@keyframes catUp {
  from {
    transform: translateY(64px);
  }
  to {
    transform: none;
  }
}

/* Seahorse */
.a-swim {
  top: 34%;
  left: 0;
  width: min(190px, 42vw);
  transform: translateX(-110%);
  animation: swim 2.8s linear forwards;
}
@keyframes swim {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(calc(100vw + 10%));
  }
}
.a-swim .s-bob {
  animation: bob 0.45s ease-in-out infinite alternate;
}
@keyframes bob {
  from {
    transform: translateY(-10px) rotate(-4deg);
  }
  to {
    transform: translateY(10px) rotate(4deg);
  }
}
.a-swim .bub {
  animation: rise 0.9s ease-out infinite;
}
@keyframes rise {
  from {
    transform: translateY(10px);
    opacity: 1;
  }
  to {
    transform: translateY(-24px);
    opacity: 0;
  }
}
.a-swim .say {
  bottom: 100%;
  animation-delay: 0.4s;
}

/* Id vs superego */
.a-tug {
  width: min(380px, 94vw);
}
.a-tug .say {
  top: 6px;
  animation-delay: 1.75s;
}
.a-tug .t-ego {
  transform-origin: 190px 178px;
  animation:
    strainX 0.12s linear 11,
    egoSit 0.5s ease-out 1.36s forwards;
}
@keyframes strainX {
  0%,
  100% {
    transform: scaleX(1.12) translateX(-2px);
  }
  50% {
    transform: scaleX(1.18) translateX(2px);
  }
}
@keyframes egoSit {
  0% {
    transform: scale(1.18, 0.8);
  }
  60% {
    transform: scale(0.94, 1.06);
  }
  100% {
    transform: none;
  }
}
.a-tug .t-devil {
  transform-origin: 60px 178px;
  animation:
    leanL 0.5s ease-in-out forwards,
    fallL 0.5s cubic-bezier(0.3, 0.6, 0.5, 1) 1.35s forwards;
}
.a-tug .t-angel {
  transform-origin: 322px 178px;
  animation:
    leanR 0.5s ease-in-out forwards,
    fallR 0.5s cubic-bezier(0.3, 0.6, 0.5, 1) 1.35s forwards;
}
@keyframes leanL {
  from {
    transform: none;
  }
  to {
    transform: rotate(-12deg);
  }
}
@keyframes leanR {
  from {
    transform: none;
  }
  to {
    transform: rotate(12deg);
  }
}
@keyframes fallL {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: translateX(-24px) rotate(-70deg);
  }
}
@keyframes fallR {
  from {
    transform: rotate(12deg);
  }
  to {
    transform: translateX(24px) rotate(70deg);
  }
}
.a-tug .t-rope {
  animation: ropeDrop 0.4s ease-in 1.35s forwards;
}
@keyframes ropeDrop {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateY(58px);
    opacity: 0;
  }
}
.a-tug .sweat {
  animation: drip 0.6s ease-in infinite;
}
.a-tug .sweat.s2 {
  animation-delay: 0.3s;
}

/* Little Albert's rat */
.a-albert {
  left: 0;
  right: 0;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  height: min(170px, 32vh);
}
.a-albert .al-rat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(110px, 26vw);
  transform: translateX(-130%);
  animation: alRat 2.7s linear forwards;
}
@keyframes alRat {
  0% {
    transform: translateX(-130%);
  }
  30% {
    transform: translateX(28vw);
  }
  36% {
    transform: translateX(28vw);
  }
  42% {
    transform: translate(28vw, -70px) scale(1.12);
  }
  50% {
    transform: translate(28vw, 0) scaleX(-1);
  }
  78% {
    transform: translateX(-140%) scaleX(-1);
  }
  100% {
    transform: translateX(-140%) scaleX(-1);
  }
}
.a-albert .al-fur,
.a-albert .al-ex {
  opacity: 0;
  animation: alFright 0.9s steps(1) 0.98s;
}
@keyframes alFright {
  0%,
  100% {
    opacity: 1;
  }
}
.a-albert .al-bang {
  position: absolute;
  left: 58%;
  bottom: 0;
  width: min(140px, 34vw);
  opacity: 0;
  animation:
    fadeIn 0.3s ease-out 0.35s forwards,
    fadeOut 0.3s ease-in 2.3s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.a-albert .al-hammer {
  transform-origin: 150px 60px;
  animation: hammer 0.45s cubic-bezier(0.6, 0, 0.9, 0.5) 0.55s both;
}
@keyframes hammer {
  0% {
    transform: rotate(-80deg);
  }
  85% {
    transform: rotate(4deg);
  }
  100% {
    transform: none;
  }
}
.a-albert .al-word {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: popword 1s ease-out 0.95s both;
}

/* Neuron */
.a-neuron {
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: min(560px, 96vw);
  transform: translate(-50%, 130%);
  animation: babyIn 0.4s cubic-bezier(0.2, 1.3, 0.5, 1) forwards;
}
.a-neuron.out {
  animation: babyOut 0.4s ease-in forwards;
}
.a-neuron .n-spark {
  animation: spark 0.8s cubic-bezier(0.4, 0, 0.9, 0.6) 0.35s both;
}
@keyframes spark {
  from {
    stroke-dashoffset: 7;
  }
  to {
    stroke-dashoffset: -100;
  }
}
.a-neuron .n-soma {
  animation: flash 0.35s steps(1) 2;
}
@keyframes flash {
  50% {
    fill: #fff6c9;
  }
}
.a-neuron .n-burst {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: popword 1.1s ease-out 1.1s both;
}

/* Wundt */
.a-wundt {
  width: min(260px, 62vw);
}
.a-wundt .say {
  left: 4px;
  top: -34px;
  animation-delay: 0.5s;
}
.a-wundt .w-head {
  transform-origin: 96px 170px;
  animation: bop 0.32s ease-in-out infinite alternate;
}
@keyframes bop {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
.a-wundt .w-arm {
  transform-origin: 210px 180px;
  animation: tock 0.32s ease-in-out infinite alternate;
}
@keyframes tock {
  from {
    transform: rotate(-26deg);
  }
  to {
    transform: rotate(26deg);
  }
}
.a-wundt .w-note {
  animation: note 1s ease-out infinite;
}
.a-wundt .w-note.n2 {
  animation-delay: 0.5s;
}
@keyframes note {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    transform: translateY(-26px);
    opacity: 0;
  }
}

/* Iceberg */
.a-ice {
  width: min(360px, 92vw);
}
.a-ice .say {
  top: -6px;
  animation-delay: 1.2s;
}
.a-ice .i-berg {
  animation: bergUp 0.9s cubic-bezier(0.2, 1.2, 0.5, 1) 0.25s both;
}
@keyframes bergUp {
  from {
    transform: translateY(150px);
  }
  to {
    transform: none;
  }
}
.a-ice .i-shades {
  animation: shadesDrop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) 1s both;
}
@keyframes shadesDrop {
  from {
    transform: translateY(-120px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.a-ice .i-water {
  animation: wave 1.2s linear infinite;
}
@keyframes wave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(60px);
  }
}

/* Big brain flex */
.a-flex {
  left: 50%;
  top: 44%;
  width: min(260px, 66vw);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: awardIn 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) forwards;
}
.a-flex.out {
  animation: awardOut 0.4s ease-in forwards;
}
.a-flex .say {
  top: 100%;
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  animation-delay: 0.95s;
}
.a-flex .f-armL {
  transform-origin: 78px 112px;
  animation: flexL 0.35s ease-in-out infinite alternate;
}
.a-flex .f-armR {
  transform-origin: 182px 112px;
  animation: flexR 0.35s ease-in-out infinite alternate;
}
@keyframes flexL {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-10deg) scale(1.06);
  }
}
@keyframes flexR {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(10deg) scale(1.06);
  }
}
.a-flex .f-shades {
  animation: shadesDrop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.55s both;
}
.a-flex .f-spark {
  animation: blink 0.3s steps(1) infinite;
}

/* Shop thumbnails show the resting pose */
.still *,
.still *::before,
.still *::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #fx > .anim,
  #fx > .anim * {
    animation: none !important;
  }
  .a-bottom,
  .a-neuron {
    transform: translate(-50%, 0);
  }
  .a-swim {
    transform: translateX(calc(50vw - 50%));
  }
  .a-albert .al-rat {
    transform: translateX(28vw);
  }
  .a-albert .al-bang,
  .anim .say {
    opacity: 1;
  }
  .a-disco {
    transform: translate(-50%, 0);
  }
  .a-beams {
    opacity: 0.6;
  }
  .a-flex {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  .anim.out {
    opacity: 0;
  }
}