/* 🚗 汽车从圆盘中心驶向左下角，并在目标位置持续上下浮动 */
@keyframes car-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  100% {
    visibility: visible; 
    top: 85%;
    left: 10%;
    opacity: 1;
  }
}

@keyframes car-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-12deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-12deg) translateY(-6px);
  }
}


/* moto */
@keyframes moto-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(6deg) scale(0.6);
  }
  100% {
    visibility: visible;
    top: 78%;
    left: 90%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(6deg) scale(1);
  }
}

@keyframes moto-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(6deg) scale(1) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(6deg) scale(1) translateY(-6px);
  }
}



/* 其他元素动画 */
@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-up {
  animation: float-up 3s ease-in-out infinite;
}

@keyframes sway-zoom {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.1); }
}
.sway-zoom {
  animation: sway-zoom 2.5s ease-in-out infinite;
}

@keyframes glow-fade {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.4); }
  50% { box-shadow: 0 0 30px rgba(255,255,255,0.8); }
}
.float-glow {
  animation: glow-fade 2.8s ease-in-out infinite;
}

.burst-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 16px;
  background: hsl(calc(var(--i) * 15), 90%, 60%);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  opacity: 0;
  animation: burst-explode 1.8s ease-out forwards;
  animation-delay: calc(var(--i) * 0.015s);
}

@keyframes burst-explode {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(
        calc(200px * cos(var(--i) * 0.5rad)),
        calc(200px * sin(var(--i) * 0.5rad))
      )
      scale(0.8)
      rotate(720deg);
  }
}


@keyframes wash-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.8);
  }
  100% {
    visibility: visible; 
    top: 50%;
    left: 0%;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.8);
  }
}


@keyframes prize-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
  }
  100% {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotate));
  }
}
@keyframes  camera-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
  }
  100% {
    visibility: visible;
    top: 18%;
    left: 85%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotate));
  }
}
@keyframes  ns-move {
  0% {
    visibility: visible;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
  }
  100% {
    visibility: visible;
    top: 50%;
    left: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotate));
  }
}
@keyframes prize-breath {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotate));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12) rotate(var(--rotate));
  }
}

@keyframes prize-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--rotate)) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--rotate)) translateY(-6px);
  }
}
@keyframes wash-float {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--rotate)) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--rotate)) translateY(-6px);
  }
}

.wash-final {
  position: absolute;
  top:50%;
  left: 0%;
  --rotate: -5deg;、
  width: 48px;
  width: clamp(120px, 22vmin, 75px);
  animation:
    wash-move 0.4s ease-out 0s forwards,
    wash-float 2s ease-in-out 1s infinite;
  z-index: 3;
}
.hongbao-final {
  position: absolute;
  visibility: hidden;
  top: 18%;
  left: 12%;
  width: 48px;
  --rotate: -5deg;
  width: clamp(120px, 22vmin, 75px);
  animation:
    prize-move 0.8s ease-out 0.4s forwards,
    prize-breath 2s ease-in-out 1.2s infinite;
  z-index: 3;
}

.iphone-final {
  position: absolute;
  visibility: hidden;
  top: 18%;
  right: 2%;
  width: 64px;
  --rotate: 4deg;
  width: clamp(120px, 20vmin, 120px);
  animation:
    camera-move 0.8s ease-out 0.8s forwards,
    prize-breath 2.4s ease-in-out 1.2s infinite;
  z-index: 3;
}

.ns-final {
  position: absolute;
  visibility: hidden;
  top: 50%;
  right: 2%;
  width: 64px;
  --rotate: 4deg;
  width: clamp(120px, 20vmin, 120px);
  animation:
    ns-move 0.8s ease-out 1.2s forwards,
    prize-breath 2.4s ease-in-out 1.2s infinite;
  z-index: 3;
}
.moto-final {
  position: absolute;
  visibility: hidden;
  width: clamp(180px, 22vmin, 240px);
  --rotate: 6deg;
  animation:
    moto-move 1.2s ease-out 1.6s forwards,
    moto-float 2.6s ease-in-out 2s infinite;
  z-index: 4;
}

.car-final {
  position: absolute;
  visibility: hidden;
  width: clamp(180px, 22vmin, 240px);
  transform: translate(-50%, -50%) rotate(-12deg);
  animation:
    car-move 1.5s ease-out 2s forwards,
    car-float 2.4s ease-in-out 2.7s infinite;
  z-index: 5;
}

/* LUCK 图片 */
@keyframes intro-zoom-3d {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateX(40deg) scale(0.1);
  }
  60% {
    opacity: 1;
    transform: perspective(800px) rotateX(-10deg) scale(1.1);
  }
  100% {
    transform: perspective(800px) rotateX(0deg) scale(.82);
  }
}

.lucky-intro {
  display: block;
  margin: -10px auto;
  animation: intro-zoom-3d 1s ease-out forwards;
  transform-origin: center;
}
body.mobile .lucky-intro  {
  margin-top: -60px !important;
}
@keyframes mega-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-10%) scale(1.05);
  }
  80% {
    transform: translateY(5%) scale(0.98);
  }
  100% {
    transform: translateY(0%) scale(1);
  }
}

.mega-img {
  display: block;
  margin: 0 auto;
  animation: mega-bounce-in 1.2s ease-out forwards;
  transform-origin: center;
}



@keyframes fire-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.lottery-container::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  background: url(./image/fire.png) no-repeat center center;
  background-size: contain;
  animation: fire-rotate 6s linear infinite;
  transform: translate(-50%, -50%) rotate(0deg); /* 修正中心点 + 初始角度 */
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
  opacity: 0.8;
}

@keyframes glow-breath {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 2px rgba(255,255,255,0.3));
  }
  50% {
    filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,255,255,0.6));
  }
}

@keyframes flash-highlight {
  0%, 100% {
    filter: brightness(1.2) drop-shadow(0 0 4px #fff);
  }
  50% {
    filter: brightness(2) drop-shadow(0 0 16px yellow);
  }
}


text {
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  /* font-style: italic; */
  font-style: normal; 
  font-weight: 900;
  fill: white;
  font-size: 14px;
  letter-spacing: .5px;
  //filter: drop-shadow(0 0 2px black); /*  增强对比度 */
}