/* ── 天空背景层（随时间段变化） ──────────────────────────────── */
#sky-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .75s ease;
}

.sky-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}

.sky-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes starTwinkle {
  0%, 100% { opacity: var(--lo, 0.15); transform: scale(1); }
  50%       { opacity: var(--hi, 0.85); transform: scale(1.4); }
}

/* ── 日记卡片内背景容器（覆盖全局 fixed 定位） ─────────────── */
#diary-bg {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#diary-bg #sky-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .75s ease;
}
#diary-bg .score-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── 日记本横线浮层（hover "开始今天的记录" 时显示） ────────── */
#notebook-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  background: repeating-linear-gradient(
    to bottom,
    transparent           0px,
    transparent           31px,
    rgba(130,85,35,0.32)  31px,
    rgba(130,85,35,0.32)  32px
  );
}
#notebook-overlay.nb-entering {
  animation: nb-in 0.75s cubic-bezier(0.4,0,0.2,1) forwards;
}
#notebook-overlay.nb-leaving {
  animation: nb-out 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes nb-in  {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}
@keyframes nb-out {
  from { clip-path: inset(0 0% 0 0%  ); }
  to   { clip-path: inset(0 0% 0 100%); }
}

/* ── 分数背景渐变层（两层交叉淡入淡出） ─────────────────────── */
.score-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity .75s ease;
}

.score-blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(52px);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

@keyframes blobFloat1 {
  0%   { transform: translate(-50%, -50%) translate(   0px,    0px); }
  30%  { transform: translate(-50%, -50%) translate( 100px,  -70px); }
  65%  { transform: translate(-50%, -50%) translate( -60px,   90px); }
  100% { transform: translate(-50%, -50%) translate(  80px,   50px); }
}
@keyframes blobFloat2 {
  0%   { transform: translate(-50%, -50%) translate(   0px,    0px); }
  35%  { transform: translate(-50%, -50%) translate( -90px,   65px); }
  70%  { transform: translate(-50%, -50%) translate(  75px,   95px); }
  100% { transform: translate(-50%, -50%) translate( -40px,  -80px); }
}
@keyframes blobFloat3 {
  0%   { transform: translate(-50%, -50%) translate(   0px,    0px); }
  25%  { transform: translate(-50%, -50%) translate(  85px,   80px); }
  55%  { transform: translate(-50%, -50%) translate( -75px,   50px); }
  80%  { transform: translate(-50%, -50%) translate(  60px,  -90px); }
  100% { transform: translate(-50%, -50%) translate( -95px,  -35px); }
}
@keyframes blobFloat4 {
  0%   { transform: translate(-50%, -50%) translate(   0px,    0px); }
  40%  { transform: translate(-50%, -50%) translate(-100px,  -55px); }
  72%  { transform: translate(-50%, -50%) translate(  65px,  -85px); }
  100% { transform: translate(-50%, -50%) translate(  90px,   70px); }
}