<template>
  <LoginBackground :show-logo="false">
    <view class="welcome-container">
      <!-- 主卡片：女孩 + 粉色玩偶 -->
      <view class="welcome-card">
        <image
          class="welcome-bg"
          src="/static/login/portal/welcome-bg.png"
          mode="aspectFill"
        ></image>
      </view>

      <!-- 进入 TOPFANS 世界按钮 -->
      <view class="enter-btn-wrapper">
        <view class="enter-btn" @tap="handleEnter">
          <text class="enter-btn-text">进入 TOPFANS 世界</text>
        </view>
      </view>
    </view>
  </LoginBackground>
</template>

<script setup>
import LoginBackground from "@/components/LoginBackground.vue";

const emit = defineEmits(["enter"]);

const handleEnter = () => {
  emit("enter");
};
</script>

<style scoped>
.welcome-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
}

/* 背景 */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.68;
}

.bg-character {
  position: absolute;
  top: 60rpx;
  left: 50%;
  transform: translateX(-50%) rotate(0.5deg);
  width: 128%;
  height: 60%;
  z-index: 1;
  filter: blur(2rpx);
  opacity: 0.9;
  object-fit: contain;
  object-position: center top;
}

.bg-character-shadow {
  position: absolute;
  top: 470rpx;
  left: 50%;
  transform: translateX(-50%) rotate(0.5deg);
  width: 145%;
  height: 50%;
  z-index: 2;
  filter: blur(4rpx);
  opacity: 0.9;
  object-fit: contain;
  object-position: center bottom;
}

.topfans-logo-img {
  position: absolute;
  top: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 698rpx;
  height: 150rpx;
  z-index: 10;
  filter: drop-shadow(0 4rpx 18rpx rgba(177, 19, 19, 0.49));
}

/* 欢迎卡片 */
.welcome-card {
  position: absolute;
  top: 128rpx;
  left: 20rpx;
  width: 710rpx;
  height: 1376rpx;
  border-radius: 56rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 41rpx 0 rgba(0, 0, 0, 0.31);
  overflow: hidden;
  z-index: 5;
}

.welcome-bg {
  width: 100%;
  height: 100%;
}

/* 进入按钮 */
.enter-btn-wrapper {
  position: absolute;
  left: 50%;
  bottom: 160rpx;
  transform: translateX(-50%);
  z-index: 10;
}

.enter-btn {
  width: 450rpx;
  height: 90rpx;
  border-radius: 58rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.38) 0%,
    rgba(252, 100, 102, 0.78) 64%,
    rgba(244, 88, 104, 0.78) 100%
  );
  box-shadow: 4rpx 4rpx 8rpx 0 rgba(242, 21, 21, 0.47);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
}

.enter-btn-text {
  font-size: 46rpx;
  color: #fff9e7;
  text-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.84);
  font-family: "Abhaya Libre Medium", sans-serif;
}
</style>
