/* 基础样式 */
:root {
  --bg: #FFFDF8;
  --line: #171717;
  --cream-dog: #EFD8A6;
  --white-dog: #FAFAF5;
  --pink: #FF8A8A;
  --heart: #FF8585;
  --blue: #78CDD3;
  --yellow: #F6C431;
  --green: #5BA979;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "LXGW WenKai", "ZCOOL KuaiLe", "Ma Shan Zheng", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--line);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
}

/* 主标题 */
.main-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--line);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
  animation: titleFadeIn 1.5s ease-in-out 0.8s both;
  position: relative;
  z-index: 10;
}

@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 主舞台 */
.stage {
  width: 100%;
  max-width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

/* 小狗主视觉 */
.dog-main {
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dogMainAnimation 12s ease-in-out infinite;
}

.dog-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

@keyframes dogMainAnimation {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  8% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  15% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  20% {
    transform: translateY(-10px) scale(1.05) rotate(5deg);
  }
  25% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.08) rotate(-3deg);
  }
  50% {
    transform: scale(1.08) rotate(3deg);
  }
  58% {
    transform: scale(1) rotate(0deg);
  }
  66% {
    transform: scale(1.05);
  }
  75% {
    transform: scale(1);
  }
  83% {
    transform: scale(1) rotate(0deg);
  }
  92% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
}

/* 装饰元素 */
.decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.decoration {
  position: absolute;
  font-size: 2rem;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* 爱心 */
.heart {
  color: var(--heart);
  font-size: 2.5rem;
}

.heart-1 {
  top: 15%;
  left: 15%;
  animation: floatHeart1 12s infinite;
}

.heart-2 {
  top: 20%;
  right: 18%;
  animation: floatHeart2 12s 0.5s infinite;
}

.heart-3 {
  bottom: 25%;
  left: 12%;
  animation: floatHeart3 12s 1s infinite;
}

@keyframes floatHeart1 {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  60%, 80% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
}

@keyframes floatHeart2 {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  60%, 85% {
    opacity: 1;
    transform: translateY(-15px) scale(1.1) rotate(15deg);
  }
}

@keyframes floatHeart3 {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  65%, 90% {
    opacity: 1;
    transform: translateY(-25px) scale(0.9);
  }
}

/* 音符 */
.note {
  font-size: 2rem;
}

.note-1 {
  top: 30%;
  left: 8%;
  color: var(--blue);
  animation: floatNote1 12s infinite;
}

.note-2 {
  top: 35%;
  right: 10%;
  color: var(--yellow);
  animation: floatNote2 12s 0.3s infinite;
}

.note-3 {
  bottom: 30%;
  right: 15%;
  color: var(--green);
  animation: floatNote3 12s 0.6s infinite;
}

@keyframes floatNote1 {
  0%, 100% {
    opacity: 0;
    transform: translateX(-30px) translateY(0);
  }
  25%, 45% {
    opacity: 1;
    transform: translateX(0) translateY(-30px);
  }
}

@keyframes floatNote2 {
  0%, 100% {
    opacity: 0;
    transform: translateX(30px) translateY(0) rotate(0deg);
  }
  28%, 48% {
    opacity: 1;
    transform: translateX(0) translateY(-35px) rotate(20deg);
  }
}

@keyframes floatNote3 {
  0%, 100% {
    opacity: 0;
    transform: translateX(20px) translateY(0);
  }
  30%, 50% {
    opacity: 1;
    transform: translateX(0) translateY(-25px);
  }
}

/* 爪印 */
.paw {
  font-size: 1.8rem;
  color: var(--cream-dog);
  opacity: 0.6;
}

.paw-1 {
  bottom: 15%;
  left: 20%;
  animation: fadePaw1 12s infinite;
}

.paw-2 {
  bottom: 20%;
  right: 22%;
  animation: fadePaw2 12s 0.8s infinite;
}

@keyframes fadePaw1 {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  40%, 60% {
    opacity: 0.7;
    transform: scale(1) rotate(10deg);
  }
}

@keyframes fadePaw2 {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  42%, 62% {
    opacity: 0.7;
    transform: scale(1) rotate(-15deg);
  }
}

/* 闪光 */
.sparkle {
  font-size: 1.5rem;
  color: var(--yellow);
}

.sparkle-1 {
  top: 25%;
  right: 25%;
  animation: twinkle1 12s infinite;
}

.sparkle-2 {
  bottom: 35%;
  left: 22%;
  animation: twinkle2 12s 0.5s infinite;
}

@keyframes twinkle1 {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50%, 70% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

@keyframes twinkle2 {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  52%, 72% {
    opacity: 1;
    transform: scale(1) rotate(-180deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.2rem;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
  }

  .stage {
    max-width: 280px;
    height: 280px;
  }

  .dog-main {
    width: 200px;
    height: 200px;
  }

  .decoration {
    font-size: 1.5rem;
  }

  .heart {
    font-size: 1.8rem;
  }

  .note {
    font-size: 1.5rem;
  }

  .paw {
    font-size: 1.3rem;
  }

  .sparkle {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 15px;
  }

  .main-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .stage {
    max-width: 220px;
    height: 220px;
  }

  .dog-main {
    width: 180px;
    height: 180px;
  }

  .decoration {
    font-size: 1.2rem;
  }

  .heart {
    font-size: 1.5rem;
  }

  .note {
    font-size: 1.2rem;
  }

  .paw {
    font-size: 1rem;
  }

  .sparkle {
    font-size: 1rem;
  }
}

/* 横屏移动设备 */
@media (max-height: 500px) and (orientation: landscape) {
  .main-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .stage {
    max-width: 200px;
    height: 200px;
  }

  .dog-main {
    width: 160px;
    height: 160px;
  }
}