/* 首页：会动的魔法报纸（js/paper.js） */
:root {
  --bg: #EAE5D9;
  --ink: #1C1915;
  --red: #B8432A;
  --paperc: #F3EEE3;
  --song: "Gazette Song", "Songti SC", "STSong", "SimSun", serif;
  --serif: "Gazette Serif", "Gazette Song", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  color: var(--ink); font-family: var(--song); -webkit-font-smoothing: antialiased; user-select: none;
  background: radial-gradient(120% 110% at 28% 32%, #F1ECE2 0%, #E9E4D8 52%, #DCD5C6 100%) var(--bg);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#paper { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
body.dragging #paper { cursor: grabbing; }
body.pointing #paper { cursor: pointer; }

/* 纸纹颗粒（整屏，很淡） */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .33  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 顶栏 */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 34px 4.6vw; transition: opacity .6s; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 400; font-size: 14px; letter-spacing: .26em; }
.brand i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.brand em { font: normal 500 11px var(--serif); letter-spacing: .3em; }
.top-r { display: flex; align-items: center; gap: 30px; }
.about-btn { font-size: 13px !important; letter-spacing: .24em !important; opacity: 1 !important; }
.about-btn::before { display: none !important; }
.about-btn em { font: normal 500 11px var(--serif) !important; letter-spacing: .26em !important; opacity: 1 !important; }

/* 左侧版面文字（按 Codex 概念稿：高反差衬线大标题 + 一行副题 + 斜体英文 + 署名） */
.lead { position: fixed; left: 4.7vw; top: 50%; transform: translateY(-46%); width: min(40vw, 720px); z-index: 5; transition: opacity .6s; }
.lead h1 {
  font-family: "Gazette Didone", var(--serif); font-weight: 800; font-variation-settings: "opsz" 96;
  font-size: clamp(56px, 7.4vw, 150px); line-height: .9; letter-spacing: -.02em; margin: 0 0 1.3vw -.04em; white-space: nowrap;
}
.deck { font-weight: 400; font-size: clamp(17px, 1.75vw, 34px); line-height: 1.35; letter-spacing: .02em; white-space: nowrap; }
.deck-en { margin-top: 1.4vw; font: italic 400 clamp(15px, 1.5vw, 28px) var(--serif); letter-spacing: .005em; opacity: .85; }
.rule { width: 46px; height: 1px; background: var(--ink); margin: 2.4vw 0 1.6vw; opacity: .8; }
.byline { font-weight: 400; font-size: clamp(11px, .95vw, 17px); letter-spacing: .3em; opacity: .85; }
.byline i { font-style: normal; color: var(--red); margin: 0 .5em; }

/* 开始阅读：左下角，红点 + 粗体 + 箭头（手机上是实心按钮） */
.cta {
  position: fixed; left: 4.7vw; bottom: 9.2vh; z-index: 6; display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 0; font-weight: 900; font-size: clamp(15px, 1.15vw, 20px); letter-spacing: .3em;
  transition: opacity .6s;
}
.cta em { font: normal 500 clamp(11px, .85vw, 15px) var(--serif); letter-spacing: .28em; }
.cta b { position: relative; display: inline-block; width: 38px; height: 1px; background: currentColor; margin-left: 6px; transition: width .7s var(--ease); }
.cta b::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.cta .dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.cta .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--red); animation: ping 2.4s 2.5s infinite ease-out; opacity: 0; }
.cta::after { content: ""; position: absolute; left: 28px; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.cta:hover b { width: 74px; }
.cta:hover::after { transform: scaleX(1); }

.hint { position: fixed; left: 4.7vw; bottom: 4.6vh; z-index: 5; display: flex; gap: 12px; align-items: baseline; font-size: 11px; letter-spacing: .3em; opacity: .5; transition: opacity .6s; }
.hint em { font: normal 600 9px var(--serif); letter-spacing: .3em; }

/* 悬停标签 */
#tag {
  position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; background: var(--ink); color: var(--paperc); font-weight: 900; font-size: 12px; letter-spacing: .22em; white-space: nowrap;
  opacity: 0; transition: opacity .25s;
}
#tag.on { opacity: 1; }
#tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
#tag em { font: normal 600 9px var(--serif); letter-spacing: .25em; opacity: .65; }

/* 进场 */
.r { opacity: 0; transform: translateY(14px); }
body.ready .r { opacity: 1; transform: none; transition: opacity 1.2s calc(var(--d) * 1ms + 500ms), transform 1.6s var(--ease) calc(var(--d) * 1ms + 500ms); }
body:not(.ready) .r { opacity: 0 !important; }
body:not(.ready) .top { opacity: 0; }
.lead .rule.r { transform: scaleX(0); transform-origin: left; }
body.ready .lead .rule.r { transform: scaleX(1); }
body.flying .lead, body.flying .cta, body.flying .hint, body.flying .top { opacity: 0 !important; transition: opacity .6s !important; pointer-events: none; }

