/* ========================================================================
   base.css — 午夜场 · reset / 排版基调 / a11y / reduced-motion
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--night-deep);
  color: var(--ivory);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.9;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  /* 夜空基调:比纯色深一点的顶部,呼吸感 */
  background-image: linear-gradient(180deg,
    oklch(0.13 0.03 270) 0%,
    var(--night-deep) 26%,
    var(--night) 100%);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3, p { margin: 0; }
/* 汇文明朝体仅 Regular:标题层次靠尺寸与字距,禁伪加粗 */
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--gold-faint); color: var(--ivory); }

/* ---- 焦点可见 ---- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 骨架容器 ---- */
main { position: relative; z-index: var(--z-film); }

.measure { max-width: 34em; } /* 中文正文行长约 30~34 字 */

/* ---- 通用 meta 行(Italiana 日期/编号) ---- */
.meta {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

/* ---- 金色发丝线 ---- */
.hairline {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-faint) 30%, var(--gold-faint) 70%, transparent);
  border: 0;
}

/* ---- 滚动条(桌面,低调夜色) ---- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--night-deep); }
  ::-webkit-scrollbar-thumb {
    background: var(--night-soft);
    border-radius: 5px;
    border: 2px solid var(--night-deep);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--night-line); }
}

/* ---- 顶部 UI:进度 + 音乐 ---- */
.ui {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-ui);
  pointer-events: none;
}
.progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: oklch(1 0 0 / 0.05);
}
.progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  box-shadow: 0 0 8px oklch(0.82 0.12 85 / 0.55);
}
.music-toggle {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: max(0.9rem, env(safe-area-inset-right));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  pointer-events: auto;
  color: var(--ivory-dim);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: 50%;
  background: oklch(0.20 0.04 285 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.4s var(--e-out), border-color 0.4s var(--e-out), transform 0.4s var(--e-out);
}
.music-toggle:hover { color: var(--gold); border-color: var(--gold-faint); transform: scale(1.06); }
.music-toggle .m-slash { opacity: 1; transition: opacity 0.3s; }
.music-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-faint); }
.music-toggle[aria-pressed="true"] .m-slash { opacity: 0; }
/* 播放中:音符轻微摇摆 */
.music-toggle[aria-pressed="true"] .music-icon {
  animation: musicSway 2.4s ease-in-out infinite;
}
@keyframes musicSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.music-toggle .music-icon { display: grid; place-items: center; }

/* ---- 无 JS:一切可见,无依赖 ---- */
/* JS 可用时才隐藏待入场元素(.js 由 <script> 第一时间加上) */

/* ---- reduced-motion 全局底线 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- 特效画布与光标层 ---- */
#fx-canvas, #particle-canvas, #trail-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#fx-canvas { z-index: var(--z-fx); }
#particle-canvas { z-index: var(--z-fx); }
#trail-canvas { z-index: var(--z-trail); }

.heart-cursor {
  position: fixed;
  top: -13px; left: -12px;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--e-out);
  will-change: transform;
}
.heart-cursor svg path {
  fill: oklch(0.72 0.14 20);
  stroke: oklch(0.9 0.05 30 / 0.6);
  stroke-width: 1;
  filter: drop-shadow(0 0 8px oklch(0.72 0.14 20 / 0.55));
}
.heart-cursor.is-on { opacity: 1; }
.heart-cursor.is-link svg { transform: scale(1.28); transition: transform 0.3s var(--e-back); }
.heart-cursor svg { transition: transform 0.3s var(--e-back); display: block; }
html.has-heart-cursor,
html.has-heart-cursor body,
html.has-heart-cursor a,
html.has-heart-cursor button {
  cursor: none;
}

/* ---- 票根大门:滚动锁 & 无 JS 直接隐藏 ---- */
body.is-gated { overflow: hidden; height: 100svh; }
html:not(.js) .gate,
html:not(.js) .countdown { display: none; }
.countdown { z-index: var(--z-gate); }
.music-toggle.is-unavailable { opacity: 0.35; pointer-events: none; }

/* ---- 无 GSAP 降级:纯 CSS 渐显 ---- */
.no-gsap [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--e-soft), transform 1s var(--e-out);
}
.no-gsap [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- 屏幕阅读器专用 ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}