/* ============================================
   effects.css — GeoCities 怀旧动效
   ============================================ */

/* ---------- 闪烁文字（经典 <blink> 精神复刻） ---------- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 彩虹渐变滑动 ---------- */
@keyframes rainbow-slide {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 跑马灯 ---------- */
.marquee {
  overflow: hidden;
  border: 2px solid var(--blue);
  background: var(--bg);
  padding: 3px 0;
}
.marquee__inner {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: var(--pink-text);
  animation: marquee 14s linear infinite;
}
.marquee__inner:hover { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 顶栏文案段：padding 兼作两份滚动文本的间隔 */
.topbar__marquee .marquee__seg { display: inline-block; padding-right: 2em; }
/* 短句：静止居中，只显示一份 */
.topbar__marquee.is-static .marquee__inner { animation: none; display: block; text-align: center; }
.topbar__marquee.is-static .marquee__seg { padding-right: 0; }

/* ---------- 星星闪烁 ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 播放器碟片粒子：从边缘冒出向上飘散 ---------- */
@keyframes p-fx-rise {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(.8); }
}

/* ---------- 音符跳动 ---------- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---------- 光标星尘（由 effects.js 生成） ---------- */
.trail {
  position: fixed;
  z-index: 999;
  width: 10px; height: 10px;
  pointer-events: none;
  background: url('../img/sparkle.png') no-repeat center / contain;
  filter: drop-shadow(0 0 3px var(--pink));
  animation: trail-fall .6s ease-out forwards;
}
@keyframes trail-fall {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.2) rotate(90deg) translateY(14px); }
}

/* ---------- "NEW!" 徽标 ---------- */
.badge-new {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 8px;
  padding: 2px 5px;
  background: var(--pink);
  color: var(--white);
  vertical-align: middle;
  margin-left: 6px;
}

/* ---------- 施工中提示条 ---------- */
.under-construction {
  border: 2px dashed var(--pink);
  background: rgba(255, 110, 199, .08);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--pink-text);
  text-align: center;
}

/* ---------- 底部城市剪影（结构由 effects.js 生成） ---------- */
.city-skyline {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: -1; /* 沉到内容之下、页面网格背景之上 */
  height: 160px;
  pointer-events: none;
  user-select: none;
}
.city-skyline svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 窗户 / 天线灯闪烁：steps(1) 硬切，无渐变发光 */
@keyframes cty-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .1; }
}

/* ---------- 背景像素星星（位置由 effects.js 生成） ---------- */
.bg-star {
  position: fixed;
  z-index: -1;
  pointer-events: none;
}