/* QCube characters: shared by the home tile and the QCube page. Animations only; layout lives with the user. */
/* the page's signature motions, reused by the homepage tile so both move the same way */
@keyframes ha-lower { from { transform: translateY(-105%); } 70% { transform: translateY(2%); } to { transform: translateY(0); } }
@keyframes ha-hop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 62% { transform: translateY(0) scale(1.08, .92); } 72% { transform: translateY(-18px) scale(.97, 1.05); } 82% { transform: translateY(0) scale(1.08, .92); } 90% { transform: scale(1, 1); } }
/* characters */
.qa { width: 100%; height: 100%; overflow: visible; color: #14141a; filter: url(#wobble-lite); display: block; }
.qa text { font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif; font-weight: 700; }

/* chandelier: sways, eyes wander, sparks rise */
.qa-sway { transform-origin: 85px -40px; animation: qa-sway 3.4s ease-in-out infinite alternate; }
@keyframes qa-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.qa-chandelier .pupil, .qa-photon .pupil, .qa-frog .pupil { animation: qa-look 2.6s ease-in-out infinite alternate; }
@keyframes qa-look { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.qa-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: qa-spark 1.7s ease-out infinite; }
.qa-spark.sp2 { animation-delay: .3s; --dx: 14px; } .qa-spark.sp3 { animation-delay: .65s; --dx: 2px; } .qa-spark.sp4 { animation-delay: .95s; --dx: -16px; }
.qa-spark.sp5 { animation-delay: 1.2s; --dx: 18px; } .qa-spark.sp6 { animation-delay: 1.45s; --dx: -6px; } .qa-spark.sp1 { --dx: -12px; }
@keyframes qa-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  14% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .2), -12px) scale(1) rotate(20deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -86px) scale(.5) rotate(160deg); }
}

/* photon: shuttles between the mirrors, flips at each wall, wall flashes "boing!" */
.ph-move { animation: ph-move 3s ease-in-out infinite; }
.ph-flip { animation: ph-flip 3s ease-in-out infinite; }
.ph-tail { transform-box: fill-box; transform-origin: right center; animation: ph-tail .32s ease-in-out infinite alternate; }
@keyframes ph-move { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(100px); } }
@keyframes ph-flip {
  0% { transform: scale(.7, 1.2); } 7% { transform: scale(1, 1); } 43% { transform: scale(1, 1); }
  50% { transform: scale(-.7, 1.2); } 57% { transform: scale(-1, 1); } 93% { transform: scale(-1, 1); } 100% { transform: scale(.7, 1.2); }
}
@keyframes ph-tail { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }
.hit-l, .hit-r, .hit-lt, .hit-rt { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hit-l, .hit-lt { animation: ph-hit-l 3s ease-out infinite; }
.hit-r, .hit-rt { animation: ph-hit-r 3s ease-out infinite; }
@keyframes ph-hit-l { 0% { opacity: 1; transform: scale(1.4) rotate(0); } 14% { opacity: 0; transform: scale(.6) rotate(50deg); } 15%, 94% { opacity: 0; } 97%, 100% { opacity: 1; transform: scale(1.1) rotate(0); } }
@keyframes ph-hit-r { 0%, 46% { opacity: 0; } 50% { opacity: 1; transform: scale(1.4) rotate(0); } 64% { opacity: 0; transform: scale(.6) rotate(50deg); } 65%, 100% { opacity: 0; } }

/* frog: head sways, blinks, the cube wobbles and its stickers cycle colours */
.qa-frog .f-head { transform-origin: 110px 100px; animation: qa-sway-f 2.6s ease-in-out infinite alternate; }
.qa-frog .f-eyes { transform-origin: 110px 66px; animation: qa-blink 4s infinite; }
.qa-cube { transform-origin: 0 0; animation: qa-twist 2.4s ease-in-out infinite; }
@keyframes qa-sway-f { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes qa-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes qa-twist { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) scale(1.05); } }
.qa-cube [class^="tp"] { animation: qa-col 3.2s steps(1) infinite; }
.qa-cube .tp1 { animation-delay: -.8s; } .qa-cube .tp2 { animation-delay: -1.6s; } .qa-cube .tp3 { animation-delay: -2.4s; }
@keyframes qa-col { 0% { fill: #2f9e6a; } 33% { fill: #2f6fe0; } 66% { fill: #d9483f; } }


@media (prefers-reduced-motion: reduce) {
  .qa-sway, .qa *, .ph-move, .ph-flip { animation: none !important; }
  .qa-spark, .hit-l, .hit-r, .hit-lt, .hit-rt { display: none; }
}