/* BoboEdu: celebration-effects.css
   Party poppers, baby Freud and daily streak celebrations. */

/* Celebrations: party poppers on a right answer, crying baby Freud on a wrong one */
#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
#fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.popper {
  position: absolute;
  width: 76px;
  height: 76px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.popper.left {
  left: calc(8px + env(safe-area-inset-left, 0px));
}
.popper.right {
  right: calc(8px + env(safe-area-inset-right, 0px));
  transform: scaleX(-1);
}
.popper svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 20% 90%;
  animation:
    pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both,
    gone 0.35s ease-in 1.35s forwards;
}
@keyframes pop {
  from {
    transform: scale(0.2) rotate(-20deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}
@keyframes gone {
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}
.baby {
  position: absolute;
  left: 50%;
  width: min(230px, 52vw);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 130%);
  animation: babyIn 0.45s cubic-bezier(0.2, 1.3, 0.5, 1) forwards;
}
.baby.out {
  animation: babyOut 0.4s ease-in forwards;
}
@keyframes babyIn {
  to {
    transform: translate(-50%, 0);
  }
}
@keyframes babyOut {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 130%);
  }
}
.baby .sob {
  transform-origin: 50% 90%;
  animation: sob 0.32s ease-in-out 0.45s infinite alternate;
}
@keyframes sob {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg) translateY(-3px);
  }
}
.baby .tear {
  animation: drip 0.8s ease-in infinite;
}
.baby .tear.t2 {
  animation-delay: 0.4s;
}
.baby .tear.t3 {
  animation-delay: 0.2s;
}
.baby .tear.t4 {
  animation-delay: 0.6s;
}
@keyframes drip {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(46px);
    opacity: 0;
  }
}
.baby .bubble {
  position: absolute;
  top: -6px;
  right: -34px;
  padding: 6px 12px;
  border-radius: 14px;
  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: 20px;
  white-space: nowrap;
}
.baby svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Streak counter and rewards */
.streak {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.streak b {
  color: var(--ink);
  font-weight: 600;
}
.switches {
  display: grid;
  gap: 10px;
}
.award {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(320px, 80vw);
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: awardIn 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) forwards;
}
.award.out {
  animation: awardOut 0.4s ease-in forwards;
}
@keyframes awardIn {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes awardOut {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
.award svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}
.award .cap {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.award .cap strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.award .cap span {
  font-size: 14px;
  color: var(--muted);
}
.award .bobo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wobble 1.5s ease-in-out 0.35s 2;
}
@keyframes wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-15deg);
  }
  35% {
    transform: rotate(12deg);
  }
  55% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(4deg);
  }
  90% {
    transform: rotate(-1deg);
  }
}
.award .dart {
  animation: dart 0.33s linear 0.45s both;
}
@keyframes dart {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(138px);
    opacity: 0;
  }
}
.award .gun {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: recoil 0.25s ease-out 0.42s both;
}
@keyframes recoil {
  0%,
  100% {
    transform: none;
  }
  40% {
    transform: translateX(-8px) rotate(-6deg);
  }
}
.award .popword {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: popword 0.9s ease-out 0.76s both;
}
@keyframes popword {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(1.25);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
  }
}
.award .deflate {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: deflate 1.5s cubic-bezier(0.5, 0, 0.7, 1) 0.8s forwards;
}
@keyframes deflate {
  0% {
    transform: none;
  }
  8% {
    transform: scale(1.06, 0.97);
  }
  30% {
    transform: scale(1.04, 0.8) rotate(4deg);
  }
  55% {
    transform: scale(1.12, 0.55) rotate(-5deg);
  }
  100% {
    transform: scale(1.3, 0.18) rotate(-4deg) skewX(10deg);
  }
}
.award .puff {
  opacity: 0;
  animation: puff 0.7s ease-out infinite;
}
.award .puff.p1 {
  animation-delay: 0.85s;
}
.award .puff.p2 {
  animation-delay: 1.05s;
}
.award .puff.p3 {
  animation-delay: 1.25s;
}
@keyframes puff {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-14px, -12px);
  }
}
.award .swing {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: swing 0.28s ease-in-out infinite alternate;
}
@keyframes swing {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}
.award .ding {
  animation: blink 0.56s steps(1) infinite;
}
.award .ding.d2 {
  animation-delay: 0.28s;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.award .drool {
  animation: drool 1s ease-in infinite;
}
.award .drool.r2 {
  animation-delay: 0.5s;
}
@keyframes drool {
  0% {
    transform: translateY(0) scaleY(0.6);
    opacity: 1;
  }
  100% {
    transform: translateY(34px) scaleY(1.3);
    opacity: 0;
  }
}
.award .tail {
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: wag 0.2s ease-in-out infinite alternate;
}
@keyframes wag {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(14deg);
  }
}
.award .handL {
  animation: clapL 0.25s ease-in infinite alternate;
}
.award .handR {
  animation: clapR 0.25s ease-in infinite alternate;
}
@keyframes clapL {
  from {
    transform: translateX(-9px);
  }
  to {
    transform: translateX(3px);
  }
}
@keyframes clapR {
  from {
    transform: translateX(9px);
  }
  to {
    transform: translateX(-3px);
  }
}
.award .clapmark {
  animation: blink 0.5s steps(1) 0.25s infinite;
}
.award .nod {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: nod 0.5s ease-in-out infinite alternate;
}
@keyframes nod {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}
.award .gunpop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gunpop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s both;
}
@keyframes gunpop {
  0% {
    transform: scale(0) rotate(-35deg);
  }
  60% {
    transform: scale(1.15) rotate(8deg);
  }
  80% {
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.award .dart2 {
  opacity: 0;
  animation: dart2 0.55s linear 0.85s both;
}
@keyframes dart2 {
  0% {
    opacity: 1;
    transform: none;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(110px);
  }
}
.award .shock {
  animation: jitter 0.09s linear infinite;
}
@keyframes jitter {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, -10px);
  }
  50% {
    transform: translate(3px, -4px);
  }
  75% {
    transform: translate(-2px, -12px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.award .zap {
  animation: blink 0.18s steps(1) infinite;
}
.award .zap.z2 {
  animation-delay: 0.09s;
}
.award .strain {
  animation: strain 0.14s linear infinite;
}
@keyframes strain {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}
.award .stink {
  opacity: 0;
  animation: stink 1.4s ease-out infinite;
}
.award .stink.s2 {
  animation-delay: 0.45s;
}
.award .stink.s3 {
  animation-delay: 0.9s;
}
@keyframes stink {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-26px);
  }
}
.award .sob {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: sob 0.32s ease-in-out infinite alternate;
}
.award .tear {
  animation: drip 0.8s ease-in infinite;
}
.award .tear.t2 {
  animation-delay: 0.4s;
}
.award .tick {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tick 0.5s ease-in-out infinite alternate;
}
@keyframes tick {
  from {
    transform: rotate(-24deg);
  }
  to {
    transform: rotate(24deg);
  }
}