/* splash.css — v3.0.0 开屏/欢迎/过渡页（高清满屏图 + 热区 + 漂浮装饰） */

/* ============ 开屏封面页（page-1） ============ */
#screen-splash-1 {
  background: url("../images/splash/splash-cover.webp") no-repeat center top / 100% 100%;
  background-color: #d1eaf8;
  padding: 0;
}

/* page-1 底部入口按钮热区（x25-77%, y87-93%） */
.splash-start {
  left: 23%;
  top: 86%;
  width: 54%;
  height: 9%;
}

/* ============ 欢迎入园页（page-2） ============ */
#screen-splash-2 {
  background: url("../images/splash/splash-welcome.webp") no-repeat center top / 100% 100%;
  background-color: #ffe06c;
  padding: 0;
}
/* page-2 "点击开始"按钮热区（x13-49%, y86-92%） */
.splash-begin {
  left: 11%;
  top: 85%;
  width: 40%;
  height: 9%;
}

/* 透明热区通用 */
.splash-hotzone {
  position: absolute;
  z-index: 4;
  cursor: pointer;
}

/* ============ 入园验证过渡页（page-13） ============ */
#screen-splash-loading {
  background: url("../images/splash/splash-loading.webp") no-repeat center top / 100% 100%;
  background-color: #f4ead3;
  padding: 0;
}

/* ============ 漂浮装饰（开屏） ============ */
.float-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.float-deco .ribbon {
  position: absolute;
  width: 12px;
  height: 22px;
  border-radius: 3px;
  opacity: 0;
  animation: ribbonFloat 4.5s ease-in-out infinite;
}
.float-deco .r1 { left: 10%; background: #e85513; animation-delay: 0s; --dx: 18px; }
.float-deco .r2 { left: 86%; background: #ffd48a; animation-delay: .6s; --dx: -20px; }
.float-deco .r3 { left: 22%; background: #7dafda; animation-delay: 1.2s; --dx: 14px; }
.float-deco .r4 { left: 76%; background: #e85513; animation-delay: 1.8s; --dx: -16px; }
.float-deco .r5 { left: 48%; background: #d96aa0; animation-delay: 2.4s; --dx: 22px; }
.float-deco .r6 { left: 64%; background: #ffd48a; animation-delay: 3.0s; --dx: -18px; }
@keyframes ribbonFloat {
  0% { bottom: -6%; transform: translateX(0) rotate(0); opacity: 0; }
  12% { opacity: 0.85; }
  70% { opacity: 0.85; }
  100% { bottom: 78%; transform: translateX(var(--dx)) rotate(220deg); opacity: 0; }
}
.float-deco .motif {
  position: absolute;
  font-size: 18px;
  opacity: 0.8;
  text-shadow: 0 0 8px rgba(255, 230, 170, 0.9);
  animation: motifBob 3s ease-in-out infinite;
}
.float-deco .m1 { left: 16%; top: 30%; color: #fff; }
.float-deco .m2 { left: 80%; top: 40%; color: #ffd48a; animation-delay: .5s; }
.float-deco .m3 { left: 30%; top: 68%; color: #fff; animation-delay: 1s; }
.float-deco .m4 { left: 70%; top: 72%; color: #ffd48a; animation-delay: 1.5s; }
@keyframes motifBob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}