/* 待机显示 · 涅槃屏保 b2（对齐参考：Google 新标签页风格）——
   明亮浅蓝渐变底 + 斜向柔光带流动 + 中央磨砂玻璃卡四色星 + 极简时钟。
   纯 CSS（三层大渐变缓动，GPU 合成、零 WebGL），颜色锚 Google 四色系。 */

.saver-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* 明亮浅蓝基底（参考图主调）：上浅白 → 下饱和蓝 */
  background: linear-gradient(180deg, #eaf3fc 0%, #cfe6fb 38%, #9fcbf5 78%, #7fb5ee 100%);
  cursor: none;
}

/* ── 三层柔光带：斜向大渐变，缓慢漂移（生命力的来源）──────────── */
.saver-glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

/* 光带 A：左上斜白光（参考图里的斜向光束） */
.saver-glow-a {
  background: linear-gradient(
    118deg,
    transparent 12%,
    rgba(255, 255, 255, 0.75) 26%,
    rgba(255, 255, 255, 0.15) 34%,
    transparent 46%
  );
  animation: saver-drift-a 26s ease-in-out infinite alternate;
}

/* 光带 B：右侧青蓝柔光团 */
.saver-glow-b {
  background: radial-gradient(
    55% 70% at 78% 30%,
    rgba(120, 200, 255, 0.55),
    transparent 70%
  );
  animation: saver-drift-b 34s ease-in-out infinite alternate;
}

/* 光带 C：底部深蓝晕（压出层次与纵深） */
.saver-glow-c {
  background: radial-gradient(
    80% 60% at 30% 110%,
    rgba(35, 90, 200, 0.4),
    transparent 65%
  );
  animation: saver-drift-c 42s ease-in-out infinite alternate;
}

@keyframes saver-drift-a {
  from { transform: translateX(-8%) rotate(-2deg); }
  to   { transform: translateX(10%) rotate(3deg); }
}
@keyframes saver-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 8%) scale(1.15); }
}
@keyframes saver-drift-c {
  from { transform: translate(0, 0); }
  to   { transform: translate(8%, -4%) scale(1.1); }
}

/* ── 中央磨砂玻璃卡 + 四色星（参考图主体）──────────────────────── */
.saver-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(34vmin, 300px);
  aspect-ratio: 1;
  border-radius: 15%; /* 参考图的大圆角方卡 */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.78));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 24px 70px rgba(30, 80, 160, 0.28),
    0 4px 18px rgba(30, 80, 160, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 卡整体极缓呼吸（5% 缩放，22 秒一拍——「活着」但不抢戏） */
  animation: saver-card-breathe 22s ease-in-out infinite;
}

@keyframes saver-card-breathe {
  0%, 100% { transform: translate(-50%, -52%) scale(1); }
  50%      { transform: translate(-50%, -52%) scale(1.045); }
}

/* 四色四角星：conic 渐变 + clip-path（与品牌标同形状语言），
   极慢自转（60 秒一圈——看得见在转，不引人焦躁） */
.saver-star {
  width: 52%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 200deg,
    #4285f4,
    #9b72cb,
    #ea4335,
    #fbbc04,
    #34a853,
    #4285f4
  );
  clip-path: polygon(
    50% 0%, 61% 39%, 100% 50%, 61% 61%,
    50% 100%, 39% 61%, 0% 50%, 39% 39%
  );
  filter: blur(0.3px) saturate(1.08);
  animation: saver-star-spin 60s linear infinite;
}

@keyframes saver-star-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 时钟：卡下极简一行，浅色系深灰细字 ────────────────────────── */
.saver-clock {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(20, 50, 95, 0.72);
  font-family: "Source Serif 4", "Songti SC", Georgia, serif;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
  user-select: none;
  pointer-events: none;
}

.saver-time {
  font-size: clamp(34px, 5.6vw, 64px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.saver-date {
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 400;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

/* ── 形态一：苹果航拍视频层（全屏 object-fit cover）────────────── */
.saver-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 航拍态时钟：浅白字（视频上） */
.saver-clock.on-video {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* ── 回来提示（首次进入 5 秒淡出）──────────────────────────────── */
.saver-hint {
  position: absolute;
  bottom: 34px;
  right: 40px;
  margin: 0;
  color: rgba(20, 50, 95, 0.45);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  pointer-events: none;
  user-select: none;
  animation: saver-hint-fade 5s ease forwards;
}

@keyframes saver-hint-fade {
  0%, 60% { opacity: 1; }
  100%    { opacity: 0; }
}

/* 减弱动效：全部光层静止（星也停转），只留静帧构图 */
@media (prefers-reduced-motion: reduce) {
  .saver-glow-a,
  .saver-glow-b,
  .saver-glow-c,
  .saver-star,
  .saver-card {
    animation: none;
  }
}