/* ============================================================
   HarmonyOS 开机界面 —— 样式
   纯黑背景、居中、花瓣旋转绽放、进度条循环
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "HarmonyOS Sans", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: hidden;
  cursor: default;
}

.stage {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- 花瓣 logo：整体缓慢旋转 + 辉光 ---- */
.logo {
  width: 176px;
  height: 176px;
  display: block;
  margin: 0 auto;
  animation: spin 26s linear infinite;
  filter: drop-shadow(0 0 26px rgba(255, 90, 95, .45));
}

/* ---- 花瓣：8 片围绕中心均布，旋转由 --r 控制，依次绽放（opacity 动画） ---- */
.petals .petal {
  transform-box: view-box;
  transform-origin: 100px 100px;
  transform: rotate(var(--r, 0deg));
  opacity: 0;
  animation: bloom 1.1s ease forwards;
}
.petals .petal:nth-child(1) { --r: 0deg;   animation-delay: .05s; }
.petals .petal:nth-child(2) { --r: 45deg;  animation-delay: .16s; }
.petals .petal:nth-child(3) { --r: 90deg;  animation-delay: .27s; }
.petals .petal:nth-child(4) { --r: 135deg; animation-delay: .38s; }
.petals .petal:nth-child(5) { --r: 180deg; animation-delay: .49s; }
.petals .petal:nth-child(6) { --r: 225deg; animation-delay: .60s; }
.petals .petal:nth-child(7) { --r: 270deg; animation-delay: .71s; }
.petals .petal:nth-child(8) { --r: 315deg; animation-delay: .82s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bloom { from { opacity: 0; } to { opacity: 1; } }

/* ---- 文字 ---- */
.word {
  margin-top: 28px;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 7px;
  opacity: 0;
  animation: fade 1.4s ease .7s forwards;
}

/* ---- 进度条 ---- */
.bar {
  width: 220px;
  height: 3px;
  background: rgba(255, 255, 255, .12);
  border-radius: 3px;
  margin: 22px auto 0;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #FF5A5F, #FFB03A);
  border-radius: 3px;
  animation: load 3.2s ease-in-out infinite;
}
@keyframes load {
  0%   { width: 0; }
  55%  { width: 100%; }
  100% { width: 100%; opacity: .35; }
}

.hint {
  margin-top: 16px;
  color: #8a8a8a;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0;
  animation: fade 1.4s ease 1.1s forwards;
}

@keyframes fade { to { opacity: 1; } }