/* ============================================================
   GLITCH & TONIC — 项目特定样式
   Hero 场景 / 城市剪影背景 / 响应式微调
   ============================================================ */

/* ---------- Hero 城市夜景背景 ---------- */
.hero {
  background:
    /* 远处霓虹光晕 */
    radial-gradient(ellipse 60% 40% at 20% 30%, color-mix(in srgb, var(--neon-violet) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 20%, color-mix(in srgb, var(--neon-pink) 10%, transparent), transparent 70%),
    /* 天际线剪影：两层楼块 */
    linear-gradient(to top, var(--bg-inset) 0 8%, transparent 8%),
    var(--bg-primary);
}

/* 像素城市剪影（repeating gradient 画楼块） */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 28%;
  z-index: -1;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      90deg,
      var(--bg-inset) 0 40px,
      transparent 40px 52px,
      var(--bg-inset) 52px 110px,
      transparent 110px 130px
    );
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 60%, transparent 100%);
}

/* 楼窗灯光（闪烁的小像素点） */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  height: 22%;
  z-index: -1;
  background-image:
    radial-gradient(2px 2px at 12% 40%, var(--neon-amber) 50%, transparent 51%),
    radial-gradient(2px 2px at 32% 70%, var(--neon-cyan) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 30%, var(--neon-amber) 50%, transparent 51%),
    radial-gradient(2px 2px at 71% 60%, var(--neon-pink) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 35%, var(--neon-cyan) 50%, transparent 51%);
  animation: windows-twinkle 4s steps(2) infinite;
  opacity: 0.8;
}
@keyframes windows-twinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.35; }
}

.hero__badge {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-6);
  background: color-mix(in srgb, var(--bg-inset) 80%, transparent);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.2em;
  animation: hint-bob 1.6s steps(2) infinite;
}

/* ---------- 营业时间表格 ---------- */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.hours-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--border-color);
  color: var(--text-secondary);
}
.hours-table td:last-child {
  text-align: right;
  color: var(--neon-cyan);
}
.hours-table tr:last-child td { border-bottom: none; }

/* ---------- 关于：调酒师档案 ---------- */
.bartender-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.bartender-card__avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  background: var(--bg-inset);
  border: var(--pixel-border-w) solid var(--border-bright);
  display: grid;
  place-items: center;
  font-size: var(--text-3xl);
}
.bartender-card__info p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.bartender-card__name {
  color: var(--neon-amber);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

/* ---------- 页脚 ---------- */
.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.site-footer__links a:hover { color: var(--neon-pink); }

/* ---------- 响应式微调 ---------- */
@media (max-width: 480px) {
  .neon-title { font-size: var(--text-3xl); }
  .neon-subtitle { font-size: var(--text-sm); letter-spacing: 0.2em; }
  .dialog-box { padding: var(--space-3); }
}

@media (min-width: 1280px) {
  .hero { padding-inline: var(--space-16); }
}