/* Celebrations: confetti bursts, pop-ins and completion feedback. */

.confetti-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2000;
}

.confetti-piece {
  position: absolute;
  width: var(--size);
  height: calc(var(--size) * 1.3);
  background: var(--color);
  opacity: 0;
  animation: confetti-burst var(--dur) cubic-bezier(0.15, 0.65, 0.35, 1) var(--delay);
  will-change: transform, opacity;
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.35)) rotate(calc(var(--rot) * 0.6));
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
}

/* Generic pop-in for elements highlighted by celebration_controller. */
.celebrate-pop {
  animation: celebrate-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

@keyframes celebrate-pop {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Progress bar flash when an objective is completed. */
.progress-fill.celebrate-glow {
  animation: celebrate-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), progress-glow 1.4s ease-out 0.3s;
}

@keyframes progress-glow {
  0% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  }
  35% {
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Task/subtask completion feedback, played before the toggle submits. */
.is-completing {
  animation: task-complete-ring 0.6s ease-out;
  border-radius: 8px;
}

@keyframes task-complete-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 182, 253, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(2, 182, 253, 0);
  }
}

.is-completing .task-checkbox {
  animation: checkbox-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkbox-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* Quick-log emoji selection. */
.emoji-btn.is-selected {
  animation: emoji-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emoji-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35) rotate(-6deg);
  }
  100% {
    transform: scale(1.12);
  }
}

/* Quick-log submitted without picking an emoji. */
.shake {
  animation: shake 0.45s ease;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(7px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-layer {
    display: none;
  }

  .celebrate-pop,
  .progress-fill.celebrate-glow,
  .is-completing,
  .is-completing .task-checkbox,
  .emoji-btn.is-selected,
  .shake {
    animation: none;
  }
}