/* ───── 故障解构 Glitch ───── */
.glitch {
  position: relative;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glitch::before {
  color: var(--accent-cyan);
  z-index: -1;
  animation: glitch-top 3s infinite linear;
}
.glitch::after {
  color: var(--accent-magenta);
  z-index: -2;
  animation: glitch-bottom 2.5s infinite linear;
}
.glitch-active::before {
  animation: glitch-top 0.3s ease-out 3;
}
.glitch-active::after {
  animation: glitch-bottom 0.3s ease-out 3;
}
@keyframes glitch-top {
  0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  92% { clip-path: inset(15% 0 70% 0); transform: translate(-2px, 2px); }
  94% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -1px); }
  96% { clip-path: inset(70% 0 10% 0); transform: translate(-1px, 3px); }
  98% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); }
}
@keyframes glitch-bottom {
  0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  92% { clip-path: inset(60% 0 20% 0); transform: translate(3px, -1px); }
  94% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 2px); }
  96% { clip-path: inset(40% 0 40% 0); transform: translate(1px, -3px); }
  98% { clip-path: inset(80% 0 5% 0); transform: translate(-3px, 1px); }
}

/* ───── 声波涟漪 Wave ───── */
.wave-title { display: inline-block; }
.wave-char {
  display: inline-block;
  animation: wave-move 2s ease-in-out infinite;
}
@keyframes wave-move {
  0%, 100% { transform: translateY(0); color: var(--gold); }
  25% { color: var(--gold-light); }
  50% { transform: translateY(-10px); color: #fff; }
  75% { color: var(--accent-cyan); }
}

/* ───── 时序余烬 Ember ───── */
.ember-text { display: inline-block; }
.ember-char { display: inline-block; }

/* ───── 全页崩坏 Crash ───── */
#crash-noise {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  transition: opacity 0.3s;
}
body.crash-screen #crash-noise {
  opacity: 0.15;
  animation: crash-noise 0.05s infinite steps(2);
}
body.crash-screen {
  animation: crash-shake 0.8s ease-out;
}
body.crash-screen #content {
  animation: crash-tear 0.25s infinite alternate;
}
body.crash-screen .navbar,
body.crash-screen #player,
body.crash-screen .cursor-egg,
body.crash-screen .footer {
  animation: crash-shake 0.8s ease-out;
}
@keyframes crash-noise {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}
@keyframes crash-shake {
  0%, 50%, 100% { transform: translate(0); }
  5% { transform: translate(-3px, 2px) skew(0.5deg); }
  10% { transform: translate(5px, -1px) skew(-0.3deg); }
  15% { transform: translate(-2px, 3px) skew(0.8deg); }
  20% { transform: translate(4px, -2px) skew(-0.5deg); }
  25% { transform: translate(-5px, 1px); }
  30% { transform: translate(3px, -3px); }
  35% { transform: translate(-4px, 2px); }
  40% { transform: translate(2px, -1px); }
  45% { transform: translate(-1px, 3px); }
}
@keyframes crash-tear {
  0% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(5% 0 85% 0); }
  40% { clip-path: inset(60% 0 25% 0); }
  60% { clip-path: inset(30% 0 55% 0); }
  80% { clip-path: inset(75% 0 10% 0); }
  100% { clip-path: inset(15% 0 70% 0); }
}

/* ───── 彩蛋视频弹窗 ───── */
.easter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.easter-overlay.active {
  opacity: 1;
  visibility: visible;
}
.easter-video-wrap {
  position: relative;
  width: min(90vw, 960px);
  background: #000;
  border: 2px solid var(--gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 30px rgba(212, 168, 67, 0.3),
    0 0 60px rgba(0, 212, 255, 0.15),
    inset 0 0 30px rgba(212, 168, 67, 0.05);
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.active .easter-video-wrap {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.easter-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.easter-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 48px 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 60%, transparent);
  color: var(--gold-light);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.easter-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.25s;
  line-height: 1;
}
.easter-close:hover {
  background: var(--gold);
  color: #0a1628;
  transform: scale(1.15) rotate(90deg);
}
.easter-scanline {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 212, 255, 0.03) 2px,
    rgba(0, 212, 255, 0.03) 4px
  );
}