/* 作品目录 */
#menu {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; padding: 0 8vw;
  background: rgba(234,229,217,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s;
}
body.menu-open #menu { opacity: 1; visibility: visible; }
.menu-in { display: flex; flex-direction: column; gap: 2.2vh; }
.menu-in button {
  text-align: left; font-weight: 900; font-size: clamp(28px, 3.6vw, 58px); letter-spacing: .16em; line-height: 1.15;
  opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .8s var(--ease), color .3s;
}
body.menu-open .menu-in button { opacity: .85; transform: none; }
body.menu-open .menu-in button:hover { opacity: 1; color: var(--red); }
.menu-in em { font: normal 700 14px var(--serif); color: var(--red); letter-spacing: .1em; vertical-align: top; margin-right: 18px; }
.menu-in small { font: italic 400 15px var(--serif); letter-spacing: .06em; margin-left: 20px; opacity: .6; vertical-align: middle; }

/* 第一次打开：印刷中 · 好事正在发生 */
#boot { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; opacity: 0; transition: opacity .7s; }
#boot.on { opacity: 1; }
#boot .press { font: 400 46px "Gazette Black", var(--serif); margin-bottom: 8px; }
#boot .hp { display: flex; align-items: baseline; gap: 6px; font-weight: 900; font-size: 16px; letter-spacing: .55em; padding-left: .55em; }
#boot .hp i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: dot 1.4s infinite ease-in-out; }
#boot .hp i:nth-of-type(2) { animation-delay: .2s; }
#boot .hp i:nth-of-type(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }
#boot .bar { width: 280px; height: 1px; background: rgba(28,25,21,.15); overflow: hidden; }
#boot .bar b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
#boot .row { width: 280px; display: flex; justify-content: space-between; font: 600 10px var(--serif); letter-spacing: .4em; opacity: .55; }
#boot .row em { font-style: normal; }

#fade { position: fixed; inset: 0; z-index: 20; background: var(--bg); pointer-events: none; opacity: 0; }

/* ---------- 竖屏手机：文字在上，报纸斜在下面，按钮贴底 ---------- */
@media (max-aspect-ratio: 4/5) {
  .top { padding: calc(16px + env(safe-area-inset-top)) 20px 16px; }
  .hint { display: none; }
  .brand em, .about-btn em { display: none !important; }
  .cta { white-space: nowrap; letter-spacing: .24em; gap: 12px; }
  .cta em { font-size: 10px; letter-spacing: .18em; }
  .lead { left: 22px; right: 22px; top: calc(70px + env(safe-area-inset-top)); transform: none; width: auto; }
  .lead::before { content: ""; position: absolute; left: -22px; right: -22px; top: -90px; bottom: -40px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(236,231,221,.96) 0%, rgba(236,231,221,.86) 70%, rgba(236,231,221,0) 100%); }
  .lead h1 { font-size: 19vw; margin: 6px 0 12px -.04em; }
  .deck { font-size: 5.4vw; white-space: normal; }
  .deck-en { font-size: 3.9vw; margin-top: 8px; }
  .rule { margin: 16px 0 10px; }
  .byline { font-size: 9px; letter-spacing: .24em; }
  .cta { left: 20px; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); justify-content: flex-start; padding: 18px 22px; font-size: 15px;
    background: var(--ink); color: var(--paperc); box-shadow: 0 16px 36px rgba(40,30,20,.2); }
  .cta b { margin-left: auto; }
  .cta::after { display: none; }
  .menu-in button { font-size: 28px; }
  .menu-in small { display: block; margin: 6px 0 0; font-size: 13px; }
}

/* ---------- 深色版（?theme=dark）：炭灰背景，纸被一束柔光照亮 ---------- */
body.dark { --bg: #171512; --ink: #EFE8DC; color: var(--ink);
  background: radial-gradient(110% 100% at 62% 46%, #2A2621 0%, #1B1916 46%, #100F0D 100%) var(--bg); }
body.dark .grain { mix-blend-mode: overlay; opacity: .22; }
body.dark #menu { background: rgba(20,18,15,.9); }
body.dark #tag { background: #EFE8DC; color: #1C1915; }
body.dark #boot .bar { background: rgba(239,232,220,.15); }
body.dark .cta { color: var(--ink); }
@media (max-aspect-ratio: 4/5) {
  body.dark .cta { background: #EFE8DC; color: #1C1915; }
  body.dark .lead::before { background: linear-gradient(to bottom, rgba(23,21,18,.96) 0%, rgba(23,21,18,.86) 70%, rgba(23,21,18,0) 100%); }
}