/* easter-egg.css —— 彩蛋「观星台」：数据页关于卡片 ✦ 连点两下，唤出星象夜空 */
/* 入口微反馈：仅光标与微闪暗示，无任何文字提示 */
.about-logo{cursor:pointer;transition:transform .18s,filter .18s}
@media (hover:hover) and (pointer:fine){
  .about-logo:hover{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(240,189,95,.65))}
}
.about-logo.poke{transform:scale(1.18);filter:drop-shadow(0 0 16px rgba(240,189,95,.85))}

/* ---------- 夜空层 ---------- */
#easterRoot{
  position:fixed;inset:0;z-index:160;overflow:hidden;
  background:linear-gradient(128deg,#171238 0%,#241b5e 52%,#31216e 100%);
  animation:fadein .6s ease;
}
#easterRoot.closing{opacity:0;transition:opacity .25s}
.sky{position:relative;width:100%;height:100%}

/* 星点：由外向内逐颗点亮（延迟 --d 由 JS 内联），基础可见、动画负责淡入 */
.star{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0 0%,rgba(255,233,176,0) 72%);
  opacity:.95;transform:scale(1);
  animation:estarin .55s ease both;animation-delay:var(--d,0ms);
  transition:box-shadow .3s;
}
.star.blue{background:radial-gradient(circle,#dfe4ff 0%,rgba(223,228,255,0) 72%)}
@keyframes estarin{from{opacity:0;transform:scale(.2)}to{opacity:.95;transform:scale(1)}}
.star.spark{box-shadow:0 0 14px rgba(255,233,176,.95)}

/* 北极星：金色 ✦ 最后亮起，光晕呼吸 */
#easterPole{
  font-size:64px;line-height:1;color:var(--gold);
  opacity:0;transform:scale(.4);
  transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  filter:drop-shadow(0 0 16px rgba(240,189,95,.5));
}
#easterPole.lit{opacity:1;transform:scale(1);animation:epulse 3.4s ease-in-out infinite}
@keyframes epulse{
  0%,100%{filter:drop-shadow(0 0 14px rgba(240,189,95,.45))}
  50%{filter:drop-shadow(0 0 30px rgba(240,189,95,.9))}
}
#easterPole.spark{box-shadow:0 0 26px rgba(240,189,95,.85)}

/* 居中组合：北极星 + 文案 + 关闭 */
.east-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;text-align:center;
}
.east-line{
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease,transform .8s ease;margin-top:22px;
}
.east-line.lit{opacity:1;transform:none}
.east-line b{
  display:block;font-size:20px;font-weight:600;letter-spacing:7px;color:var(--gold);
  text-shadow:0 0 22px rgba(240,189,95,.4);
}
.east-line small{display:block;margin-top:10px;font-size:11.5px;letter-spacing:3.5px;color:rgba(224,228,255,.6)}
.east-close{
  margin-top:34px;padding:9px 30px;border-radius:999px;
  border:1px solid rgba(240,189,95,.45);color:var(--gold);
  background:rgba(240,189,95,.06);font-size:13px;letter-spacing:4px;
  cursor:pointer;transition:background .2s,box-shadow .2s;
}
.east-close:hover{background:rgba(240,189,95,.14);box-shadow:0 0 18px rgba(240,189,95,.25)}
.east-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  #easterPole{font-size:52px}
  .east-line b{font-size:17px;letter-spacing:4px}
  .east-close{padding:12px 34px}   /* 触屏目标尺寸 */
}

/* ---------- 动效降级：直接呈现终态 ---------- */
@media (prefers-reduced-motion:reduce){
  #easterRoot{animation:none}
  .star{animation:none}
  #easterPole{opacity:1;transform:none;animation:none}
  .east-line{opacity:1;transform:none}
}