<template>
  <div class="challenge-success text-center relative">
    <!-- Celebration particles -->
    <div class="particles absolute inset-0 overflow-hidden pointer-events-none">
      <span
        v-for="i in 20"
        :key="i"
        class="particle"
        :style="{ '--delay': `${i * 0.1}s`, '--x': `${Math.random() * 100}%` }"
      />
    </div>

    <div class="relative z-10">
      <div class="text-6xl mb-4 animate-bounce" aria-hidden="true">*</div>

      <h2 class="text-3xl font-ui font-bold text-sky-accent mb-4">
        {{ $t('challenge.success') }}
      </h2>

      <p class="font-narrative text-xl text-sky-text mb-8">
        {{ $t('challenge.successMessage') }}
      </p>

      <p class="text-sky-text/60">
        {{ $t('challenge.redirecting') }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// No dependencies needed - pure CSS animation
</script>

<style scoped>
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: confetti 2s ease-out forwards;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  top: 50%;
  opacity: 0;
}

.particle:nth-child(odd) {
  background-color: var(--sky-accent, #fa784f);
}

.particle:nth-child(even) {
  background-color: #3b82f6;
}

.particle:nth-child(3n) {
  background-color: #10b981;
}

.particle:nth-child(4n) {
  background-color: #f59e0b;
}

@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) rotate(720deg);
    opacity: 0;
  }
}
</style>
