<template>
  <Transition name="splash-fade" appear>
    <div v-if="visible" class="fixed inset-0 z-[99999] flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#f8f5f2] via-[#e9f0f7] to-[#f4eaf1]">
      <!-- Ambient glow blobs -->
      <div class="glow-blob absolute w-[420px] h-[420px] -top-20 -left-24 rounded-full blur-[80px] pointer-events-none" style="background: radial-gradient(circle, rgba(180,154,203,0.35) 0%, transparent 70%); animation: glow-pulse 3s ease-in-out infinite alternate;"></div>
      <div class="glow-blob absolute w-[380px] h-[380px] -bottom-16 -right-20 rounded-full blur-[80px] pointer-events-none" style="background: radial-gradient(circle, rgba(145,168,208,0.3) 0%, transparent 70%); animation: glow-pulse 3s ease-in-out 1.5s infinite alternate;"></div>

      <!-- Center content -->
      <div class="relative z-[1] flex flex-col items-center gap-0">
        <!-- Rings + logo -->
        <div class="relative w-40 h-40 flex items-center justify-center mb-7">
          <div class="ring-anim absolute rounded-full border-2 border-[rgba(180,154,203,0.4)]" style="animation-delay: 0s;"></div>
          <div class="ring-anim absolute rounded-full border-2 border-[rgba(180,154,203,0.4)]" style="animation-delay: 0.8s;"></div>
          <div class="ring-anim absolute rounded-full border-2 border-[rgba(180,154,203,0.4)]" style="animation-delay: 1.6s;"></div>
          <div class="relative z-[2]" style="animation: logo-float 2.8s ease-in-out infinite;">
            <img
              src="/pwa-192x192.png"
              alt="萌芽小店"
              class="w-[88px] h-[88px] rounded-[22px] object-cover shadow-[0_12px_40px_rgba(33,33,40,0.18),0_2px_8px_rgba(180,154,203,0.25)]"
            />
          </div>
        </div>

        <h1 class="text-[26px] font-extrabold text-[#2c2b2d] tracking-[2px] mb-1.5" style="font-family: var(--font-serif);">萌芽小店</h1>
        <p class="text-[13px] text-[#8a8690] tracking-[3px] mb-5">加载中</p>

        <!-- Dots -->
        <div class="flex gap-2 items-center mt-1">
          <span class="dot-bounce block w-2 h-2 rounded-full bg-[#4ade80]" style="animation-delay: 0s;"></span>
          <span class="dot-bounce block w-2 h-2 rounded-full bg-[#4ade80]" style="animation-delay: 0.2s;"></span>
          <span class="dot-bounce block w-2 h-2 rounded-full bg-[#4ade80]" style="animation-delay: 0.4s;"></span>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
defineProps({ visible: { type: Boolean, default: true } })
</script>

<style scoped>
/* Keyframe animations – cannot be replicated with Tailwind utilities */
@keyframes glow-pulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.12); }
}

@keyframes ring-expand {
  0%   { width: 88px; height: 88px; opacity: 0.8; border-color: rgba(180,154,203,0.5); }
  100% { width: 200px; height: 200px; opacity: 0; border-color: rgba(180,154,203,0); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes dot-bounce {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
  30%            { transform: scale(1.2); opacity: 1; }
}

.ring-anim {
  width: 100px;
  height: 100px;
  animation: ring-expand 2.4s ease-out infinite;
}

.dot-bounce {
  animation: dot-bounce 1.2s ease-in-out infinite;
}

/* Splash exit transition */
.splash-fade-leave-active {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.splash-fade-leave-to {
  opacity: 0;
  transform: scale(1.04);
}
</style>
