/* ── 主视觉一行：左边吊灯，中间标题，右边拉绳开关 ─────────── */

.hero-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) minmax(64px, 100px);
  align-items: center;
  gap: clamp(8px, 3vw, 32px);
  padding: clamp(56px, 10vw, 108px) clamp(16px, 5vw, 56px) 0;
}

.lamp-wrap,
.pull-cord-wrap {
  position: relative;
  width: 100%;
  height: clamp(130px, 18vw, 190px);
}

#lampCanvas,
#pullCordCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 灯光本体单独放大画布，居中在灯泡位置，不受灯图标那个小方框裁切，
   光晕才能真的呈放射状晕开，而不是被矩形边界切一刀 */
#lampGlowCanvas {
  position: absolute;
  left: 68%;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

#pullCordCanvas { cursor: pointer; border-radius: 4px; }

#pullCordCanvas:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--garnet);
}

.pull-cord-hint {
  position: absolute;
  top: 100%;
  right: 2px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 900px) {
  /* 手机上不再隐藏灯和拉绳——挪到标题上方并排放一个小一点的版本，
     而不是完全消失（拉灯是这版首页的核心互动，手机端应该也能玩到） */
  .hero-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "lamp cord" "title title";
    /* .pull-cord-hint（"点一下"那行小字）是绝对定位挂在 .pull-cord-wrap 下方的，
       不计入这一行的高度——row-gap 太小的话这行字会直接压到下面标题的第一行上。
       实测过 hint 底边比 wrap 底边多探出 18px，这里给够 clamp 下限，比实测值
       留一点余量，不能只按视觉直觉给个小数字 */
    row-gap: clamp(22px, 5vw, 32px);
    padding-top: clamp(40px, 8vw, 72px);
  }
  .lamp-wrap { grid-area: lamp; height: 120px; justify-self: start; }
  .pull-cord-wrap { grid-area: cord; height: 120px; justify-self: end; }
  .thesis-wrap { grid-area: title; }
}

body.lamp-flicker {
  transition: filter 110ms ease;
  filter: brightness(0.32) saturate(0.7);
}

/* ── 页眉右侧一组：EST. 年份 + 背景音乐开关 ───────────────── */

.mark-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mark-divider {
  width: 1px;
  height: 18px;
  background: var(--hairline);
  flex-shrink: 0;
}

.audio-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.4px solid var(--ink-faint);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 150ms ease;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
  border-color: var(--garnet);
  color: var(--ink);
  background: var(--surface-hover);
  transform: scale(1.06);
  outline: none;
}

.audio-toggle .eq {
  display: flex;
  align-items: flex-end;
  gap: 3.5px;
  height: 16px;
}

.audio-toggle .eq span {
  width: 3.5px;
  height: 60%;
  border-radius: 1px;
  background: currentColor;
  transition: height 150ms ease;
}

.audio-toggle .eq span:nth-child(2) { height: 90%; }

.audio-toggle.is-on {
  border-color: var(--garnet);
  color: var(--garnet);
}

.audio-toggle.is-on .eq span {
  animation: eq-bounce 900ms ease-in-out infinite;
}

.audio-toggle.is-on .eq span:nth-child(1) { animation-delay: 0ms; }
.audio-toggle.is-on .eq span:nth-child(2) { animation-delay: 180ms; }
.audio-toggle.is-on .eq span:nth-child(3) { animation-delay: 90ms; }

@keyframes eq-bounce {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-toggle.is-on .eq span { animation: none; height: 70%; }
}

/* ── 卡片点击时的形变过渡（View Transitions API） ────────── */

@view-transition {
  navigation: auto;
}

.doors.has-selection .door:not(.door--selected) {
  opacity: 0.3;
  filter: saturate(0.5);
  transition: opacity 260ms ease, filter 260ms ease;
}

.door--selected {
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}